/* ============================================================
   Animations — Scroll reveals, gate, parallax, counters
   ============================================================ */

/* ---- Gate Animations ---- */

@keyframes gate-pulse {
  0%, 100% { transform: scale(0.8); opacity: 0.3; }
  50% { transform: scale(1.2); opacity: 0.7; }
}

.gate__glow {
  animation: gate-pulse 4s ease-in-out infinite;
}

@keyframes enter-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.gate__enter {
  animation: enter-pulse 3s ease-in-out infinite;
}

/* Gate opening transition */
.gate--opening {
  animation: gate-open 1.2s var(--ease-out-expo) forwards;
}

@keyframes gate-open {
  0% {
    clip-path: circle(150% at 50% 50%);
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    clip-path: circle(0% at 50% 50%);
    opacity: 0;
  }
}

/* ---- Scroll Reveal System ---- */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s var(--ease-out-quart),
    transform 0.8s var(--ease-out-quart);
}

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

/* Staggered children */
.reveal-child {
  opacity: 0;
  transform: translateY(15px);
  transition:
    opacity 0.6s var(--ease-out-quart),
    transform 0.6s var(--ease-out-quart);
  transition-delay: calc(var(--reveal-index, 0) * 120ms + 200ms);
}

.reveal--visible .reveal-child {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Journey Title Animations ---- */

.journey__title-main {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.6s var(--ease-out-quart), transform 0.6s var(--ease-out-quart);
}

.reveal--visible .journey__title-main {
  opacity: 1;
  transform: translateX(0);
}

.journey__title-accent {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.6s var(--ease-out-quart) 0.15s, transform 0.6s var(--ease-out-quart) 0.15s;
}

.reveal--visible .journey__title-accent {
  opacity: 1;
  transform: translateX(0);
}

/* ---- Stat Counter Pop ---- */

.stat-counter {
  transition: transform 0.3s var(--ease-out-expo);
}

.stat-counter--counting .stat-counter__number {
  animation: counter-pop 0.3s var(--ease-out-expo);
}

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

/* ---- Hero Starfield Drift ---- */

@keyframes star-drift-1 {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-30px, -20px); }
}

@keyframes star-drift-2 {
  0% { transform: translate(0, 0); }
  100% { transform: translate(20px, -40px); }
}

@keyframes star-drift-3 {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-15px, -10px); }
}

.hero__stars-layer--1 {
  animation: star-drift-1 30s ease-in-out infinite alternate;
}

.hero__stars-layer--2 {
  animation: star-drift-2 45s ease-in-out infinite alternate;
}

.hero__stars-layer--3 {
  animation: star-drift-3 60s ease-in-out infinite alternate;
}

/* ---- Faction Card Hover ---- */

.faction-card {
  transition:
    transform 0.35s var(--ease-out-expo),
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

/* ---- Connected Loop Glow ---- */

@keyframes node-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(240, 192, 64, 0); }
  50% { box-shadow: 0 0 12px rgba(240, 192, 64, 0.15); }
}

.reveal--visible .connected__loop-node {
  animation: node-glow 4s ease-in-out infinite;
  animation-delay: calc(var(--node-index, 0) * 0.5s);
}

/* ---- Feature Item Entrance ---- */

.feature-item {
  transition:
    opacity 0.5s var(--ease-out-quart),
    transform 0.5s var(--ease-out-quart),
    border-color 0.3s ease;
}

.feature-item:hover {
  border-color: rgba(108, 92, 231, 0.2);
}

/* ---- Cosmic Section Dividers ---- */

.journey::before {
  opacity: 0;
  transform: scaleX(0);
  transition: opacity 1.2s ease 0.2s, transform 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

.journey.reveal--visible::before {
  opacity: 1;
  transform: scaleX(1);
}

@keyframes divider-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.4); }
}

.journey.reveal--visible::before {
  animation: divider-pulse 4s ease-in-out 2s infinite;
}

/* ---- Video Play Indicator ---- */

.journey__video {
  transition: opacity 0.4s ease;
  opacity: 0.7;
}

.journey__video.playing {
  opacity: 1;
}

/* ---- Reduce Motion ---- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .reveal-child {
    opacity: 1;
    transform: none;
  }
}