/* =============================================================================
   animations.css — VBS Animation & Interaction Layer
   Scroll reveals, hover glow effects, keyframes, and CSS scroll-driven
   animations. Import last — after all other CSS files.
   ============================================================================= */

/* =============================================================================
   KEYFRAMES
   ============================================================================= */

/* Generic fade in — used by brief builder question transitions */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scroll-reveal base — elements start hidden and are triggered by JS class */
@keyframes reveal-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Pulsing dot — live status indicators, in-build status badges */
@keyframes pulse-dot {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(0.75);
  }
}

/* Blinking cursor — AI Brief Builder output */
@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Glow pulse — retained for compatibility; prefer gold-opacity-pulse on light backgrounds */
@keyframes glow-pulse {
  0%, 100% {
    text-shadow: var(--text-glow-gold);
  }
  50% {
    text-shadow:
      0 0 60px rgba(201, 168, 76, 0.55),
      0 0 120px rgba(201, 168, 76, 0.2);
  }
}

/* Opacity pulse — replaces glow-pulse for light-theme gold text */
@keyframes gold-opacity-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.75; }
}

/* Benefits strip — slide in from left */
@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* =============================================================================
   SCROLL REVEAL — Base State
   All .reveal elements start hidden. scroll-reveal.js adds .is-visible
   when the element enters the viewport via IntersectionObserver.
   ============================================================================= */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  will-change: transform, opacity;
}

.reveal.is-visible {
  animation: reveal-up var(--transition-reveal) forwards;
}

/* Stagger delays — apply to sequential sibling elements */
.reveal:nth-child(1)  { animation-delay: calc(var(--stagger-step) * 0); }
.reveal:nth-child(2)  { animation-delay: calc(var(--stagger-step) * 1); }
.reveal:nth-child(3)  { animation-delay: calc(var(--stagger-step) * 2); }
.reveal:nth-child(4)  { animation-delay: calc(var(--stagger-step) * 3); }
.reveal:nth-child(5)  { animation-delay: calc(var(--stagger-step) * 4); }
.reveal:nth-child(6)  { animation-delay: calc(var(--stagger-step) * 5); }
.reveal:nth-child(7)  { animation-delay: calc(var(--stagger-step) * 6); }
.reveal:nth-child(8)  { animation-delay: calc(var(--stagger-step) * 7); }

/* Explicit stagger utilities for use outside nth-child context */
.reveal--delay-1 { animation-delay: calc(var(--stagger-step) * 1); }
.reveal--delay-2 { animation-delay: calc(var(--stagger-step) * 2); }
.reveal--delay-3 { animation-delay: calc(var(--stagger-step) * 3); }
.reveal--delay-4 { animation-delay: calc(var(--stagger-step) * 4); }
.reveal--delay-5 { animation-delay: calc(var(--stagger-step) * 5); }
.reveal--delay-6 { animation-delay: calc(var(--stagger-step) * 6); }

/* Slide-in-left variant — Benefits Strip */
.reveal--left {
  transform: translateX(-32px);
}

.reveal--left.is-visible {
  animation: slide-in-left var(--transition-reveal) forwards;
}

/* =============================================================================
   HERO TYPOGRAPHY ANIMATIONS
   ============================================================================= */

/* Hero headline — applied on page load, not scroll */
.hero-headline {
  animation: reveal-up 0.8s ease-out both;
}

/* Gold display text — no glow on light backgrounds */
.text-gold {
  color: var(--color-gold);
}

.text-gold--pulse {
  color: var(--color-gold);
  animation: gold-opacity-pulse 3.5s ease-in-out infinite;
}

/* Cyan accent text */
.text-cyan {
  color: var(--color-cyan);
}

.text-cyan--pulse {
  color: var(--color-cyan);
  text-shadow: 0 0 30px rgba(0, 212, 255, 0.5);
  animation: glow-pulse-cyan 3s ease-in-out infinite;
}

@keyframes glow-pulse-cyan {
  0%, 100% {
    text-shadow: 0 0 30px rgba(0, 212, 255, 0.5);
  }
  50% {
    text-shadow: 0 0 60px rgba(0, 212, 255, 0.8), 0 0 120px rgba(0, 212, 255, 0.25);
  }
}

/* =============================================================================
   HOVER GLOW — Applied to interactive elements
   ============================================================================= */

