/* CE QUE J’AI VU — feuille de style unique.
   Mobile d'abord. Animations : opacity / transform uniquement (GPU). */

@font-face { font-family: "Montserrat"; font-weight: 300; font-display: swap;
  src: local("Montserrat Light"), local("Montserrat-Light"), url("../fonts/montserrat-300.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-display: swap;
  src: local("Montserrat SemiBold"), local("Montserrat-SemiBold"), url("../fonts/montserrat-600.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 400; font-display: swap;
  src: local("Lora Italic"), local("Lora-Italic"), url("../fonts/lora-400-italic.woff2") format("woff2"); }

:root {
  --night:   #05080f;
  --blue:    #182a3a;
  --cold:    #8ea8b5;
  --paper:   #e9e6e0;
  --amber:   #f2a355;
  --signal:  #bf1e2e;           /* réservé aux événements narratifs, jamais décoratif */

  --sans:  "Montserrat", "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Lora", "Cormorant Garamond", Georgia, serif;

  --logo-size: clamp(3rem, min(15.5vw, 15svh), 8.6rem);
  --ease: cubic-bezier(.4, 0, .2, 1);

  /* pilotés par le script (souris) */
  --lx: 0px;       /* décalage horizontal de la ligne */
  --near: 0;       /* proximité du curseur, 0 → 1 */
  --px: 0px; --py: 0px;   /* parallaxe du fond */
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night); color: var(--paper); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100svh;
  background: var(--night); color: var(--paper);
  font-family: var(--sans); font-weight: 300;
  overflow-x: hidden;
}
html.has-cursor, html.has-cursor body { cursor: none; }
html.has-cursor a { cursor: pointer; }
::selection { background: rgba(242, 163, 85, .28); }

/* ─── Fond ─────────────────────────────────────────────── */
.bg { position: fixed; inset: 0; overflow: hidden; z-index: 0;
  transform: translate3d(var(--px), var(--py), 0); animation: bg-in 3.2s var(--ease) both; }
.bg picture, .bg img, .bg .bgvid { position: absolute; inset: -3%; width: 106%; height: 106%; object-fit: cover; }
.bg img, .bg .bgvid { animation: drift 90s ease-in-out infinite alternate; will-change: transform; }
/* voile : assombrit le centre pour la lisibilité + respiration de luminosité */
.veil { position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 45% 50% at 50% 40%, rgba(5, 8, 15, .5), rgba(5, 8, 15, 0) 70%),
    linear-gradient(to bottom, rgba(5, 8, 15, .35), rgba(5, 8, 15, 0) 30%, rgba(5, 8, 15, .5));
  animation: breathe 11s ease-in-out infinite alternate; }

/* ─── Composition ──────────────────────────────────────── */
.stage { position: relative; z-index: 2; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: max(env(safe-area-inset-top), 1.5rem) 1.5rem max(env(safe-area-inset-bottom), 3.8rem); }
.mark   { margin-top: auto; }
.phrase { margin-top: auto; }
.count, .jday { margin-top: auto; }
.mark + .phrase { margin-top: clamp(3rem, 12svh, 7rem); }

/* ─── Logo ─────────────────────────────────────────────── */
.logo { margin: 0; font-weight: inherit; text-transform: uppercase; line-height: 1;
  animation: rise 3.4s var(--ease) .9s both; }
.l-top  { display: block; font-size: calc(var(--logo-size) * .38); font-weight: 300;
  letter-spacing: .62em; margin-right: -.62em; color: var(--paper); opacity: .92; }
