/* ═══════════════════════════════════════════════════════════
   Alexandre Lesbats — hero vidéo + teaser Éclipse
   ═══════════════════════════════════════════════════════════ */

:root{
  --ink:        #04060a;
  --ink-soft:   #0a0e14;
  --light:      #f4efe7;
  --muted:      rgba(244,239,231,.6);
  --faint:      rgba(244,239,231,.3);
  --corona:     #ffb867;
  --corona-hot: #fff1d6;

  --line:       rgba(244,239,231,.14);
  --gutter:     clamp(1.25rem, 4vw, 3.5rem);

  --serif: "Cormorant Garamond", ui-serif, Georgia, "Times New Roman", serif;
  --sans:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease: cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-snap-type:y proximity;
}

body{
  background:var(--ink);
  color:var(--light);
  font-family:var(--sans);
  font-weight:300;
  overflow-x:hidden;
}

img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--corona); color:var(--ink); }
:focus-visible{ outline:1px solid var(--corona); outline-offset:4px; }

/* ── Rideau d'ouverture ─────────────────────────────────────── */

.curtain{
  position:fixed; inset:0; z-index:99;
  background:var(--ink);
  animation:curtainUp 1.4s var(--ease) .3s forwards;
}
@keyframes curtainUp{ to{ opacity:0; visibility:hidden } }

/* ═══ 1. HERO ═══════════════════════════════════════════════ */

.hero{
  position:relative; overflow:hidden;
  min-height:100svh;
  scroll-snap-align:start;
  padding:clamp(1.1rem,2.6vh,2rem) var(--gutter) clamp(1.4rem,3vh,2.2rem);
  display:grid; grid-template-rows:auto 1fr auto;
}

/* fond vidéo — exposition naturelle, on n'assombrit que les bords */
.stage{ position:absolute; inset:0; z-index:0; overflow:hidden; }

.stage__video{
  width:100%; height:100%;
  object-fit:cover;
  animation:driftIn 40s var(--ease) forwards;
}
@keyframes driftIn{ from{ transform:scale(1.08) } to{ transform:scale(1.01) } }

.stage__grade{
  position:absolute; inset:0;
  /* Le voile doit couvrir toute la zone occupée par le texte — titre à
     18 %, sous-titre à 33 %, logo à 45 % — sinon la lisibilité dépend de
     ce que la vidéo montre à cet endroit, et change à chaque plan.
     Pente continue, jamais de palier : sinon on voit la bande. */
  background:linear-gradient(180deg,
    rgba(0,0,0,.48) 0%,
    rgba(0,0,0,.38) 18%,
    rgba(0,0,0,.26) 32%,
    rgba(0,0,0,.14) 46%,
    rgba(0,0,0,.04) 58%,
    transparent 66%,
    rgba(0,0,0,.24) 80%,
    rgba(0,0,0,.5) 92%,
    rgba(0,0,0,.62) 100%);
}

.hero > *:not(.stage){ position:relative; z-index:1; }

/* ── Barre haute ────────────────────────────────────────────── */

.topbar{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }

.brand__name{
  display:block;
  font-size:clamp(.72rem,1.15vw,.85rem);
  letter-spacing:.34em; text-transform:uppercase; font-weight:400;
  text-shadow:0 1px 12px rgba(0,0,0,.5);
}
.brand__role{
  display:block; margin-top:.45rem;
  font-size:clamp(.58rem,.85vw,.68rem);
  letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.62);
  text-shadow:0 1px 12px rgba(0,0,0,.5);
}

.navlink{
  font-size:clamp(.58rem,.85vw,.68rem);
  letter-spacing:.28em; text-transform:uppercase;
  color:rgba(255,255,255,.8);
  padding-bottom:.3rem; border-bottom:1px solid rgba(255,255,255,.3);
  text-shadow:0 1px 12px rgba(0,0,0,.5);
  transition:border-color .4s, color .4s;
}
.navlink:hover{ color:#fff; border-color:#fff; }

/* ── Bloc titre, bas de cadre ───────────────────────────────── */

.hero__content{
  align-self:start; justify-self:center;
  /* doit rester plus large que le titre : le `clip-path` du balayage
     découpe sur cette boîte, tout débordement serait masqué puis
     apparaîtrait d'un coup en fin d'animation. */
  max-width:min(72rem,94vw);
  padding-top:clamp(2.5rem,13vh,8rem);
  text-align:center;
  text-shadow:0 1px 3px rgba(0,0,0,.3), 0 2px 30px rgba(0,0,0,.45);
}

.hero__title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.55rem,6.1vw,5.4rem);
  line-height:1.05; letter-spacing:.14em; text-indent:.14em;
  text-transform:uppercase; white-space:nowrap;

  /* Blanc opaque, sans exception. Ne jamais repasser en
     `background-clip:text` + `color:transparent` : l'ombre portée du
     bloc parent transparaît alors à travers les lettres et le titre
     vire au gris (visible sur PC, masqué sur mobile par le mode
     « animations réduites » qui neutralisait le dégradé). */
  color:#fff;
  /* la boîte épouse le texte : le volet s'arrête pile sur la dernière lettre */
  width:fit-content; margin-inline:auto;
  animation:wipeIn 3s linear .9s backwards;
}
/* le texte se découvre de la gauche vers la droite */
@keyframes wipeIn{
  from{ clip-path:inset(-25% 100% -25% 0); transform:translateX(-34px) }
  to  { clip-path:inset(-25% 0 -25% 0);    transform:none }
}

