/* ============================================
   SMARTER SOLUTION — ANIMATIONS CSS
   Keyframes · Scroll Progress · Cursor · GSAP helpers
   ============================================ */

/* ----- SCROLL PROGRESS BAR (CSS-only for browsers that support it) ----- */
@supports (animation-timeline: scroll()) {
  .scroll-progress {
    animation: scaleX-progress linear;
    animation-timeline: scroll();
  }

  @keyframes scaleX-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
}

/* ----- KEYFRAME ANIMATIONS ----- */

/* CTA pulse glow */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 4px 16px rgba(249, 115, 22, 0.3);
  }
  50% {
    box-shadow: 0 4px 32px rgba(249, 115, 22, 0.55), 0 0 60px rgba(249, 115, 22, 0.15);
  }
}

.btn-pulse {
  animation: pulse-glow 2.5s ease-in-out infinite;
}

/* Scroll indicator bounce */
@keyframes chevron-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(8px); opacity: 1; }
}

.scroll-chevron {
  animation: chevron-bounce 2s ease-in-out infinite;
}

/* Float / hover effect for orbs */
@keyframes float-gentle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-12px) rotate(1deg); }
  66% { transform: translateY(6px) rotate(-1deg); }
}

.float-animation {
  animation: float-gentle 6s ease-in-out infinite;
}

/* Gradient mesh shift for CTA background */
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.gradient-mesh-bg {
  background: linear-gradient(
    -45deg,
    rgba(37, 99, 235, 0.1),
    rgba(249, 115, 22, 0.08),
    rgba(37, 99, 235, 0.12),
    rgba(249, 115, 22, 0.06)
  );
  background-size: 400% 400%;
  animation: gradient-shift 12s ease infinite;
}

/* Spin for loading or decorative elements */
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

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

/* Fade in up (CSS fallback before GSAP loads) */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Typing cursor blink */
@keyframes cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.typing-cursor {
  display: inline-block;
  margin-left: 2px;
  color: var(--white);
  line-height: 1;
  animation: cursor-blink 0.8s step-end infinite;
}

.typing-cursor::before {
  content: '|';
}

/* ----- GSAP HELPER CLASSES (initial states) ----- */

/* These are set by GSAP on init. CSS provides a fallback. */
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
}

.reveal-down {
  opacity: 0;
  transform: translateY(-40px);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
}

.reveal-right {
  opacity: 0;
  transform: translateX(60px);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
}

.reveal-fade {
  opacity: 0;
}

/* Stagger children initial state */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
}

/* Word-split animation helper */
.split-words .word {
  display: inline-block;
  overflow: hidden;
}

.split-words .word-inner {
  display: inline-block;
  transform: translateY(100%);
}

/* Counter animation: hide text before GSAP animates */
.counter-value {
  font-variant-numeric: tabular-nums;
}

/* ----- HOVER MICRO-INTERACTIONS ----- */

/* Card lift on hover */
.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

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

/* Glow ring on hover */
.hover-glow-blue {
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.hover-glow-blue:hover {
  box-shadow: 0 0 40px rgba(37, 99, 235, 0.2), 0 8px 32px rgba(0, 0, 0, 0.3);
  border-color: rgba(37, 99, 235, 0.3);
}

.hover-glow-orange {
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.hover-glow-orange:hover {
  box-shadow: 0 0 40px rgba(249, 115, 22, 0.2), 0 8px 32px rgba(0, 0, 0, 0.3);
  border-color: rgba(249, 115, 22, 0.3);
}

/* Icon rotate on hover */
.hover-icon-rotate:hover svg,
.hover-icon-rotate:hover .icon {
  transform: rotate(8deg) scale(1.1);
  transition: transform var(--transition-spring);
}

/* Link underline grow */
.link-underline {
  position: relative;
}

.link-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: currentColor;
  transition: width var(--transition-base);
}

.link-underline:hover::after {
  width: 100%;
}

/* Arrow slide right on hover */
.arrow-slide {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.arrow-slide svg {
  transition: transform var(--transition-base);
}

.arrow-slide:hover svg {
  transform: translateX(4px);
}

/* ----- TESTIMONIAL CAROUSEL TRANSITIONS ----- */
.testimonial-enter {
  opacity: 0;
  transform: translateX(30px);
}

.testimonial-active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}

.testimonial-exit {
  opacity: 0;
  transform: translateX(-30px);
  transition: all 0.5s ease;
}

/* ----- LOADING / SKELETON ----- */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--dark-card) 25%,
    var(--dark-surface) 50%,
    var(--dark-card) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

/* ----- 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-up,
  .reveal-down,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .reveal-fade,
  .stagger-children > * {
    opacity: 1;
    transform: none;
  }

  .split-words .word-inner {
    transform: none;
  }

  .scroll-progress {
    display: none;
  }

  .cursor-dot,
  .cursor-ring {
    display: none;
  }

  .gradient-orb {
    animation: none;
  }

  .btn-pulse {
    animation: none;
  }

  .scroll-chevron {
    animation: none;
  }
}