/* =============================================================
   assets/css/animations.css
   AdNeutral — Keyframes, Entrance Animations & Motion Utilities
   Load order: variables.css → reset.css → components.css
               → layout.css → animations.css
   ============================================================= */


/* ─────────────────────────────────────────────────────────────
   KEYFRAME LIBRARY
   ───────────────────────────────────────────────────────────── */

/* ── Entrance: Fade Up (hero stagger, section intros) ─────── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Entrance: Fade Down (dropdowns, tooltips) ────────────── */
@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Entrance: Fade In (overlays, toasts) ─────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Entrance: Fade Out ───────────────────────────────────── */
@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ── Entrance: Scale In (modals, popovers) ────────────────── */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ── Entrance: Scale Up (badge pop, success state) ────────── */
@keyframes scaleUp {
  0%   { transform: scale(0.8); opacity: 0; }
  70%  { transform: scale(1.06); }
  100% { transform: scale(1);   opacity: 1; }
}

/* ── Entrance: Slide In from Right (toasts) ───────────────── */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(calc(100% + var(--space-4)));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ── Entrance: Slide In from Left ─────────────────────────── */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(calc(-100% - var(--space-4)));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ── Entrance: Slide Up from Bottom (cookie banner, sheets) ─ */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Entrance: Blur In (hero headline) ───────────────────────*/
@keyframes blurIn {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

/* ── Continuous: Spin (loader, spinner) ───────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Continuous: Pulse (live dot, status indicator) ──────── */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ── Continuous: Ping (realtime indicator ring) ──────────── */
@keyframes ping {
  75%, 100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

/* ── Continuous: Shimmer (skeleton loader) ────────────────── */
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Continuous: Float (hero panel, decorative elements) ──── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* ── Continuous: Glow Pulse (accent glow border) ─────────── */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px color-mix(in srgb, var(--color-accent) 10%, transparent); }
  50%       { box-shadow: 0 0 40px color-mix(in srgb, var(--color-accent) 25%, transparent); }
}

/* ── Continuous: Counter Tick (number incrementing) ──────── */
@keyframes countFlip {
  0%   { transform: translateY(0);    opacity: 1; }
  45%  { transform: translateY(-60%); opacity: 0; }
  55%  { transform: translateY(60%);  opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}

/* ── Continuous: Gradient Shift (accent glow bg) ─────────── */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Continuous: Blink (cursor in terminal/code demo) ─────── */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Continuous: Dash (animated dashed connector) ─────────── */
@keyframes dashMove {
  to { stroke-dashoffset: -24; }
}

/* ── Typing: Typewriter (hero label) ─────────────────────── */
@keyframes typewriter {
  from { width: 0; }
  to   { width: 100%; }
}

/* ── Progress: Fill (reading bar) ────────────────────────── */
@keyframes progressFill {
  from { width: 0%; }
  to   { width: var(--progress-target, 100%); }
}

/* ── Shake (form validation error) ───────────────────────── */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  15%       { transform: translateX(-6px); }
  30%       { transform: translateX(6px); }
  45%       { transform: translateX(-4px); }
  60%       { transform: translateX(4px); }
  75%       { transform: translateX(-2px); }
  90%       { transform: translateX(2px); }
}

/* ── Bounce In (success checkmark) ───────────────────────── */
@keyframes bounceIn {
  0%   { transform: scale(0.3); opacity: 0; }
  50%  { transform: scale(1.1); opacity: 1; }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1);   opacity: 1; }
}

/* ── Collapse (accordion close) ──────────────────────────── */
@keyframes collapse {
  from { max-height: var(--accordion-height, 500px); opacity: 1; }
  to   { max-height: 0; opacity: 0; }
}

/* ── Expand (accordion open) ─────────────────────────────── */
@keyframes expand {
  from { max-height: 0; opacity: 0; }
  to   { max-height: var(--accordion-height, 500px); opacity: 1; }
}


/* ─────────────────────────────────────────────────────────────
   ANIMATE-* UTILITY CLASSES
   Page-load stagger for hero section (spec from .cursorrules)
   ───────────────────────────────────────────────────────────── */

.animate-fade-up {
  animation: fadeUp 0.4s ease forwards;
}

.animate-fade-in {
  animation: fadeIn 0.4s ease forwards;
}

.animate-fade-down {
  animation: fadeDown 0.3s ease forwards;
}

.animate-scale-in {
  animation: scaleIn 0.3s var(--transition-spring) forwards;
}

