/*
 * ═══════════════════════════════════════════════════════════════
 * COREDEVEX — ANIMATIONS
 * Keyframes + IntersectionObserver scroll reveal utilities
 * ═══════════════════════════════════════════════════════════════
 */

/* ─────────────────────────────────────────────────────────────
   KEYFRAMES
   ───────────────────────────────────────────────────────────── */

/* Scroll reveal — used by IntersectionObserver in reveals.js */
@keyframes reveal-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Page load hero sequence (applied directly via JS delay) */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* Ambient hero glow drift */
@keyframes glow-drift {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.8; }
  33%  { transform: translate(20px, -30px) scale(1.05); opacity: 1; }
  66%  { transform: translate(-15px, 20px) scale(0.98); opacity: 0.65; }
  100% { transform: translate(0, 0) scale(1); opacity: 0.8; }
}

/* Subtle pulse for accent elements */
@keyframes pulse-accent {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

/* Spin — loading indicator */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}


/* ─────────────────────────────────────────────────────────────
   PLATFORM DIAGNOSTIC PANEL — homepage hero right column
   ───────────────────────────────────────────────────────────── */

/* Capability row entrance — slides in from left */
@keyframes diag-cap-in {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: none; }
}

/* Status badge resolution — pops in from slightly scaled */
@keyframes diag-status-in {
  from { opacity: 0; transform: scale(0.80); }
  to   { opacity: 1; transform: none; }
}

/* Header cursor blink */
@keyframes diag-cursor {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Live dot & ready dot ring pulse */
@keyframes diag-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 196, 168, 0.45); }
  55%       { box-shadow: 0 0 0 5px rgba(0, 196, 168, 0); }
}

/* Scan line vertical sweep */
@keyframes diag-scan {
  0%   { top: -1px; opacity: 0; }
  4%   { opacity: 0.38; }
  88%  { opacity: 0.14; }
  100% { top: 100%; opacity: 0; }
}

/* Generic single-shot fade (footer) */
@keyframes diag-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ─────────────────────────────────────────────────────────────
   SCROLL REVEAL UTILITIES
   Controlled by reveals.js / IntersectionObserver
   ───────────────────────────────────────────────────────────── */

/* Initial hidden state — set on elements before they enter view */
.reveal-initial {
  opacity: 0;
  transform: translateY(16px);
}

/* Active state — added by IntersectionObserver when element enters viewport */
.reveal-active {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity   var(--dur-reveal) var(--ease-entrance),
    transform var(--dur-reveal) var(--ease-entrance);
}

/* Stagger delay classes — applied to siblings in a grid */
.stagger-1  { transition-delay: 0ms; }
.stagger-2  { transition-delay: 80ms; }
.stagger-3  { transition-delay: 160ms; }
.stagger-4  { transition-delay: 240ms; }
.stagger-5  { transition-delay: 320ms; }
.stagger-6  { transition-delay: 400ms; }
.stagger-7  { transition-delay: 480ms; }
.stagger-8  { transition-delay: 560ms; }


/* ─────────────────────────────────────────────────────────────
   HERO PAGE-LOAD SEQUENCE
   Applied inline via style or JS timeout — not IntersectionObserver
   ───────────────────────────────────────────────────────────── */

.hero-animate {
  opacity: 0;
  animation: fade-in-up var(--dur-reveal) var(--ease-entrance) forwards;
}

.hero-animate--label   { animation-delay: 0ms; }
.hero-animate--heading { animation-delay: 100ms; }
.hero-animate--subhead { animation-delay: 200ms; }
.hero-animate--ctas    { animation-delay: 320ms; }
.hero-animate--trust   { animation-delay: 420ms; }
.hero-animate--scroll  { animation-delay: 540ms; }
.hero-animate--panel   { animation-delay: 240ms; }


/* ─────────────────────────────────────────────────────────────
   MARQUEE
   ───────────────────────────────────────────────────────────── */

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 30s linear infinite;
}

.marquee-track:hover {
  animation-play-state: paused;
}

.marquee-wrapper {
  overflow: hidden;
}


/* ─────────────────────────────────────────────────────────────
   FLOATING PARTICLES — hero decoration
   ───────────────────────────────────────────────────────────── */

@keyframes float-particle {
  0%, 100% { transform: translateY(0) translateX(0); opacity: 0.25; }
  33%  { transform: translateY(-20px) translateX(7px); opacity: 0.7; }
  66%  { transform: translateY(-9px) translateX(-5px); opacity: 0.4; }
}

.hero-particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.25);
  pointer-events: none;
  z-index: 0;
}


/* ─────────────────────────────────────────────────────────────
   HERO AMBIENT GLOW
   ───────────────────────────────────────────────────────────── */

.hero-glow-ambient {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(0, 196, 168, 0.28) 0%,
    rgba(0, 196, 168, 0.10) 40%,
    transparent 70%
  );
  pointer-events: none;
  animation: glow-drift 12s ease-in-out infinite;
}

/* Upper-right glow variant — used in split homepage hero, behind the panel */
.hero-glow-panel {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(0, 196, 168, 0.20) 0%,
    rgba(0, 196, 168, 0.06) 50%,
    transparent 70%
  );
  pointer-events: none;
  animation: glow-drift 16s ease-in-out infinite;
}


/* ─────────────────────────────────────────────────────────────
   GRADIENT TEXT — hero headline accent span
   ───────────────────────────────────────────────────────────── */

.hero-text-accent {
  background: linear-gradient(120deg, var(--cdx-white) 0%, #7FDED5 52%, var(--cdx-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .hero-text-accent {
    -webkit-text-fill-color: var(--cdx-white);
    color: var(--cdx-white);
    background: none;
  }
}


/* ─────────────────────────────────────────────────────────────
   UTILITY — section edge fade
   ───────────────────────────────────────────────────────────── */

.section-fade-bottom {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
  mask-image:         linear-gradient(to bottom, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
}

/* Text wrapping */
.text-balance { text-wrap: balance; }

/* Tabular numerals for metrics */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* Loading spinner */
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: spin 600ms linear infinite;
}


/* ─────────────────────────────────────────────────────────────
   REDUCED MOTION — disable all animation/transition
   (also declared in variables.css — belt-and-suspenders)
   ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .reveal-initial {
    opacity: 1;
    transform: none;
  }

  .hero-animate {
    opacity: 1;
    animation: none;
  }

  .marquee-track {
    animation: none;
  }

  .hero-glow-ambient,
  .hero-glow-panel {
    animation: none;
  }

  .hero-particle {
    animation: none;
    opacity: 0;
  }

  /* Diagnostic panel — instant reveal, no animation */
  .cdx-panel-diag__cap,
  .cdx-panel-diag__cap-status,
  .cdx-panel-diag__footer {
    opacity: 1;
    animation: none;
  }

  .cdx-panel-diag__cursor,
  .cdx-panel-diag__live,
  .cdx-panel-diag__ready-dot,
  .cdx-panel-diag__scanline {
    animation: none;
  }

  .cdx-panel-diag__cursor { opacity: 0.7; }
}