/* ============================================================
   PIKAX LABS — ANIMATIONS & MOTION SYSTEM
   © 2026 PIKAX Labs. All rights reserved.
   ============================================================ */

/* ── Page Load Sequence ───────────────────────────────────── */

/* Announcement banner slides down */
@keyframes banner-slide-down {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* Nav fades in from top */
@keyframes nav-fade-in {
  from { transform: translateY(-20px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* Hero title word-by-word reveal */
@keyframes hero-word-reveal {
  from { transform: translateY(60px) rotate(3deg); opacity: 0; clip-path: inset(0 0 100% 0); }
  to   { transform: translateY(0)    rotate(0deg); opacity: 1; clip-path: inset(0 0 0% 0); }
}

/* Fade up — general purpose */
@keyframes fade-up {
  from { transform: translateY(32px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Fade in */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Scale in */
@keyframes scale-in {
  from { transform: scale(0.88); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* Slide in from left */
@keyframes slide-in-left {
  from { transform: translateX(-48px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

/* Slide in from right */
@keyframes slide-in-right {
  from { transform: translateX(48px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* Blur in */
@keyframes blur-in {
  from { filter: blur(16px); opacity: 0; transform: scale(1.04); }
  to   { filter: blur(0px);  opacity: 1; transform: scale(1); }
}

/* ── Page Load Application ────────────────────────────────── */
.announcement-banner {
  animation: banner-slide-down 500ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 100ms;
}

.nav {
  animation: nav-fade-in 500ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 150ms;
}

/* Hero sequence — staggered */
.hero-eyebrow {
  animation: fade-up 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 300ms;
}

.hero-title {
  animation: fade-up 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 400ms;
}

.hero-subtitle {
  animation: fade-up 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 550ms;
}

.hero-ctas {
  animation: fade-up 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 680ms;
}

.hero-coin-wrap {
  animation: scale-in 800ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: 800ms;
}

.hero-scroll-indicator {
  animation: fade-in 600ms ease both;
  animation-delay: 1200ms;
}

/* ── Scroll Reveal Variants ───────────────────────────────── */

/* Base reveal — used by JS IntersectionObserver adding .revealed */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity  700ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Reveal from left */
.reveal-left {
  opacity: 0;
  transform: translateX(-48px);
  transition:
    opacity  700ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Reveal from right */
.reveal-right {
  opacity: 0;
  transform: translateX(48px);
  transition:
    opacity  700ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Reveal scale */
.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition:
    opacity  700ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays for grid children */
.reveal-delay-1  { transition-delay: 80ms;  }
.reveal-delay-2  { transition-delay: 160ms; }
.reveal-delay-3  { transition-delay: 240ms; }
.reveal-delay-4  { transition-delay: 320ms; }
.reveal-delay-5  { transition-delay: 400ms; }
.reveal-delay-6  { transition-delay: 480ms; }

/* ── Continuous Ambient Animations ────────────────────────── */

/* Gold coin floating + gentle rotation */
@keyframes coin-float {
  0%   { transform: translateY(0px)   rotate(-2deg); }
  33%  { transform: translateY(-14px) rotate(1deg);  }
  66%  { transform: translateY(-8px)  rotate(3deg);  }
  100% { transform: translateY(0px)   rotate(-2deg); }
}

/* Coin glow ring spinning */
@keyframes coin-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Hero background glow breathing */
@keyframes hero-glow-pulse {
  0%,  100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1);   }
  50%        { opacity: 1;   transform: translate(-50%, -50%) scale(1.15); }
}

/* Gradient text cycling */
@keyframes gradient-shift {
  0%   { background-position: 0%   center; }
  50%  { background-position: 100% center; }
  100% { background-position: 0%   center; }
}

/* Green live dot pulse */
@keyframes pulse-green {
  0%,  100% { opacity: 1;   box-shadow: 0 0 6px #00E676; }
  50%        { opacity: 0.5; box-shadow: 0 0 18px #00E676, 0 0 36px rgba(0,230,118,0.3); }
}

/* Red urgency dot pulse */
@keyframes pulse-red {
  0%,  100% { opacity: 1;   box-shadow: 0 0 6px #FF4444; }
  50%        { opacity: 0.4; box-shadow: 0 0 18px #FF4444; }
}

/* Purple timeline dot pulse */
@keyframes pulse-purple {
  0%,  100% { box-shadow: 0 0 8px  rgba(108,99,255,0.5); }
  50%        { box-shadow: 0 0 24px rgba(108,99,255,0.9); }
}

/* Gold border glow loop */
@keyframes glow-border {
  0%,  100% { border-color: rgba(252,209,22,0.2); box-shadow: 0 0 12px rgba(252,209,22,0.1); }
  50%        { border-color: rgba(252,209,22,0.6); box-shadow: 0 0 30px rgba(252,209,22,0.3); }
}

/* Waitlist section glow border */
.waitlist-section {
  animation: glow-border 4s ease infinite;
}

/* Modal icon float */
@keyframes float-icon {
  0%,  100% { transform: translateY(0px);  }
  50%        { transform: translateY(-8px); }
}

/* Floating +PKX badge lifecycle */
@keyframes badge-float {
  0%   { transform: translateY(0px)   translateX(0px)  rotate(-2deg); opacity: 1;   }
  20%  { transform: translateY(-10px) translateX(4px)  rotate(1deg);  opacity: 1;   }
  80%  { transform: translateY(-50px) translateX(8px)  rotate(3deg);  opacity: 0.4; }
  100% { transform: translateY(-70px) translateX(12px) rotate(6deg);  opacity: 0;   }
}

/* Scroll indicator bouncing arrow */
@keyframes bounce-arrow {
  0%,  100% { transform: translateX(-50%) translateY(0px); }
  50%        { transform: translateX(-50%) translateY(10px); }
}

/* Progress bar shimmer sweep */
@keyframes shimmer-progress {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%);  }
}

/* Orbiting badge around phone */
@keyframes orbit-cw {
  from { transform: rotate(0deg)   translateX(150px) rotate(0deg);   }
  to   { transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}

@keyframes orbit-ccw {
  from { transform: rotate(0deg)    translateX(130px) rotate(0deg);  }
  to   { transform: rotate(-360deg) translateX(130px) rotate(360deg); }
}

/* Shimmer on card skeleton */
@keyframes shimmer-card {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* Timeline traveling dot */
@keyframes timeline-travel {
  0%   { top: 0%;   opacity: 1;   }
  90%  { opacity: 1;              }
  100% { top: 100%; opacity: 0;   }
}

/* Announcement banner ticker */
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Counter number flip */
@keyframes number-flip {
  0%   { transform: translateY(0);    opacity: 1; }
  40%  { transform: translateY(-20px); opacity: 0; }
  60%  { transform: translateY(20px);  opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}

/* Checkmark draw (success state) */
@keyframes check-draw {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0;   }
}

/* Circle scale (success state) */
@keyframes circle-scale {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* Countdown digit flip */
@keyframes digit-flip {
  0%   { transform: rotateX(0deg);   }
  50%  { transform: rotateX(90deg);  }
  51%  { transform: rotateX(-90deg); }
  100% { transform: rotateX(0deg);   }
}

/* Star particle twinkle */
@keyframes star-twinkle {
  0%,  100% { opacity: 0.2; transform: scale(1);    }
  50%        { opacity: 1;   transform: scale(1.4);  }
}

/* Gradient mesh rotation */
@keyframes mesh-rotate {
  from { transform: translate(-50%, -50%) rotate(0deg);   }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Card shimmer hover overlay */
@keyframes card-shimmer {
  0%   { left: -100%; }
  100% { left:  200%; }
}

/* Roadmap progress fill animation */
@keyframes progress-fill-in {
  from { width: 0%; }
}

/* PKX balance tick up in phone mockup */
@keyframes balance-tick {
  0%   { content: "1,370"; }
  25%  { content: "1,380"; }
  50%  { content: "1,390"; }
  75%  { content: "1,380"; }
  100% { content: "1,370"; }
}

/* ── Applied Animation Classes ────────────────────────────── */

/* Ticker banner */
.ticker-inner {
  display: inline-flex;
  gap: var(--sp-12);
  animation: ticker-scroll 30s linear infinite;
  white-space: nowrap;
}

/* Gradient text */
.text-gradient {
  background: linear-gradient(135deg, #FCD116 0%, #FF8C00 40%, #FFD700 70%, #FCD116 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 5s ease infinite;
}

/* Glow border on waitlist + cards */
.glow-animate {
  animation: glow-border 3s ease infinite;
}

/* Coin */
.pkx-coin {
  animation: coin-float 4s ease-in-out infinite;
}

.pkx-coin::after {
  animation: coin-spin 6s linear infinite;
}

/* Floating PKX badge animation */
.floating-pkx-badge {
  animation: badge-float 3s ease-in-out infinite;
}

.floating-pkx-badge:nth-child(2) { animation-delay: 1s;   animation-duration: 3.5s; }
.floating-pkx-badge:nth-child(3) { animation-delay: 2s;   animation-duration: 2.8s; }
.floating-pkx-badge:nth-child(4) { animation-delay: 0.5s; animation-duration: 4s;   }

/* Phone orbit badges */
.orbit-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -18px;
}

.orbit-badge:nth-child(1) { animation: orbit-cw  8s linear infinite; }
.orbit-badge:nth-child(2) { animation: orbit-ccw 11s linear infinite; }
.orbit-badge:nth-child(3) { animation: orbit-cw  14s linear infinite; animation-delay: -4s; }

/* Success checkmark */
.success-circle {
  animation: circle-scale 400ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.success-check {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: check-draw 500ms ease 300ms both;
}

/* Countdown digit */
.countdown-digit.flip {
  animation: digit-flip 300ms ease;
}

/* Timeline dot pulse */
.timeline-dot.in-progress {
  animation: pulse-purple 2s ease infinite;
}

/* ── Hover Micro-interactions ─────────────────────────────── */

/* Card shimmer on hover */
.card {
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 255, 255, 0.04) 50%,
    transparent 80%
  );
  transition: none;
  pointer-events: none;
  z-index: 1;
}

.card:hover::before {
  animation: card-shimmer 600ms ease forwards;
}

/* Button glow pulse on hover */
.btn-primary {
  position: relative;
  overflow: hidden;
}

.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255,255,255,0.15);
  opacity: 0;
  transition: opacity var(--t-fast);
}

.btn-primary:hover::after {
  opacity: 1;
}

/* Download button arrow nudge */
.download-btn:hover .download-btn-icon {
  animation: bounce-arrow 600ms ease infinite;
  display: inline-block;
}

/* Social card icon glow on hover */
.social-card:hover .social-icon-wrap {
  animation: pulse-green 1.5s ease infinite;
}

/* Nav link underline slide */
.nav-links a {
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 12px;
  right: 12px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
}

/* Blog card read more arrow nudge */
.blog-card:hover .blog-arrow {
  transform: translateX(4px);
  transition: transform var(--t-fast);
}

/* ── Section-Specific Animation Orchestration ─────────────── */

/* Stats section — stagger counters */
.stats-grid .stat-card:nth-child(1) { transition-delay: 0ms;   }
.stats-grid .stat-card:nth-child(2) { transition-delay: 120ms; }
.stats-grid .stat-card:nth-child(3) { transition-delay: 240ms; }

/* Steps grid stagger */
.steps-grid .step-card:nth-child(1) { transition-delay: 0ms;   }
.steps-grid .step-card:nth-child(2) { transition-delay: 150ms; }
.steps-grid .step-card:nth-child(3) { transition-delay: 300ms; }

/* Blog cards stagger */
.blog-grid .blog-card:nth-child(1) { transition-delay: 0ms;   }
.blog-grid .blog-card:nth-child(2) { transition-delay: 80ms;  }
.blog-grid .blog-card:nth-child(3) { transition-delay: 160ms; }
.blog-grid .blog-card:nth-child(4) { transition-delay: 240ms; }
.blog-grid .blog-card:nth-child(5) { transition-delay: 320ms; }
.blog-grid .blog-card:nth-child(6) { transition-delay: 400ms; }

/* Social cards stagger */
.social-grid .social-card:nth-child(1) { transition-delay: 0ms;   }
.social-grid .social-card:nth-child(2) { transition-delay: 100ms; }
.social-grid .social-card:nth-child(3) { transition-delay: 200ms; }
.social-grid .social-card:nth-child(4) { transition-delay: 300ms; }

/* Perk cards stagger */
.waitlist-perks .perk-card:nth-child(1) { transition-delay: 0ms;   }
.waitlist-perks .perk-card:nth-child(2) { transition-delay: 120ms; }
.waitlist-perks .perk-card:nth-child(3) { transition-delay: 240ms; }

/* Ecosystem locked cards stagger */
.ecosystem-locked-grid > *:nth-child(1) { transition-delay: 0ms;   }
.ecosystem-locked-grid > *:nth-child(2) { transition-delay: 100ms; }
.ecosystem-locked-grid > *:nth-child(3) { transition-delay: 200ms; }
.ecosystem-locked-grid > *:nth-child(4) { transition-delay: 300ms; }

/* Roadmap timeline items */
.timeline-item:nth-child(1)  { transition-delay: 0ms;   }
.timeline-item:nth-child(2)  { transition-delay: 80ms;  }
.timeline-item:nth-child(3)  { transition-delay: 160ms; }
.timeline-item:nth-child(4)  { transition-delay: 240ms; }
.timeline-item:nth-child(5)  { transition-delay: 320ms; }
.timeline-item:nth-child(6)  { transition-delay: 400ms; }
.timeline-item:nth-child(7)  { transition-delay: 480ms; }
.timeline-item:nth-child(8)  { transition-delay: 560ms; }
.timeline-item:nth-child(9)  { transition-delay: 640ms; }

/* ── Progress Bar Animated Fill ───────────────────────────── */
.progress-fill {
  position: relative;
  overflow: hidden;
}

.progress-fill::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.35) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer-progress 2.5s ease-in-out infinite;
}

/* ── Phone Mockup Internal Animations ─────────────────────── */
@keyframes phone-balance-up {
  0%    { content: "1,370 PKX"; }
  33%   { content: "1,380 PKX"; }
  66%   { content: "1,390 PKX"; }
  100%  { content: "1,370 PKX"; }
}

@keyframes mining-pulse {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%       { opacity: 0.7; transform: scale(0.95); }
}

.phone-mining-indicator {
  animation: mining-pulse 2s ease infinite;
}

/* Mining timer countdown in phone (decorative) */
@keyframes timer-tick {
  0%   { opacity: 1; }
  49%  { opacity: 1; }
  50%  { opacity: 0; }
  99%  { opacity: 0; }
  100% { opacity: 1; }
}

.phone-timer-colon {
  animation: timer-tick 1s step-end infinite;
}

/* ── Streak Day Cards Animation ───────────────────────────── */
@keyframes streak-check {
  0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
  70%  { transform: scale(1.2) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg);   opacity: 1; }
}

.streak-day.revealed .streak-check-icon {
  animation: streak-check 400ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.streak-day:nth-child(1) .streak-check-icon { animation-delay: 100ms; }
.streak-day:nth-child(2) .streak-check-icon { animation-delay: 200ms; }
.streak-day:nth-child(3) .streak-check-icon { animation-delay: 300ms; }
.streak-day:nth-child(4) .streak-check-icon { animation-delay: 400ms; }
.streak-day:nth-child(5) .streak-check-icon { animation-delay: 500ms; }
.streak-day:nth-child(6) .streak-check-icon { animation-delay: 600ms; }
.streak-day:nth-child(7) .streak-check-icon { animation-delay: 700ms; }

/* ── Whitepaper TOC Active Scroll ─────────────────────────── */
.wp-toc-list a {
  position: relative;
}

.wp-toc-list a.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 70%;
  background: var(--gold);
  border-radius: var(--r-full);
  animation: fade-in 200ms ease both;
}

/* ── Modal Animation ──────────────────────────────────────── */
.modal-backdrop {
  animation: none;
}

.modal-backdrop.open {
  animation: fade-in 200ms ease both;
}

.modal-backdrop.open .modal {
  animation: scale-in 350ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: 50ms;
}

/* Modal star particles overlay */
.modal-particles {
  position: absolute;
  inset: 0;
  border-radius: var(--r-2xl);
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.modal-particle {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0;
  animation: modal-particle-float linear infinite;
}

@keyframes modal-particle-float {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.2; }
  100% { transform: translateY(-200px) translateX(30px); opacity: 0; }
}

/* ── Toast Animation ──────────────────────────────────────── */
.toast {
  animation: none;
}

.toast.show {
  animation: slide-in-right 400ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.toast.hide {
  animation: slide-out-right 300ms ease both;
}

@keyframes slide-out-right {
  from { transform: translateX(0);         opacity: 1; }
  to   { transform: translateX(120%);      opacity: 0; }
}

/* ── Reduced Motion Override ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .text-gradient          { animation: none; -webkit-text-fill-color: var(--gold); }
  .pkx-coin               { animation: none; }
  .pkx-coin::after        { animation: none; }
  .ticker-inner           { animation: none; }
  .waitlist-section       { animation: none; }
  .glow-animate           { animation: none; }
  .floating-pkx-badge     { animation: none; }
  .live-dot               { animation: none; }
  .urgency-dot            { animation: none; }
  .timeline-dot.in-progress { animation: none; }
  .hero-eyebrow,
  .hero-title,
  .hero-subtitle,
  .hero-ctas,
  .hero-coin-wrap,
  .hero-scroll-indicator,
  .announcement-banner,
  .nav                    { animation: none; opacity: 1; transform: none; }
  .progress-fill::before  { animation: none; }
  .orbit-badge            { animation: none; }
}