/* === Bestoow animations module === */

/* ============================================
   1. SCROLL REVEAL: elements fade in from below when entering viewport
   Default state: invisible, slightly translated down
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for child items */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0.05s; opacity:1; transform:translateY(0); }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 0.15s; opacity:1; transform:translateY(0); }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 0.25s; opacity:1; transform:translateY(0); }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 0.35s; opacity:1; transform:translateY(0); }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 0.45s; opacity:1; transform:translateY(0); }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 0.55s; opacity:1; transform:translateY(0); }

/* ============================================
   2. CARD 3D HOVER: subtle perspective tilt + shine sweep
   ============================================ */
.card, .pillar, .post-card, .case-medium, .founder-card, .testimonial, .case-list-tile {
  transform-style: preserve-3d;
  will-change: transform;
}

/* Shine sweep — a soft light passing across cards on hover */
.card::before, .pillar::before, .post-card::before, .testimonial::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255, 255, 255, 0.03) 50%,
    transparent 70%
  );
  transition: left 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 1;
}
.card:hover::before, .pillar:hover::before,
.post-card:hover::before, .testimonial:hover::before {
  left: 100%;
}

/* Make sure card content stays above the shine */
.card > *, .pillar > *, .post-card > *, .testimonial > * {
  position: relative;
  z-index: 2;
}

/* ============================================
   3. COUNT-UP NUMBERS: visual cue handled by JS
   But we make sure the digits feel "alive" with a brief scale at end
   ============================================ */
.counted {
  display: inline-block;
  animation: count-finish 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes count-finish {
  0% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* ============================================
   4. LIVING PARTICLES: enhanced particle system
   Particles drift slowly, with varied sizes and opacity oscillation
   ============================================ */
@keyframes p-drift-1 {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(20px, -15px); }
  40%  { transform: translate(35px, -30px); }
  60%  { transform: translate(15px, -45px); }
  80%  { transform: translate(-15px, -25px); }
  100% { transform: translate(0, 0); }
}
@keyframes p-drift-2 {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-20px, 15px); }
  50%  { transform: translate(-30px, 30px); }
  75%  { transform: translate(15px, 25px); }
  100% { transform: translate(0, 0); }
}
@keyframes p-drift-3 {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-25px, 18px); }
  66%  { transform: translate(20px, -22px); }
  100% { transform: translate(0, 0); }
}
.p-living {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
}

/* ============================================
   5. SECTION TITLES word-by-word fade-in (subtle)
   ============================================ */
.title-words .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.title-words.in .word {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   6. SMOOTH HOVER STATES for nav and buttons
   ============================================ */
.btn {
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  transform: translate(-50%, -50%);
  transition: width 0.5s, height 0.5s;
  pointer-events: none;
}
.btn:hover::after {
  width: 400px;
  height: 400px;
}
.btn > * {
  position: relative;
  z-index: 1;
}

/* ============================================
   7. ACCESSIBILITY: respect reduced motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > *,
  .title-words .word,
  .counted, .p-living {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================
   8. GRADIENT MESH AMBIANT — animated background
   3 large soft gradients that drift slowly across the page
   ============================================ */
.bg-mesh {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.bg-mesh-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.6;
  will-change: transform;
}
.bg-mesh-blob.b1 {
  width: 850px; height: 850px;
  background: radial-gradient(circle, rgba(91,141,239,0.5) 0%, transparent 65%);
  top: -10%; left: -5%;
  animation: mesh-drift-1 9s ease-in-out infinite;
}
.bg-mesh-blob.b2 {
  width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(242,201,76,0.4) 0%, transparent 65%);
  top: 40%; right: -10%;
  animation: mesh-drift-2 11s ease-in-out infinite;
}
.bg-mesh-blob.b3 {
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(91,205,138,0.35) 0%, transparent 65%);
  bottom: -10%; left: 30%;
  animation: mesh-drift-3 10s ease-in-out infinite;
}
@keyframes mesh-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(420px, 300px) scale(1.35); }
  66% { transform: translate(210px, 480px) scale(0.85); }
}
@keyframes mesh-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-480px, -360px) scale(1.5); }
}
@keyframes mesh-drift-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40% { transform: translate(480px, -420px) scale(1.35); }
  70% { transform: translate(-360px, 210px) scale(0.8); }
}

