/* ═══════════════════════════════════════════════════════════════════════
   NordDelta Academy — Animation System
   Motion design language: precise, purposeful, premium
   ═══════════════════════════════════════════════════════════════════════ */

/* ── BASE ANIMATION UTILITIES ───────────────────────────────────────── */
.animate-fade-in     { animation: fadeIn 0.6s var(--ease-out) both; }
.animate-fade-up     { animation: fadeUp 0.6s var(--ease-out) both; }
.animate-fade-down   { animation: fadeDown 0.6s var(--ease-out) both; }
.animate-scale-in    { animation: scaleIn 0.5s var(--ease-spring) both; }
.animate-slide-left  { animation: slideLeft 0.6s var(--ease-out) both; }
.animate-slide-right { animation: slideRight 0.6s var(--ease-out) both; }

/* Delays */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }
.delay-700 { animation-delay: 700ms; }
.delay-800 { animation-delay: 800ms; }

/* ── KEYFRAMES ──────────────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

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

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

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

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

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes ping {
  0%   { transform: scale(1); opacity: 1; }
  75%, 100% { transform: scale(2); opacity: 0; }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes textGlow {
  0%, 100% { text-shadow: 0 0 20px rgba(0,199,163,0); }
  50%       { text-shadow: 0 0 20px rgba(0,199,163,0.5); }
}

@keyframes borderPulse {
  0%, 100% { border-color: var(--clr-border); }
  50%       { border-color: var(--clr-accent); }
}

@keyframes scanline {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── HERO ENTRANCE ANIMATIONS ───────────────────────────────────────── */
.hero-enter-headline {
  animation: heroHeadline 1.2s var(--ease-out) both;
}

@keyframes heroHeadline {
  from {
    opacity: 0;
    transform: translateY(40px) skewY(2deg);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) skewY(0);
    filter: blur(0);
  }
}

.hero-enter-sub {
  animation: heroSub 0.8s var(--ease-out) 0.4s both;
}

@keyframes heroSub {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-enter-ctas {
  animation: heroCtas 0.8s var(--ease-out) 0.6s both;
}

@keyframes heroCtas {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-enter-badge {
  animation: heroBadge 0.8s var(--ease-spring) 0.2s both;
}

@keyframes heroBadge {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── TEXT GRADIENT ANIMATION ────────────────────────────────────────── */
.text-gradient-animated {
  background: linear-gradient(
    135deg,
    var(--clr-accent) 0%,
    var(--clr-blue)   33%,
    var(--clr-drone)  66%,
    var(--clr-accent) 100%
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 4s ease infinite;
}

/* ── GLOW PULSE ─────────────────────────────────────────────────────── */
.glow-pulse {
  animation: glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px var(--clr-accent-glow); }
  50%       { box-shadow: 0 0 60px var(--clr-accent-glow); }
}

/* ── ORBIT ANIMATION (Hero globe satellites) ────────────────────────── */
.orbit-container {
  position: relative;
  display: inline-block;
}

.orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0,199,163,0.2);
  animation: orbit 20s linear infinite;
}

.orbit-ring--1 { inset: -20px; animation-duration: 20s; }
.orbit-ring--2 { inset: -48px; animation-duration: 35s; animation-direction: reverse; }
.orbit-ring--3 { inset: -80px; animation-duration: 55s; }

.orbit-dot {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--clr-accent);
  box-shadow: 0 0 8px var(--clr-accent);
  top: 50%;
  transform-origin: center;
}

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

/* ── PARTICLE DOT ───────────────────────────────────────────────────── */
.particle {
  position: absolute;
  border-radius: 50%;
  background: var(--clr-accent);
  pointer-events: none;
  animation: particleFloat var(--duration, 8s) ease-in-out var(--delay, 0s) infinite alternate;
}

@keyframes particleFloat {
  0%   { transform: translate(0, 0) scale(1); opacity: var(--opacity-start, 0.6); }
  100% { transform: translate(var(--tx, 20px), var(--ty, -30px)) scale(var(--scale, 0.5)); opacity: var(--opacity-end, 0.1); }
}

