/* ============================================================
   TILT.AI — Animations & Keyframes
   Matched to HDShips Portal animation language
   ============================================================ */

/* ── PORTAL: BLINK DOT ──────────────────────────────────── */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* ── PORTAL: BOUNCE SCROLL ARROW ───────────────────────── */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(6px); }
}

/* ── PORTAL: HERO TITLE ENTRANCE ───────────────────────── */
/* scaleY collapse + blur + rise — cinematic, dramatic */
@keyframes heroTitleIn {
  0% {
    opacity: 0;
    transform: translateY(64px) scaleY(0.68);
    filter: blur(14px);
  }
  50% { filter: blur(0px); }
  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
    filter: blur(0px);
  }
}

/* ── PORTAL: HERO SUB ENTRANCE ─────────────────────────── */
@keyframes heroSubIn {
  0% {
    opacity: 0;
    transform: translateY(34px);
    filter: blur(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);
  }
}

/* ── PORTAL: BREADCRUMB / EYEBROW SLIDE ────────────────── */
@keyframes heroBreadcrumbIn {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── PORTAL: CARD DEPTH REVEAL ─────────────────────────── */
/* Strong lift + scale + blur — cinematic depth feel */
@keyframes srDepth {
  from {
    opacity: 0;
    transform: translateY(80px) scale(0.92);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* ── PORTAL: TEXT FADE-UP ───────────────────────────────── */
@keyframes srFadeUp {
  from { opacity: 0; transform: translateY(72px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── PORTAL: PURE FADE ──────────────────────────────────── */
@keyframes srFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── PORTAL: DRIFT LAYERS (gradient bg) ─────────────────── */
@keyframes driftA {
  0%   { transform: translate(0%,   0%);  }
  25%  { transform: translate(5%,  -4%);  }
  50%  { transform: translate(2%,   6%);  }
  75%  { transform: translate(-6%,  3%);  }
  100% { transform: translate(0%,   0%);  }
}
@keyframes driftB {
  0%   { transform: translate(0%,   0%);  }
  33%  { transform: translate(-7%,  5%);  }
  66%  { transform: translate(4%,  -6%);  }
  100% { transform: translate(0%,   0%);  }
}
@keyframes driftC {
  0%   { transform: translate(0%,   0%);  }
  40%  { transform: translate(6%,   4%);  }
  70%  { transform: translate(-3%,  -5%); }
  100% { transform: translate(0%,   0%);  }
}

/* ── ZOOM SCALE IN ──────────────────────────────────────── */
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.7);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

/* ── COUNTER SNAP IN ────────────────────────────────────── */
@keyframes snapIn {
  0%   { opacity: 0; transform: scale(0.6) translateY(20px); filter: blur(10px); }
  60%  { transform: scale(1.08) translateY(-4px); filter: blur(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

/* ── LINE GROW ──────────────────────────────────────────── */
@keyframes lineGrow {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}

/* ── TICKER SCROLL ──────────────────────────────────────── */
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── SCAN LINE ──────────────────────────────────────────── */
@keyframes scan {
  0%   { top: -2px; opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* ── PULSE RING ─────────────────────────────────────────── */
@keyframes pulseRing {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ── FLOAT ──────────────────────────────────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}

/* ── STAGGER DELAY UTILITIES ────────────────────────────── */
.delay-50  { animation-delay: 50ms !important; }
.delay-100 { animation-delay: 100ms !important; }
.delay-200 { animation-delay: 200ms !important; }
.delay-300 { animation-delay: 300ms !important; }
.delay-400 { animation-delay: 400ms !important; }
.delay-500 { animation-delay: 500ms !important; }
.delay-600 { animation-delay: 600ms !important; }
.delay-700 { animation-delay: 700ms !important; }
.delay-800 { animation-delay: 800ms !important; }
.delay-900 { animation-delay: 900ms !important; }

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