/* ==========================================================================
   Midnight — Landing (index.html)
   Intro (logo qui arrive du fond, vidéo qui sort par le « d »), vidéo Lack of Guidance Rio
   plein écran (décorative), phrase en bas de page. Rien d'autre sous la vidéo.
   ========================================================================== */

:root {
  --bg: #050505;
  --fg: #eceeee;
  --display: "Anton", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --text: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-panel: cubic-bezier(0.76, 0, 0.24, 1);

  --side: 20px;
  --top: 18px;
  --tb-size: 33px;
  --tb-logo: 105px;
  --cap: 0.86em;                          /* hauteur des capitales d'Anton (mesurée) */

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  color-scheme: dark;
}
@media (max-width: 899px) {
  :root { --side: 16px; --tb-size: 22px; --tb-logo: 80px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--text);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body.is-locked { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; }
img, video { display: block; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}
:focus { outline: none; }
:focus-visible { outline: 1px solid var(--fg); outline-offset: 4px; }

/* ---------- Lettres découpées (phrase du bas) ---------- */
.split .w { display: inline-block; white-space: nowrap; perspective: 1000px; }
.split .c { display: inline-block; transform-origin: 50% 100%; }
html.js .split[data-ready] .c {
  opacity: 0;
  color: #2a2a2a;                         /* gris foncé → blanc pendant l'animation */
  transform: translateY(40%) rotateX(-90deg);
  transition:
    transform var(--dur, 0.9s) var(--ease-out),
    opacity var(--dur, 0.9s) var(--ease-out),
    color calc(var(--dur, 0.9s) * 1.3) ease;
  transition-delay: calc(var(--start, 0s) + var(--i, 0) * var(--stagger, 60ms));
  will-change: transform, opacity;
}
html.js .split[data-ready].is-in .c { opacity: 1; color: var(--fg); transform: none; }

/* ---------- Barre du haut (comme la page Contact) ---------- */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  padding: calc(var(--top) + var(--safe-t)) calc(var(--side) + var(--safe-r)) 0 calc(var(--side) + var(--safe-l));
  color: var(--fg);
  pointer-events: none;
  transition: color 0.3s linear;
}
.topbar > * { pointer-events: auto; }
.tb-logo { justify-self: center; width: calc(var(--tb-size) * 0.86 / 0.721 * 2000 / 556); }   /* hauteur des lettres du logo réglée par --tb-size */
.tb-logo img { width: 100%; height: auto; transition: filter 0.3s linear; }

/* ---------- 1. Vidéo plein écran ---------- */
.hero {
  position: relative;
  height: 100vh;
  height: 100dvh;
  min-height: 600px;
  overflow: hidden;
  background: #000;
}
.hero-media { position: absolute; inset: 0; }     /* masqué en forme de « d » pendant l'intro (js/home.js) */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-veil { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.2); }
/* Phrase en bas de page, même police que le site (Anton) */
.hero-line {
  position: absolute;
  left: calc(var(--side) + var(--safe-l));
  right: calc(var(--side) + var(--safe-r));
  bottom: calc(clamp(22px, 4vh, 44px) + var(--safe-b));
  z-index: 2;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(16px, 2vw, 32px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  text-align: center;
  color: var(--fg);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);   /* lisible même sur le sable clair */
}
.hero-line .c { color: inherit; }
html.js .hero-line.split[data-ready] .c { color: var(--fg); }

/* La landing ne contient que la vidéo : pas de défilement */
html, body { height: 100%; overflow: hidden; }

/* ---------- Intro (loader) ---------- */
/* 1. le logo arrive du fond ; 2. le « d » blanc devient un « d » rempli de vidéo (0,15 s) : le noir est percé à sa
   forme et la vidéo, masquée en forme de « d » sur .hero-media, apparaît ; 3. le « d » grossit jusqu'au plein écran
   (1 s) pendant que le reste du logo et le fond noir s'effacent au même rythme, sans bouger (tout piloté en JS). */
.loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  pointer-events: none;
}
html.no-intro .loader { display: none; }
.loader-bg { position: absolute; inset: 0; background: var(--bg); }
.loader-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  perspective: 900px;
}
.loader-logo {
  position: relative;
  width: min(36vw, 520px);
  opacity: 0;
  transform: translateZ(-1800px);         /* tout au fond */
  transition: transform 1.4s var(--ease-out), opacity 1.1s ease;
  will-change: transform, opacity;
}
.loader-logo img { display: block; height: auto; }   /* jamais déformé */
.logo-rest { width: 100%; }
/* Le « d » seul, posé exactement sur celui du logo (boîte du « d » : x 707 → 918, y 63 → 445 sur 2000 × 556) */
.logo-d {
  position: absolute;
  left: calc(707 / 2000 * 100%);
  top: calc(63 / 556 * 100%);
  width: calc(211 / 2000 * 100%);
  transition: opacity 0.15s ease-out;
}
.loader.is-in .loader-logo { opacity: 1; transform: translateZ(0); }
.loader.is-filled .logo-d { opacity: 0; }                    /* le « d » blanc laisse place au « d » de vidéo */
.loader.is-fade { opacity: 0; transition: opacity 0.3s ease; }   /* repli : simple fondu */
@media (max-width: 699px) {
  .loader-logo { width: 70vw; }
}
/* Barre du haut masquée pendant l'intro, puis fondu */
.topbar.is-hidden { opacity: 0; }
.topbar { transition: color 0.3s linear, opacity 0.3s ease; }

/* ---------- Fondu noir entre les pages ---------- */
.fade {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: #000;
  pointer-events: none;
  opacity: 0;
  animation: fade-out 0.4s ease both;
}
html.is-leaving .fade { animation: fade-in 0.4s ease forwards; }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes fade-in  { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Mouvement réduit ---------- */
html.reduced .split[data-ready] .c,
html.reduced .split[data-ready].is-in .c { opacity: 1; color: var(--fg); transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .fade { animation: none; }
}

/* ---------- Curseur : le M du logo, partout ---------- */
html, body, *, *::before, *::after {
  cursor: url("../images/cursor-m.png") 13 11, auto !important;
  cursor: -webkit-image-set(url("../images/cursor-m.png") 1x, url("../images/cursor-m@2x.png") 2x) 13 11, auto !important;
  cursor: image-set(url("../images/cursor-m.png") 1x, url("../images/cursor-m@2x.png") 2x) 13 11, auto !important;
}