/* ============================================================
   K LmofWY — Animations stylesheet
   Twelve keyframes + reusable classes (see ui/animations-spec.md)
   ============================================================ */

/* ---------- Tokens shared with main ---------- */
:root {
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-material: cubic-bezier(.4, 0, .2, 1);
}

/* ---------- 1. Fade-up ---------- */
@keyframes fade-up {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.anim-fade-up { animation: fade-up .7s var(--ease-out) both; }

/* IO reveal default state: hidden until .is-in */
[data-anim] { opacity: 0; transform: translate3d(0, 24px, 0); will-change: transform, opacity; }
[data-anim].is-in { animation: fade-up .7s var(--ease-out) both; }

/* ---------- 2. Stagger word reveal ---------- */
.anim-word-reveal { display: inline-block; }
.anim-word-reveal > * {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  will-change: transform, opacity;
}
.anim-word-reveal.is-in > * {
  animation: fade-up .6s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}

/* Stagger helper (any container) */
.stagger > * {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
}
.stagger.is-in > * {
  animation: fade-up .6s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 80ms);
}

/* ---------- 3. 3D Tilt ---------- */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform .2s var(--ease-material);
  will-change: transform;
}
.tilt-card__shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%),
              rgba(255, 255, 255, .55), transparent 40%);
  opacity: 0;
  transition: opacity .3s var(--ease-out);
  mix-blend-mode: screen;
}
.tilt-card:hover .tilt-card__shine { opacity: 1; }

/* ---------- 4. Magnetic hover ---------- */
.magnetic {
  transition: transform .22s var(--ease-out);
  will-change: transform;
}

/* ---------- 5. Parallax scaffolding ---------- */
.parallax { will-change: transform; }

/* ---------- 6. Gradient hue shift ---------- */
@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.anim-gradient-shift {
  background-size: 200% 200%;
  animation: gradient-shift 8s linear infinite;
}

/* ---------- 7. Mascot pop ---------- */
@keyframes mascot-pop {
  0%   { opacity: 0; transform: scale(.6) translateY(40px); }
  60%  { opacity: 1; transform: scale(1.05) translateY(-6px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.anim-mascot-pop { animation: mascot-pop .9s var(--ease-spring) both; }

[data-pop] { opacity: 0; }
[data-pop].is-in { animation: mascot-pop .9s var(--ease-spring) both; }

/* ---------- 8. Sparkle twinkle ---------- */
@keyframes twinkle {
  0%, 100% { opacity: .3; transform: scale(.85); }
  50%      { opacity: 1;  transform: scale(1.1); }
}
.anim-twinkle {
  animation: twinkle 2s ease-in-out infinite;
  will-change: opacity, transform;
  transform-origin: center;
}

/* ---------- 9. Float Y bob ---------- */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.anim-float {
  animation: float 4s ease-in-out infinite;
  will-change: transform;
}

/* Float-deep — bigger amplitude, slower */
@keyframes float-deep {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-18px) rotate(2deg); }
}
.anim-float-deep {
  animation: float-deep 6s ease-in-out infinite;
  will-change: transform;
}

/* ---------- 10. Marquee ---------- */
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.anim-marquee {
  animation: marquee 30s linear infinite;
  will-change: transform;
}

/* ---------- 11. Page enter ---------- */
@keyframes page-enter {
  from { opacity: 0; transform: translateY(8px); filter: blur(4px); }
  to   { opacity: 1; transform: none;            filter: blur(0); }
}
.page-enter { animation: page-enter .5s var(--ease-out) both; }

/* ---------- 12. Number counter (CSS hook) ---------- */
.anim-count { font-variant-numeric: tabular-nums; }

/* ---------- Permanent background ambient ---------- */
@keyframes aurora-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2%, -1%, 0) scale(1.04); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
.anim-aurora {
  animation: aurora-drift 14s ease-in-out infinite;
  will-change: transform;
}

@keyframes drift-slow {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(-12px, 8px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
.anim-drift-slow {
  animation: drift-slow 16s ease-in-out infinite;
}

@keyframes orbit-dot {
  0%   { transform: rotate(0deg) translateX(20px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(20px) rotate(-360deg); }
}

/* ---------- Reduced motion guard ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-anim], [data-pop] { opacity: 1 !important; transform: none !important; }
  .anim-marquee { animation: none !important; transform: none !important; }
  .anim-float, .anim-float-deep, .anim-aurora, .anim-drift-slow, .anim-twinkle, .anim-gradient-shift {
    animation: none !important; transform: none !important;
  }
}