/* ==========================================================================
   Kamai Event — Intro "logo qui se décompose au scroll"
   Styles de la section d'intro épinglée. Dépend de css/tokens.css.
   Les classes correspondent aux sélecteurs utilisés par js/modules/intro.js.
   ========================================================================== */

/* Cadre décoratif fin sur tout l'écran */
.frame-outer{
  position:fixed; inset:18px;
  border:1px solid rgba(197,165,114,.4);
  pointer-events:none; z-index:90;
}
@media (max-width:600px){ .frame-outer{ inset:12px; } }

/* Scène épinglée plein écran */
.stage{ position:relative; height:100svh; overflow:hidden; }

/* ---- Contenu révélé derrière le logo (1re section du site) ---- */
.reveal{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:2rem 1.5rem;
  /* État initial — repris/piloté par GSAP (fromTo) */
  opacity:0; transform:scale(.9); filter:blur(8px);
  will-change:opacity,transform,filter;
}
.reveal .eyebrow{ font-size:.72rem; letter-spacing:.42em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:1.6rem; }
.reveal h1{ font-family:var(--serif); font-weight:400; line-height:1.04; font-size:clamp(2.6rem,8vw,5.6rem); letter-spacing:-.01em; max-width:14ch; }
.reveal h1 em{ font-style:italic; color:var(--taupe); }
.reveal .subline{ margin-top:1.8rem; max-width:480px; font-size:1.02rem; line-height:1.7; color:var(--ink-soft); }
.reveal .cta{
  margin-top:2.4rem; display:inline-flex; align-items:center; justify-content:center;
  font-size:.82rem; letter-spacing:.18em; text-transform:uppercase;
  padding:1.05rem 2.4rem; border:1px solid var(--gold); color:var(--ink);
  text-decoration:none; position:relative; overflow:hidden; will-change:transform;
}
.reveal .cta::before{ content:""; position:absolute; inset:0; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.6,0,.2,1); z-index:-1; }
.reveal .cta:hover::before{ transform:scaleX(1); }

/* ====== LOGO — composé en HTML/CSS, piloté par js/modules/intro.js ====== */
.logo{ position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.logo-inner{ position:relative; display:flex; align-items:baseline; will-change:transform,opacity; }

/* Ruban doré (vague du logo), derrière le mot */
.ribbon{ position:absolute; left:50%; top:46%; width:165%; height:120%;
         transform:translate(-50%,-50%); z-index:-2; will-change:transform,opacity; }
.ribbon svg{ width:100%; height:100%; display:block; overflow:visible; }

/* Cadres décalés derrière le K (à gauche). Les barres (.shard) sont
   injectées par le JS puis éclatées au scroll. */
.lg-frame{ position:absolute; z-index:-1; }
.lg-frame.f1{ width:150px; height:135px; left:-44px; top:-30px; transform:rotate(0deg); }
.lg-frame.f2{ width:150px; height:135px; left:-18px; top:-52px; }
@media (max-width:600px){
  .lg-frame.f1{ width:108px; height:98px; left:-30px; top:-22px; }
  .lg-frame.f2{ width:108px; height:98px; left:-12px; top:-38px; }
}
.shard{ position:absolute; background:var(--gold); will-change:transform,opacity; }

/* Mot "Kamai" en serif + suffixe ".event" */
.word{ font-family:var(--serif); font-weight:500; font-size:clamp(3.4rem,15vw,7rem); letter-spacing:.01em; color:var(--ink); }
.word .ltr{ display:inline-block; will-change:transform,opacity; }
.suffix{ font-family:var(--serif); font-weight:400; font-size:clamp(1.4rem,5.5vw,2.4rem);
         color:var(--ink); margin-left:.06em; will-change:transform,opacity; align-self:flex-end; padding-bottom:.25em; }

/* Étoiles (4 branches) + semis de points */
.burst{ position:absolute; will-change:transform,opacity; }
.burst path{ fill:currentColor; }
.dot{ position:absolute; background:var(--ink); border-radius:50%; will-change:transform,opacity; }

/* Indice de scroll */
.hint{ position:absolute; bottom:2.2rem; left:0; right:0; z-index:3; text-align:center;
       font-size:.6rem; letter-spacing:.34em; text-transform:uppercase; color:var(--ink-soft); will-change:opacity; }
.hint .bar{ display:block; width:1px; height:38px; margin:.7rem auto 0; background:linear-gradient(var(--gold),transparent); }

/* prefers-reduced-motion : pas de pin ni d'éclatement.
   On affiche directement le contenu et on masque le logo. */
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; filter:none !important; }
  .logo{ display:none; }
}

/* ---- Sections de démo (placeholder — à remplacer par le vrai contenu) ---- */
.section{ padding:9rem 1.5rem; text-align:center; border-top:1px solid rgba(197,165,114,.18); }
.section.alt{ background:#fff; }
.section .eyebrow{ font-size:.72rem; letter-spacing:.42em; text-transform:uppercase; color:var(--ink-soft); }
.section h2{ font-family:var(--serif); font-weight:400; font-size:clamp(2rem,5vw,3.2rem); margin-top:1rem; }
.section .lead{ max-width:520px; margin:1.4rem auto 0; line-height:1.7; color:var(--ink-soft); }