/**
 * zTyping — sitewide motion system
 * Scroll reveals · text animations · special hover cards
 */
body.page-arcade {
  --motion-ease: cubic-bezier(0.19, 1, 0.22, 1);
  --motion-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
  --motion-dur: 0.7s;
}

/* —— Page enter —— */
body.page-arcade #portalRoot {
  animation: zm-page-in 0.55s var(--motion-ease) both;
}

@keyframes zm-page-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* —— Scroll reveals —— */
body.page-arcade .reveal-on-scroll,
body.page-arcade .zm-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--motion-dur) var(--motion-ease),
    transform var(--motion-dur) var(--motion-ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

body.page-arcade .zm-reveal-left {
  opacity: 0;
  transform: translateX(-28px);
  transition:
    opacity var(--motion-dur) var(--motion-ease),
    transform var(--motion-dur) var(--motion-ease);
  transition-delay: var(--reveal-delay, 0ms);
}

body.page-arcade .zm-reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition:
    opacity var(--motion-dur) var(--motion-ease),
    transform var(--motion-dur) var(--motion-ease);
  transition-delay: var(--reveal-delay, 0ms);
}

body.page-arcade .reveal-on-scroll.is-visible,
body.page-arcade .zm-reveal.is-visible,
body.page-arcade .zm-reveal-left.is-visible,
body.page-arcade .zm-reveal-scale.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger children when parent is visible */
body.page-arcade .zm-stagger > * {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.55s var(--motion-ease),
    transform 0.55s var(--motion-ease);
}

body.page-arcade .zm-stagger.is-visible > *:nth-child(1) { transition-delay: 40ms; }
body.page-arcade .zm-stagger.is-visible > *:nth-child(2) { transition-delay: 90ms; }
body.page-arcade .zm-stagger.is-visible > *:nth-child(3) { transition-delay: 140ms; }
body.page-arcade .zm-stagger.is-visible > *:nth-child(4) { transition-delay: 190ms; }
body.page-arcade .zm-stagger.is-visible > *:nth-child(5) { transition-delay: 240ms; }
body.page-arcade .zm-stagger.is-visible > *:nth-child(6) { transition-delay: 290ms; }
body.page-arcade .zm-stagger.is-visible > *:nth-child(7) { transition-delay: 340ms; }
body.page-arcade .zm-stagger.is-visible > *:nth-child(8) { transition-delay: 390ms; }
body.page-arcade .zm-stagger.is-visible > *:nth-child(n + 9) { transition-delay: 430ms; }

body.page-arcade .zm-stagger.is-visible > * {
  opacity: 1;
  transform: none;
}

/* —— Text: word / line reveal —— */
body.page-arcade .zm-text .zm-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  margin-right: 0.28em;
}

body.page-arcade .zm-text .zm-word > span {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition:
    transform 0.7s var(--motion-ease),
    opacity 0.55s var(--motion-ease);
  transition-delay: calc(var(--wi, 0) * 55ms + 80ms);
}

body.page-arcade .zm-text.is-visible .zm-word > span,
body.page-arcade .zm-text.zm-text-ready .zm-word > span {
  transform: translateY(0);
  opacity: 1;
}

/* Accent shimmer */
body.page-arcade .accent,
body.page-arcade span.accent {
  background-size: 200% 100%;
  animation: zm-shimmer 5s ease-in-out infinite;
}

/* Keep gradient on nested animated words inside accents */
body.page-arcade .accent .zm-word > span,
body.page-arcade span.accent .zm-word > span {
  background: var(--grad-text);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: zm-shimmer 5s ease-in-out infinite;
}

@keyframes zm-shimmer {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Kicker pulse line */
body.page-arcade .kicker {
  animation: zm-kicker-in 0.8s var(--motion-ease) both;
}

@keyframes zm-kicker-in {
  from {
    opacity: 0;
    letter-spacing: 0.32em;
  }
  to {
    opacity: 1;
    letter-spacing: 0.18em;
  }
}

/* —— Special hover cards —— */
body.page-arcade .zm-hover-card,
body.page-arcade .arcade-grid .card,
body.page-arcade .guide-card,
body.page-arcade .featured-guide,
body.page-arcade .related-card,
body.page-arcade .faq-item,
body.page-arcade .value-card,
body.page-arcade .team-card,
body.page-arcade .stat-card,
body.page-arcade .content-block,
body.page-arcade .info-card {
  --mx: 50%;
  --my: 50%;
  position: relative;
  transition:
    transform 0.45s var(--motion-ease),
    box-shadow 0.45s var(--motion-ease),
    border-color 0.35s ease,
    background-color 0.35s ease;
}

body.page-arcade .zm-hover-card::after,
body.page-arcade .guide-card::after,
body.page-arcade .featured-guide::after,
body.page-arcade .related-card::after,
body.page-arcade .value-card::after,
body.page-arcade .team-card::after,
body.page-arcade .stat-card::after,
body.page-arcade .info-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    180px circle at var(--mx) var(--my),
    rgba(255, 63, 164, 0.16),
    transparent 65%
  );
  transition: opacity 0.35s ease;
  z-index: 0;
}

