/* Film « Encre & essence » — canvas de frames + overlay grain/vignette. */
#film-canvas{
  position:fixed; inset:0; width:100vw; height:100vh; display:block; z-index:0;
  background:#0d1310;
}
/* Écran de chargement : tant que toutes les frames n'ont pas fini de charger,
   le scrub au scroll peut tomber sur une image absente (rapide sur connexion
   lente) et geler le film. On masque donc le film derrière cet écran jusqu'à
   ce que la totalité soit prête, puis il se dissout. */
.film-loader{
  position:fixed; inset:0; z-index:30; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1rem;
  background:#0d1310; color:#f8f4ec;
  transition:opacity .7s ease;
}
.film-loader-mark{
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:clamp(2rem,7vw,3.2rem); letter-spacing:.02em; margin:0;
}
.film-loader-mark b{color:#f4c9d4}
.film-loader-tag{
  margin:0; font-size:.76rem; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(248,244,236,.62);
}
.film-loader-track{
  width:min(220px,50vw); height:2px; border-radius:2px;
  background:rgba(248,244,236,.16); overflow:hidden;
}
.film-loader-fill{
  height:100%; width:0%; background:linear-gradient(90deg,#6f8f5c,#f4c9d4);
  transition:width .2s ease;
}
.film-loader.is-done{opacity:0; pointer-events:none}
@media(prefers-reduced-motion:reduce){ .film-loader-fill{transition:none} .film-loader{transition:none} }

/* Overlays au-dessus du canvas, sous le contenu (#film z-index:10). */
.grain,.vignette{position:fixed; inset:0; z-index:2; pointer-events:none}
.vignette{background:radial-gradient(120% 120% at 50% 50%, transparent 55%, rgba(8,10,8,.55) 100%)}
.grain{
  background-image:url(../film/grain.png); background-size:128px 128px;
  opacity:.06; mix-blend-mode:overlay; animation:grainshift .5s steps(2) infinite;
}
@keyframes grainshift{
  0%{transform:translate(0,0)} 25%{transform:translate(-6px,4px)}
  50%{transform:translate(5px,-5px)} 75%{transform:translate(-4px,-6px)} 100%{transform:translate(0,0)}
}
@media(prefers-reduced-motion:reduce){ .grain{animation:none} }
/* La couche texte reste au-dessus des overlays. */
#film{position:relative; z-index:10}

/* --- Révélation « buvard » : la goutte tombe sur la feuille vierge, s'y
   dissout, puis le texte se développe comme une encre qui diffuse. ---
   Le canvas (frame finale : la goutte) reste figé derrière. Deux temps,
   pilotés au scroll par film.js (voir textChoreography) :
   1) --paper 0->1 : la feuille de buvard crème apparaît d'abord, VIERGE
      (simple opacité sur toute la landing, pas encore de texte lisible).
   2) --ink   0->1 : le CONTENU (.wrap) se révèle ensuite, masqué par une
      tache d'encre qui grandit depuis le point d'impact (haut-centre) et
      dont le flou se résout — le texte « prend » sur le papier mouillé.
   Deux cercles décalés donnent un bord irrégulier, comme un buvard. */
.landing.buvard{
  --paper:0; --ink:0;
  opacity:var(--paper);
}
/* Pendant la révélation, le papier n'a pas de bord : son arête haute est
   dissoute par un dégradé (le buvard « boit » le film, la frame finale reste
   visible au travers), et l'ombre portée est coupée sinon elle dessinerait
   une ligne franche. Le bord se résout progressivement avec l'encre (--ink)
   puis .revealed restaure carte + ombre, à un moment où l'arête est déjà
   sortie de l'écran par le haut. */
.landing.buvard:not(.revealed){
  box-shadow:none;
  -webkit-mask-image:linear-gradient(180deg, transparent 0,
    #000 calc((1 - var(--ink)) * 55vh + 2px));
  mask-image:linear-gradient(180deg, transparent 0,
    #000 calc((1 - var(--ink)) * 55vh + 2px));
}
.landing.buvard .wrap{
  filter:blur(calc((1 - var(--ink)) * 5px));
  -webkit-mask-image:
    radial-gradient(circle at 50% 0, #000 calc(var(--ink) * 170vh), transparent calc(var(--ink) * 170vh + 14vh)),
    radial-gradient(circle at 35% -3vh, #000 calc(var(--ink) * 150vh), transparent calc(var(--ink) * 150vh + 18vh));
  mask-image:
    radial-gradient(circle at 50% 0, #000 calc(var(--ink) * 170vh), transparent calc(var(--ink) * 170vh + 14vh)),
    radial-gradient(circle at 35% -3vh, #000 calc(var(--ink) * 150vh), transparent calc(var(--ink) * 150vh + 18vh));
}
/* Transition terminée : plus de masque ni de flou à repeindre sur toute la
   longue landing (coûteux et inutile une fois le texte pleinement développé). */
.landing.buvard.revealed .wrap{ -webkit-mask-image:none; mask-image:none; filter:none; }