/* ============================================================
   ANIMATIONS — Scroll-reveal + micro-interactions
   Human-made feel: stagger, tilt, slide, perspective cards
   ============================================================ */

/* ── KEYFRAMES ──────────────────────────────────────────────── */

@keyframes fade-up {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-right {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fade-left {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scale-up {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

/* Card tilt-in from below with slight rotation */
@keyframes card-rise {
  from {
    opacity: 0;
    transform: translateY(48px) rotateX(6deg);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
    filter: blur(0);
  }
}

/* Slide in from left with scale */
@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-40px) scale(0.96); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* Slide in from right */
@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(40px) scale(0.96); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* Tag pop — scale from center */
@keyframes tag-pop {
  from { opacity: 0; transform: scale(0.7) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Marquee scrolling */
@keyframes marquee-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Pulse dot (live/active indicator) */
@keyframes pulse-core {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%       { transform: scale(0.85); opacity: 0.7; }
}
@keyframes pulse-ring {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* Floating card — subtle vertical bobbing */
@keyframes float-card {
  0%, 100% { transform: translateY(0px) rotate(-1deg); }
  50%       { transform: translateY(-10px) rotate(-0.5deg); }
}

/* Shimmer on hero highlight */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Counter glow */
@keyframes counter-glow {
  0%, 100% { color: var(--orange); }
  50%       { color: var(--orange-deep); }
}

/* Draw underline */
@keyframes draw-line {
  from { width: 0; }
  to   { width: 100%; }
}

/* Breathe — subtle scale loop for CTA accent */
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.04); }
}

/* Orbit dots around hero */
@keyframes orbit {
  from { transform: rotate(0deg) translateX(40px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(40px) rotate(-360deg); }
}

/* ── SCROLL REVEAL CLASSES ─────────────────────────────────── */
/* Applied by JS IntersectionObserver. Initial state = hidden. */

.reveal,
.reveal-left,
.reveal-right,
.reveal-card,
.reveal-scale {
  opacity: 0;
  will-change: opacity, transform;
}

/* When in-view */
.reveal.in-view {
  animation: fade-up 700ms var(--ease-out) both;
}
.reveal-left.in-view {
  animation: slide-in-left 700ms var(--ease-out) both;
}
.reveal-right.in-view {
  animation: slide-in-right 700ms var(--ease-out) both;
}
.reveal-card.in-view {
  animation: card-rise 700ms var(--ease-out) both;
}
.reveal-scale.in-view {
  animation: scale-up 600ms var(--ease-out) both;
}

/* Stagger children — JS adds `stagger` class to parent,
   children auto-delay via nth-child */
.stagger > * {
  opacity: 0;
  will-change: opacity, transform;
}
.stagger.in-view > *:nth-child(1)  { animation: card-rise 700ms var(--ease-out) 0ms   both; }
.stagger.in-view > *:nth-child(2)  { animation: card-rise 700ms var(--ease-out) 90ms  both; }
.stagger.in-view > *:nth-child(3)  { animation: card-rise 700ms var(--ease-out) 180ms both; }
.stagger.in-view > *:nth-child(4)  { animation: card-rise 700ms var(--ease-out) 270ms both; }
.stagger.in-view > *:nth-child(5)  { animation: card-rise 700ms var(--ease-out) 360ms both; }
.stagger.in-view > *:nth-child(6)  { animation: card-rise 700ms var(--ease-out) 450ms both; }
.stagger.in-view > *:nth-child(7)  { animation: card-rise 700ms var(--ease-out) 540ms both; }
.stagger.in-view > *:nth-child(8)  { animation: card-rise 700ms var(--ease-out) 600ms both; }

/* Hero-specific (pre-load, not scroll triggered) */
.hero-animate-1 { animation: fade-right 700ms var(--ease-out) 200ms both; }
.hero-animate-2 { animation: fade-up    700ms var(--ease-out) 360ms both; }
.hero-animate-3 { animation: fade-up    700ms var(--ease-out) 480ms both; }
.hero-animate-4 { animation: fade-up    700ms var(--ease-out) 580ms both; }
.hero-animate-5 { animation: fade-up    700ms var(--ease-out) 700ms both; }
.hero-cards-anim { animation: fade-left 700ms var(--ease-out) 400ms both; }

/* ── MAGNETIC BUTTON (JS-enhanced, CSS base) ──────────────── */
.magnetic-btn {
  transition: transform 200ms var(--ease-out);
}

/* ── CARD TILT (JS applies inline transform) ──────────────── */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 200ms var(--ease-out);
}
.tilt-card-inner {
  transform: translateZ(12px);
}

/* ── HOVER LIFT ───────────────────────────────────────────── */
.hover-lift {
  transition: transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out);
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

/* ── SPOTLIGHT BORDER (JS mouse-follow on cards) ──────────── */
.spotlight-card {
  position: relative;
  overflow: hidden;
}
.spotlight-card::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,98,26,0.12) 0%, transparent 65%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms var(--ease-out);
  left: var(--mx, 50%);
  top:  var(--my, 50%);
}
.spotlight-card:hover::before { opacity: 1; }

/* ── SCROLL PROGRESS LINE ────────────────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--orange), var(--amber));
  width: var(--scroll-pct, 0%);
  z-index: 10000;
  transition: width 60ms linear;
}