/* ── LOADING SPINNER ────────────────────────────────────────────────── */
.spinner {
  width: 24px; height: 24px;
  border: 2px solid var(--clr-surface-2);
  border-top-color: var(--clr-accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

.spinner--sm { width: 16px; height: 16px; border-width: 1.5px; }
.spinner--lg { width: 40px; height: 40px; border-width: 3px; }

/* ── MAGNETIC BUTTON (enhanced by JS) ──────────────────────────────── */
.magnetic {
  will-change: transform;
  transition: transform var(--dur-slow) var(--ease-out),
              box-shadow var(--dur-slow) var(--ease-out);
}

/* ── PAGE TRANSITION OVERLAY ────────────────────────────────────────── */
.page-transition {
  position: fixed;
  inset: 0;
  background: var(--clr-accent);
  z-index: 9999;
  transform: scaleX(0);
  transform-origin: left;
}

.page-transition.entering { animation: pageEnter 0.4s var(--ease-inout) forwards; }
.page-transition.leaving  { animation: pageLeave 0.4s var(--ease-inout) forwards; }

@keyframes pageEnter {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}

@keyframes pageLeave {
  from { transform: scaleX(1); transform-origin: right; }
  to   { transform: scaleX(0); transform-origin: right; }
}

/* ── SCAN LINE EFFECT ───────────────────────────────────────────────── */
.scanline-wrap {
  position: relative;
  overflow: hidden;
}
.scanline-wrap::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--clr-accent), transparent);
  opacity: 0.3;
  animation: scanline 4s ease-in-out infinite;
}

/* ── DATA STREAM (background decoration) ───────────────────────────── */
.data-stream {
  position: absolute;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--clr-accent), transparent);
  animation: dataStream var(--dur, 3s) ease-in-out var(--delay, 0s) infinite;
  opacity: 0;
}

@keyframes dataStream {
  0%   { transform: translateY(-100%); opacity: 0; }
  20%  { opacity: 0.6; }
  80%  { opacity: 0.6; }
  100% { transform: translateY(100vh); opacity: 0; }
}

/* ── MORPHING GRADIENT BG ───────────────────────────────────────────── */
.morph-bg {
  background: radial-gradient(ellipse at var(--x, 50%) var(--y, 50%),
    rgba(0,199,163,0.12) 0%,
    rgba(74,158,255,0.06) 40%,
    transparent 70%
  );
  transition: background 0.3s ease;
}

/* ── RIPPLE EFFECT ──────────────────────────────────────────────────── */
.ripple-container { position: relative; overflow: hidden; }

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  animation: rippleEffect 0.6s ease-out;
  pointer-events: none;
}

@keyframes rippleEffect {
  from { transform: scale(0); opacity: 1; }
  to   { transform: scale(4); opacity: 0; }
}

/* ── STAGGER CHILDREN (applied to parent, JS adds class) ───────────── */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

.stagger-children.staggered > *:nth-child(1)  { transition-delay:  50ms; }
.stagger-children.staggered > *:nth-child(2)  { transition-delay: 100ms; }
.stagger-children.staggered > *:nth-child(3)  { transition-delay: 150ms; }
.stagger-children.staggered > *:nth-child(4)  { transition-delay: 200ms; }
.stagger-children.staggered > *:nth-child(5)  { transition-delay: 250ms; }
.stagger-children.staggered > *:nth-child(6)  { transition-delay: 300ms; }
.stagger-children.staggered > *:nth-child(7)  { transition-delay: 350ms; }
.stagger-children.staggered > *:nth-child(8)  { transition-delay: 400ms; }

.stagger-children.staggered > * {
  opacity: 1;
  transform: translateY(0);
}

/* ── HOVER LIFT EFFECT ──────────────────────────────────────────────── */
.hover-lift {
  transition: transform var(--dur-slow) var(--ease-out),
              box-shadow var(--dur-slow) var(--ease-out);
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

/* ── TILT CARD (3D hover — enhanced by JS) ─────────────────────────── */
.tilt-card {
  transform-style: preserve-3d;
  transform: perspective(1000px);
  transition: transform var(--dur-base) var(--ease-out);
  will-change: transform;
}

/* ── UNDERLINE ANIMATION ────────────────────────────────────────────── */
.underline-anim {
  position: relative;
  display: inline-block;
}
.underline-anim::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1.5px;
  background: var(--clr-accent);
  transition: width var(--dur-base) var(--ease-out);
}
.underline-anim:hover::after { width: 100%; }

/* ── NUMBER TICKER ──────────────────────────────────────────────────── */
.ticker-wrap {
  overflow: hidden;
  height: 1.2em;
  position: relative;
}

.ticker-inner {
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-slow) var(--ease-out);
}

/* ── ROTATE ON SCROLL (JS controlled with CSS var) ─────────────────── */
.rotate-on-scroll {
  transform: rotate(calc(var(--scroll-progress, 0) * 360deg));
  will-change: transform;
}

/* ── BLUR IN ────────────────────────────────────────────────────────── */
.blur-in {
  animation: blurIn 0.8s var(--ease-out) both;
}

@keyframes blurIn {
  from { opacity: 0; filter: blur(12px); transform: scale(1.05); }
  to   { opacity: 1; filter: blur(0); transform: scale(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;
    scroll-behavior: auto !important;
  }

  .hero__float { animation: none; }
  .hero__badge-dot { animation: none; }
  .hero__scroll-line { animation: none; }
  .cursor-dot, .cursor-ring { display: none; }
}