/* =========================================================
   Couche immersive — intro sombre + lampe 3D + lumière
   Chargé APRÈS style.css. Réutilise les variables :root.
   ========================================================= */

/* ---------- Canvas 3D (lampe pendante) ---------- */
/* Canvas ancré au viewport : la lampe est positionnée par JS (suit sa zone réservée
   quand allumée → sort du cadre vers le haut au scroll ; revient au centre éteinte). */
#scene-canvas{
  position:fixed; top:0; left:0; width:100vw; height:100vh;
  z-index:40; pointer-events:none; opacity:0; transition:opacity .8s ease;
}
.webgl-ready #scene-canvas{opacity:1}

/* Fil de la lampe (ancré en haut, défile avec le hero) */
#cord{
  position:absolute; top:0; left:50%; width:2px; height:0;
  background:linear-gradient(#0000, rgba(20,14,9,.85)); z-index:39;
  pointer-events:none; transform:translateX(-50%); opacity:0; transition:opacity .8s ease;
}
.webgl-ready #cord{opacity:1}

/* Pool de lumière (suit la lampe, ancré au viewport comme le canvas) */
#lightpool{
  position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:38; pointer-events:none;
  mix-blend-mode:screen; opacity:0; transition:opacity 1.2s ease;
  background:radial-gradient(420px 420px at var(--lx,50%) var(--ly,40%),
            rgba(255,196,110,.30), rgba(255,170,70,.10) 45%, transparent 70%);
}
.lights-on #lightpool{opacity:1}

/* ---------- État ÉTEINT : la page est cachée ---------- */
.lights-off .site-header,
.lights-off main,
.lights-off .site-footer{ opacity:0; visibility:hidden; }
.site-header,main,.site-footer{ transition:opacity 1.1s ease .25s, visibility 1.1s ease .25s; }
.lights-off{ background:#0b0805; }

/* ---------- Écran d'intro (calques frères, pas de wrapper fixed) ---------- */
#intro-bg{
  position:fixed; inset:0; z-index:35;
  background:radial-gradient(80% 70% at 50% 42%, #1a1209 0%, #0b0805 70%);
  clip-path:circle(150% at 50% 42%);
  transition:clip-path 1.1s cubic-bezier(.7,0,.3,1), opacity .9s ease .5s;
}
.lights-on #intro-bg{ clip-path:circle(0% at var(--reveal-x,50%) var(--reveal-y,42%)); opacity:0; }
.intro-gone #intro-bg, .intro-gone #intro-ui{ display:none; }

/* UI de l'intro (au-dessus de la lampe 3D) */
#intro-ui{
  position:fixed; inset:0; z-index:60;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  padding-bottom:15vh; text-align:center; color:#f6ede0;
  transition:opacity .6s ease;
}
.lights-on #intro-ui{ opacity:0; pointer-events:none; }
#intro-ui .kicker{
  font-family:var(--sans); font-weight:800; letter-spacing:.28em; text-transform:uppercase;
  font-size:.7rem; color:rgba(246,237,224,.45); margin-bottom:.8rem;
}
#intro-ui .invite{
  font-family:var(--serif); font-size:clamp(1.6rem,4.4vw,2.8rem); color:#fff;
  margin:0 0 .3rem; text-shadow:0 0 30px rgba(232,162,60,.25);
}
#intro-ui .invite em{ font-style:italic; color:var(--amber-2); }
#intro-ui .sub{ color:rgba(246,237,224,.5); font-size:.95rem; margin-top:.4rem; }

/* Interrupteur : bouton-poussoir (lampe à poser, pas de fil) */
#cordswitch{
  position:relative; width:78px; height:78px; border-radius:50%; cursor:pointer;
  margin:.4rem 0 1.1rem; -webkit-tap-highlight-color:transparent;
  border:1.5px solid rgba(232,162,60,.5); color:var(--amber-2);
  background:radial-gradient(circle at 50% 36%, #2a1d12, #150d07);
  display:grid; place-items:center;
  box-shadow:0 0 0 6px rgba(232,162,60,.08), 0 12px 30px -8px rgba(0,0,0,.6);
  transition:transform .15s ease, box-shadow .25s ease, border-color .25s ease;
}
#cordswitch svg{ width:30px; height:30px; }
#cordswitch .ring{
  position:absolute; inset:-6px; border-radius:50%; border:1px solid rgba(232,162,60,.3);
  animation:pulsering 2.6s ease-out infinite; pointer-events:none;
}
#cordswitch:hover{ border-color:var(--amber); transform:translateY(-1px);
  box-shadow:0 0 0 9px rgba(232,162,60,.14), 0 0 34px rgba(232,162,60,.45); }
#cordswitch:active, #cordswitch.pulled{ transform:scale(.93); }
@keyframes pulsering{ 0%{transform:scale(.85);opacity:.7} 100%{transform:scale(1.45);opacity:0} }

/* Chargement */
#intro-load{
  position:absolute; left:50%; bottom:6vh; transform:translateX(-50%);
  color:rgba(246,237,224,.45); font-size:.82rem; font-weight:700; letter-spacing:.06em;
  display:flex; align-items:center; gap:.6rem;
}
#intro-load .dot{ width:7px; height:7px; border-radius:50%; background:var(--amber); animation:pulse 1s ease-in-out infinite; }
@keyframes pulse{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}
#intro-ui.ready #intro-load{ display:none; }
#intro-ui:not(.ready) #cordswitch{ opacity:.35; pointer-events:none; }

/* ---------- Bouton rallumer / éteindre (après intro) ---------- */
#relight{
  position:fixed; right:18px; bottom:18px; z-index:48;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
  background:var(--parchment-2); color:var(--ember); cursor:pointer;
  display:none; place-items:center; box-shadow:var(--shadow-sm);
}
.lights-on #relight{ display:grid; }
#relight svg{ width:22px; height:22px; }
#relight:hover{ transform:translateY(-2px); }

/* ---------- Révélation des sections par la lumière ---------- */
.lit-reveal{ opacity:0; transform:translateY(30px); transition:opacity .8s ease, transform .8s ease; }
.lit-reveal.in{ opacity:1; transform:none; }

/* ---------- Accessibilité / fallback ---------- */
.no-webgl #scene-canvas, .no-webgl #cord, .no-webgl #lightpool{ display:none; }
@media (prefers-reduced-motion:reduce){
  #cordswitch .ring{ animation:none; }
  #intro-bg{ transition:opacity .6s ease; }
  #scene-canvas{ transition:none; }
}