/* ══════════════════════════════════════════════════════════════
   APILOX — ANIMATION ENHANCEMENTS
   Add this AFTER your main index.css
   Features:
     • Mobile hero column carousel (3s rotation)
     • Staggered card reveals with multiple directions
     • Tilt-on-hover for cards
     • Text shimmer & typewriter effects
     • Particle / floating dot background
     • Glassmorphism float cards
     • Section entrance cinematic wipes
     • Pricing card 3-D tilt
     • Review card magnetic hover
     • Counter odometer feel
     • Footer reveal wave
══════════════════════════════════════════════════════════════ */

/* ── MOBILE HERO COLUMN CAROUSEL ────────────────────────────
   Only active at ≤ 768 px.
   Each column is shown for 3 s then fades/slides out.
   The wrapper becomes a full-width stage.
──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── Override the original index.css which sets:
        .hero__col { display: none }  and  .center__column { display: flex }
     We need ALL three columns visible as carousel slides, so we force
     them with the highest specificity short of !important on each property.
  ────────────────────────────────────────────────────────────────────── */

  .hero__inner .hero__visuals {
    display: block !important;
    position: relative !important;
    width: 100%;
    min-height: 400px;
    overflow: hidden;
  }

  /* All three columns — force visible and position as overlay slides */
  .hero__inner .hero__visuals .hero__col,
  .hero__inner .hero__visuals .center__column,
  .hero__inner .hero__visuals .hero__col.right__column {
    display: flex !important;   /* beats original display:none */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    flex-direction: column !important;
    gap: 12px;
    opacity: 0 !important;
    transform: translateX(60px) scale(0.96) !important;
    transition: none !important;
    pointer-events: none !important;
    padding: 0 8px;
    visibility: visible !important;
  }

  /* Active slide — bring it in */
  .hero__inner .hero__visuals .hero__col.carousel-active,
  .hero__inner .hero__visuals .center__column.carousel-active {
    opacity: 1 !important;
    transform: translateX(0) scale(1) !important;
    pointer-events: auto !important;
    transition: opacity 0.65s cubic-bezier(0.16,1,0.3,1),
                transform 0.65s cubic-bezier(0.16,1,0.3,1) !important;
  }

  /* Exiting slide — slide left out */
  .hero__inner .hero__visuals .hero__col.carousel-exit,
  .hero__inner .hero__visuals .center__column.carousel-exit {
    opacity: 0 !important;
    transform: translateX(-60px) scale(0.96) !important;
    pointer-events: none !important;
    transition: opacity 0.55s cubic-bezier(0.4,0,1,1),
                transform 0.55s cubic-bezier(0.4,0,1,1) !important;
  }

  /* Carousel progress dots */
  .carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    position: relative;
    z-index: 10;
    padding-bottom: 8px;
  }
  .carousel-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--green-border);
    transition: all 0.35s ease;
    cursor: pointer;
  }
  .carousel-dot.active {
    background: var(--green);
    width: 22px;
    border-radius: 3px;
  }

  /* Carousel timing bar */
  .carousel-timer-bar {
    position: absolute;
    bottom: 0; left: 0;
    height: 2px;
    background: var(--green);
    border-radius: 2px;
    animation: none;
    z-index: 10;
  }
  .carousel-timer-bar.running {
    animation: timerSweep 3s linear forwards;
  }
  @keyframes timerSweep {
    from { width: 0%; }
    to   { width: 100%; }
  }
}

/* ── ENHANCED REVEAL CLASSES ─────────────────────────────────
   Additional directional reveals beyond the base .reveal
──────────────────────────────────────────────────────────── */
.reveal-left {
  opacity: 0;
  transform: translateX(-48px);
  transition: opacity 0.85s cubic-bezier(0.16,1,0.3,1),
              transform 0.85s cubic-bezier(0.16,1,0.3,1);
}
.reveal-right {
  opacity: 0;
  transform: translateX(48px);
  transition: opacity 0.85s cubic-bezier(0.16,1,0.3,1),
              transform 0.85s cubic-bezier(0.16,1,0.3,1);
}
.reveal-scale {
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1),
              transform 0.75s cubic-bezier(0.16,1,0.3,1);
}
.reveal-left.active,
.reveal-right.active,
.reveal-scale.active {
  opacity: 1;
  transform: none;
}

/* Stagger helpers */
.reveal-left.delay-1, .reveal-right.delay-1, .reveal-scale.delay-1 { transition-delay: 0.10s; }
.reveal-left.delay-2, .reveal-right.delay-2, .reveal-scale.delay-2 { transition-delay: 0.20s; }
.reveal-left.delay-3, .reveal-right.delay-3, .reveal-scale.delay-3 { transition-delay: 0.30s; }
.reveal-left.delay-4, .reveal-right.delay-4, .reveal-scale.delay-4 { transition-delay: 0.40s; }
.reveal-left.delay-5, .reveal-right.delay-5, .reveal-scale.delay-5 { transition-delay: 0.55s; }