.animate-scale-up {
  animation: scaleUp 0.4s var(--transition-spring) forwards;
}

.animate-blur-in {
  animation: fadeUp 0.4s ease forwards;
}

.animate-slide-right {
  animation: slideInRight 0.35s var(--transition-spring) forwards;
}

.animate-slide-left {
  animation: slideInLeft 0.35s var(--transition-spring) forwards;
}

.animate-slide-up {
  animation: slideUp 0.4s var(--transition-spring) forwards;
}

.animate-shake {
  animation: shake 0.5s ease forwards;
}

.animate-bounce-in {
  animation: bounceIn 0.5s var(--transition-spring) forwards;
}

.animate-float {
  /* disabled — no decorative floating on product UI */
}

.animate-pulse {
  animation: pulse 2s ease infinite;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.animate-glow-pulse {
  /* disabled — no pulsing glow on product UI */
}


/* ─────────────────────────────────────────────────────────────
   STAGGER DELAY CLASSES
   Used for hero stagger, feature bento, pricing cards, etc.
   ───────────────────────────────────────────────────────────── */

.delay-0  { animation-delay: 0ms;   }
.delay-1  { animation-delay: 100ms; }
.delay-2  { animation-delay: 200ms; }
.delay-3  { animation-delay: 300ms; }
.delay-4  { animation-delay: 400ms; }
.delay-5  { animation-delay: 500ms; }
.delay-6  { animation-delay: 600ms; }
.delay-7  { animation-delay: 700ms; }
.delay-8  { animation-delay: 800ms; }

/* Stagger for children automatically (e.g., feature cards) */
.stagger-children > *:nth-child(1) { animation-delay: 0ms;   }
.stagger-children > *:nth-child(2) { animation-delay: 80ms;  }
.stagger-children > *:nth-child(3) { animation-delay: 160ms; }
.stagger-children > *:nth-child(4) { animation-delay: 240ms; }
.stagger-children > *:nth-child(5) { animation-delay: 320ms; }
.stagger-children > *:nth-child(6) { animation-delay: 400ms; }
.stagger-children > *:nth-child(7) { animation-delay: 480ms; }


/* ─────────────────────────────────────────────────────────────
   SCROLL FADE-IN (single global observer in main.js — initFadeInUp)
   Legacy .reveal* classes kept for markup compatibility; no hide state.
   ───────────────────────────────────────────────────────────── */

.fade-in-up {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal,
.reveal-fade,
.reveal-left,
.reveal-right,
.reveal-scale,
.reveal.visible,
.reveal-fade.visible,
.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Delay variants on reveal elements — applied per child in staggered grids */
.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; }


/* ─────────────────────────────────────────────────────────────
   HERO — HEADLINE STAGGER
   Applied in index.html to .hero-badge, .hero-headline,
   .hero-subheadline, .hero-ctas, .hero-social-proof
   ───────────────────────────────────────────────────────────── */

/* Hero motion: section uses .fade-in-up only — no per-element entrance */
.hero-badge,
.hero-headline,
.hero-subheadline,
.hero-ctas,
.hero-social-proof,
.hero-panel-wrap {
  animation: none;
  opacity: 1;
}


/* ─────────────────────────────────────────────────────────────
   HERO — BEFORE / AFTER PANEL TOGGLE
   JS toggles .show-after every 4 seconds
   CSS in layout.css handles the opacity transition
   Additional glow animation on the "after" state:
   ───────────────────────────────────────────────────────────── */

.hero-panel.show-after {
  animation: none;
}


/* ─────────────────────────────────────────────────────────────
   LIVE COUNTER — NUMBER FLIP
   Applied to .counter-number spans via JS
   ───────────────────────────────────────────────────────────── */

.counter-flipping {
  animation: countFlip 0.35s ease forwards;
}


/* ─────────────────────────────────────────────────────────────
   NAV — SCROLL TRANSITION
   The .scrolled class is toggled by main.js
   Backdrop/border transition defined in components.css;
   this file adds the logo micro-animation:
   ───────────────────────────────────────────────────────────── */

.nav-logo {
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.nav-logo:active {
  transform: scale(0.97);
}


/* ─────────────────────────────────────────────────────────────
   CARD HOVER LIFT
   Reusable class for any card-like element.
   Components use it via their own :hover rules;
   this class can be applied directly in HTML too.
   ───────────────────────────────────────────────────────────── */

.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: none;
}

.hover-glow {
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.hover-glow:hover {
  box-shadow: var(--shadow-glow);
  border-color: var(--border-accent);
}

.hover-accent {
  transition: color var(--transition-fast);
}

.hover-accent:hover {
  color: var(--accent);
}


/* ─────────────────────────────────────────────────────────────
   ACCENT GRADIENT TEXT
   Used on hero headline accent word, section eyebrows
   ───────────────────────────────────────────────────────────── */

/* Flat accent text — no gradient / clip (site-wide) */
.text-gradient {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: unset;
  color: var(--color-accent);
  animation: none;
}


/* ─────────────────────────────────────────────────────────────
   LIVE REALTIME PING DOT
   The green dot on the analytics "X visitors online" bar
   ───────────────────────────────────────────────────────────── */

.ping-dot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

.ping-dot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  background: var(--success);
  animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.ping-dot::after {
  content: '';
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--success);
  z-index: 1;
}


/* ─────────────────────────────────────────────────────────────
   STEP NUMBER — ANIMATED ENTRANCE
   How It Works step circles animate in on scroll
   ───────────────────────────────────────────────────────────── */

.step-number {
  transition: background var(--transition-base), box-shadow var(--transition-base),
              transform var(--transition-base);
}

.how-step:hover .step-number {
  background: var(--accent-glow-strong);
  box-shadow: 0 0 0 4px var(--accent-muted);
  transform: scale(1.08);
}


/* ─────────────────────────────────────────────────────────────
   PLATFORM ITEM — HOVER POP
   ───────────────────────────────────────────────────────────── */

.platform-item {
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.platform-item:hover {
  transform: translateY(-3px);
}

.platform-logo {
  transition: none;
}

.platform-item:hover .platform-logo {
  transform: none;
}


/* ─────────────────────────────────────────────────────────────
   BENTO CARDS — STAGGERED REVEAL
   Applied via JS once the section enters the viewport.
   Each .bento-card gets .reveal + a delay class.
   ───────────────────────────────────────────────────────────── */

.bento-card {
  transition: transform var(--transition-base), border-color var(--transition-base),
              box-shadow var(--transition-base);
}

.comparison-table tbody tr {
  transition: background var(--transition-fast);
}

.comparison-table tbody tr.reveal,
.comparison-table tbody tr.reveal.visible {
  opacity: 1;
  transform: none;
}


/* ─────────────────────────────────────────────────────────────
   FORM ELEMENTS — FOCUS TRANSITION
   Smooth focus ring appearance
   ───────────────────────────────────────────────────────────── */

.input,
.textarea,
.select {
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast),
              background var(--transition-fast);
}

/* Error shake — applied via JS on validation failure */
.input.shake,
.textarea.shake {
  animation: shake 0.5s ease forwards;
  border-color: var(--error);
}


/* ─────────────────────────────────────────────────────────────
   BUTTON — CLICK RIPPLE EFFECT
   JS injects a .ripple span on click, positioned via JS
   ───────────────────────────────────────────────────────────── */

.btn-primary,
.btn-secondary {
  position: relative;
  overflow: hidden;
}

.ripple {
  position: absolute;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.18);
  transform: scale(0);
  animation: rippleExpand 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes rippleExpand {
  to {
    transform: scale(4);
    opacity: 0;
  }
}


/* ─────────────────────────────────────────────────────────────
   NAV LINK — UNDERLINE SLIDE
   Decorative animated underline on nav links
   ───────────────────────────────────────────────────────────── */

.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: var(--space-2);
  right: var(--space-2);
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transition-fast);
}

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


