/* ===================================================================
   WILL I — immersive.css
   Phase 1 — « Threads of Destiny » : metier a tisser
   Intro tissee + revelation du hero par trame + sortie en rideau
   =================================================================== */

/* --- Tokens additionnels ------------------------------------------ */
:root{
  --champagne:#D9C7A3;
  --indigo:#26324D;
  --ti-line:rgba(200,169,110,.42);
  --ti-line-strong:rgba(200,169,110,.72);
}

/* ===================================================================
   NIVEAU 3 — ETAT PAR DEFAUT (sans JS / reduced-motion)
   Tout est visible. Aucune regle ne masque quoi que ce soit ici.
   Les animations ne s'activent que sous .ti-on, posee par le script
   inline avant le premier paint.
   =================================================================== */

.ti-intro{display:none}
.ti-trame,.ti-contour,.ti-curtain,.ti-decision{display:none}

/* ===================================================================
   NIVEAU 1 & 2 — ANIMATION ACTIVE
   =================================================================== */

/* --- Intro tissee -------------------------------------------------- */
.ti-on .ti-intro{
  display:flex;
  position:fixed;inset:0;z-index:2000;
  align-items:center;justify-content:center;flex-direction:column;
  background:var(--ivory);
  clip-path:inset(0 0 0 0);
  will-change:clip-path,transform;
}
.ti-on.ti-intro-out .ti-intro{
  animation:ti-veil-lift .5s cubic-bezier(.65,0,.35,1) forwards;
}
@keyframes ti-veil-lift{
  to{clip-path:inset(0 0 100% 0);transform:translateY(-2%)}
}
.ti-on.ti-intro-done .ti-intro{display:none}

.ti-loom{
  width:min(70vw,640px);height:auto;overflow:visible;
  transform-origin:50% 50%;
}
.ti-on.ti-tension .ti-loom{animation:ti-tension .18s ease-in-out}
@keyframes ti-tension{50%{transform:scaleY(1.015) scaleX(.997)}}

.ti-warp line,.ti-weft line{
  stroke:var(--ti-line);stroke-width:1;
  stroke-dasharray:240;stroke-dashoffset:240;
}
.ti-on .ti-warp line{animation:ti-draw .6s cubic-bezier(.4,0,.2,1) forwards}
.ti-on .ti-weft line{animation:ti-draw .6s cubic-bezier(.4,0,.2,1) forwards;animation-delay:.35s}
@keyframes ti-draw{to{stroke-dashoffset:0}}

.ti-letters{opacity:0}
.ti-on .ti-letters{animation:ti-fade .4s ease forwards;animation-delay:.75s}
@keyframes ti-fade{to{opacity:1}}

.ti-letters line{stroke:var(--black);stroke-width:1.1}

.ti-outline{
  fill:none;stroke:var(--black);stroke-width:.8;
  stroke-dasharray:900;stroke-dashoffset:900;
}
.ti-on .ti-outline{animation:ti-trace .5s ease forwards;animation-delay:.95s}
@keyframes ti-trace{to{stroke-dashoffset:0;fill:var(--black)}}

.ti-sub{
  margin-top:26px;font-family:var(--voice);font-style:italic;
  font-size:clamp(12px,1.5vw,15px);letter-spacing:.06em;
  color:var(--stone);opacity:0;text-align:center;padding:0 24px;
}
.ti-on .ti-sub{animation:ti-fade .5s ease forwards;animation-delay:1s}

.ti-skip{
  position:absolute;bottom:32px;right:36px;
  background:none;border:none;cursor:pointer;
  font-family:var(--sans);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--stone);opacity:0;
  padding:8px 4px;transition:color .3s;
}
.ti-skip:hover{color:var(--black)}
.ti-on .ti-skip{animation:ti-fade .3s ease forwards;animation-delay:.6s}

