/* ==========================================================================
   GLASSHEAD TECH — Animation System
   animations.css — Reveal classes · Keyframes · Motion utilities
   ========================================================================== */

/* ── Reveal — Hidden States ───────────────────────────────────────────────── */
.reveal-up,
.reveal-fade,
.reveal-scale,
.reveal-left,
.reveal-right {
  transition-property: opacity, transform;
  transition-duration: 700ms;
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: calc(var(--stagger-index, 0) * 80ms);
}

.reveal-up {
  opacity: 0;
  transform: translateY(32px);
}

.reveal-fade {
  opacity: 0;
  transform: translateY(12px);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.95) translateY(16px);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
}

.reveal-right {
  opacity: 0;
  transform: translateX(32px);
}

/* ── Reveal — Visible States ─────────────────────────────────────────────── */
.reveal-up.is-visible,
.reveal-fade.is-visible,
.reveal-scale.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible {
  opacity: 1;
  transform: none;
}

/* ── Stagger Delays ──────────────────────────────────────────────────────── */
/* JS sets --stagger-index on each child; CSS uses it */
.stagger-children > * {
  transition-delay: calc(var(--stagger-index, 0) * 90ms);
}

/* Manual delay overrides for explicit control */
.delay-100 { transition-delay: 100ms !important; }
.delay-200 { transition-delay: 200ms !important; }
.delay-300 { transition-delay: 300ms !important; }
.delay-400 { transition-delay: 400ms !important; }
.delay-500 { transition-delay: 500ms !important; }

/* ── Keyframe Animations ─────────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px var(--color-accent-glow); }
  50%       { box-shadow: 0 0 40px var(--color-accent-glow), 0 0 60px rgba(59,130,246,0.10); }
}

@keyframes orb-drift-1 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(3%, 4%) scale(1.05); }
  100% { transform: translate(-2%, 2%) scale(0.97); }
}

@keyframes orb-drift-2 {
  0%   { transform: translate(0, 0) scale(1); }
  60%  { transform: translate(-4%, -3%) scale(1.08); }
  100% { transform: translate(2%, -1%) scale(0.95); }
}

@keyframes orb-drift-3 {
  0%   { transform: translate(0, 0) scale(1); }
  40%  { transform: translate(2%, -5%) scale(1.03); }
  100% { transform: translate(-3%, 3%) scale(1.06); }
}

@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0) translateX(-50%); opacity: 1; }
  50%       { transform: translateY(8px) translateX(-50%); opacity: 0.5; }
}

@keyframes rotate-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes counter-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ── Hero Entrance Animation ─────────────────────────────────────────────── */
.hero-animate-in .hero__eyebrow {
  animation: fadeInUp 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s both;
}

.hero-animate-in .hero__title {
  animation: fadeInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.25s both;
}

.hero-animate-in .hero__subtitle {
  animation: fadeInUp 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.45s both;
}

.hero-animate-in .hero__actions {
  animation: fadeInUp 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.60s both;
}

.hero-animate-in .hero__scroll-indicator {
  animation: fadeIn 0.7s ease 1.0s both;
}

/* ── Utility Animation Classes ───────────────────────────────────────────── */
.animate-pulse-glow {
  animation: pulse-glow 3s ease-in-out infinite;
}

.animate-rotate-slow {
  animation: rotate-slow 20s linear infinite;
}

.animate-shimmer {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.05) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2s linear infinite;
}

/* ── Gradient Background Animation ──────────────────────────────────────── */
@keyframes hero-gradient-shift {
  0%   { opacity: 0.8; }
  50%  { opacity: 1; }
  100% { opacity: 0.7; }
}

/* ── Scroll Indicator ────────────────────────────────────────────────────── */
.scroll-indicator {
  position: absolute;
  bottom: var(--space-10);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  animation: scroll-bounce 2s ease-in-out infinite;
}

.scroll-indicator__line {
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, var(--color-border-hover), transparent);
}

.scroll-indicator__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 10px var(--color-accent);
}

/* ── prefers-reduced-motion — Kill all animations ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal-up,
  .reveal-fade,
  .reveal-scale,
  .reveal-left,
  .reveal-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .stagger-children > * {
    transition-delay: 0ms !important;
  }

  .hero-animate-in .hero__eyebrow,
  .hero-animate-in .hero__title,
  .hero-animate-in .hero__subtitle,
  .hero-animate-in .hero__actions,
  .hero-animate-in .hero__scroll-indicator {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .animate-pulse-glow,
  .animate-rotate-slow,
  .animate-shimmer,
  .scroll-indicator {
    animation: none !important;
  }

  * {
    scroll-behavior: auto !important;
  }
}