/* ─────────────────────────────────────────────────────────────
   ARTICLE CARD — IMAGE ZOOM
   Cover image zooms slightly on card hover
   ───────────────────────────────────────────────────────────── */

.article-card {
  overflow: hidden;
}

.article-card-image {
  transition: transform 0.4s ease;
}

.article-card:hover .article-card-image {
  transform: scale(1.03);
}


/* ─────────────────────────────────────────────────────────────
   BLOG FEATURED CARD — IMAGE ZOOM
   ───────────────────────────────────────────────────────────── */

.blog-featured-image {
  transition: transform 0.5s ease;
}

.blog-featured-card:hover .blog-featured-image {
  transform: scale(1.03);
}


/* ─────────────────────────────────────────────────────────────
   TOC — ACTIVE LINK TRANSITION
   Smooth highlight as reading position changes
   ───────────────────────────────────────────────────────────── */

.toc-link {
  transition: color var(--transition-fast), border-left-color var(--transition-fast),
              background var(--transition-fast), padding-left var(--transition-fast);
}


/* ─────────────────────────────────────────────────────────────
   ADMIN — SIDEBAR LINK ACTIVE INDICATOR
   ───────────────────────────────────────────────────────────── */

.admin-nav-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 60%;
  background: var(--accent);
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
  transition: transform var(--transition-fast);
}