/* --- Trame de revelation du hero ----------------------------------- */
.ti-on .ti-trame{
  display:block;position:absolute;inset:0;z-index:3;pointer-events:none;
}
.ti-band{
  position:absolute;left:-1%;width:102%;
  background:var(--ivory);
  transform-origin:50% 0;
  will-change:transform;
}
.ti-on.ti-reveal .ti-band{
  animation:ti-band-open .9s cubic-bezier(.76,0,.24,1) forwards;
}
@keyframes ti-band-open{to{transform:scaleY(0)}}

/* --- Fils de contour ----------------------------------------------- */
.ti-on .ti-contour{
  display:block;position:absolute;inset:0;z-index:4;
  pointer-events:none;opacity:0;
}
.ti-contour path{
  fill:none;stroke:var(--ti-line-strong);stroke-width:.9;
  stroke-dasharray:400;stroke-dashoffset:400;
}
.ti-on.ti-reveal .ti-contour{animation:ti-contour-life 1.1s ease forwards;animation-delay:.5s}
.ti-on.ti-reveal .ti-contour path{animation:ti-draw-long .9s ease forwards;animation-delay:.5s}
@keyframes ti-draw-long{to{stroke-dashoffset:0}}
@keyframes ti-contour-life{0%{opacity:0}35%{opacity:.85}100%{opacity:0}}

/* --- Entree du texte hero ------------------------------------------ */
.ti-on .ti-rise{
  opacity:0;transform:translateY(18px);
  will-change:transform,opacity;
}
.ti-on.ti-reveal .ti-rise{
  animation:ti-rise .8s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes ti-rise{to{opacity:1;transform:translateY(0)}}
.ti-on.ti-reveal .ti-rise:nth-child(1){animation-delay:.85s}
.ti-on.ti-reveal .ti-rise:nth-child(2){animation-delay:.95s}
.ti-on.ti-reveal .ti-rise:nth-child(3){animation-delay:1.15s}
.ti-on.ti-reveal .ti-rise:nth-child(4){animation-delay:1.3s}

/* --- Profondeur curseur (desktop uniquement) ----------------------- */
.ti-on .hero picture{
  transition:transform .9s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}

/* --- Sortie en rideau ---------------------------------------------- */
.ti-on .ti-curtain{
  display:block;position:absolute;inset:0;z-index:2;
  pointer-events:none;opacity:0;
}
.ti-curtain line{stroke:var(--ti-line);stroke-width:1}
.ti-curtain .ti-cl,.ti-curtain .ti-cr{
  will-change:transform;
}

.ti-on .ti-decision{
  display:block;position:absolute;left:50%;top:52%;
  transform:translate(-50%,-50%);z-index:5;pointer-events:none;
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(40px,9vw,110px);letter-spacing:-.02em;
  color:rgba(242,238,232,.14);white-space:nowrap;opacity:0;
}

/* ===================================================================
   PROFIL MOBILE / APPAREIL LIMITE
   =================================================================== */
.ti-lite .ti-intro{display:none!important}
.ti-lite .ti-contour,.ti-lite .ti-curtain,.ti-lite .ti-decision{display:none!important}
.ti-lite .hero picture{transition:none}
.ti-lite.ti-reveal .ti-band{animation-duration:.55s}
.ti-lite.ti-reveal .ti-rise:nth-child(1){animation-delay:.2s}
.ti-lite.ti-reveal .ti-rise:nth-child(2){animation-delay:.28s}
.ti-lite.ti-reveal .ti-rise:nth-child(3){animation-delay:.4s}
.ti-lite.ti-reveal .ti-rise:nth-child(4){animation-delay:.5s}

@media(max-width:768px){
  .ti-skip{bottom:24px;right:24px}
  .ti-loom{width:82vw}
}

/* ===================================================================
   REDUCED MOTION — retour force au niveau 3
   =================================================================== */
@media(prefers-reduced-motion:reduce){
  .ti-intro,.ti-trame,.ti-contour,.ti-curtain,.ti-decision{display:none!important}
  .ti-on .ti-rise{opacity:1!important;transform:none!important;animation:none!important}
  .ti-on .hero picture{transition:none!important;transform:none!important}
}