/* ============================================================
   ANIMATIONS.CSS
   Premium SEO Website — All animations & micro-interactions
   ============================================================ */

/* ----------------------------------------------------------
   Custom easing curves
   ---------------------------------------------------------- */
:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-smooth: cubic-bezier(0.45, 0, 0.15, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================
   1. SCROLL REVEAL ANIMATIONS
   Triggered by adding .is-visible via IntersectionObserver
   ============================================================ */

/* — Fade In ------------------------------------------------ */
.fade-in {
  opacity: 0;
  transition: opacity 0.7s var(--ease-out-expo);
}
.fade-in.is-visible {
  opacity: 1;
}

/* — Slide Up ----------------------------------------------- */
.slide-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s var(--ease-out-expo),
              transform 0.7s var(--ease-out-expo);
}
.slide-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* — Slide Down --------------------------------------------- */
.slide-down {
  opacity: 0;
  transform: translateY(-40px);
  transition: opacity 0.7s var(--ease-out-expo),
              transform 0.7s var(--ease-out-expo);
}
.slide-down.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* — Slide Left (enters from right) ------------------------- */
.slide-left {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s var(--ease-out-expo),
              transform 0.7s var(--ease-out-expo);
}
.slide-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* — Slide Right (enters from left) ------------------------- */
.slide-right {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s var(--ease-out-expo),
              transform 0.7s var(--ease-out-expo);
}
.slide-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* — Scale In ----------------------------------------------- */
.scale-in {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.7s var(--ease-out-expo),
              transform 0.7s var(--ease-out-expo);
}
.scale-in.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* — Zoom In ------------------------------------------------ */
.zoom-in {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.8s var(--ease-out-expo),
              transform 0.8s var(--ease-out-expo);
}
.zoom-in.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* — Stagger Children --------------------------------------- */
.stagger-children > *:nth-child(1)  { transition-delay: 50ms; }
.stagger-children > *:nth-child(2)  { transition-delay: 100ms; }
.stagger-children > *:nth-child(3)  { transition-delay: 150ms; }
.stagger-children > *:nth-child(4)  { transition-delay: 200ms; }
.stagger-children > *:nth-child(5)  { transition-delay: 250ms; }
.stagger-children > *:nth-child(6)  { transition-delay: 300ms; }
.stagger-children > *:nth-child(7)  { transition-delay: 350ms; }
.stagger-children > *:nth-child(8)  { transition-delay: 400ms; }
.stagger-children > *:nth-child(9)  { transition-delay: 450ms; }
.stagger-children > *:nth-child(10) { transition-delay: 500ms; }

/* ============================================================
   2. HERO ANIMATIONS
   ============================================================ */

/* — Hero Text Reveal (clip-path left to right) ------------- */
@keyframes heroTextReveal {
  0% {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }
  100% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

.hero-text-reveal {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  animation: heroTextReveal 0.9s var(--ease-out-expo) 0.2s forwards;
}

/* — Hero Fade In (staggered for subtitle, CTA) ------------- */
@keyframes heroFadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-fade-in {
  opacity: 0;
  animation: heroFadeIn 0.8s var(--ease-out-expo) forwards;
}
.hero-fade-in:nth-child(1) { animation-delay: 0.6s; }
.hero-fade-in:nth-child(2) { animation-delay: 0.8s; }
.hero-fade-in:nth-child(3) { animation-delay: 1.0s; }
.hero-fade-in:nth-child(4) { animation-delay: 1.2s; }

/* — Floating / Bobbing Decorative Elements ----------------- */
@keyframes floatBob1 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%      { transform: translateY(-12px) rotate(1deg); }
  66%      { transform: translateY(6px) rotate(-1deg); }
}

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

@keyframes floatBob3 {
  0%, 100% { transform: translateY(0) translateX(0); }
  25%      { transform: translateY(-8px) translateX(6px); }
  50%      { transform: translateY(-16px) translateX(0); }
  75%      { transform: translateY(-8px) translateX(-6px); }
}

.float-1 {
  animation: floatBob1 6s var(--ease-in-out-smooth) infinite;
  will-change: transform;
}

.float-2 {
  animation: floatBob2 8s var(--ease-in-out-smooth) infinite;
  will-change: transform;
}

.float-3 {
  animation: floatBob3 10s var(--ease-in-out-smooth) infinite;
  will-change: transform;
}

/* — Animated Gradient Background --------------------------- */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.gradient-bg {
  background: linear-gradient(
    135deg,
    var(--color-secondary, #1A1A2E),
    var(--color-accent, #2563EB),
    #0f172a,
    var(--color-accent, #2563EB)
  );
  background-size: 300% 300%;
  animation: gradientShift 12s ease infinite;
}

/* ============================================================
   3. DECORATIVE ANIMATIONS
   ============================================================ */

/* — Morphing Blob ------------------------------------------ */
@keyframes blobMorph {
  0%, 100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  25% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }
  50% {
    border-radius: 50% 60% 30% 60% / 30% 40% 70% 60%;
  }
  75% {
    border-radius: 40% 30% 60% 50% / 60% 70% 40% 30%;
  }
}

.blob {
  animation: blobMorph 8s var(--ease-in-out-smooth) infinite;
  will-change: border-radius;
}

/* — Pulse Dot ---------------------------------------------- */
@keyframes pulseDot {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.6);
    opacity: 0.4;
  }
}

.pulse-dot {
  animation: pulseDot 2.5s var(--ease-in-out-smooth) infinite;
}

