/**
 * SKILLORBIT Academy — Animations & Motion
 * fade-up, fade-in, scale-in, slide-in, floating, orbit, counters, reduced motion
 */

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

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

@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-36px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(36px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

@keyframes float-rotate {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
}

@keyframes orbit-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Counter-rotate nodes so labels stay horizontal while rings spin */
@keyframes orbit-node-level {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(-360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.92); }
}

@keyframes pulse-ring {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.55);
    opacity: 0;
  }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes counter-pop {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes glow-breathe {
  0%, 100% { box-shadow: 0 0 20px rgba(54, 168, 74, 0.25); }
  50% { box-shadow: 0 0 40px rgba(54, 168, 74, 0.45); }
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes draw-line {
  from { stroke-dashoffset: 1000; }
  to { stroke-dashoffset: 0; }
}

@keyframes bounce-soft {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-8px); }
  60% { transform: translateY(-4px); }
}

@keyframes reveal-mask {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes blur-in {
  from {
    opacity: 0;
    filter: blur(12px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes typewriter-cursor {
  0%, 100% { border-color: transparent; }
  50% { border-color: var(--primary); }
}

/* ==========================================================================
   Reveal-on-scroll base (JS toggles .is-visible / .is-inview)
   ========================================================================== */
.reveal,
[data-animate],
.fade-up,
.fade-in,
.fade-down,
.scale-in,
.slide-in-left,
.slide-in-right,
.blur-in {
  opacity: 0;
  will-change: transform, opacity;
}

.reveal.is-visible,
.reveal.is-inview,
[data-animate].is-visible,
[data-animate].is-inview,
.fade-up.is-visible,
.fade-up.is-inview,
.fade-in.is-visible,
.fade-in.is-inview,
.fade-down.is-visible,
.fade-down.is-inview,
.scale-in.is-visible,
.scale-in.is-inview,
.slide-in-left.is-visible,
.slide-in-left.is-inview,
.slide-in-right.is-visible,
.slide-in-right.is-inview,
.blur-in.is-visible,
.blur-in.is-inview {
  opacity: 1;
}

/* Fade up */
.fade-up,
[data-animate="fade-up"] {
  transform: translateY(28px);
}

.fade-up.is-visible,
.fade-up.is-inview,
[data-animate="fade-up"].is-visible,
[data-animate="fade-up"].is-inview {
  animation: fadeUp var(--duration-slower) var(--ease-out) forwards;
}

/* Fade in */
.fade-in,
[data-animate="fade-in"] {
  transform: none;
}

.fade-in.is-visible,
.fade-in.is-inview,
[data-animate="fade-in"].is-visible,
[data-animate="fade-in"].is-inview {
  animation: fadeIn var(--duration-slower) var(--ease-out) forwards;
}

/* Fade down */
.fade-down,
[data-animate="fade-down"] {
  transform: translateY(-20px);
}

.fade-down.is-visible,
.fade-down.is-inview,
[data-animate="fade-down"].is-visible,
[data-animate="fade-down"].is-inview {
  animation: fadeDown var(--duration-slower) var(--ease-out) forwards;
}

/* Scale in */
.scale-in,
[data-animate="scale-in"] {
  transform: scale(0.88);
}

.scale-in.is-visible,
.scale-in.is-inview,
[data-animate="scale-in"].is-visible,
[data-animate="scale-in"].is-inview {
  animation: scaleIn var(--duration-slower) var(--ease-out) forwards;
}

/* Slide in left */
.slide-in-left,
[data-animate="slide-in-left"] {
  transform: translateX(-36px);
}

.slide-in-left.is-visible,
.slide-in-left.is-inview,
[data-animate="slide-in-left"].is-visible,
[data-animate="slide-in-left"].is-inview {
  animation: slideInLeft var(--duration-slower) var(--ease-out) forwards;
}

/* Slide in right */
.slide-in-right,
[data-animate="slide-in-right"] {
  transform: translateX(36px);
}

.slide-in-right.is-visible,
.slide-in-right.is-inview,
[data-animate="slide-in-right"].is-visible,
[data-animate="slide-in-right"].is-inview {
  animation: slideInRight var(--duration-slower) var(--ease-out) forwards;
}

/* Blur in */
.blur-in,
[data-animate="blur-in"] {
  filter: blur(12px);
}

.blur-in.is-visible,
.blur-in.is-inview,
[data-animate="blur-in"].is-visible,
[data-animate="blur-in"].is-inview {
  animation: blur-in var(--duration-slower) var(--ease-out) forwards;
}

/* Stagger delays */
.stagger-1, [data-delay="1"] { animation-delay: 0.08s; transition-delay: 0.08s; }
.stagger-2, [data-delay="2"] { animation-delay: 0.16s; transition-delay: 0.16s; }
.stagger-3, [data-delay="3"] { animation-delay: 0.24s; transition-delay: 0.24s; }
.stagger-4, [data-delay="4"] { animation-delay: 0.32s; transition-delay: 0.32s; }
.stagger-5, [data-delay="5"] { animation-delay: 0.4s; transition-delay: 0.4s; }
.stagger-6, [data-delay="6"] { animation-delay: 0.48s; transition-delay: 0.48s; }
.stagger-7, [data-delay="7"] { animation-delay: 0.56s; transition-delay: 0.56s; }
.stagger-8, [data-delay="8"] { animation-delay: 0.64s; transition-delay: 0.64s; }

[data-delay="100"] { animation-delay: 0.1s; }
[data-delay="200"] { animation-delay: 0.2s; }
[data-delay="300"] { animation-delay: 0.3s; }
[data-delay="400"] { animation-delay: 0.4s; }
[data-delay="500"] { animation-delay: 0.5s; }
[data-delay="600"] { animation-delay: 0.6s; }

/* Transition-based reveal (alternative to keyframes) */
.reveal-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity var(--duration-slower) var(--ease-out),
    transform var(--duration-slower) var(--ease-out);
}

.reveal-up.is-visible,
.reveal-up.is-inview {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   Continuous / ambient motion
   ========================================================================== */
.floating,
.animate-float {
  animation: float 6s ease-in-out infinite;
}

.floating--slow { animation-duration: 8s; }
.floating--fast { animation-duration: 4s; }
.floating--delay { animation-delay: 1.2s; }

.animate-float-rotate {
  animation: float-rotate 7s ease-in-out infinite;
}

.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.animate-bounce {
  animation: bounce-soft 2s ease-in-out infinite;
}

.animate-glow {
  animation: glow-breathe 3s ease-in-out infinite;
}

.animate-gradient {
  background-size: 200% 200%;
  animation: gradient-shift 8s ease infinite;
}

.animate-shimmer {
  background: linear-gradient(
    90deg,
    var(--surface-muted) 25%,
    rgba(54, 168, 74, 0.12) 50%,
    var(--surface-muted) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

/* Orbit utilities */
.orbit {
  animation: orbit-spin 20s linear infinite;
}

.orbit--reverse {
  animation: orbit-spin 20s linear infinite reverse;
}

.orbit--slow {
  animation-duration: 40s;
}

.orbit--fast {
  animation-duration: 12s;
}

/* ==========================================================================
   Counters
   ========================================================================== */
.counter,
.stat__value[data-count],
[data-counter] {
  font-variant-numeric: tabular-nums;
}

.counter.is-visible,
.counter.is-counting,
[data-counter].is-visible {
  animation: counter-pop 0.6s var(--ease-spring) forwards;
}

.counter-wrap {
  display: inline-flex;
  align-items: baseline;
  gap: 0.1em;
}

.counter__prefix,
.counter__suffix {
  font-size: 0.55em;
  font-weight: var(--fw-bold);
}

/* Progress bar fill animation */
.progress__bar[data-animate],
.batch-card__progress-bar[data-animate] {
  width: 0 !important;
  transition: width 1.2s var(--ease-out);
}

.progress__bar[data-animate].is-visible,
.batch-card__progress-bar[data-animate].is-visible {
  width: var(--progress, 50%) !important;
}

/* ==========================================================================
   Hover micro-interactions
   ========================================================================== */
.hover-lift {
  transition: transform var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.hover-glow {
  transition: box-shadow var(--duration) var(--ease-out);
}

.hover-glow:hover {
  box-shadow: var(--glow-primary);
}

.hover-scale {
  transition: transform var(--duration) var(--ease-out);
}

.hover-scale:hover {
  transform: scale(1.03);
}

.hover-bright {
  transition: filter var(--duration) var(--ease-out);
}

.hover-bright:hover {
  filter: brightness(1.08);
}

/* Image zoom on parent hover */
.img-zoom {
  overflow: hidden;
}

.img-zoom img {
  transition: transform var(--duration-slow) var(--ease-out);
}

.img-zoom:hover img {
  transform: scale(1.06);
}

/* Underline draw on links */
.link-draw {
  position: relative;
  text-decoration: none;
}

.link-draw::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: var(--gradient-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration) var(--ease-out);
}

.link-draw:hover::after {
  transform: scaleX(1);
}

/* ==========================================================================
   Page load / hero entrance
   ========================================================================== */
.hero-enter .hero__eyebrow {
  animation: fadeDown 0.7s var(--ease-out) 0.1s both;
}

.hero-enter .hero__title {
  animation: fadeUp 0.8s var(--ease-out) 0.2s both;
}

.hero-enter .hero__subtitle {
  animation: fadeUp 0.8s var(--ease-out) 0.35s both;
}

.hero-enter .hero__actions {
  animation: fadeUp 0.8s var(--ease-out) 0.5s both;
}

.hero-enter .hero__trust {
  animation: fadeIn 0.8s var(--ease-out) 0.65s both;
}

.hero-enter .hero__visual {
  animation: scaleIn 1s var(--ease-out) 0.3s both;
}

.hero-enter .hero__float-card--1 {
  animation: fadeUp 0.8s var(--ease-out) 0.7s both, float 5s ease-in-out 1.5s infinite;
}

.hero-enter .hero__float-card--2 {
  animation: fadeUp 0.8s var(--ease-out) 0.85s both, float 5s ease-in-out 1.7s infinite;
}

.hero-enter .hero__float-card--3 {
  animation: fadeUp 0.8s var(--ease-out) 1s both, float 5s ease-in-out 1.9s infinite;
}

/* Page fade */
.page-fade {
  animation: fadeIn 0.4s var(--ease-out);
}

/* ==========================================================================
   Loading states
   ========================================================================== */
.is-loading {
  position: relative;
  pointer-events: none;
  color: transparent !important;
}

.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.btn.is-loading {
  color: transparent !important;
}

.btn.is-loading > * {
  visibility: hidden;
}

/* ==========================================================================
   Text effects
   ========================================================================== */
.text-shimmer {
  background: linear-gradient(
    90deg,
    var(--deep) 0%,
    var(--primary-soft) 40%,
    var(--deep) 80%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradient-shift 4s linear infinite;
}

.typewriter {
  display: inline-block;
  overflow: hidden;
  border-right: 2px solid var(--primary);
  white-space: nowrap;
  animation: typewriter-cursor 0.8s step-end infinite;
}

/* ==========================================================================
   Scroll-driven helpers
   ========================================================================== */
.parallax-slow {
  will-change: transform;
}

.sticky-section {
  position: sticky;
  top: var(--header-h);
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal,
  [data-animate],
  .fade-up,
  .fade-in,
  .fade-down,
  .scale-in,
  .slide-in-left,
  .slide-in-right,
  .blur-in,
  .reveal-up {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .floating,
  .animate-float,
  .animate-float-rotate,
  .animate-pulse,
  .animate-bounce,
  .animate-glow,
  .animate-gradient,
  .orbit,
  .orbit--reverse,
  .orbit--slow,
  .orbit--fast,
  .marquee__track,
  .glass-card--float,
  .hero__float-card,
  .floating-cta__btn,
  .floating-cta__pulse,
  .dashboard-mockup__float,
  .orbit-stage__ring,
  .orbit-stage__node,
  .custom-cursor,
  .custom-cursor__ring {
    animation: none !important;
  }

  .course-card:hover {
    transform: translateY(-4px);
  }

  .dashboard-mockup {
    transform: none;
  }

  .dashboard-mockup:hover {
    transform: none;
  }

  .hero-enter .hero__eyebrow,
  .hero-enter .hero__title,
  .hero-enter .hero__subtitle,
  .hero-enter .hero__actions,
  .hero-enter .hero__trust,
  .hero-enter .hero__visual,
  .hero-enter .hero__float-card--1,
  .hero-enter .hero__float-card--2,
  .hero-enter .hero__float-card--3 {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  .marquee__track {
    transform: none;
  }
}

/* Explicit opt-out class */
.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after {
  animation: none !important;
  transition: none !important;
}

.reduce-motion .reveal,
.reduce-motion [data-animate],
.reduce-motion .fade-up,
.reduce-motion .fade-in,
.reduce-motion .scale-in {
  opacity: 1 !important;
  transform: none !important;
}