/* ── TILT CARD EFFECT ────────────────────────────────────────
   Applied via JS to .pricing-card, .review-card, .feature-item
──────────────────────────────────────────────────────────── */
.tilt-card {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.08s ease, box-shadow 0.3s ease !important;
}
.tilt-card:hover {
  box-shadow: 0 24px 60px rgba(31,188,81,0.18) !important;
}

/* ── SHIMMER TEXT ─────────────────────────────────────────── */
.shimmer-text {
  background: linear-gradient(
    90deg,
    var(--green-dark) 0%,
    #4ade80 40%,
    var(--green-dark) 80%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmerMove 3s linear infinite;
}
@keyframes shimmerMove {
  from { background-position: 200% center; }
  to   { background-position: -200% center; }
}

/* ── TYPEWRITER CURSOR ────────────────────────────────────── */
.typewriter-wrap {
  display: inline-block;
  position: relative;
}
.typewriter-wrap::after {
  content: '|';
  position: absolute;
  right: -4px;
  color: var(--green);
  animation: cursorBlink 0.8s step-end infinite;
}
.typewriter-wrap.done::after { display: none; }
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── HERO BACKGROUND PARTICLES ───────────────────────────── */
#hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.hero-particle {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--green);
  opacity: 0;
  animation: particleFly var(--dur, 8s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes particleFly {
  0%   { transform: translateY(0) scale(0);   opacity: 0; }
  10%  { opacity: 0.4; transform: translateY(-20px) scale(1); }
  90%  { opacity: 0.15; }
  100% { transform: translateY(-120px) scale(0.3); opacity: 0; }
}

/* ── SECTION WIPE ENTRANCE ───────────────────────────────── */
.section-wipe {
  position: relative;
  overflow: hidden;
}
.section-wipe::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--green);
  transform: scaleX(1);
  transform-origin: left;
  z-index: 5;
  pointer-events: none;
  transition: transform 0.9s cubic-bezier(0.77,0,0.18,1);
}
.section-wipe.wiped::before {
  transform: scaleX(0);
  transform-origin: right;
}

/* ── FLOAT CARD GLASS UPGRADE ────────────────────────────── */
.float-card {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255,255,255,0.88) !important;
}

/* ── PRICING CARD SPECIAL HOVER ──────────────────────────── */
.pricing-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.2s !important;
}
.pricing-card:hover {
  transform: translateY(-6px) scale(1.012) !important;
}
.pricing-card.popular:hover {
  transform: translateY(-8px) scale(1.018) !important;
  box-shadow: 0 28px 64px rgba(31,188,81,0.32) !important;
}

/* ── REVIEW CARD REVEAL UPGRADE ─────────────────────────── */
.review-card {
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1),
              background 0.28s,
              border-color 0.28s !important;
}

/* ── STAT ITEM COUNTER GLOW ──────────────────────────────── */
.stat-item__number {
  transition: color 0.3s;
}
.stat-item:hover .stat-item__number {
  color: var(--green) !important;
  text-shadow: 0 0 24px rgba(31,188,81,0.3);
}

/* ── FEATURE ITEM LINE ACCENT ────────────────────────────── */
.feature-item {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.3s ease;
}
.feature-item::before {
  content: '';
  position: absolute;
  left: -16px; top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px; height: 60%;
  background: var(--green);
  border-radius: 2px;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
  transform-origin: top;
}
.feature-item:hover::before { transform: translateY(-50%) scaleY(1); }
.feature-item:hover { padding-left: 4px; }

/* ── FAQ ITEM ENHANCED ───────────────────────────────────── */
.faq-item {
  transition: background 0.25s, transform 0.2s ease;
}
.faq-item:hover { transform: translateX(4px); }
.faq-item.open  { transform: translateX(0); }