.hero__sub{
  margin-top:clamp(.9rem,2.4vh,1.6rem);
  font-family:var(--serif);
  font-size:clamp(1rem,1.95vw,1.6rem);
  line-height:1.5; color:#fff;
}
.hero__sub em{ font-style:italic; color:#fff; }

/* Blason « pigne des Landes ». Le `text-shadow` du bloc parent ne
   s'applique pas aux images : c'est `drop-shadow` qui décolle le trait
   blanc du ciel pâle. */
.hero__mark{
  display:block; width:auto;
  height:clamp(84px,9.5vw,140px);
  margin:clamp(1.6rem,4vh,2.8rem) auto 0;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
/* Entrée dédiée : `rise` anime `filter`, ce qui écraserait le drop-shadow
   pendant toute l'animation puis le ferait surgir à la dernière image. */
@keyframes riseMark{
  from{ opacity:0; transform:translateY(20px) }
  to  { opacity:1; transform:none }
}
.hero__mark.reveal{ animation-name:riseMark; }

/* ── Invitation à scroller ──────────────────────────────────── */

.scrollcue{
  justify-self:center;
  display:flex; flex-direction:column; align-items:center; gap:.85rem;
  font-size:clamp(.55rem,.82vw,.66rem);
  letter-spacing:.3em; text-transform:uppercase;
  color:rgba(255,255,255,.8);
  text-shadow:0 1px 12px rgba(0,0,0,.5);
  transition:color .4s;
}
.scrollcue:hover{ color:#fff; }
.scrollcue__line{
  width:1px; height:clamp(38px,6vh,58px);
  background:linear-gradient(180deg, rgba(255,255,255,.75), transparent);
  transform-origin:top;
  animation:drop 2.4s var(--ease) infinite;
}
@keyframes drop{
  0%{ transform:scaleY(0); opacity:0 }
  35%{ transform:scaleY(1); opacity:1 }
  100%{ transform:scaleY(1); opacity:0 }
}

/* ═══ 2. ÉCLIPSE ════════════════════════════════════════════ */

.film{
  position:relative; overflow:hidden;
  min-height:100svh;
  scroll-snap-align:start;
  padding:clamp(2.4rem,6vh,4.5rem) var(--gutter) clamp(1.4rem,3vh,2.2rem);
  display:grid; grid-template-rows:1fr auto; gap:clamp(1.2rem,3vh,2rem);
  background:
    radial-gradient(70% 48% at 50% 8%, rgba(255,164,84,.13), transparent 70%),
    linear-gradient(180deg, #05070c 0%, #04060a 45%, #02030a 100%);
}

.film__inner{
  align-self:center; justify-self:center;
  max-width:min(58rem,92vw);
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}

/* Éclipse : disque noir + couronne */
.eclipse{
  position:relative; display:block;
  width:clamp(54px,5.4vw,80px); aspect-ratio:1;
  margin-bottom:clamp(1.1rem,2.6vh,1.8rem);
}
.eclipse__disc{
  position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 50% 45%, #090c12, #000 72%);
  box-shadow:0 0 0 1px rgba(255,214,160,.55),
             0 0 34px 6px rgba(255,168,88,.42),
             0 0 90px 24px rgba(255,140,60,.2);
}
.eclipse__corona{
  position:absolute; inset:-58%; border-radius:50%;
  background:radial-gradient(circle, rgba(255,238,208,.42) 30%, rgba(255,168,88,.24) 44%, transparent 66%);
  filter:blur(6px);
  animation:breathe 7s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{ transform:scale(1); opacity:.85 } 50%{ transform:scale(1.09); opacity:1 } }

.eclipse__flare{
  position:absolute; top:16%; right:6%;
  width:8px; height:8px; border-radius:50%;
  background:var(--corona-hot);
  box-shadow:0 0 12px 4px rgba(255,241,214,.9), 0 0 40px 14px rgba(255,184,103,.55);
  animation:bead 7s ease-in-out infinite;
}
@keyframes bead{ 0%,100%{ opacity:.35; transform:scale(.7) } 50%{ opacity:1; transform:scale(1) } }

.kicker{
  font-size:clamp(.58rem,.9vw,.7rem);
  letter-spacing:.42em; text-transform:uppercase;
  color:var(--corona);
}

.film__title{
  margin-top:clamp(.6rem,1.5vh,1rem);
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.2rem,7.4vw,5.8rem);
  line-height:.95; letter-spacing:.12em; text-indent:.12em;
  text-transform:uppercase; color:#fdf9f2;
}

.film__lede{
  margin-top:clamp(.8rem,2vh,1.3rem);
  font-family:var(--serif); font-style:italic;
  font-size:clamp(.98rem,1.6vw,1.35rem);
  line-height:1.55; color:rgba(244,239,231,.78);
  text-wrap:balance;
}

/* ── Cadre « bientôt » ──────────────────────────────────────── */

.frame{
  margin-top:clamp(1.4rem,3.6vh,2.4rem);
  width:min(37rem,100%);
}
.frame__box{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  border:1px solid var(--line); background:var(--ink-soft);
  box-shadow:0 34px 90px -28px rgba(0,0,0,.95);
}
.frame__box img{
  width:100%; height:100%; object-fit:cover; object-position:48% 54%;
  filter:saturate(.72) contrast(1.04) brightness(.72);
  transform:scale(1.02);
  transition:filter .9s var(--ease), transform .9s var(--ease);
}
.frame:hover .frame__box img{ filter:saturate(1) brightness(.9); transform:scale(1.05); }

.frame__box::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),
             inset 0 -90px 80px -60px rgba(0,0,0,.95);
}

.frame__rec{
  position:absolute; top:.8rem; left:.9rem;
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.52rem; letter-spacing:.24em; color:rgba(255,255,255,.85);
  text-shadow:0 1px 6px rgba(0,0,0,.9);
}
.frame__rec i{
  width:5px; height:5px; border-radius:50%; background:#ff4438;
  box-shadow:0 0 8px #ff4438; animation:blink 1.6s steps(1) infinite;
}
@keyframes blink{ 0%,60%{opacity:1} 61%,100%{opacity:.15} }

.frame__soon{
  position:absolute; left:50%; bottom:1.2rem; translate:-50% 0;
  padding:.55rem 1.4rem;
  border:1px solid rgba(255,255,255,.28); border-radius:99px;
  background:rgba(4,6,10,.42); backdrop-filter:blur(6px);
  font-size:.58rem; letter-spacing:.34em; text-transform:uppercase;
  color:#fff;
}

.frame__caption{
  margin-top:1rem;
  font-family:var(--serif); font-style:italic;
  font-size:clamp(.86rem,1.1vw,1rem); color:var(--muted);
}

.meta{
  margin-top:clamp(1.1rem,2.6vh,1.7rem);
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:clamp(.6rem,1.4vw,1.1rem);
  font-size:clamp(.55rem,.82vw,.66rem);
  letter-spacing:.28em; text-transform:uppercase; color:var(--faint);
}
.meta__dot{ width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.7; }

/* ── Barre basse ────────────────────────────────────────────── */

.bottombar{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding-top:clamp(.7rem,1.8vh,1.1rem);
  border-top:1px solid var(--line);
}

.signature{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(.85rem,1.1vw,1rem); color:var(--muted);
}

.contact{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:clamp(.6rem,.85vw,.7rem); letter-spacing:.14em;
  color:var(--muted); transition:color .4s, gap .4s var(--ease);
}
.contact:hover{ color:var(--light); gap:.9rem; }
.contact svg{
  width:14px; height:14px; fill:none;
  stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;
}

/* ── Apparitions ────────────────────────────────────────────── */

.reveal{ animation:rise 1.3s var(--ease) backwards; }
@keyframes rise{
  from{ opacity:0; transform:translateY(20px); filter:blur(8px) }
  to  { opacity:1; transform:none;             filter:blur(0) }
}
.reveal[data-delay="1"]{ animation-delay:.65s }
.reveal[data-delay="4"]{ animation-delay:4.35s }
.reveal[data-delay="5"]{ animation-delay:4.9s }
.reveal[data-delay="6"]{ animation-delay:5.45s }
/* le sous-titre entre après le nom, plus lentement que le reste */
.hero__sub.reveal{ animation-duration:1.9s }

[data-anim]{ opacity:0; transform:translateY(24px); }
.is-in [data-anim]{
  opacity:1; transform:none;
  transition:opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.is-in [data-anim]:nth-child(2){ transition-delay:.1s }
.is-in [data-anim]:nth-child(3){ transition-delay:.18s }
.is-in [data-anim]:nth-child(4){ transition-delay:.26s }
.is-in [data-anim]:nth-child(5){ transition-delay:.34s }
.is-in [data-anim]:nth-child(6){ transition-delay:.42s }

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width:900px){
  .film__lede br{ display:none; }
}

@media (max-width:720px){
  .brand__role{ display:none; }
  .hero__title{ letter-spacing:.1em; text-indent:.1em; }
  .hero__content{ padding-bottom:clamp(1.5rem,6vh,3rem); }
  .film{ gap:1.5rem; }
  .bottombar{ flex-direction:column; align-items:flex-start; gap:.8rem; }
}

/* ── Accessibilité ──────────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .curtain{ display:none; }
  [data-anim]{ opacity:1; transform:none; }
  .hero__title{ clip-path:none; }
}