/* ============================================================
   animations.css — keyframes, ambient motion, scroll reveals
   Only transform/opacity are animated (compositor-friendly).
   ============================================================ */

/* ---------- Keyframes ---------- */
@keyframes float {
  0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); }
  50%      { transform: translateY(-22px) translateX(8px) rotate(8deg); }
}
@keyframes drift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes shimmer {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.25); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Animated gradient surfaces ---------- */
.hero__name { background-size: 200% auto; }
.hero__portrait { animation: drift 9s var(--ease-soft) infinite; }
.music-toggle.is-playing { animation: pulse 1.6s var(--ease-soft) infinite; }
.scroll-cue span { animation: bob 1.8s var(--ease-soft) infinite; }

/* ---------- Floating decorative elements ---------- */
.deco-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.deco {
  position: absolute;
  font-size: var(--size, 1.5rem);
  top: var(--top, 10%);
  left: var(--left, 10%);
  opacity: 0.8;
  animation: float var(--spd, 8s) var(--ease-soft) infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform;
}
.deco--blur { filter: blur(1px); opacity: 0.55; }
.deco--sparkle { animation: shimmer var(--spd, 3s) ease-in-out infinite; }

/* Keep hero content above the deco layer */
.hero > .wrap, .hero > .scroll-cue { position: relative; z-index: 1; }

/* ---------- Cover entrance ---------- */
.cover__inner > * { animation: fadeUp var(--dur-slow) var(--ease-soft) both; }
.cover__seal  { animation-delay: 0.05s; }
.cover__kicker{ animation-delay: 0.18s; }
.cover__name  { animation-delay: 0.30s; }
.cover__sub   { animation-delay: 0.42s; }
.cover__cta   { animation-delay: 0.54s; }
.cover__hint  { animation-delay: 0.7s; }

/* ---------- Hero reveal (after Open Invitation) ---------- */
.hero [data-stagger] { opacity: 0; }
.is-revealed .hero [data-stagger] {
  animation: fadeUp var(--dur-slow) var(--ease-soft) both;
}
.is-revealed .hero [data-stagger="1"] { animation-delay: 0.15s; }
.is-revealed .hero [data-stagger="2"] { animation-delay: 0.32s; }
.is-revealed .hero [data-stagger="3"] { animation-delay: 0.49s; }
.is-revealed .hero [data-stagger="4"] { animation-delay: 0.66s; }
.is-revealed .hero [data-stagger="5"] { animation-delay: 0.9s; }

/* ---------- Scroll reveals ---------- */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity var(--dur-slow) var(--ease-soft),
              transform var(--dur-slow) var(--ease-soft);
}
.reveal.is-visible { opacity: 1; transform: none; }
/* Stagger children of a revealed group */
.reveal.is-visible [data-rstagger] { animation: fadeUp var(--dur-base) var(--ease-soft) both; }
.reveal.is-visible [data-rstagger="1"] { animation-delay: 0.08s; }
.reveal.is-visible [data-rstagger="2"] { animation-delay: 0.16s; }
.reveal.is-visible [data-rstagger="3"] { animation-delay: 0.24s; }
.reveal.is-visible [data-rstagger="4"] { animation-delay: 0.32s; }

/* Count tile pop when value changes (toggled via JS) */
.count-tile.is-tick .count-tile__num {
  animation: pulse 0.4s var(--ease-back);
}

/* ============================================================
   Reduced motion — calm everything
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .deco, .hero__portrait, .music-toggle.is-playing,
  .scroll-cue span, .count-tile.is-tick .count-tile__num {
    animation: none !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .lightbox { animation: none !important; }
  .cover__inner > *,
  .is-revealed .hero [data-stagger] {
    animation: none !important;
    opacity: 1 !important;
  }
  .hero [data-stagger] { opacity: 1; }
}