/* ==========================================================================
   Animation System
   Toutes les animations utilisent transform/opacity (perf 60fps) et
   respectent prefers-reduced-motion (voir base.css, règle globale).
   ========================================================================== */

/* --- Reveal on scroll (piloté par IntersectionObserver, js/main.js) --- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slower) var(--ease-out),
              transform var(--dur-slower) var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="left"].is-visible { transform: translateX(0); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="right"].is-visible { transform: translateX(0); }
[data-reveal="scale"] { transform: scale(0.92); }
[data-reveal="scale"].is-visible { transform: scale(1); }
[data-reveal="peek"] {
  transform: translate(28px, 16px) scale(0.75) rotate(10deg);
  transition: opacity var(--dur-slower) var(--ease-spring),
              transform var(--dur-slower) var(--ease-spring);
}
[data-reveal="peek"].is-visible { transform: translate(0, 0) scale(1) rotate(-4deg); }

/* Stagger : chaque enfant direct décalé de ~60ms via variable inline --i */
[data-reveal-group] > * {
  transition-delay: calc(var(--i, 0) * 70ms);
}

/* --- Hero --- */
.hero-eyebrow, .hero-title, .hero-text, .hero-actions {
  opacity: 0;
  transform: translateY(24px);
  animation: heroIn var(--dur-slower) var(--ease-out) forwards;
}
.hero-eyebrow { animation-delay: 0.05s; }
.hero-title   { animation-delay: 0.15s; }
.hero-text    { animation-delay: 0.28s; }
.hero-actions { animation-delay: 0.4s; }

@keyframes heroIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.hero-crumbs {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.hero-crumbs span {
  position: absolute;
  opacity: 0.7;
  animation: driftSlow 10s var(--ease-in-out) infinite;
}

@keyframes driftSlow {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(10px, -18px) rotate(12deg); }
}

/* --- Hero moulages : figurines qui entrent depuis les bords de l'écran --- */
.hero-moulages {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(10px, 3vw, 22px);
  padding-bottom: clamp(4px, 1.2vw, 12px);
  pointer-events: none;
}

.hero-moulage-slot {
  position: relative;
  flex-shrink: 0;
}

.hero-moulage-slot img {
  display: block;
  height: clamp(78px, 19vw, 130px);
  width: auto;
  max-width: none;
  opacity: 0;
  filter: drop-shadow(0 10px 14px rgba(46, 27, 18, 0.4));
  animation-duration: var(--dur-slower);
  animation-timing-function: var(--ease-spring);
  animation-fill-mode: forwards;
}
.hero-moulage-slot--edge-left img,
.hero-moulage-slot--edge-right img { animation-name: moulageRiseUp; }

.hero-moulage-slot--1 img { animation-delay: 1s; }
.hero-moulage-slot--2 img { animation-delay: 1.15s; }
.hero-moulage-slot--3 img { animation-delay: 1.3s; }
.hero-moulage-slot--4 img { animation-delay: 1.45s; }
.hero-moulage-slot--5 img { animation-delay: 1.6s; }

@keyframes moulageRiseUp {
  from { opacity: 0; transform: translateY(90%) scale(0.85) rotate(var(--rot, 0deg)); }
  to   { opacity: 1; transform: translateY(0) scale(1) rotate(var(--rot, 0deg)); }
}

