/* Animations — keyframes, motion utilities */

/* ========== INITIAL STATES (GSAP sets these via JS) ========== */
/* Elements with .reveal or .reveal-child class start hidden; GSAP animates them in */
.reveal,
.reveal-child {
  opacity: 0;
  transform: translateY(40px);
}

/* Inline blur for hero text lines */
.hero-line {
  opacity: 0;
  transform: translateY(60px);
  filter: blur(10px);
}

/* ========== CSS-ONLY KEYFRAMES ========== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

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

/* Scroll indicator bounce */
.scroll-indicator {
  animation: scrollBounce 2.2s ease-in-out infinite;
}

/* ========== NO-JS FALLBACK ========== */
/* When JS is disabled, everything is visible */
.no-js .reveal,
.no-js .reveal-child,
.no-js .hero-line {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ========== REDUCED 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;
  }

  .reveal,
  .reveal-child,
  .hero-line {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .scroll-indicator { animation: none; }
}

/* ========== CARD HOVER GOLD BORDER ========== */
.service-stack-card {
  transition:
    transform 300ms var(--ease-out),
    box-shadow 300ms var(--ease-out),
    border-color 300ms var(--ease-out);
}

.service-stack-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(11, 31, 63, 0.08);
  border-color: rgba(201, 162, 74, 0.4);
}

/* ========== MAGNETIC BUTTON WRAPPER ========== */
.magnetic-wrap {
  display: inline-block;
}

/* ========== PAGE TRANSITION ========== */
.page-transition-out {
  animation: fadeIn 300ms var(--ease-out) reverse;
}

/* ========== ORB PULSE ========== */
@keyframes orbPulse {
  0%, 100% { opacity: 0.25; transform: scale(1); }
  50%       { opacity: 0.4;  transform: scale(1.08); }
}

.orb--animate {
  animation: orbPulse 6s ease-in-out infinite;
}

.orb--animate-delay {
  animation: orbPulse 8s ease-in-out 2s infinite;
}