/* ==================================================================
   MOUVEMENT 2D — « Carnet de bord de l'eau ».
   Parti pris : sobre et « premium ». On garde l'eau vivante (bassin,
   vagues, apparition douce) et on évite les effets tape-à-l'œil sur les
   boutons ou les liens. TOUT est coupé par prefers-reduced-motion.
   ================================================================== */

/* ---------- Apparition des sections (léger, en cascade) ----------
   Le masquage n'est actif QUE si JavaScript est présent (.js sur <html>).
   Sans JS, les contenus restent parfaitement visibles. */
.js .reveal { opacity: 0; transform: translateY(16px); will-change: opacity, transform; }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}

/* ---------- Fondu discret d'entrée de page ---------------------- */
.page-fade { animation: pagein .5s var(--ease) both; }
@keyframes pagein { from { opacity: 0; } to { opacity: 1; } }

/* ================= Scène du bassin (héro) ======================== */

/* Tracé de la ligne d'eau (pathLength=1 → longueur normalisée). */
.pool-line {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: draw 1.8s var(--ease) .4s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Caustiques : nappes de lumière qui dérivent lentement. */
.caustic { will-change: transform; }
.caustic--1 { animation: drift 11s linear infinite; }
.caustic--2 { animation: drift 16s linear infinite reverse; }
.caustic--3 { animation: drift 20s linear infinite; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-240px); } }

/* Éclats de soleil : scintillement doux. */
.glint { transform-box: fill-box; transform-origin: center; }
.glint--a { animation: twinkle 4s ease-in-out infinite; }
.glint--b { animation: twinkle 5.4s ease-in-out infinite .8s; }
.glint--c { animation: twinkle 3.2s ease-in-out infinite .4s; }
@keyframes twinkle {
  0%, 100% { opacity: .3; transform: scale(.75); }
  50%      { opacity: .95; transform: scale(1.15); }
}

/* Bouée : flottement + inclinaison, décalée par le pointeur (--bx/--by JS). */
.buoy {
  transform: translate(calc(var(--bx, 0) * 1px), calc(var(--by, 0) * 1px));
  animation: bob 5.5s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}
@keyframes bob {
  0%, 100% { transform: translate(calc(var(--bx,0)*1px), calc(var(--by,0)*1px)) rotate(-2.5deg); }
  50%      { transform: translate(calc(var(--bx,0)*1px), calc(var(--by,0)*1px - 6px)) rotate(2.5deg); }
}
.buoy-shadow { animation: shadowpulse 5.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes shadowpulse {
  0%, 100% { transform: scaleX(1); opacity: .28; }
  50%      { transform: scaleX(.85); opacity: .18; }
}

/* Onde émise périodiquement par la bouée. */
.buoy-ripple { transform-box: fill-box; transform-origin: center; animation: ripple 5.5s ease-out infinite 1.2s; }
@keyframes ripple {
  0%   { transform: scale(.7); opacity: .5; }
  70%  { opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* Clin d'œil discret au survol de la scène. */
.hero__art:hover .buoy__eye { animation: wink 1.2s ease; transform-box: fill-box; transform-origin: center; }
@keyframes wink { 0%, 80%, 100% { transform: scaleY(1); } 42% { transform: scaleY(.14); } }

/* Goutte qui tombe et rebondit, très discrète. */
.droplet { transform-box: fill-box; transform-origin: center; animation: drop 7s ease-in infinite; opacity: 0; }
@keyframes drop {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  6%   { opacity: .85; }
  22%  { transform: translateY(210px) scale(1); opacity: .85; }
  26%  { transform: translateY(210px) scale(1.6, .5); opacity: .4; }
  30%  { transform: translateY(198px) scale(.8, 1.2); opacity: 0; }
  100% { opacity: 0; }
}

/* ================= Vagues animées (séparateurs) ================= */
/* Trois nappes translucides qui dérivent à des vitesses différentes :
   effet de profondeur, mouvement lent et gracieux. */
.wave-divider { position: relative; line-height: 0; overflow: hidden; }
/* Chaque calque SVG fait 2× la largeur du conteneur (2 périodes identiques).
   On le décale d'exactement -50 % de sa propre largeur = UNE période :
   boucle sans couture, pleine largeur, aucune extrémité visible. */
.wave-layer {
  position: absolute; top: 0; left: 0; display: block;
  width: 200%; max-width: none; height: 100%; will-change: transform;
}
.wave-layer--1 { animation: waveflow 26s linear infinite; }
.wave-layer--2 { animation: waveflow 19s linear infinite reverse; }
.wave-layer--3 { animation: waveflow 34s linear infinite; }
@keyframes waveflow { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ================= Micro-interactions (calmes) ================== */
/* Transitions douces uniquement — pas d'effets clinquants. */
.card { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }

/* Ouverture d'une prestation (accordéon) : fondu discret du détail. */
.service[open] .service__detail { animation: revealDetail .35s var(--ease); }
@keyframes revealDetail {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- */
/* ARRÊT COMPLET si l'utilisateur préfère moins de mouvement.        */
/* ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .page-fade,
  .pool-line, .caustic, .glint, .buoy, .buoy-shadow, .buoy-ripple, .droplet,
  .wave-layer, .service[open] .service__detail {
    animation: none !important;
  }
  .service__chevron { transition: none !important; }
  /* Sans animation, on fige les calques sur la partie couvrante gauche. */
  .wave-layer { transform: translateX(0) !important; }
  .pool-line { stroke-dashoffset: 0 !important; }
  .droplet, .buoy-ripple { opacity: 0 !important; }
  .card { transition: none; }
}