/* ═══════════════════════════════════════════════════════════
   MK11 Korean Patch: Animation System
   Single source of truth for all entrance animations.
   Import order: after design-system.css, before style.css overrides.
   ═══════════════════════════════════════════════════════════ */

/* ── Timing tokens ──────────────────────────────────────── */
:root {
  --anim-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);   /* expo-out: fast start, elegant settle */
  --anim-ease-base:  cubic-bezier(0.4, 0, 0.2, 1);     /* material standard */
  --anim-dur-hero:   600ms;
  --anim-dur-scroll: 520ms;
  --anim-dist-sm:    16px;
  --anim-dist-md:    24px;
}

/* ── Keyframes ──────────────────────────────────────────── */
@keyframes mk-fade-up {
  from { opacity: 0; transform: translateY(var(--anim-dist-md)); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes mk-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes mk-slide-up-player {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* ── Hero: sequential entrance ──────────────────────────── */
/* animation-fill-mode: both → element starts invisible,
   holds final state after animation ends                   */

.hero-eyebrow {
  animation: mk-fade-up var(--anim-dur-hero) var(--anim-ease-out) 0ms both;
}
.hero-logo {
  animation: mk-fade-up var(--anim-dur-hero) var(--anim-ease-out) 160ms both;
}
.hero-title-kr {
  animation: mk-fade-up var(--anim-dur-hero) var(--anim-ease-out) 360ms both;
}
.hero-divider {
  animation: mk-fade-in var(--anim-dur-hero) var(--anim-ease-out) 440ms both;
}
.hero-subtitle {
  animation: mk-fade-up var(--anim-dur-hero) var(--anim-ease-out) 520ms both;
}
.hero-actions {
  animation: mk-fade-up var(--anim-dur-hero) var(--anim-ease-out) 680ms both;
}
.hero-platforms {
  animation: mk-fade-in var(--anim-dur-hero) var(--anim-ease-out) 840ms both;
}
.hero-legal {
  animation: mk-fade-in var(--anim-dur-hero) var(--anim-ease-out) 980ms both;
}
.hero-credit {
  animation: mk-fade-in var(--anim-dur-hero) var(--anim-ease-out) 1060ms both;
}

/* ── Music player: slides up after hero sequence ────────── */
.music-player {
  animation: mk-slide-up-player 400ms var(--anim-ease-out) 1200ms both;
}

/* ── Pause the hero entrance sequence while the splash (loading) is up ──
   loading.js removes .mk11-loading the moment the splash lifts, so the
   sequence plays from the start. Only applies when motion is allowed
   (reduced-motion already shows everything immediately). */
@media (prefers-reduced-motion: no-preference) {
  .mk11-loading .hero-eyebrow,
  .mk11-loading .hero-logo,
  .mk11-loading .hero-title-kr,
  .mk11-loading .hero-divider,
  .mk11-loading .hero-subtitle,
  .mk11-loading .hero-actions,
  .mk11-loading .hero-platforms,
  .mk11-loading .hero-legal,
  .mk11-loading .hero-credit,
  .mk11-loading .music-player {
    animation-play-state: paused;
  }
}

/* ── Scroll-triggered system ────────────────────────────── */
/* Base: invisible until JS adds .anim-visible              */
.anim-watch {
  opacity: 0;
  transform: translateY(var(--anim-dist-sm));
  transition:
    opacity   var(--anim-dur-scroll) var(--anim-ease-out),
    transform var(--anim-dur-scroll) var(--anim-ease-out);
}
.anim-watch.anim-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Grid stagger: siblings that all enter viewport at once   */
.anim-watch:nth-child(2) { transition-delay:  80ms; }
.anim-watch:nth-child(3) { transition-delay: 160ms; }
.anim-watch:nth-child(4) { transition-delay: 240ms; }
.anim-watch:nth-child(5) { transition-delay: 320ms; }
.anim-watch:nth-child(6) { transition-delay: 400ms; }

/* ── Live download counter ──────────────────────────────── */
.stat-item--live {
  position: relative;
}

/* Subtle gold glow pulse on the number */
.stat-item--live .stat-number {
  animation: live-pulse 3s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { color: var(--color-gold); }
  50%       { color: var(--color-gold-bright);
              text-shadow: 0 0 28px rgba(240,192,64,0.55); }
}

/* Red ● LIVE dot before the label */
.stat-item--live .stat-label::before {
  content: '●';
  font-size: 0.5em;
  color: var(--color-gold-bright);
  margin-right: 5px;
  display: inline-block;
  vertical-align: middle;
  animation: live-blink 1.8s ease-in-out infinite;
}
@keyframes live-blink {
  0%, 100% { opacity: 1;    transform: scale(1);   }
  50%       { opacity: 0.2; transform: scale(0.65); }
}

/* ✦ Sparkle particles (injected by JS) */
.live-spark {
  position: absolute;
  font-size: 10px;
  line-height: 1;
  color: var(--color-gold-bright);
  pointer-events: none;
  user-select: none;
  animation: spark-rise var(--spark-dur, 2s) ease-out infinite;
  animation-delay: var(--spark-delay, 0s);
  opacity: 0;
}
@keyframes spark-rise {
  0%   { opacity: 0;   transform: translate(0, 0)     scale(0.4); }
  20%  { opacity: 0.9; transform: translate(0, -10px)  scale(1);   }
  100% { opacity: 0;   transform: translate(0, -30px)  scale(0.6); }
}

/* Install cards: opacity-only (no translateY) to prevent scroll interference
   on mobile. translateY during active scroll causes momentary hitch on touch devices. */
.install-card.anim-watch             { transform: none; }
.install-card.anim-watch.anim-visible { transform: none; }

/* Restore the opacity fade: .install-card { transition: transform,border,shadow }
   (no opacity) overrode the reveal transition so the fade "snapped", and
   .install-card:not(.is-selected){opacity:.92} overrode the starting opacity:0
   so the unselected card (CLI) was stuck. Bring the fade back with enough
   specificity, while leaving transform/hover to the rules above to preserve
   the opacity-only design. */
@media (prefers-reduced-motion: no-preference) {
  .install-cards > .install-card.anim-watch {
    opacity: 0;
    transition: opacity var(--anim-dur-scroll) var(--anim-ease-out),
                transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  }
  .install-cards > .install-card.anim-watch.anim-visible { opacity: 1; }
  /* Keep the unselected card's 0.92 resting state */
  .install-cards > .install-card.anim-watch.anim-visible:not(.is-selected) { opacity: 0.92; }
}

/* ── Reduced motion: accessibility override ─────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow,
  .hero-logo,
  .hero-title-kr,
  .hero-divider,
  .hero-subtitle,
  .hero-actions,
  .hero-platforms,
  .hero-legal,
  .hero-credit {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .music-player {
    animation: none;
  }
  .anim-watch,
  .anim-watch.anim-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .stat-item--live .stat-number,
  .stat-item--live .stat-label::before,
  .live-spark {
    animation: none;
    opacity: 1;
  }
}