/* Desktop : les figurines entrent depuis les bords gauche/droite de l'écran et se posent dans les coins du hero */
@media (min-width: 901px) {
  .hero-moulages {
    display: block;
    inset: 0;
    padding-bottom: 0;
    gap: 0;
  }
  .hero-moulage-slot { position: absolute; }

  /* 1 — Père Noël Randonneur (N115) : coin bas-gauche, à cheval sur le bord, en biais */
  .hero-moulage-slot--1 {
    left: -3%; bottom: -5%;
    --rot: 12deg;
  }
  .hero-moulage-slot--1 img { height: clamp(220px, 22vw, 340px); }

  /* 2 — Père Noël Skieur (N111) : bien droit, pieds à peine coupés en bas */
  .hero-moulage-slot--2 {
    left: 15%; bottom: -4%;
    --rot: 0deg;
  }
  .hero-moulage-slot--2 img { height: clamp(170px, 16vw, 260px); }

  /* 4 — Cigognes (N108-N109) : à peine coupées en bas */
  .hero-moulage-slot--4 {
    right: 18%; bottom: -2%;
    --rot: 0deg;
  }
  .hero-moulage-slot--4 img { height: clamp(130px, 12vw, 190px); }

  /* 5 — Pères Noël (N106-N107) : décalés plus à droite et plus bas */
  .hero-moulage-slot--5 {
    right: -1%; bottom: -2%;
    --rot: 0deg;
  }
  .hero-moulage-slot--5 img { height: clamp(158px, 14.5vw, 240px); }
}

/* Fondu de transition : porté par la section suivante, par-dessus le hero et les moulages */
.hero-bottom-fade {
  position: absolute;
  left: 0; right: 0;
  top: -6px;
  height: 8px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #EFDDBB);
  z-index: 5;
  pointer-events: none;
}
@media (min-width: 901px) {
  .hero-bottom-fade { top: -8px; height: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-crumbs span { animation: none; }
  .hero-eyebrow, .hero-title, .hero-text, .hero-actions {
    opacity: 1; transform: none; animation: none;
  }
  .hero-moulage-slot img { animation: none; opacity: 1; transform: rotate(var(--rot, 0deg)); }
}

.hero-lights {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero-glow {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 196, 120, 0.9) 0%, rgba(255, 170, 90, 0.4) 45%, rgba(255, 170, 90, 0) 75%);
  mix-blend-mode: screen;
  filter: blur(3px);
  animation-name: heroGlowBreathe;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.hero-glow--wide {
  filter: blur(10px);
  opacity: 0.5;
}

.hero-glow--spark {
  filter: blur(1px);
  animation-name: heroGlowTwinkle;
}

@keyframes heroGlowBreathe {
  0%, 100% { opacity: 0.35; transform: translate(-50%, -50%) scale(0.92); }
  50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.06); }
}

@keyframes heroGlowTwinkle {
  0%, 100% { opacity: 0.2; transform: translate(-50%, -50%) scale(0.7); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-glow { animation: none; opacity: 0.55; }
}

/* --- Hero : voile de profondeur (assombrit légèrement les bords) --- */
.hero-noise {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--color-cream) 0%, transparent 10px),
    linear-gradient(rgba(15, 8, 5, 0.5), rgba(15, 8, 5, 0.5)),
    radial-gradient(120% 90% at 50% 100%, rgba(0, 0, 0, 0.35), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* --- Hero : chute de neige apaisante --- */
.snowfall {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.snowflake {
  position: absolute;
  top: -5%;
  background: #FFFDF9;
  border-radius: 50%;
  animation: snowFall linear infinite;
  will-change: transform;
}
@keyframes snowFall {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(var(--drift, 0px), 55vh); }
  100% { transform: translate(0, 115vh); }
}
@media (prefers-reduced-motion: reduce) {
  .snowflake { display: none; }
}

/* --- Page load / mobile menu / drawer transitions handled via components.css --- */

/* --- Number counters (chiffres clés "depuis 1946", etc.) --- */
.counter { font-variant-numeric: tabular-nums; }

/* --- Image reveal mask (effet rideau) --- */
.mask-reveal {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
}
.mask-reveal::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--color-cream);
  transform-origin: right;
  transition: transform 0.9s var(--ease-out);
}
.mask-reveal.is-visible::after { transform: scaleX(0); }

/* --- Loading spinner (checkout) --- */
.spinner {
  width: 20px; height: 20px;
  border: 2.5px solid rgba(255,255,255,0.35);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Page transition fade-in (progressive enhancement) --- */
body.page-ready { animation: pageFade var(--dur-slow) var(--ease-out); }
@keyframes pageFade { from { opacity: 0; } to { opacity: 1; } }