/* ============================================================
   BYTEPLAYNUDGE.BOND — ANIMATION STYLESHEET
   Smooth, purposeful, never distracting
   ============================================================ */

/* ─── SCROLL ANIMATIONS ─────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays */
.delay-1 { transition-delay: 0.08s; }
.delay-2 { transition-delay: 0.18s; }
.delay-3 { transition-delay: 0.28s; }
.delay-4 { transition-delay: 0.38s; }

/* ─── HERO ORB DRIFT ─────────────────────────────────────── */
.hero-orb-1 { animation: orbDrift1 12s ease-in-out infinite alternate; }
.hero-orb-2 { animation: orbDrift2 16s ease-in-out infinite alternate; }
.hero-orb-3 { animation: orbDrift3 10s ease-in-out infinite alternate; }

@keyframes orbDrift1 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-40px, 30px) scale(1.08); }
}
@keyframes orbDrift2 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(30px, -20px) scale(0.95); }
}
@keyframes orbDrift3 {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.5; }
  100% { transform: translate(-20px, 25px) scale(1.1); opacity: 0.3; }
}

/* ─── SCROLL HINT ────────────────────────────────────────── */
@keyframes scrollPulse {
  0%, 100% { opacity: 1; transform: scaleY(1); transform-origin: top; }
  50%       { opacity: 0.3; transform: scaleY(0.5); transform-origin: top; }
}

/* ─── LOGO ICON PULSE ────────────────────────────────────── */
.logo-icon {
  display: inline-block;
  animation: logoPulse 4s ease-in-out infinite;
}
@keyframes logoPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.7; }
}

/* ─── FEATURE CARD HOVER GLOW ────────────────────────────── */
.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--gradient-main);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
  filter: blur(24px);
  transform: scale(1.2);
  pointer-events: none;
}
.feature-card {
  position: relative;
}
.feature-card:hover::before { opacity: 0.05; }

/* ─── GRADIENT SHIFT (hero headline decoration) ─────────── */
.gradient-text {
  background-size: 200% 200%;
  animation: gradientShift 5s ease infinite;
}
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ─── BUTTON ACTIVE PRESS ────────────────────────────────── */
.btn:active { transform: translateY(0) scale(0.98); }

/* ─── PAGE TRANSITION FADE ───────────────────────────────── */
body {
  animation: pageFadeIn 0.4s ease forwards;
}
@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─── HAMBURGER ANIMATION ────────────────────────────────── */
.hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ─── STEP NUMBER GLOW ON VIEW ───────────────────────────── */
.process-step.visible .step-number {
  box-shadow: 0 0 20px rgba(79,127,255,0.3);
  transition: box-shadow 0.5s ease 0.3s;
}

/* ─── FORM INPUT FOCUS ANIMATION ─────────────────────────── */
.form-group input,
.form-group select,
.form-group textarea {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  background: rgba(26, 32, 53, 0.9);
}

/* ─── REDUCE MOTION RESPECT ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .fade-up { opacity: 1; transform: none; }
}