/* ===================================================
   ANIMATIONS & TRANSITIONS (Easing: cubic-bezier(.22, 1, .36, 1))
   =================================================== */

/* Liquid Moving Active Pill */
.active-pill {
  transition: left 0.48s cubic-bezier(0.22, 1, 0.36, 1),
              width 0.48s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.3s ease;
  will-change: left, width;
}

/* Button & Link Hover Transitions */
.cta,
.btn {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s ease,
              background 0.3s ease,
              border-color 0.3s ease;
}

.cta:hover,
.btn:hover {
  transform: translateY(-2px);
}

.cta:hover {
  box-shadow: 0 14px 32px rgba(38, 91, 226, 0.36),
              inset 0 1px 1px rgba(255, 255, 255, 0.6);
}

.btn.primary:hover {
  box-shadow: 0 18px 36px rgba(38, 91, 226, 0.3);
}

.btn.secondary:hover {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(23, 105, 255, 0.35);
  box-shadow: 0 8px 24px rgba(23, 105, 255, 0.12);
}

.links a {
  transition: color 0.25s ease, transform 0.25s ease;
}

.links a:hover {
  color: var(--blue);
  transform: translateY(-1px);
}

/* Hero Entrance Animations */
.copy {
  animation: heroTextEnter 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.stage {
  animation: heroStageEnter 1.05s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}

.browser,
.float {
  transition: transform 0.14s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Chart Line Drawing */
.chart-line {
  animation: drawGraph 2.4s ease forwards 0.4s;
}

/* Floating Industry Cards Ambient Movement */
.edu {
  animation: floatCardA 5.4s ease-in-out infinite;
}

.estate {
  animation: floatCardB 6.0s ease-in-out infinite;
}

.shop {
  animation: floatCardC 5.6s ease-in-out infinite;
}

/* Orbit Rotations */
.orbit-one {
  animation: orbitOne 22s linear infinite;
}

.orbit-two {
  animation: orbitTwo 28s linear infinite;
}

/* Ambient Orbs Drift */
.orb-a {
  animation: orbDriftA 10s ease-in-out infinite;
}

.orb-b {
  animation: orbDriftB 12s ease-in-out infinite;
}

/* Keyframes */
@keyframes heroTextEnter {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroStageEnter {
  from {
    opacity: 0;
    transform: translateY(32px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes drawGraph {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes floatCardA {
  0%, 100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -10px;
  }
}

@keyframes floatCardB {
  0%, 100% {
    translate: 0 0;
  }
  50% {
    translate: 0 9px;
  }
}

@keyframes floatCardC {
  0%, 100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -8px;
  }
}

@keyframes orbitOne {
  from {
    transform: translate(-50%, -50%) rotate(-13deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(347deg);
  }
}

@keyframes orbitTwo {
  from {
    transform: translate(-50%, -50%) rotate(28deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-332deg);
  }
}

@keyframes orbDriftA {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(40px, -20px) scale(1.08);
  }
}

@keyframes orbDriftB {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-35px, 25px) scale(1.07);
  }
}

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

@keyframes floatLabB {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(7px);
  }
}

/* Learning Lab Scroll Entrance Animations */
.classes-left-content,
.classes-right-visual {
  transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}



/* Accessibility: prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .chart-line {
    stroke-dashoffset: 0;
  }
}