/* ============================================================
   SPECTRONICS INDIA — ANIMATIONS CSS
   @property · @keyframes · Transition Utilities
   ============================================================ */

/* ============================================================
   CSS @PROPERTY (Houdini — for animated custom properties)
   ============================================================ */
@property --gradient-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@property --ring-pct {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

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

/* Rotating border gradient for bento/featured cards */
@keyframes border-spin {
  from { --gradient-angle: 0deg; }
  to   { --gradient-angle: 360deg; }
}

/* Background orbs slowly drifting */
@keyframes orb-drift {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(2%, 4%) scale(1.05); }
  66%  { transform: translate(-3%, 2%) scale(0.97); }
  100% { transform: translate(1%, -3%) scale(1.02); }
}

/* Hero scroll indicator drop */
@keyframes scroll-drop {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  40%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  60%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

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

/* Pulse dot in hero eyebrow */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.7); }
}

/* Success pop (contact form) */
@keyframes success-pop {
  0%   { transform: scale(0.5); opacity: 0; }
  70%  { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

/* Count-up number flash */
@keyframes count-flash {
  0%   { opacity: 0.4; }
  100% { opacity: 1; }
}

/* Staggered text character entrance */
@keyframes char-in {
  from {
    opacity: 0;
    transform: translateY(0.5em) rotateX(-90deg);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
    filter: blur(0);
  }
}

/* Spec ring fill animation */
@keyframes ring-fill {
  from { --ring-pct: 0%; }
  to   { --ring-pct: var(--ring-target, 75%); }
}

/* Fade in up (generic entrance) */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* Shimmer / skeleton loading */
@keyframes shimmer {
  from { background-position: -200% center; }
  to   { background-position: 200% center; }
}

/* Glow pulse for model numbers */
@keyframes glow-pulse {
  0%, 100% { text-shadow: 0 0 20px rgba(var(--accent-rgb), 0.3); }
  50%       { text-shadow: 0 0 40px rgba(var(--accent-rgb), 0.6), 0 0 80px rgba(var(--accent-rgb), 0.2); }
}

/* Floating gentle for hero elements */
@keyframes float-gentle {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

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

/* ============================================================
   APPLIED ANIMATIONS (Component-Specific)
   ============================================================ */

/* Hero title: perspective-based character entrance */
.hero__title {
  perspective: 600px;
}

/* Each .char span (split by JS) */
.hero__title .char {
  display: inline-block;
  opacity: 0;
  animation: char-in 0.6s var(--ease-out) both;
  /* --delay set inline by JS */
  animation-delay: var(--delay, 0ms);
}

.hero__title.animated .char { opacity: 0; } /* reset placeholder */

/* Stats count-up flash on each tick */
.stat-card__value.counting {
  animation: count-flash 0.1s ease;
}

/* Spec ring fill on scroll entry */
.spec-dial__ring {
  animation: ring-fill 1.2s var(--ease-out) both;
  animation-play-state: paused;
}
.spec-dial.is-visible .spec-dial__ring {
  animation-play-state: running;
}

/* Model number glow on product hero */
.product-hero__model {
  animation: glow-pulse 3s ease-in-out infinite;
}

/* Scroll timeline: sticky nav shrink */
@supports (animation-timeline: scroll()) {
  .nav {
    animation: none; /* handled by JS class toggle for broader support */
  }
}

/* Hero orbs */
.hero__orb--1 { animation: orb-drift 12s ease-in-out infinite alternate; }
.hero__orb--2 { animation: orb-drift 15s ease-in-out infinite alternate-reverse; animation-delay: -4s; }
.hero__orb--3 { animation: orb-drift 18s ease-in-out infinite alternate; animation-delay: -9s; }

/* Hero content staged entrance */
.hero__eyebrow {
  animation: fade-up 0.7s var(--ease-out) 0.2s both;
}
.hero__title {
  animation: none; /* characters handled individually */
}
.hero__sub {
  animation: fade-up 0.7s var(--ease-out) 0.8s both;
}
.hero__actions {
  animation: fade-up 0.7s var(--ease-out) 1s both;
}
.hero__scroll {
  animation: fade-in 1s var(--ease-out) 1.5s both;
}

/* Ticker */
.ticker__track {
  animation: marquee 32s linear infinite;
}
.ticker:hover .ticker__track {
  animation-play-state: paused;
}

/* Category gateway cards stagger */
.category-gateway-card:nth-child(1) { animation-delay: 0ms; }
.category-gateway-card:nth-child(2) { animation-delay: 60ms; }
.category-gateway-card:nth-child(3) { animation-delay: 120ms; }
.category-gateway-card:nth-child(4) { animation-delay: 180ms; }
.category-gateway-card:nth-child(5) { animation-delay: 240ms; }
.category-gateway-card:nth-child(6) { animation-delay: 300ms; }

/* Product card stagger */
.product-card:nth-child(1) { --stagger: 0ms; }
.product-card:nth-child(2) { --stagger: 60ms; }
.product-card:nth-child(3) { --stagger: 120ms; }
.product-card:nth-child(4) { --stagger: 180ms; }
.product-card:nth-child(5) { --stagger: 240ms; }
.product-card:nth-child(6) { --stagger: 300ms; }

.product-card.reveal {
  transition-delay: var(--stagger, 0ms);
}

/* Feature cards in product detail */
.feature-card {
  animation: fade-up 0.5s var(--ease-out) var(--stagger, 0ms) both;
  animation-play-state: paused;
}
.feature-card.is-visible {
  animation-play-state: running;
}

/* Spec items stagger */
.spec-item {
  animation: fade-up 0.4s var(--ease-out) var(--stagger, 0ms) both;
  animation-play-state: paused;
}
.spec-item.is-visible {
  animation-play-state: running;
}

/* Loading spinner */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255,255,255,0.2);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}

/* ============================================================
   REDUCED MOTION — OVERRIDE ALL ANIMATIONS
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero__orb,
  .ticker__track,
  .product-hero__model,
  .spec-dial__ring,
  .hero__eyebrow,
  .hero__sub,
  .hero__actions,
  .hero__scroll,
  .hero__scroll-arrow,
  .feature-card,
  .spec-item,
  .hero__title .char {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}