.admin-nav-link {
  position: relative;
}

.admin-nav-link.active::before {
  transform: translateY(-50%) scaleY(1);
}


/* ─────────────────────────────────────────────────────────────
   ADMIN — REGENERATION PROGRESS
   Fills a progress bar while articles are being rebuilt
   ───────────────────────────────────────────────────────────── */

.regen-progress-bar {
  height: 3px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
  display: none;
}

.regen-progress-bar.active {
  display: block;
}

.regen-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-full);
  width: 0%;
  transition: width 0.3s ease;
  box-shadow: 0 0 6px color-mix(in srgb, var(--color-accent) 50%, transparent);
}


/* ─────────────────────────────────────────────────────────────
   PAGE TRANSITION
   Subtle fade when navigating between admin pages
   ───────────────────────────────────────────────────────────── */

.admin-content {
  animation: fadeIn 0.25s ease forwards;
}


/* ─────────────────────────────────────────────────────────────
   MICRO-INTERACTIONS — COPY LINK BUTTON
   Checkmark → "Copied!" state in share buttons
   ───────────────────────────────────────────────────────────── */

.share-btn .icon-check {
  display: none;
}

.share-btn--copied .icon-copy {
  display: none;
}

.share-btn--copied .icon-check {
  display: block;
  animation: bounceIn 0.3s var(--transition-spring) forwards;
}


/* ─────────────────────────────────────────────────────────────
   MICRO-INTERACTION — TOGGLE SWITCH
   Thumb slide transition (defined in components.css);
   additional spring feel:
   ───────────────────────────────────────────────────────────── */

.toggle-thumb {
  transition: transform 0.25s var(--transition-spring),
              background var(--transition-fast);
}


/* ─────────────────────────────────────────────────────────────
   SCROLL-TRIGGERED COUNTER
   JS sets opacity to 0 initially, then runs the increment.
   This class marks elements that should animate their number.
   ───────────────────────────────────────────────────────────── */

.count-up {
  font-variant-numeric: tabular-nums;
  transition: opacity var(--transition-fast);
}

.count-up.counting {
  opacity: 0.7;
}


/* ─────────────────────────────────────────────────────────────
   PREFERS-REDUCED-MOTION — KILL ALL ANIMATION
   Respects the OS accessibility preference.
   Disables all keyframe animations and transitions.
   ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

  /* Kill all keyframe animations */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Keep reveal elements visible without animation */
  .reveal,
  .reveal-fade,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Keep hero elements visible */
  .hero-badge,
  .hero-headline,
  .hero-subheadline,
  .hero-ctas,
  .hero-social-proof,
  .hero-panel-wrap {
    opacity: 1;
    animation: none;
  }

  /* Keep staggered children visible */
  .stagger-children > * {
    opacity: 1;
    animation: none;
  }

  /* Stop glow pulsing — renders at mid-state instead */
  .pricing-card--featured,
  .hero-panel.show-after,
  .animate-glow-pulse {
    animation: none;
    box-shadow: var(--shadow-glow);
  }

  /* Stop gradient animation on text */
  .text-gradient {
    animation: none;
    background-position: 0% 50%;
  }

  /* Stop float animation */
  .animate-float {
    animation: none;
    transform: none;
  }

  /* Stop ping dot animation */
  .ping-dot::before {
    animation: none;
  }

  /* Disable image zoom on hover */
  .article-card-image,
  .blog-featured-image {
    transition: none;
  }

  .article-card:hover .article-card-image,
  .blog-featured-card:hover .blog-featured-image {
    transform: none;
  }

  /* Disable card lifts */
  .hover-lift:hover,
  .platform-item:hover,
  .card:hover,
  .article-card:hover,
  .testimonial-card:hover,
  .pricing-card:hover {
    transform: none;
  }

  /* Disable nav underline slide */
  .nav-link::after {
    transition: none;
  }

  /* Disable button ripple */
  .ripple {
    display: none;
  }
}