/* Elements that glow gold on hover */
.hover-glow-gold {
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.hover-glow-gold:hover {
  box-shadow: var(--glow-gold);
  border-color: var(--color-gold) !important;
}

/* Elements that glow cyan on hover */
.hover-glow-cyan {
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.hover-glow-cyan:hover {
  box-shadow: var(--glow-cyan);
  border-color: var(--color-cyan) !important;
}

/* =============================================================================
   NAVIGATION TRANSITIONS
   ============================================================================= */

/* Nav link underline slide */
.nav__link::after {
  transition: width var(--transition-base);
  will-change: width;
}

/* =============================================================================
   PRODUCT SWITCHER TRANSITIONS
   ============================================================================= */

.product-panel__inner {
  transition:
    opacity var(--transition-base),
    transform var(--transition-base);
  will-change: transform, opacity;
}

.product-panel__inner.is-entering {
  opacity: 0;
  transform: translateX(12px);
}

.product-panel__inner.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* =============================================================================
   SECTOR TILES — 2×2 stagger
   Tiles stagger in: top-left, top-right, bottom-left, bottom-right
----------------------------------------------------------------------------- */

.sector-tile.reveal:nth-child(1) { animation-delay: 0s; }
.sector-tile.reveal:nth-child(2) { animation-delay: 0.1s; }
.sector-tile.reveal:nth-child(3) { animation-delay: 0.1s; }
.sector-tile.reveal:nth-child(4) { animation-delay: 0.2s; }

/* =============================================================================
   BENEFITS STRIP STAGGER
   Each statement slides in left-to-right with 0.08s stagger.
----------------------------------------------------------------------------- */

.benefits-strip__item.reveal {
  transform: translateX(-32px);
}

.benefits-strip__item.reveal.is-visible {
  animation: slide-in-left var(--transition-reveal) forwards;
}

.benefits-strip__item:nth-child(1).reveal { animation-delay: 0s; }
.benefits-strip__item:nth-child(2).reveal { animation-delay: 0.08s; }
.benefits-strip__item:nth-child(3).reveal { animation-delay: 0.16s; }
.benefits-strip__item:nth-child(4).reveal { animation-delay: 0.24s; }
.benefits-strip__item:nth-child(5).reveal { animation-delay: 0.32s; }

/* =============================================================================
   SECTION HEADER ANIMATION
   Section headers animate in on scroll entry.
----------------------------------------------------------------------------- */

.section-header .section-label.reveal,
.section-header .section-title.reveal,
.section-header .section-subtitle.reveal {
  opacity: 0;
  transform: translateY(24px);
}

.section-header .section-label.reveal   { animation-delay: 0s; }
.section-header .section-title.reveal   { animation-delay: 0.08s; }
.section-header .section-subtitle.reveal { animation-delay: 0.16s; }

/* =============================================================================
   SLIDE-IN PANEL
   Handled in components.css via transform. Transition is here.
----------------------------------------------------------------------------- */

.slide-panel {
  will-change: transform;
}

/* =============================================================================
   COUNTER ANIMATION  (handled by JS, CSS provides initial state)
   IntersectionObserver triggers JS count-up. CSS provides the style.
----------------------------------------------------------------------------- */

.stat-number {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: 700;
  color: var(--color-gold);
  display: block;
  line-height: 1;
  will-change: contents;
}

.stat-label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-cream);
  opacity: 0.55;
  margin-top: var(--space-xs);
}

/* =============================================================================
   CSS SCROLL TIMELINE — Native browser scroll-driven animations
   Progressive enhancement — browsers without support fall back to static.
   ============================================================================= */

@supports (animation-timeline: scroll()) {

  /* Section header driven by scroll into view */
  .scroll-driven-header {
    animation: reveal-up var(--transition-reveal) linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
  }

  /* Fade in on scroll entry — generic utility */
  .scroll-fade {
    animation: fade-in var(--transition-reveal) linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 25%;
  }
}

/* =============================================================================
   PERFORMANCE — will-change hints
   Applied to elements that will animate. Remove on components that
   are off-screen to free GPU memory.
----------------------------------------------------------------------------- */

.card,
.project-card,
.sector-tile,
.btn,
.ticker-rail {
  will-change: transform;
}

/* =============================================================================
   REDUCED MOTION — already handled in reset.css, reinforced here
   for animation-specific properties.
----------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--left,
  .hero-headline,
  .scroll-driven-header,
  .scroll-fade {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .text-gold--pulse,
  .text-cyan--pulse,
  .live-dot::before,
  .status-badge--in-build::before,
  .brief-loading::before {
    animation: none;
  }
}