/* =============================================================================
   Scintic Global — Animations
   ============================================================================= */

@import 'main.css';

/* =============================================================================
   Keyframes
   ============================================================================= */

/* Ticker scroll — used by .ticker-content */
@keyframes scroll-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Ping / pulse for map dots */
@keyframes ping {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(2.5); opacity: 0; }
}

/* Fade up for scroll reveal */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Shimmer for loading skeleton states */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Hero scroll indicator line — draw and erase */
@keyframes scroll-line {
  0%      { transform: scaleY(0); transform-origin: top; }
  50%     { transform: scaleY(1); transform-origin: top; }
  50.001% { transform: scaleY(1); transform-origin: bottom; }
  100%    { transform: scaleY(0); transform-origin: bottom; }
}

/* Gold pulse for CTA button */
@keyframes gold-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 168, 76, 0.4); }
  50%       { box-shadow: 0 0 0 12px rgba(201, 168, 76, 0); }
}

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

/* Number count-up flash */
@keyframes count-flash {
  0%   { color: var(--color-primary); }
  50%  { color: white; }
  100% { color: var(--color-primary); }
}

/* Border glow pulse for division accents */
@keyframes border-glow {
  0%, 100% { box-shadow: 0 0 0 0 var(--color-primary-glow); }
  50%       { box-shadow: 0 0 16px 4px var(--color-primary-glow); }
}

/* =============================================================================
   Reveal / Scroll Animation Classes
   ============================================================================= */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease var(--delay, 0ms), transform 0.6s ease var(--delay, 0ms);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Reveal from left */
.reveal-left {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.6s ease var(--delay, 0ms), transform 0.6s ease var(--delay, 0ms);
}

.reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Reveal from right */
.reveal-right {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.6s ease var(--delay, 0ms), transform 0.6s ease var(--delay, 0ms);
}

.reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Fade only (no transform) */
.reveal-fade {
  opacity: 0;
  transition: opacity 0.7s ease var(--delay, 0ms);
}

.reveal-fade.revealed {
  opacity: 1;
}

/* =============================================================================
   Loading Skeleton
   ============================================================================= */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-surface-alt) 25%,
    #e8edf5 50%,
    var(--color-surface-alt) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
  color: transparent;
  pointer-events: none;
  user-select: none;
}

.skeleton-text {
  height: 1em;
  border-radius: var(--radius-sm);
}

.skeleton-title {
  height: 1.5em;
  width: 70%;
  border-radius: var(--radius-sm);
}

.skeleton-card {
  height: 280px;
  border-radius: var(--radius-md);
}

/* =============================================================================
   Applied Animation Utilities
   ============================================================================= */

/* Hero scroll indicator line */
.hero__scroll-line {
  animation: scroll-line 2s ease infinite;
}

/* Gold pulse button */
.btn-gold.pulse {
  animation: gold-pulse 2.5s ease infinite;
}

/* Float animation */
.animate-float {
  animation: float 4s ease-in-out infinite;
}

/* Stagger delay helpers (for use with --delay override) */
.delay-1 { --delay: 100ms; }
.delay-2 { --delay: 200ms; }
.delay-3 { --delay: 300ms; }
.delay-4 { --delay: 400ms; }
.delay-5 { --delay: 500ms; }
.delay-6 { --delay: 600ms; }
.delay-7 { --delay: 700ms; }
.delay-8 { --delay: 800ms; }

/* Map dot pulse override (varies by dot) */
.map-dot:nth-child(1) .dot-pulse { animation-delay: 0s; }
.map-dot:nth-child(2) .dot-pulse { animation-delay: 0.4s; }
.map-dot:nth-child(3) .dot-pulse { animation-delay: 0.8s; }
.map-dot:nth-child(4) .dot-pulse { animation-delay: 1.2s; }
.map-dot:nth-child(5) .dot-pulse { animation-delay: 1.6s; }
.map-dot:nth-child(6) .dot-pulse { animation-delay: 2.0s; }

/* Ticker speed variants */
.ticker-content--slow  { animation-duration: 80s; }
.ticker-content--fast  { animation-duration: 30s; }

/* Pause on hover */
.ticker-track:hover .ticker-content {
  animation-play-state: paused;
}