/* ============================================
   WhimGlobal — Global Animation System v2.0
   ============================================ */

/* ── 1. SCROLL REVEAL (Fade + Slide Up) ── */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity  0.75s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fade from left */
.animate-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1), transform 0.75s cubic-bezier(0.16,1,0.3,1);
}
.animate-left.is-visible { opacity: 1; transform: translateX(0); }

/* Fade from right */
.animate-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1), transform 0.75s cubic-bezier(0.16,1,0.3,1);
}
.animate-right.is-visible { opacity: 1; transform: translateX(0); }

/* Scale in */
.animate-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.34,1.56,0.64,1);
}
.animate-scale.is-visible { opacity: 1; transform: scale(1); }

/* ── 2. STAGGER DELAYS ── */
.stagger-1 { transition-delay: 0.05s; }
.stagger-2 { transition-delay: 0.14s; }
.stagger-3 { transition-delay: 0.23s; }
.stagger-4 { transition-delay: 0.32s; }
.stagger-5 { transition-delay: 0.41s; }
.stagger-6 { transition-delay: 0.50s; }
.stagger-7 { transition-delay: 0.59s; }

/* ── 3. PAGE LOAD ANIMATION ── */
@keyframes heroFadeIn {
  0%   { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}

.hero h1, .hero__h1, .about-hero h1, .hero-title, .pricing-hero h1 {
  animation: heroFadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.hero__sub {
  animation: heroFadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}
.hero__p {
  animation: heroFadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}
.hero__list {
  animation: heroFadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both;
}
.hero__btns {
  animation: heroFadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
}
.hero__img-card {
  animation: heroFadeIn 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
.hero__trust {
  animation: heroFadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.65s both;
}
.announcement {
  animation: heroFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0s both;
}
.navbar {
  animation: heroFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0s both;
}

/* ── 4. FLOATING GOLD ORBS (hero decoration) ── */
@keyframes floatOrb {
  0%, 100% { transform: translateY(0px) scale(1); }
  50%       { transform: translateY(-18px) scale(1.04); }
}
@keyframes floatOrbSlow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%       { transform: translateY(-12px) rotate(8deg); }
}

.hero::after {
  content: '';
  position: absolute;
  bottom: -60px; left: -60px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230,168,23,.12) 0%, transparent 70%);
  animation: floatOrb 7s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* ── 5. NAVBAR SCROLL BEHAVIOR ── */
.navbar {
  transition: box-shadow 0.35s ease, background 0.35s ease !important;
}
.navbar.scrolled {
  box-shadow: 0 4px 32px rgba(0,0,0,.08);
  background: rgba(255,255,255,.98) !important;
}

/* ── 6. BUTTON MICRO-ANIMATIONS ── */
.btn-gold,
.btn-large,
.btn-hero,
.btn-cta-hero,
.btn-gold-full,
.btn-gold-outline,
a.btn-gold,
a.btn-large {
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease,
    filter 0.3s ease !important;
  position: relative;
  overflow: hidden;
}
.btn-gold::after,
.btn-large::after,
.btn-hero::after,
.btn-cta-hero::after,
.btn-gold-full::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}
.btn-gold:hover::after,
.btn-large:hover::after,
.btn-hero:hover::after,
.btn-cta-hero:hover::after,
.btn-gold-full:hover::after {
  transform: translateX(100%);
}
.btn-gold:hover,
.btn-large:hover,
.btn-hero:hover,
.btn-cta-hero:hover,
.btn-gold-full:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 14px 32px rgba(230,168,23,.45) !important;
}

.btn-navy {
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease !important;
}
.btn-navy:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(18,24,58,.3) !important;
}

/* ── 7. CARD HOVER PHYSICS ── */
.res-card,
.testi-card,
.step-card,
.diff-card,
.price-card,
.acc-item,
.result-card {
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.res-card:hover,
.testi-card:hover,
.step-card:hover,
.result-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 56px rgba(0,0,0,.10) !important;
}
.diff-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 20px 48px rgba(0,0,0,.1) !important;
}
.price-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 28px 64px rgba(0,0,0,.12) !important;
}
.diff-card--dark:hover {
  transform: translateY(-6px) scale(1.025);
  box-shadow: 0 28px 64px rgba(18,24,58,.25) !important;
}

/* ── 8. LINK UNDERLINE SWEEP ── */
.navbar__links a {
  position: relative;
}
.navbar__links a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 2px;
  background: var(--gold, #e9a825);
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 2px;
}
.navbar__links a:hover::after { width: 100%; }

/* ── 9. IMAGE ZOOM ON HOVER ── */
.hero__img-card { overflow: hidden; }
.hero__img-card img,
.about-hero img {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.hero__img-card:hover img { transform: scale(1.04); }

/* ── 10. GOLD SHIMMER on section titles ── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.sec-title .gold,
.section-title .gold,
.hero__h1 .gold,
.pos-title {
  background: linear-gradient(90deg, #e6a817 20%, #f5c84a 50%, #e6a817 80%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  /* -webkit-text-fill-color: transparent; */
  background-clip: text;
  animation: shimmer 4s linear infinite;
}

/* ── 11. FAQ ACCORDION SMOOTH ── */
.acc-content {
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s ease !important;
}
.acc-icon {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.acc-item.active .acc-icon { transform: rotate(180deg); }

/* ── 12. PULSE GLOW on CTA buttons ── */
@keyframes pulseGlow {
  0%   { box-shadow: 0 0 0 0 rgba(233,168,37,.45); }
  70%  { box-shadow: 0 0 0 14px rgba(233,168,37,0); }
  100% { box-shadow: 0 0 0 0 rgba(233,168,37,0); }
}
.btn-gold-outline,
.btn-cta-hero,
.btn-hero {
  animation: pulseGlow 2.4s cubic-bezier(0.66, 0, 0, 1) infinite;
}

/* ── 13. MARQUEE smooth ── */
.marquee-group { animation: marquee 30s linear infinite; }
.marquee-group span { transition: color 0.3s ease; }
.marquee-group span:hover { color: var(--navy, #12183a) !important; }
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-100% - 40px)); }
}

/* ── 14. STAT NUMBER count-up visual ── */
@keyframes statPop {
  0%   { transform: scale(0.7); opacity: 0; }
  70%  { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
.guar-stat-num.is-visible,
.float-num.is-visible {
  animation: statPop 0.7s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* ── 15. GUARANTEE BOX glow border pulse ── */
@keyframes borderGlow {
  0%, 100% { border-color: rgba(230,168,23,.3); box-shadow: 0 0 0 0 rgba(230,168,23,0); }
  50%       { border-color: rgba(230,168,23,.7); box-shadow: 0 0 24px rgba(230,168,23,.15); }
}
.guar-box {
  animation: borderGlow 3s ease-in-out infinite;
}

/* ── 16. FOOTER links hover ── */
.footer__col-links a {
  transition: color 0.2s ease, padding-left 0.25s ease !important;
}
.footer__col-links a:hover {
  padding-left: 6px !important;
}