/* — Orbit -------------------------------------------------- */
@keyframes orbit {
  0%   { transform: rotate(0deg) translateX(60px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(60px) rotate(-360deg); }
}

.orbit {
  animation: orbit 10s linear infinite;
  will-change: transform;
}

/* — Typing Cursor ------------------------------------------ */
@keyframes typingBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

.typing-cursor {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background-color: var(--color-accent, #2563EB);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: typingBlink 0.9s steps(1) infinite;
}

/* — Shimmer / Shine Effect --------------------------------- */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.shimmer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: shimmer 2.5s var(--ease-in-out-smooth) infinite;
}

/* — Glow Pulse (for CTA buttons) -------------------------- */
@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.3),
                0 0 20px rgba(37, 99, 235, 0.1);
  }
  50% {
    box-shadow: 0 0 16px rgba(37, 99, 235, 0.5),
                0 0 40px rgba(37, 99, 235, 0.2);
  }
}

.glow-pulse {
  animation: glowPulse 2.5s var(--ease-in-out-smooth) infinite;
}

/* — Slow Continuous Rotation ------------------------------- */
@keyframes rotateSlow {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

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

/* ============================================================
   4. UI MICRO-INTERACTIONS
   ============================================================ */

/* — Hover Lift --------------------------------------------- */
.hover-lift {
  transition: transform var(--transition-normal, 300ms ease),
              box-shadow var(--transition-normal, 300ms ease);
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12),
              0 4px 12px rgba(0, 0, 0, 0.06);
}

/* — Hover Scale -------------------------------------------- */
.hover-scale {
  transition: transform var(--transition-normal, 300ms ease);
}
.hover-scale:hover {
  transform: scale(1.02);
}

/* — Hover Glow --------------------------------------------- */
.hover-glow {
  transition: box-shadow var(--transition-normal, 300ms ease);
}
.hover-glow:hover {
  box-shadow: 0 0 20px rgba(37, 99, 235, 0.35),
              0 0 40px rgba(37, 99, 235, 0.1);
}

/* — Button Ripple ------------------------------------------ */
.btn-ripple {
  position: relative;
  overflow: hidden;
}
.btn-ripple::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transform: translate(-50%, -50%);
  transition: width 0.6s var(--ease-out-expo),
              height 0.6s var(--ease-out-expo),
              opacity 0.6s ease;
  opacity: 0;
  pointer-events: none;
}
.btn-ripple:active::after {
  width: 300px;
  height: 300px;
  opacity: 1;
  transition: width 0s, height 0s, opacity 0s;
}

/* — Link Underline (animated from left on hover) ----------- */
.link-underline {
  position: relative;
  text-decoration: none;
}
.link-underline::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-accent, #2563EB);
  transition: width 0.4s var(--ease-out-expo);
}
.link-underline:hover::after {
  width: 100%;
}

/* — Card Tilt (CSS-only 3D hover) -------------------------- */
.card-tilt {
  perspective: 800px;
  transition: transform var(--transition-normal, 300ms ease);
}
.card-tilt:hover {
  transform: perspective(800px) rotateX(2deg) rotateY(-2deg) translateY(-2px);
}

/* ============================================================
   5. COUNTER / NUMBER ANIMATIONS
   ============================================================ */

.count-up {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  transition: opacity 0.3s ease;
}

/* ============================================================
   6. LOADING / PROGRESS
   ============================================================ */

/* — Skeleton Pulse ----------------------------------------- */
@keyframes skeletonPulse {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton-pulse {
  background: linear-gradient(
    90deg,
    #e2e8f0 25%,
    #f1f5f9 50%,
    #e2e8f0 75%
  );
  background-size: 200% 100%;
  animation: skeletonPulse 1.8s ease infinite;
  border-radius: 4px;
  color: transparent;
  user-select: none;
  pointer-events: none;
}

/* — Progress Fill ------------------------------------------ */
.progress-fill {
  width: 0;
  transition: width 1.2s var(--ease-out-expo);
  border-radius: inherit;
}

/* — Spinner ------------------------------------------------ */
@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid rgba(37, 99, 235, 0.2);
  border-top-color: var(--color-accent, #2563EB);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

/* ============================================================
   7. SCROLL PROGRESS BAR
   ============================================================ */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--color-accent, #2563EB);
  z-index: 9999;
  transition: none;
  will-change: width;
}

/* ============================================================
   8. PARALLAX-READY CLASSES
   ============================================================ */

.parallax-slow,
.parallax-medium,
.parallax-fast {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* JS sets transform: translateY(...) based on scroll.
   These classes simply define readiness and speed multipliers
   via data attributes or direct JS manipulation. */

/* ============================================================
   9. PREFERS 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;
  }

  .fade-in,
  .slide-up,
  .slide-down,
  .slide-left,
  .slide-right,
  .scale-in,
  .zoom-in {
    opacity: 1 !important;
    transform: none !important;
  }

  .fade-in.is-visible,
  .slide-up.is-visible,
  .slide-down.is-visible,
  .slide-left.is-visible,
  .slide-right.is-visible,
  .scale-in.is-visible,
  .zoom-in.is-visible {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-text-reveal {
    opacity: 1 !important;
    clip-path: none !important;
  }

  .hero-fade-in {
    opacity: 1 !important;
    transform: none !important;
  }

  .float-1,
  .float-2,
  .float-3,
  .orbit,
  .rotate-slow,
  .blob {
    animation: none !important;
    transform: none !important;
  }

  .stagger-children > * {
    transition-delay: 0ms !important;
  }

  .hover-lift:hover,
  .hover-scale:hover,
  .card-tilt:hover {
    transform: none !important;
  }

  .parallax-slow,
  .parallax-medium,
  .parallax-fast {
    transform: none !important;
    will-change: auto !important;
  }
}