body.page-arcade .guide-card > *,
body.page-arcade .featured-guide > *,
body.page-arcade .related-card > *,
body.page-arcade .value-card > *,
body.page-arcade .team-card > *,
body.page-arcade .stat-card > *,
body.page-arcade .info-card > * {
  position: relative;
  z-index: 1;
}

body.page-arcade .zm-hover-card:hover,
body.page-arcade .guide-card:hover,
body.page-arcade .featured-guide:hover,
body.page-arcade .related-card:hover,
body.page-arcade .value-card:hover,
body.page-arcade .team-card:hover,
body.page-arcade .stat-card:hover,
body.page-arcade .info-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 63, 164, 0.35);
  box-shadow:
    0 22px 44px -22px rgba(4, 1, 10, 0.85),
    0 0 0 1px rgba(155, 107, 255, 0.12);
}

body.page-arcade .zm-hover-card:hover::after,
body.page-arcade .guide-card:hover::after,
body.page-arcade .featured-guide:hover::after,
body.page-arcade .related-card:hover::after,
body.page-arcade .value-card:hover::after,
body.page-arcade .team-card:hover::after,
body.page-arcade .stat-card:hover::after,
body.page-arcade .info-card:hover::after {
  opacity: 1;
}

/* FAQ accordion soft lift */
body.page-arcade .faq-item,
body.page-arcade details.faq-item,
body.page-arcade .faq-shell details {
  transition:
    transform 0.35s var(--motion-ease),
    border-color 0.3s ease,
    box-shadow 0.35s var(--motion-ease);
}

body.page-arcade .faq-shell details:hover,
body.page-arcade .faq-item:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 63, 164, 0.28);
  box-shadow: 0 16px 32px -24px rgba(4, 1, 10, 0.7);
}

/* —— Buttons / CTAs —— */
body.page-arcade .btn-primary,
body.page-arcade .arcade-grid .play:not(.disabled),
body.page-arcade .hdr-btn-primary {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.35s var(--motion-spring),
    box-shadow 0.35s ease,
    filter 0.3s ease;
}

body.page-arcade .btn-primary::before,
body.page-arcade .arcade-grid .play:not(.disabled)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 30%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 70%
  );
  transform: translateX(-120%);
  transition: transform 0.65s var(--motion-ease);
  pointer-events: none;
}

body.page-arcade .btn-primary:hover::before,
body.page-arcade .arcade-grid .play:not(.disabled):hover::after {
  transform: translateX(120%);
}

body.page-arcade .btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
}

body.page-arcade .btn-primary:active {
  transform: translateY(0) scale(0.98);
}

/* Chips / tabs */
body.page-arcade .chip,
body.page-arcade .hub-tab {
  transition:
    transform 0.25s var(--motion-ease),
    background 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease;
}

body.page-arcade .chip:hover,
body.page-arcade .hub-tab:hover {
  transform: translateY(-2px);
}

body.page-arcade .hub-tab.is-active {
  animation: zm-tab-glow 2.4s ease-in-out infinite;
}

@keyframes zm-tab-glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 63, 164, 0);
  }
  50% {
    box-shadow: 0 0 18px -4px rgba(255, 63, 164, 0.45);
  }
}

/* —— Links —— */
body.page-arcade main a:not(.btn-primary):not(.btn-ghost):not(.play):not(.hub-tab):not(.guide-card):not(.related-card):not(.card) {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: background-size 0.3s var(--motion-ease), color 0.25s ease;
}

body.page-arcade main a:not(.btn-primary):not(.btn-ghost):not(.play):not(.hub-tab):not(.guide-card):not(.related-card):not(.card):hover {
  background-size: 100% 1px;
}

