/* Charlotte Bard — aquarelle.css : l'aquarelle qui éclot (16/10/2026), avec js/aquarelle.js.
   Les taches du héros restent les pseudo-éléments de styles.css (.hero::before, la grande ; .hero-photo::before,
   la petite) : place, taille et image ne sont décidées que là. Ici, seulement leur apparition, en mode animé :
   tout état de départ est sous html.anim ET dans @media (prefers-reduced-motion: no-preference) ; sans JS, en
   mouvement réduit ou après le chien de garde du <head>, les taches sont là, immobiles. Animés : --aq-r (rayon
   du masque), transform, opacity ; rien ne boucle. États posés par js/aquarelle.js sur l'hôte :
   data-aquarelle = gl | fini | css | perdu. */

/* Le calque WebGL de l'éclosion (créé, placé et retiré par le JS) : premier enfant de l'hôte, z-index -1 :
   juste au-dessus de la tache, sous tout le reste */
.aq-calque { position: absolute; z-index: -1; display: block; pointer-events: none; }

/* Rayon du masque du repli CSS (sans @property, Safari avant 16.4 : la tache paraît en deux temps) */
@property --aq-r { syntax: "<length-percentage>"; inherits: false; initial-value: 140%; }

@media (prefers-reduced-motion: no-preference) {
  /* Première image : papier nu. Si le JS n'a pas pris la main à 600 ms (script ou fichier en retard), le repli
     part seul : un lavis qui s'ouvre depuis le point de chute (le coin chargé, comme sur la carte), pendant que
     la tache passe de 94 à 100 %. L'état de départ est tenu par « backwards ». */
  html.anim .hero::before { --aq-x: 88%; --aq-y: 12%; }
  html.anim .hero-photo::before { --aq-x: 49%; --aq-y: 74%; }
  html.anim .hero::before,
  html.anim .hero-photo::before {
    -webkit-mask-image: radial-gradient(circle at var(--aq-x) var(--aq-y), #000 var(--aq-r), transparent calc(var(--aq-r) + 14%));
    mask-image: radial-gradient(circle at var(--aq-x) var(--aq-y), #000 var(--aq-r), transparent calc(var(--aq-r) + 14%));
    animation: aq-seche 1.3s cubic-bezier(.35, .25, .4, 1) .6s backwards;
  }
  html.anim .hero-photo::before { animation-duration: 1.1s; animation-delay: .95s; }

  /* Repli tout de suite (pas de WebGL, petite tache sur téléphone…) : un autre nom, l'animation repart */
  html.anim .hero[data-aquarelle="css"]::before { animation-name: aq-seche-tot; animation-delay: 0s; }
  html.anim .hero-photo[data-aquarelle="css"]::before { animation-name: aq-seche-tot; animation-delay: .35s; }

  /* WebGL aux commandes (le calque la recouvre), ou fini : la tache telle quelle, sans masque */
  html.anim :is(.hero, .hero-photo):is([data-aquarelle="gl"], [data-aquarelle="fini"])::before {
    -webkit-mask-image: none;
    mask-image: none;
    animation: none;
  }
  /* Contexte WebGL perdu en route : la tache revient en fondu */
  html.anim :is(.hero, .hero-photo)[data-aquarelle="perdu"]::before {
    -webkit-mask-image: none;
    mask-image: none;
    animation: aq-fondu .5s ease-out;
  }
}

/* Le pigment est dans les 60 premiers % du rayon : il s'y étale en 80 % du temps, le reste ferme le masque */
@keyframes aq-seche { from { --aq-r: -15%; transform: scale(.94); } 80% { --aq-r: 62%; } to { --aq-r: 140%; transform: none; } }
@keyframes aq-seche-tot { from { --aq-r: -15%; transform: scale(.94); } 80% { --aq-r: 62%; } to { --aq-r: 140%; transform: none; } }
@keyframes aq-fondu { from { opacity: 0; } }

@media print { .aq-calque { display: none; } }