/* The existing body::before gradient becomes more subtle to not compete */
body::before {
  opacity: 0.4 !important;
}

/* ============================================
   9. SECTION AURORA — colored glow that follows mouse within sections
   Activated by JS that sets --mouse-x and --mouse-y on each section
   ============================================ */
section {
  position: relative;
}
section.aurora-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle 600px at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(91, 205, 138, 0.08),
    transparent 50%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: 0;
}
section.aurora-section:hover::after {
  opacity: 1;
}
/* Section content stays above the aurora */
section.aurora-section > .cnt,
section.aurora-section > * {
  position: relative;
  z-index: 2;
}

/* ============================================
   10. KEY NUMBERS heartbeat pulse — stronger emphasis on hero numbers
   Applied to .heartbeat class
   ============================================ */
@keyframes heartbeat-glow {
  0%, 100% {
    text-shadow:
      0 0 24px var(--glow-color, rgba(91,205,138,0.5)),
      0 0 48px var(--glow-color-soft, rgba(91,205,138,0.25)),
      0 0 80px var(--glow-color-soft, rgba(91,205,138,0.12));
    transform: scale(1);
  }
  10% {
    text-shadow:
      0 0 36px var(--glow-color, rgba(91,205,138,0.85)),
      0 0 72px var(--glow-color-soft, rgba(91,205,138,0.55)),
      0 0 120px var(--glow-color-soft, rgba(91,205,138,0.3));
    transform: scale(1.03);
  }
  20% {
    text-shadow:
      0 0 28px var(--glow-color, rgba(91,205,138,0.65)),
      0 0 56px var(--glow-color-soft, rgba(91,205,138,0.35)),
      0 0 96px var(--glow-color-soft, rgba(91,205,138,0.18));
    transform: scale(1.01);
  }
  30% {
    text-shadow:
      0 0 36px var(--glow-color, rgba(91,205,138,0.85)),
      0 0 72px var(--glow-color-soft, rgba(91,205,138,0.55)),
      0 0 120px var(--glow-color-soft, rgba(91,205,138,0.3));
    transform: scale(1.02);
  }
}
.heartbeat {
  display: inline-block;
  animation: heartbeat-glow 6s ease-in-out infinite;
  will-change: transform, text-shadow;
}
.heartbeat.b { --glow-color: rgba(91,141,239,0.85); --glow-color-soft: rgba(91,141,239,0.4); }
.heartbeat.y { --glow-color: rgba(242,201,76,0.85); --glow-color-soft: rgba(242,201,76,0.4); }
.heartbeat.g { --glow-color: rgba(91,205,138,0.85); --glow-color-soft: rgba(91,205,138,0.4); }

/* ============================================
   11. LOCALIZED PARTICLES around important visuals
   Container with class .particle-emitter has its own particle cloud
   ============================================ */
.particle-emitter {
  position: relative;
}
.particle-cloud {
  position: absolute;
  inset: -10%;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}
.particle-cloud .pc {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
}
@keyframes orbit-1 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
  25% { transform: translate(70px, -55px) scale(1.5); opacity: 1; }
  50% { transform: translate(45px, -115px) scale(0.8); opacity: 0.85; }
  75% { transform: translate(-60px, -75px) scale(1.5); opacity: 1; }
}
@keyframes orbit-2 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
  33% { transform: translate(-85px, 55px) scale(1.5); opacity: 1; }
  66% { transform: translate(75px, 95px) scale(0.75); opacity: 0.85; }
}
@keyframes orbit-3 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
  50% { transform: translate(-100px, 70px) scale(1.7); opacity: 1; }
}


/* Twinkle: particles that subtly fade in/out like stars */
@keyframes p-twinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.9); }
  20% { opacity: 1; transform: scale(1.4); }
  40% { opacity: 0.5; transform: scale(1); }
  60% { opacity: 0.95; transform: scale(1.2); }
  80% { opacity: 0.4; transform: scale(0.95); }
}

/* Increase visibility of living particles */
.p-living {
  will-change: transform, opacity;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout style paint;
}

/* Force GPU layer on particles container too */
.particles {
  transform: translateZ(0);
  contain: layout style paint;
}