/* ═══════════════════════════════════════════════════════════
   RETRO by Oronzo — Animations
   ═══════════════════════════════════════════════════════════ */

/* ── Aurora / background drift ── */
@keyframes aurora-drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(40px, -30px) scale(1.08); }
  100% { transform: translate(-20px, 20px) scale(0.95); }
}
@keyframes aurora-pulse {
  0%, 100% { opacity: 0.2; transform: translate(-50%, -50%) scale(1); }
  50%       { opacity: 0.35; transform: translate(-50%, -50%) scale(1.15); }
}

/* ── Pulse glow (dot) ── */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(20,184,166,0.5); }
  60%       { box-shadow: 0 0 0 8px rgba(20,184,166,0); }
}

/* ── Floating badges ── */
@keyframes float-1 {
  0%, 100% { transform: translateY(0px) rotate(-1deg); }
  50%       { transform: translateY(-10px) rotate(1deg); }
}
@keyframes float-2 {
  0%, 100% { transform: translateY(0px) rotate(1deg); }
  50%       { transform: translateY(-14px) rotate(-1.5deg); }
}
@keyframes float-3 {
  0%, 100% { transform: translateY(0px) rotate(-0.5deg); }
  50%       { transform: translateY(-8px) rotate(1.5deg); }
}

/* ── Scroll hint bounce ── */
@keyframes fade-bounce {
  0%, 100% { opacity: 0.4; transform: translateX(-50%) translateY(0); }
  50%       { opacity: 0.8; transform: translateX(-50%) translateY(6px); }
}

/* ── Board card fly-in ── */
@keyframes card-fly-in {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.card-anim-1 { animation: card-fly-in 0.5s cubic-bezier(0.22,1,0.36,1) 0.6s both; }
.card-anim-2 { animation: card-fly-in 0.5s cubic-bezier(0.22,1,0.36,1) 0.8s both; }
.card-anim-3 { animation: card-fly-in 0.5s cubic-bezier(0.22,1,0.36,1) 1.0s both; }
.card-anim-4 { animation: card-fly-in 0.5s cubic-bezier(0.22,1,0.36,1) 1.2s both; }
.card-anim-5 { animation: card-fly-in 0.5s cubic-bezier(0.22,1,0.36,1) 1.4s both; }
.card-anim-6 { animation: card-fly-in 0.5s cubic-bezier(0.22,1,0.36,1) 1.6s both; }
.card-anim-7 { animation: card-fly-in 0.5s cubic-bezier(0.22,1,0.36,1) 1.8s both; }

/* ── Demo card fly-in ── */
.demo-card-in-1 { animation: card-fly-in 0.5s cubic-bezier(0.22,1,0.36,1) 0.2s both; }
.demo-card-in-2 { animation: card-fly-in 0.5s cubic-bezier(0.22,1,0.36,1) 0.4s both; }
.demo-card-in-3 { animation: card-fly-in 0.5s cubic-bezier(0.22,1,0.36,1) 0.6s both; }
.demo-card-in-4 { animation: card-fly-in 0.5s cubic-bezier(0.22,1,0.36,1) 0.8s both; }

/* ── Typing dots ── */
@keyframes typing-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%            { transform: translateY(-4px); opacity: 1; }
}

/* ── Live blink ── */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* ── Spin (timer icon) ── */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Shimmer on gradient text ── */
@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.gradient-text {
  background-size: 200% auto;
  animation: gradient-shift 4s ease-in-out infinite;
}

/* ── Hero headline word reveal ── */
.hero-headline .line-1,
.hero-headline .line-2 {
  display: block; overflow: hidden;
}
.hero-headline .line-1 .word,
.hero-headline .line-2 .word {
  display: inline-block;
  animation: word-slide-up 0.7s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes word-slide-up {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Navbar logo appear ── */
.nav-brand {
  animation: fade-down 0.6s cubic-bezier(0.22,1,0.36,1) 0.1s both;
}
.nav-links .nav-link {
  animation: fade-down 0.5s cubic-bezier(0.22,1,0.36,1) both;
}
.nav-links .nav-link:nth-child(1) { animation-delay: 0.15s; }
.nav-links .nav-link:nth-child(2) { animation-delay: 0.2s;  }
.nav-links .nav-link:nth-child(3) { animation-delay: 0.25s; }
.nav-links .nav-link:nth-child(4) { animation-delay: 0.3s;  }
.nav-actions { animation: fade-down 0.5s cubic-bezier(0.22,1,0.36,1) 0.35s both; }

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

/* ── Stat number count-up style (just a pulse on arrival) ── */
@keyframes stat-pop {
  0%   { transform: scale(0.8); }
  100% { transform: scale(1); }
}

/* ── Section eyebrow slide ── */
.section-eyebrow {
  animation: none; /* triggered by reveal class */
}

/* ── Feature card border-glow on hover ── */
.feature-card {
  --glow-x: 50%; --glow-y: 50%;
}
.feature-card::after {
  content: ''; position: absolute; inset: -1px;
  border-radius: inherit;
  background: radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(124,58,237,0.35), transparent 60%);
  opacity: 0; transition: opacity 0.3s; pointer-events: none;
  z-index: -1;
}
.feature-card:hover::after { opacity: 1; }

/* ── Testimonial card shimmer on hover ── */
.testimonial-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg, transparent 40%, rgba(124,58,237,0.06));
  opacity: 0; transition: opacity 0.4s; pointer-events: none;
}
.testimonial-card { position: relative; overflow: hidden; }
.testimonial-card:hover::before { opacity: 1; }

/* ── CTA card sparkle orbits ── */
.cta-card::after {
  content: ''; position: absolute; inset: -2px; border-radius: inherit;
  background: linear-gradient(135deg, rgba(124,58,237,0.3), rgba(20,184,166,0.3), rgba(168,85,247,0.3));
  opacity: 0; z-index: -1; transition: opacity 0.4s;
  animation: cta-border-spin 4s linear infinite;
}
.cta-card:hover::after { opacity: 1; }
@keyframes cta-border-spin {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

/* ── Demo timer ring countdown ── */
.ring-fill { animation: ring-count 60s linear forwards; }
@keyframes ring-count {
  from { stroke-dashoffset: 30; }
  to   { stroke-dashoffset: 100; }
}

/* ── Smooth scroll progress ── */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200;
  background: var(--col-border); overflow: hidden;
}
.scroll-progress-fill {
  height: 100%; width: 0%;
  background: var(--gradient-primary);
  transition: width 0.1s linear;
}

/* ── Marquee scroll ── */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Button gradient animation ── */
@keyframes btn-gradient {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ── Button shine sweep ── */
@keyframes btn-shine {
  0%        { transform: translateX(-150%) skewX(-15deg); }
  35%, 100% { transform: translateX(250%)  skewX(-15deg); }
}

/* ── Tilt card entrance ── */
@keyframes tilt-in {
  from { opacity: 0; transform: perspective(1000px) rotateY(-6deg) translateY(20px); }
  to   { opacity: 1; transform: perspective(1000px) rotateY(0deg) translateY(0); }
}

/* ── Cursor ring appear ── */
@keyframes cursor-appear {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ── Glow pulse for stat numbers ── */
@keyframes glow-pulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(124,58,237,0.2)); }
  50%       { filter: drop-shadow(0 0 22px rgba(124,58,237,0.5)); }
}
.stat-number.counted {
  animation: stat-pop 0.4s cubic-bezier(0.34,1.56,0.64,1), glow-pulse 3s ease-in-out infinite 0.5s;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}