.l-main { display: block; margin-top: .22em; font-size: var(--logo-size); font-weight: 600;
  letter-spacing: .05em; margin-right: -.05em; white-space: nowrap;
  background: linear-gradient(to bottom, #fbfaf7 15%, #aeb9c2 95%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.v { position: relative; display: inline-block; }

/* La ligne : source lumineuse très fine, traversant le V */
.beam { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; user-select: none;
  transform: translate3d(var(--lx), 0, 0); transition: transform .8s cubic-bezier(.2,.6,.2,1); }
.beam i { position: absolute; left: 0; top: 0; display: block; height: 3.5em;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 58%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 58%, transparent);
  transform-origin: 50% 36%; }
.core { width: 2px; margin: -1.5em 0 0 -1px; transform: scaleY(0);
  background: linear-gradient(to right, rgba(255,226,189,.55), #fff6e8 50%, rgba(255,226,189,.55));
  animation: draw 2.8s var(--ease) 1.9s forwards, glimmer 9s ease-in-out 4.8s infinite alternate; }
.halo { margin: -1.5em 0 0 -14px; width: 28px; opacity: 0; filter: blur(5px);
  background: linear-gradient(to right, transparent, rgba(242, 163, 85, .5) 50%, transparent);
  animation: halo-in 3.4s var(--ease) 2.4s forwards; }
/* Reflet : seul élément piloté par le script (proximité du curseur, éclat rare).
   Séparé de .core pour ne pas entrer en conflit avec les animations CSS. */
.flare { margin: -1.5em 0 0 -4px; width: 8px; filter: blur(2.5px); opacity: calc(var(--near) * .45);
  background: linear-gradient(to right, transparent, rgba(255, 214, 160, .8) 50%, transparent);
  transition: opacity .6s var(--ease); }
.beam.flash .flare { opacity: .95; transition: opacity .12s linear; }
.core, .halo, .flare { will-change: opacity, transform; }

/* ─── Date / phrase ────────────────────────────────────── */
.date { margin: clamp(1.4rem, 4.2svh, 2.6rem) 0 0; font-size: clamp(.95rem, 3.6vw, 1.5rem);
  font-weight: 300; letter-spacing: .5em; margin-right: -.5em; animation: fade 3s var(--ease) 3.6s both; }
.phrase { margin-bottom: 0; font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.1rem, 4.6vw, 1.55rem); line-height: 1.55; letter-spacing: .02em;
  white-space: pre-line; color: var(--paper); text-shadow: 0 1px 14px rgba(5, 8, 15, .9);
  animation: fade 3.4s var(--ease) 5.2s both; }

/* ─── Compte à rebours : présent, mais sans bruit ──────── */
.count { display: flex; align-items: stretch; opacity: .94; font-variant-numeric: tabular-nums;
  animation: fade-count 3.4s var(--ease) 6.2s both; }
.cell { display: flex; flex-direction: column; align-items: center; gap: .8rem; min-width: 4.3rem; padding: .2rem .4rem; }
.cell + .cell { border-left: 1px solid rgba(142, 168, 181, .32); }
.n { font-size: clamp(2.2rem, 10.5vw, 3.3rem); font-weight: 300; line-height: 1; letter-spacing: .02em;
  color: #f4f1ea; text-shadow: 0 0 24px rgba(142, 168, 181, .28), 0 2px 18px rgba(5, 8, 15, .85); }
.u { font-size: .66rem; letter-spacing: .3em; margin-right: -.3em; text-transform: uppercase; color: var(--cold); }
.jday { font-size: 1.4rem; letter-spacing: .5em; margin-right: -.5em; color: var(--cold); animation: fade 3s var(--ease) 6.2s both; }

/* ─── Contenus de phase (images, vidéos, éléments d'anomalie) ─ */
.fg { display: block; max-width: min(100%, 40rem); max-height: 40svh; margin-top: 2.5rem; object-fit: contain; }
.layer { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.layer > * { position: absolute; pointer-events: auto; opacity: 0; transition: opacity 3s var(--ease); }
.layer > .on { opacity: 1; }
.layer .x-text { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--paper); white-space: pre-line; }
.layer .x-img { max-width: 40vw; height: auto; }
.layer a { color: inherit; text-decoration: none; }
.layer .x-hidden { opacity: 0; } .layer .x-hidden:hover, .layer .x-hidden:focus-visible { opacity: 1; }

/* ─── Mentions : zone très discrète ────────────────────── */
.legal { position: fixed; z-index: 4; left: 50%; bottom: max(env(safe-area-inset-bottom), .35rem); transform: translateX(-50%);
  padding: .9rem 1.2rem; font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; text-decoration: none;
  color: var(--cold); opacity: .55; transition: opacity .6s var(--ease); animation: fade-legal 4s ease 8s both; }
.legal:hover, .legal:focus-visible { opacity: 1; }
:focus-visible { outline: 1px solid var(--amber); outline-offset: 3px; }

/* ─── Curseur ──────────────────────────────────────────── */
.dot { position: fixed; z-index: 9; left: 0; top: 0; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%;
  background: var(--paper); opacity: 0; pointer-events: none; will-change: transform; transition: opacity .5s ease; }
.dot.on { opacity: .75; }

/* ─── Mobile très court (paysage) : on autorise le scroll, rien ne se chevauche ─ */
@media (max-height: 520px) { :root { --logo-size: clamp(2.4rem, 11vw, 4.4rem); } .stage > * { margin-top: 1.5rem !important; } }

/* ─── Desktop ──────────────────────────────────────────── */
@media (min-width: 900px) {
  .phrase { font-size: 1.5rem; }
  .cell { min-width: 9.5rem; padding: .3rem 1.6rem; gap: 1rem; }
  .n { font-size: clamp(3.2rem, min(5vw, 9svh), 5rem); }
  .u { font-size: .74rem; }
  .legal { font-size: .62rem; }
}


/* ─── Cinéma : brume, grain, bandes ────────────────────── */
.mist { position: absolute; inset: -10% -30%; opacity: .5; pointer-events: none;
  background:
    radial-gradient(ellipse 38% 18% at 30% 56%, rgba(142, 168, 181, .16), transparent 70%),
    radial-gradient(ellipse 44% 14% at 72% 62%, rgba(120, 150, 175, .12), transparent 70%);
  animation: mist 70s ease-in-out infinite alternate; will-change: transform; }
.grain { position: absolute; inset: -60px; pointer-events: none; opacity: .28;
  background: url("../img/grain.png") 0 0 / 256px 256px; animation: grain 1.1s steps(1) infinite; }
@media (min-aspect-ratio: 16/10) {
  body::before, body::after { content: ""; position: fixed; left: 0; right: 0; height: 5.5svh; background: #000; z-index: 6; pointer-events: none;
    animation: bars 3.6s var(--ease) .2s both; }
  body::before { top: 0; transform-origin: top; } body::after { bottom: 0; transform-origin: bottom; }
}
@keyframes mist  { from { transform: translate3d(-4%, 0, 0) } to { transform: translate3d(4%, 0, 0) } }
@keyframes grain { 0% { transform: translate(0, 0) } 20% { transform: translate(-37px, 21px) } 40% { transform: translate(29px, -44px) }
                   60% { transform: translate(-18px, -12px) } 80% { transform: translate(41px, 33px) } 100% { transform: translate(0, 0) } }
@keyframes bars  { from { transform: scaleY(3.2) } to { transform: scaleY(1) } }

/* ─── Mouvements ───────────────────────────────────────── */
@keyframes bg-in   { from { opacity: 0 } to { opacity: 1 } }
@keyframes drift   { from { transform: scale(1) translate3d(0, 0, 0) } to { transform: scale(1.06) translate3d(-.6%, -.4%, 0) } }
@keyframes breathe { from { opacity: .82 } to { opacity: 1 } }
@keyframes rise    { from { opacity: 0; transform: translate3d(0, .5rem, 0) } to { opacity: 1; transform: none } }
@keyframes fade    { from { opacity: 0 } to { opacity: 1 } }
@keyframes fade-count { from { opacity: 0 } to { opacity: .94 } }
@keyframes fade-legal { from { opacity: 0 } to { opacity: .55 } }
@keyframes draw    { from { transform: scaleY(0); opacity: .6 } to { transform: scaleY(1); opacity: 1 } }
@keyframes halo-in { from { opacity: 0 } to { opacity: .85 } }
@keyframes glimmer { 0% { opacity: 1 } 100% { opacity: .84 } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .grain { opacity: .35; }
  .core { transform: none; opacity: .92; } .halo { opacity: .8; }
  .count { opacity: .94; } .legal { opacity: .55; }
}