/* ============================================================
   OFFNET PRO — ANIMATIONS
   ============================================================ */

/* ----------------------------------------------------------
   Scroll Reveal
   ---------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity  0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for sibling cards */
.reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal:nth-child(4) { transition-delay: 0.24s; }
.reveal:nth-child(5) { transition-delay: 0.32s; }

/* ----------------------------------------------------------
   Hero Entrance
   ---------------------------------------------------------- */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.hero__badge   { animation: fadeUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.10s both; }
.hero__title   { animation: fadeUp 0.8s cubic-bezier(0.22,1,0.36,1) 0.22s both; }
.hero__subtitle{ animation: fadeUp 0.8s cubic-bezier(0.22,1,0.36,1) 0.34s both; }
.hero__cta     { animation: fadeUp 0.8s cubic-bezier(0.22,1,0.36,1) 0.46s both; }
.hero__meta    { animation: fadeUp 0.8s cubic-bezier(0.22,1,0.36,1) 0.58s both; }
.hero__mockup  { animation: fadeUp 1.0s cubic-bezier(0.22,1,0.36,1) 0.70s both; }

/* ----------------------------------------------------------
   Background Hero Glow Pulse & Orb Drifts
   ---------------------------------------------------------- */
@keyframes glowPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%       { opacity: 0.85; transform: scale(1.08); }
}

.hero__glow {
  animation: glowPulse 6s ease-in-out infinite;
}

@keyframes orbDrift1 {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.85;
  }
  50% {
    transform: translate(-30px, 35px) scale(1.12);
    opacity: 1;
  }
  100% {
    transform: translate(25px, -20px) scale(0.95);
    opacity: 0.75;
  }
}

@keyframes orbDrift2 {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.7;
  }
  50% {
    transform: translate(35px, -25px) scale(1.08);
    opacity: 0.9;
  }
  100% {
    transform: translate(-20px, 30px) scale(0.92);
    opacity: 0.65;
  }
}

@keyframes orbDrift3 {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translate(-35px, -30px) scale(1.15);
    opacity: 0.85;
  }
  100% {
    transform: translate(20px, 25px) scale(0.9);
    opacity: 0.55;
  }
}

/* ----------------------------------------------------------
   Float (mockup window) 
   ---------------------------------------------------------- */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(-0.5deg); }
  50%       { transform: translateY(-10px) rotate(0.5deg); }
}

.hero__mockup-inner {
  animation: float 7s ease-in-out infinite;
}

/* ----------------------------------------------------------
   Shimmer on gradient text
   ---------------------------------------------------------- */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ----------------------------------------------------------
   Stat counter pulse
   ---------------------------------------------------------- */
@keyframes countUp {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

.stat__value.counting {
  animation: countUp 0.4s ease-out forwards;
}

/* ----------------------------------------------------------
   Dropdown open/close
   ---------------------------------------------------------- */
@keyframes dropdownOpen {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dropdown-menu.open {
  animation: dropdownOpen 0.2s cubic-bezier(0.22,1,0.36,1) forwards;
}

/* ----------------------------------------------------------
   Theme toggle spin
   ---------------------------------------------------------- */
@keyframes spinOnce {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.theme-toggle.spinning svg {
  animation: spinOnce 0.35s ease-out forwards;
}

/* ----------------------------------------------------------
   Comparison row hover
   ---------------------------------------------------------- */
@keyframes rowGlow {
  from { background: transparent; }
  to   { background: var(--table-highlight); }
}

/* ----------------------------------------------------------
   Nav blur on scroll
   ---------------------------------------------------------- */
.nav--scrolled {
  transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}

/* ----------------------------------------------------------
   Reduced motion
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .hero__badge,
  .hero__title,
  .hero__subtitle,
  .hero__cta,
  .hero__meta,
  .hero__mockup {
    animation: none;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero__mockup-inner { animation: none; }
  .hero__glow         { animation: none; }
}