/* ============ VAGUES DU HERO ============ */
.vague { animation: deferler linear infinite; will-change: transform; }
.vague--1 { animation-duration: 16s; opacity: .55; }
.vague--2 { animation-duration: 10s; animation-direction: reverse; opacity: .75; }
.vague--3 { animation-duration: 7s; }
@keyframes deferler {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============ APPARITION DES ESCALES (parchemin qui se déroule) ============ */
.escale {
  opacity: 0;
  transform: translateY(24px);
  clip-path: inset(0 0 100% 0);
  transition: opacity .8s ease, transform .8s ease, clip-path 1.1s cubic-bezier(.2, .7, .2, 1);
}
.escale.visible {
  opacity: 1;
  transform: none;
  clip-path: inset(-60px -10% -80px -10%);
}

/* ============ COFFRE ============ */
.coffre__couvercle { transition: transform 1s cubic-bezier(.3, 1.4, .5, 1) .4s; }
.escale--coffre.visible .coffre__couvercle { transform: rotateX(-110deg); }

/* Les pièces naissent invisibles et se lèvent une à une quand le coffre s'ouvre — mais seulement dans la page, où il
   y a un coffre à ouvrir. Le panneau du voyage recopie ce contenu sans son escale : sans cette portée, les pièces y
   restaient à `opacity: 0` pour toujours et le coffre n'y montrait que ses trois titres. Le défaut était antérieur à
   la refonte des pièces, et c'est pour ça que celle-ci n'y changeait rien. */
.escale--coffre .piece { opacity: 0; }
.escale--coffre.visible .piece {
  opacity: 1;
  animation: piece-apparait .5s cubic-bezier(.3, 1.6, .5, 1) backwards;
  animation-delay: calc(.6s + var(--i, 0) * 50ms);
}
@keyframes piece-apparait {
  from { opacity: 0; transform: translateY(18px) scale(.6); }
  to   { opacity: 1; transform: none; }
}

/* ============ REFLET DES CARTES (tilt) ============ */
.escale__parchemin::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  clip-path: var(--decoupe, none);
  background: linear-gradient(115deg, transparent calc(var(--reflet, 50%) - 25%), rgba(255, 255, 255, .10) var(--reflet, 50%), transparent calc(var(--reflet, 50%) + 25%));
}
@media (pointer: coarse), (max-width: 720px) { .escale__parchemin::after { display: none; } }

/* ============ REFLET DES PIÈCES D'OR ============ */
.piece::before { animation: reflet-or 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.4s); }
@keyframes reflet-or {
  0%, 70% { background-position: 100% 0, 0 0; }
  100%    { background-position: -100% 0, 0 0; }
}

/* ============ MICRO-INTERACTIONS ============ */
.sceau--secoue { animation: secouer .35s ease-in-out 1; }
@keyframes secouer { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-4deg) scale(1.04); } 70% { transform: rotate(3deg); } }
@keyframes poussiere {
  from { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  to   { transform: translate(calc(-50% + var(--px, 0px)), calc(-50% + var(--py, -20px))) scale(.3); opacity: 0; }
}

/* ============ HALO (lumière qui suit la souris) ============ */
@keyframes vaciller {
  0%   { opacity: .85; }
  37%  { opacity: 1; }
  61%  { opacity: .78; }
  100% { opacity: .95; }
}
@keyframes vaciller-echelle {
  0%   { transform: scale(1) translate(0, 0); }
  45%  { transform: scale(1.03) translate(.4%, -.3%); }
  100% { transform: scale(1.01) translate(-.3%, .4%); }
}

/* ============ MOUVEMENT RÉDUIT ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .vague, .piece::before { animation: none !important; }
  .sceau--secoue, .poussiere, .escale--coffre.visible .piece { animation: none !important; }
  .piece { opacity: 1; transition: none; }
  .piece::before, .piece:hover::before { transition: none; transform: translateY(.1em); }
  .escale { opacity: 1; transform: none; clip-path: none; transition: none; }
  .escale__parchemin::after { display: none; }
  .coffre__couvercle { transform: rotateX(-110deg); transition: none; }
  .route__masque { stroke-dashoffset: 0 !important; }
  .boussole__aiguille { transition: none; }
}