/* ── TRUST LOGO MARQUEE ──────────────────────────────────── */
.trust-banner__logos.marquee-active {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  width: 100%;
}
.trust-marquee-track {
  display: flex;
  align-items: center;
  gap: 48px;
  animation: marqueeScroll 18s linear infinite;
  flex-shrink: 0;
  padding-right: 48px;
}
.trust-marquee-track img {
  flex-shrink: 0;
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── HERO CTA BUTTON PULSE ───────────────────────────────── */
.btn-green.pulse-btn {
  animation: btnPulseGlow 2.8s ease-in-out infinite;
}
@keyframes btnPulseGlow {
  0%,100% { box-shadow: 0 0 0 0 rgba(31,188,81,0); }
  50%     { box-shadow: 0 0 0 10px rgba(31,188,81,0); }
}

/* ── SCROLL PROGRESS BAR ─────────────────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green-dark), var(--green), #4ade80);
  width: 0%;
  z-index: 99999;
  transition: width 0.1s linear;
  border-radius: 0 2px 2px 0;
}

/* ── SECTION ENTRANCE COUNTER ────────────────────────────── */
@keyframes odometer {
  0%   { transform: translateY(100%); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translateY(0);   opacity: 1; }
}
.counter-wrap {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
}
.counter-inner {
  display: inline-block;
  animation: odometer 0.6s cubic-bezier(0.16,1,0.3,1) both;
  animation-delay: var(--d, 0s);
}

/* ── FOOTER WAVE REVEAL ──────────────────────────────────── */
.footer__col {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.footer__col.footer-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── NAV LINK UNDERLINE ANIMATE ──────────────────────────── */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px; left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 80%; height: 2px;
  background: var(--green);
  border-radius: 2px;
  transition: transform 0.25s ease;
}
.nav-link:hover::after,
.nav-link.active::after {
  transform: translateX(-50%) scaleX(1);
}

/* ── HERO CHIP BOUNCE IN ─────────────────────────────────── */
@keyframes chipBounce {
  0%   { transform: scale(0) translateY(-12px); opacity: 0; }
  60%  { transform: scale(1.12) translateY(2px); opacity: 1; }
  80%  { transform: scale(0.96); }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.chip.bounced { animation: chipBounce 0.7s cubic-bezier(0.34,1.56,0.64,1) forwards; }

/* ── REACH IMAGE PARALLAX ────────────────────────────────── */
.reach__img {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ── REVIEW SECTION SUBTLE TILT ─────────────────────────── */
.reviews__grid .review-card.tilt-card {
  transition: transform 0.12s ease !important;
}

/* ── CTA STARS SPARKLE ───────────────────────────────────── */
.cta-stars__icons i {
  display: inline-block;
  animation: starSparkle 2.4s ease-in-out infinite;
}
.cta-stars__icons i:nth-child(1) { animation-delay: 0s; }
.cta-stars__icons i:nth-child(2) { animation-delay: 0.18s; }
.cta-stars__icons i:nth-child(3) { animation-delay: 0.36s; }
.cta-stars__icons i:nth-child(4) { animation-delay: 0.54s; }
.cta-stars__icons i:nth-child(5) { animation-delay: 0.72s; }
@keyframes starSparkle {
  0%,100% { transform: scale(1);    filter: brightness(1); }
  50%     { transform: scale(1.25); filter: brightness(1.5); }
}

/* ── DRAWER STAGGER ITEMS ────────────────────────────────── */
.drawer-nav li {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.mobile-drawer.open .drawer-nav li {
  opacity: 1;
  transform: translateX(0);
}
.mobile-drawer.open .drawer-nav li:nth-child(1) { transition-delay: 0.08s; }
.mobile-drawer.open .drawer-nav li:nth-child(2) { transition-delay: 0.14s; }
.mobile-drawer.open .drawer-nav li:nth-child(3) { transition-delay: 0.20s; }
.mobile-drawer.open .drawer-nav li:nth-child(4) { transition-delay: 0.26s; }

/* ── PLAN BUTTON RIPPLE ──────────────────────────────────── */
.plan-btn {
  position: relative;
  overflow: hidden;
}
.plan-btn::after {
  content: '';
  position: absolute;
  inset: 50% 50%;
  background: rgba(255,255,255,0.28);
  border-radius: 50%;
  transform: scale(0);
  opacity: 1;
  transition: none;
  pointer-events: none;
}
.plan-btn.rippling::after {
  inset: -50%;
  transform: scale(1);
  opacity: 0;
  transition: inset 0.5s ease, transform 0.5s ease, opacity 0.5s ease;
}

/* ── HERO GRID DEPTH ─────────────────────────────────────── */
.hero-grid-bg {
  background-size: 60px 60px;
  transition: background-size 1s ease;
}
.hero-grid-bg.zoomed { background-size: 80px 80px; }

/* ── MOBILE-ONLY IMPROVEMENTS ───────────────────────────── */
@media (max-width: 768px) {
  .hero__inner .hero__visuals {
    margin-bottom: 48px;
  }
  .carousel-dots-wrap {
    display: flex;
    justify-content: center;
    padding-top: 16px;
  }
  .feature-item::before { display: none; }
}

/* ── REDUCED MOTION RESPECT ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}