/* =========================================================================
   PFT — accueil
   La marque, deux lignes. Le texte ne s'affiche pas : il s'écrit au rythme
   du défilement, et le fond s'allume avec lui.
   Une seule variable pilote tout : --p, l'avancement du défilement (0 → 1).
   ========================================================================= */

:root{
  color-scheme:dark;
  --noir:#08080A;
  --blanc:#F6F3ED;
  --gris:#8B8881;
  --or:#D4A82B;
  --or-clair:#F2D687;
  --sans:'Archivo',ui-sans-serif,system-ui,-apple-system,'Helvetica Neue',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --courbe:cubic-bezier(.16,.84,.30,1);
  --p:0;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{
  margin:0;background:var(--noir);color:var(--blanc);
  font-family:var(--sans);font-synthesis:none;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
::selection{background:var(--or);color:var(--noir)}
:focus-visible{outline:1px solid var(--or-clair);outline-offset:6px}

/* =========================================================================
   Le fond — de la lumière, rien d'autre. Il se construit au défilement.
   ========================================================================= */
.fond{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  overflow:hidden;background:var(--noir);
}

/* 1 · la lueur centrale : présente dès l'arrivée, elle respire et s'ouvre */
.lueur{
  position:absolute;left:50%;top:47%;
  width:min(1180px,158vw);aspect-ratio:1;
  translate:-50% -50%;
  scale:calc(.84 + var(--p) * .34);
  opacity:calc(.76 + var(--p) * .24);
}
.lueur i{
  display:block;width:100%;height:100%;
  background:radial-gradient(circle,
    rgba(212,168,43,.17) 0%,
    rgba(212,168,43,.125) 20%,
    rgba(212,168,43,.075) 36%,
    rgba(212,168,43,.038) 50%,
    rgba(212,168,43,.016) 62%,
    rgba(212,168,43,.005) 72%,
    transparent 82%);
  animation:respire 15s ease-in-out infinite;
}
@keyframes respire{
  0%,100%{transform:scale(1);opacity:.86}
  50%    {transform:scale(1.10);opacity:1}
}

/* 2 · les pulsations : la marque émet, lentement. Elles n'existent
      qu'une fois qu'on a commencé à descendre. */
.pulses{
  position:absolute;inset:0;
  opacity:clamp(0,calc((var(--p) - .03) / .22),1);
}
.pulses span{
  position:absolute;left:50%;top:47%;
  width:min(520px,72vw);aspect-ratio:1;
  margin:0;translate:-50% -50%;
  border:1px solid rgba(212,168,43,.52);border-radius:50%;
  opacity:0;animation:pulser 11s linear infinite;
}
.pulses span:nth-child(2){animation-delay:3.7s}
.pulses span:nth-child(3){animation-delay:7.4s}
@keyframes pulser{
  0%  {transform:scale(.14);opacity:0}
  9%  {opacity:.62}
  100%{transform:scale(3.1);opacity:0}
}

/* 3 · l'aube : une lumière qui se lève du bas, tard dans la descente */
.aube{
  position:absolute;left:-10%;right:-10%;bottom:-32%;height:72%;
  background:radial-gradient(64% 104% at 50% 100%,
    rgba(212,168,43,.16),rgba(212,168,43,.09) 26%,rgba(212,168,43,.04) 48%,
    rgba(212,168,43,.014) 64%,transparent 82%);
  opacity:clamp(0,calc((var(--p) - .26) / .42),1);
  transform:translate3d(0,calc((1 - clamp(0,calc((var(--p) - .26) / .42),1)) * 90px),0);
}

/* 4 · la poussière (canvas) */
#poussiere{position:absolute;inset:0;width:100%;height:100%}

/* 5 · le fondu qui garde le texte net, et qui s'ouvre au fur et à mesure */
.voile{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(46% 38% at 50% 47%,rgba(8,8,10,.56) 0%,rgba(8,8,10,.25) 50%,rgba(8,8,10,0) 82%),
    radial-gradient(130% 110% at 50% 50%,transparent 44%,rgba(8,8,10,calc(.52 - var(--p) * .18)) 100%);
}

/* 6 · le grain */
.grain{
  position:fixed;inset:-120%;z-index:2;pointer-events:none;
  opacity:calc(.13 + var(--p) * .09);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  animation:bruit 6s steps(6) infinite;
}
@keyframes bruit{
  0%{transform:translate(0,0)}     16%{transform:translate(-3%,2%)}
  33%{transform:translate(2%,-3%)} 50%{transform:translate(-2%,-2%)}
  66%{transform:translate(3%,1%)}  83%{transform:translate(-1%,3%)}
  100%{transform:translate(0,0)}
}

/* =========================================================================
   La scène
   ========================================================================= */
.scene{position:relative;z-index:3;height:320vh}
.fixe{
  position:sticky;top:0;height:100vh;height:100svh;min-height:480px;
  display:grid;grid-template-rows:1fr auto;
  align-items:center;justify-items:center;
  padding:0 clamp(18px,5vw,48px) clamp(20px,4vh,40px);
  text-align:center;
}
.bloc{position:relative;max-width:1080px;width:100%}
/* tant que rien n'est écrit, la marque tient le centre de l'écran ;
   elle remonte à mesure que les lignes prennent leur place. */
.js .bloc{
  --c:clamp(0,calc(var(--p) / .20),1);
  will-change:transform;
  transform:translate3d(0,calc((1 - var(--c)) * var(--vide,92px)),0);
}

/* ---------- la marque ---------- */
.marque{position:relative;transform:translate3d(0,calc(var(--p) * -16px),0)}
.marque::after{
  content:'';position:absolute;inset:-90% -26%;pointer-events:none;
  background:linear-gradient(104deg,transparent 42%,rgba(255,238,190,.17) 50%,transparent 58%);
  transform:translate3d(-45%,0,0);opacity:0;mix-blend-mode:screen;
}
.pret .marque::after{animation:lustre 1700ms var(--courbe) 500ms 1 both}
@keyframes lustre{
  0%{transform:translate3d(-45%,0,0);opacity:0}
  24%{opacity:1}
  100%{transform:translate3d(45%,0,0);opacity:0}
}
.marque img{
  width:clamp(58px,7.4vw,86px);height:auto;margin:0 auto clamp(20px,2.4vw,28px);
  filter:drop-shadow(0 0 calc(14px + var(--p) * 26px) rgba(212,168,43,calc(.10 + var(--p) * .22)));
}
.nom{
  margin:0;font-weight:400;font-variation-settings:'wdth' 112;
  font-size:clamp(10.5px,1.32vw,14px);
  letter-spacing:.46em;text-indent:.46em;text-transform:uppercase;color:var(--gris);
}
.js .marque img{transform:translate3d(0,14px,0) scale(.94);opacity:0}
.js .pret .marque img{transform:none;opacity:1;
  transition:transform 1200ms var(--courbe),opacity 900ms var(--courbe)}
.js .nom{opacity:0;letter-spacing:.78em}
.js .pret .nom{opacity:1;letter-spacing:.46em;
  transition:opacity 1000ms var(--courbe) 220ms,letter-spacing 1400ms var(--courbe) 220ms}

/* =========================================================================
   Les deux lignes — écrites au défilement
   ========================================================================= */
.accroche{
  margin:clamp(36px,5.6vw,68px) 0 0;
  font-weight:500;font-variation-settings:'wdth' 100;
  font-size:clamp(25px,4.35vw,60px);
  line-height:1.14;letter-spacing:-.033em;
  text-wrap:balance;color:var(--blanc);
}
.accroche .l{display:block}
.accroche em{
  font-style:normal;color:var(--or-clair);font-variation-settings:'wdth' 100;
  text-shadow:0 0 calc(22px + var(--p) * 36px) rgba(212,168,43,calc(.05 + var(--p) * .24));
}

/* chaque mot est enfermé dans une fente d'où il remonte.
   --s : le seuil de défilement où il commence à monter.
   --w : la fenêtre sur laquelle il achève sa montée.
   Les deux sont posés par le script, tout le reste se calcule ici. */
.m{
  display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.14em;margin-bottom:-.14em;
}
.m > i{display:inline-block;font-style:inherit}
.js .m > i{
  --r:clamp(0,calc((var(--p) - var(--s,0)) / var(--w,.13)),1);
  will-change:transform,opacity;
  transform:translate3d(0,calc((1 - var(--r)) * 112%),0);
  opacity:var(--r);
}

/* le filet d'or, tracé une fois les deux lignes écrites */
.filet{
  height:1px;margin:clamp(26px,3.4vw,38px) auto 0;width:min(440px,74%);
  background:linear-gradient(to right,transparent,var(--or) 22%,var(--or-clair) 50%,var(--or) 78%,transparent);
  transform:scaleX(clamp(0,calc((var(--p) - .70) / .22),1));
  opacity:clamp(0,calc((var(--p) - .68) / .10),1);
  box-shadow:0 0 18px rgba(212,168,43,calc(clamp(0,calc((var(--p) - .70) / .22),1) * .5));
  will-change:transform,opacity;
}

/* =========================================================================
   L'invite à défiler
   ========================================================================= */
.defiler{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;
  color:#7B7770;pointer-events:none;
  opacity:clamp(0,calc(1 - var(--p) * 14),1);
}
.defiler span{display:block;opacity:0}
.pret .defiler span{animation:paraitre 900ms var(--courbe) 1500ms both}
.defiler u{
  display:block;width:1px;height:46px;text-decoration:none;
  background:linear-gradient(to bottom,transparent,#7B7770);
  transform-origin:top;transform:scaleY(0);
}
.pret .defiler u{animation:tracer 1600ms var(--courbe) 1650ms infinite}
@keyframes paraitre{to{opacity:1}}
@keyframes tracer{
  0%{transform:scaleY(0);opacity:0}
  35%{opacity:1}
  70%{transform:scaleY(1);opacity:1}
  100%{transform:scaleY(1);opacity:0}
}

/* =========================================================================
   Petits écrans
   ========================================================================= */
@media(max-width:620px){
  .scene{height:270vh}
  .accroche{letter-spacing:-.025em}
  .nom{font-size:10px;letter-spacing:.34em;text-indent:.34em}
  .js .nom{letter-spacing:.6em}
  .js .pret .nom{letter-spacing:.34em}
}

/* =========================================================================
   Mouvement réduit : tout est là, immobile
   ========================================================================= */
@media(prefers-reduced-motion:reduce){
  .grain,.lueur i,.pulses span{animation:none}
  .pulses{display:none}
  .js .bloc{transform:none!important}
  .js .m > i{transform:none!important;opacity:1!important}
  .js .marque img{transform:none!important;opacity:1!important;transition:none!important}
  .js .nom{opacity:1!important;letter-spacing:.46em!important;transition:none!important}
  .marque::after,.pret .marque::after,.pret .defiler u,.pret .defiler span{animation:none!important}
  .defiler span{opacity:1}
  .filet{transform:scaleX(1);opacity:1}
}