/* ==============================================
   ArcadeHub — Load-in Animations
   Mirrors the framer-motion patterns used in
   the crispy-arcade-play base44 reference.
   ============================================== */

/* ── Keyframes ─────────────────────────────── */

@keyframes anim-fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes anim-fade-down {
  from { opacity: 0; transform: translateY(-22px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes anim-fade-left {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes anim-fade-right {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

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

@keyframes anim-scale-in {
  from { opacity: 0; transform: scale(0.93); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes anim-scale-up {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Base: invisible until JS marks visible ── */
[data-animate] {
  opacity: 0;
}

/* Respect prefers-reduced-motion — show everything instantly */
@media (prefers-reduced-motion: reduce) {
  [data-animate],
  [data-animate].anim-visible {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}

/* ── Visible state — triggered by IntersectionObserver ── */
[data-animate="fade-up"].anim-visible {
  animation: anim-fade-up 0.52s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--anim-delay, 0ms);
}

[data-animate="fade-down"].anim-visible {
  animation: anim-fade-down 0.52s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--anim-delay, 0ms);
}

[data-animate="fade-left"].anim-visible {
  animation: anim-fade-left 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--anim-delay, 0ms);
}

[data-animate="fade-right"].anim-visible {
  animation: anim-fade-right 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--anim-delay, 0ms);
}

[data-animate="fade-in"].anim-visible {
  animation: anim-fade-in 0.45s ease both;
  animation-delay: var(--anim-delay, 0ms);
}

[data-animate="scale-in"].anim-visible {
  animation: anim-scale-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: var(--anim-delay, 0ms);
}

[data-animate="scale-up"].anim-visible {
  animation: anim-scale-up 0.52s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--anim-delay, 0ms);
}

/* ── Stagger helper (applied to parent) ─────── */
/* Children inherit their index-based delay via JS injecting --anim-delay */

/* ── Hero-specific: faster, no delay ────────── */
.hero-animate {
  animation: anim-fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-animate-delay-1 { animation-delay: 0.08s; }
.hero-animate-delay-2 { animation-delay: 0.16s; }
.hero-animate-delay-3 { animation-delay: 0.24s; }
.hero-animate-delay-4 { animation-delay: 0.32s; }
.hero-animate-delay-5 { animation-delay: 0.40s; }

/* ── Stat counter pulse on load ─────────────── */
@keyframes anim-stat-pop {
  0%   { opacity: 0; transform: scale(0.8) translateY(8px); }
  60%  { transform: scale(1.06) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.anim-stat-pop {
  animation: anim-stat-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: var(--anim-delay, 0ms);
}

/* ── Card hover lift (unified) ───────────────── */
.anim-card-hover {
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.22s ease;
}
.anim-card-hover:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 20px hsl(160, 100%, 50%, 0.12);
}

/* ── Navbar shimmer on load ─────────────────── */
@keyframes anim-nav-slide {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.anim-nav-load {
  animation: anim-nav-slide 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ── Section divider wipe-in ─────────────────── */
@keyframes anim-line-wipe {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}
.anim-line-wipe {
  animation: anim-line-wipe 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--anim-delay, 0ms);
}

/* ── Page-enter: auto-plays on every page load ── */
/* Targets the main content wrapper on every route */
@keyframes page-enter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.page-content,
.admin-main {
  animation: page-enter 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .page-content,
  .admin-main {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}