/* ============================================
   PHOCEA — INTRO / PRELOADER / CURSOR
   Animation d'entrée style Cuberto
   ============================================ */

/* ─── État de chargement ─── */
body.is-loading { overflow: hidden; }

/* Curseur natif masqué sur desktop — remplacé par le custom */
@media (pointer: fine) {
    html, a, button, [role="button"] { cursor: none !important; }
}

/* ─────────────────────────────────────────────
   CURSEUR CUSTOM
───────────────────────────────────────────── */
#cursor { pointer-events: none; }

.cursor-outer {
    position: fixed;
    top: 0; left: 0;
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1.5px solid rgba(201, 169, 110, 0.55);
    pointer-events: none;
    z-index: 10000;
    will-change: transform;
    transition:
        width  0.35s cubic-bezier(0.4,0,0.2,1),
        height 0.35s cubic-bezier(0.4,0,0.2,1),
        background 0.35s ease,
        border-color 0.35s ease,
        opacity 0.3s ease;
}

.cursor-dot {
    position: fixed;
    top: 0; left: 0;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #C9A96E;
    pointer-events: none;
    z-index: 10001;
    will-change: transform;
    transition:
        width  0.2s ease,
        height 0.2s ease,
        background 0.2s ease,
        opacity 0.3s ease;
}

.cursor-outer.is-hovering {
    width: 60px; height: 60px;
    background: rgba(201, 169, 110, 0.09);
    border-color: rgba(201, 169, 110, 0.85);
}

.cursor-dot.is-hovering {
    width: 7px; height: 7px;
    background: #D9BF8E;
}

.cursor-outer.is-hidden,
.cursor-dot.is-hidden { opacity: 0; }

/* ─────────────────────────────────────────────
   PRELOADER
───────────────────────────────────────────── */
#preloader {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: #0A0A0A;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    will-change: transform;
}

/* ── Bruit de texture premium ── */
#preloader::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    opacity: 0.35;
}

/* ── Contenu central ── */
.pre-brand {
    text-align: center;
    position: relative;
    z-index: 2;
    user-select: none;
}

/* ── Lettres ── */
.pre-letters {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    padding-bottom: 8px;
    line-height: 1;
}

.pre-letter {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(44px, 9vw, 108px);
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: 16px;
    transform: translateY(110%);
    display: inline-block;
    will-change: transform;
    line-height: 1;
}

/* Compenser le letter-spacing sur la dernière lettre */
.pre-letter:last-child { letter-spacing: 0; }

/* ── Ligne or ── */
.pre-gold-line {
    display: block;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #C9A96E 40%, #D9BF8E 60%, transparent 100%);
    margin: 20px auto;
    will-change: width;
}

/* ── Sous-titre ── */
.pre-tagline {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(8px, 1.2vw, 11px);
    font-weight: 600;
    letter-spacing: 7px;
    text-transform: uppercase;
    color: #C9A96E;
    opacity: 0;
    transform: translateY(12px);
    display: block;
    will-change: opacity, transform;
}

/* ── Compteur ── */
.pre-counter-wrap {
    position: absolute;
    bottom: 44px;
    right: 52px;
    display: flex;
    align-items: baseline;
    gap: 1px;
}

.pre-counter-num {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(28px, 4.5vw, 60px);
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    min-width: 2.2ch;
    text-align: right;
    display: inline-block;
}

.pre-counter-sym {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(12px, 1.4vw, 18px);
    color: #C9A96E;
    font-weight: 500;
    margin-left: 2px;
}

/* ── Barre de progression ── */
.pre-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: linear-gradient(90deg, #A8894E, #C9A96E, #D9BF8E);
    will-change: width;
}

/* Coin bas gauche — décoration */
.pre-corner {
    position: absolute;
    bottom: 44px;
    left: 52px;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.22);
    opacity: 0;
}

/* ─────────────────────────────────────────────
   HERO — RÉVÉLATION TEXTE
───────────────────────────────────────────── */

/* Wrapper pour clip-path reveal ligne par ligne */
.line-wrap {
    display: block;
    overflow: hidden;
    padding-bottom: 0.07em; /* évite le clip des descentes */
}

.line-inner {
    display: block;
    will-change: transform;
}

/* ─────────────────────────────────────────────
   MORPHING SHAPES — Fond hero
───────────────────────────────────────────── */
.hero-morph {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.hero-morph svg {
    position: absolute;
    width: 100%;
    height: 100%;
}

/* ─────────────────────────────────────────────
   SECTION REVEAL — Skew au scroll
───────────────────────────────────────────── */
.skew-reveal {
    will-change: transform, opacity;
}

/* ─────────────────────────────────────────────
   RESPONSIVE CURSOR
───────────────────────────────────────────── */
@media (pointer: coarse) {
    .cursor-outer,
    .cursor-dot { display: none !important; }
}

@media (max-width: 768px) {
    .pre-counter-wrap { bottom: 28px; right: 24px; }
    .pre-corner { display: none; }
    .pre-letter { letter-spacing: 8px; }
}