/* —— Hero lead fade —— */
body.page-arcade .lead,
body.page-arcade .page-summary,
body.page-arcade .guides-hero .lead,
body.page-arcade .faq-hero .lead,
body.page-arcade .about-hero .lead {
  animation: zm-fade-up 0.85s var(--motion-ease) 0.25s both;
}

@keyframes zm-fade-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* —— Header settle —— */
body.page-arcade #header.hub-header {
  animation: zm-header-in 0.55s var(--motion-ease) both;
}

@keyframes zm-header-in {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* —— Reduced motion —— */
@media (prefers-reduced-motion: reduce) {
  body.page-arcade #portalRoot,
  body.page-arcade .kicker,
  body.page-arcade .lead,
  body.page-arcade .page-summary,
  body.page-arcade .guides-hero .lead,
  body.page-arcade .faq-hero .lead,
  body.page-arcade .about-hero .lead,
  body.page-arcade #header.hub-header,
  body.page-arcade .accent,
  body.page-arcade .hub-tab.is-active {
    animation: none !important;
  }

  body.page-arcade .reveal-on-scroll,
  body.page-arcade .zm-reveal,
  body.page-arcade .zm-reveal-left,
  body.page-arcade .zm-reveal-scale,
  body.page-arcade .zm-stagger > *,
  body.page-arcade .zm-text .zm-word > span {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  body.page-arcade .zm-hover-card:hover,
  body.page-arcade .guide-card:hover,
  body.page-arcade .featured-guide:hover,
  body.page-arcade .related-card:hover,
  body.page-arcade .value-card:hover,
  body.page-arcade .team-card:hover,
  body.page-arcade .stat-card:hover,
  body.page-arcade .info-card:hover,
  body.page-arcade .faq-shell details:hover,
  body.page-arcade .btn-primary:hover,
  body.page-arcade .chip:hover,
  body.page-arcade .hub-tab:hover {
    transform: none !important;
  }

  body.page-arcade .zm-hover-card::after,
  body.page-arcade .guide-card::after,
  body.page-arcade .featured-guide::after,
  body.page-arcade .related-card::after,
  body.page-arcade .value-card::after,
  body.page-arcade .team-card::after,
  body.page-arcade .stat-card::after,
  body.page-arcade .info-card::after,
  body.page-arcade .btn-primary::before,
  body.page-arcade .arcade-grid .play:not(.disabled)::after {
    display: none !important;
  }
}

/* ==========================================================================
   Modern Cyber-Arcade Motion Engine
   ========================================================================== */

/* Ambient Aurora Glow */
@keyframes auroraDrift {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 0.45;
  }
  33% {
    transform: translate(30px, -25px) rotate(4deg) scale(1.08);
    opacity: 0.65;
  }
  66% {
    transform: translate(-25px, 20px) rotate(-3deg) scale(0.96);
    opacity: 0.5;
  }
  100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 0.45;
  }
}

/* Glowing Neon Breathing Border */
@keyframes neonBorderPulse {
  0%, 100% {
    border-color: rgba(168, 85, 247, 0.35);
    box-shadow: 0 0 20px -4px rgba(168, 85, 247, 0.25), inset 0 0 12px -2px rgba(168, 85, 247, 0.15);
  }
  50% {
    border-color: rgba(236, 72, 153, 0.55);
    box-shadow: 0 0 28px -2px rgba(236, 72, 153, 0.35), inset 0 0 18px 0 rgba(236, 72, 153, 0.2);
  }
}

/* Live Badge Pulsing Dot */
@keyframes liveDotPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  }
  50% {
    transform: scale(1.15);
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
  }
}

/* Smooth Card Shine Sweep */
@keyframes cardShineSweep {
  0% {
    transform: translateX(-120%) skewX(-20deg);
  }
  100% {
    transform: translateX(220%) skewX(-20deg);
  }
}

/* Subtle Float Animation */
@keyframes floatSlow {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* Glow Badge Pulse */
@keyframes badgeGlowPulse {
  0%, 100% {
    filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.4));
  }
  50% {
    filter: drop-shadow(0 0 14px rgba(236, 72, 153, 0.7));
  }
}

/* Micro-interaction Helper Classes */
.zm-glow-hover {
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease;
}

.zm-glow-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px -12px rgba(168, 85, 247, 0.35), 0 0 0 1px rgba(168, 85, 247, 0.5);
  border-color: rgba(168, 85, 247, 0.6) !important;
}

.zm-btn-press {
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s ease;
}

.zm-btn-press:active {
  transform: scale(0.96) !important;
}