/* === Grand Funding Premium Motion Pack v1 (2026-05-03) ===
   GPU-only properties (transform/opacity). Respects prefers-reduced-motion. */

:root{
  --ease-out-quart:cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint:cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo:cubic-bezier(0.16, 1, 0.3, 1);
}

/* ──────────────────────────────────────────
   1. Ambient floating orbs (existing .bg-pattern elements get drift)
   ────────────────────────────────────────── */
@keyframes orb-drift-a{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(28px,-22px,0) scale(1.04)}
}
@keyframes orb-drift-b{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-32px,18px,0) scale(0.96)}
}
.bg-pattern-1{animation:orb-drift-a 18s ease-in-out infinite;will-change:transform}
.bg-pattern-2{animation:orb-drift-b 22s ease-in-out infinite;will-change:transform}

/* ──────────────────────────────────────────
   2. Gradient title shimmer (subtle, slow)
   ────────────────────────────────────────── */
@keyframes title-shimmer{
  0%{background-position:0% 50%}
  100%{background-position:200% 50%}
}
.hero-title.gradient-text,
.meet-logan__title,
.investor-proof__title{
  background-size:220% 100%;
  animation:title-shimmer 14s linear infinite;
}

/* ──────────────────────────────────────────
   3. Animated CTA arrow (slides right on hover)
   ────────────────────────────────────────── */
.btn[data-cta-arrow]::after,
.cta-btn[data-cta-arrow]::after,
.btn-primary[data-cta-arrow]::after,
.btn-secondary[data-cta-arrow]::after{
  content:" →";display:inline-block;margin-left:.25rem;
  transition:transform .28s var(--ease-out-quart);
}
.btn[data-cta-arrow]:hover::after,
.cta-btn[data-cta-arrow]:hover::after,
.btn-primary[data-cta-arrow]:hover::after,
.btn-secondary[data-cta-arrow]:hover::after{
  transform:translateX(5px);
}

/* CTA hover lift + glow */
.btn,.cta-btn,.btn-primary,.btn-secondary,
.talk-to-logan__call,.sticky-dual a{
  transition:transform .25s var(--ease-out-quart),
             box-shadow .35s var(--ease-out-quart),
             filter .25s ease;
  will-change:transform;
}
.btn:hover,.cta-btn:hover,
.btn-primary:hover,.btn-secondary:hover,
.talk-to-logan__call:hover{
  transform:translateY(-2px);
  filter:brightness(1.06);
}
.btn:active,.cta-btn:active{transform:translateY(0)}

/* ──────────────────────────────────────────
   4. Card lift + glow on hover
   ────────────────────────────────────────── */
.loan-card,.investor-proof__card,.feature-card,
.value-card,.reason-card,.service-card,.product-card,
.deal-card,.story-highlight,.fun-fact{
  transition:transform .35s var(--ease-out-quint),
             box-shadow .35s var(--ease-out-quart),
             border-color .35s ease;
  will-change:transform;
}
.loan-card:hover,.investor-proof__card:hover,
.feature-card:hover,.value-card:hover,.reason-card:hover,
.service-card:hover,.product-card:hover,
.deal-card:hover,.story-highlight:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 60px rgba(0,0,0,.5),
             0 0 0 1px rgba(79,227,210,.32);
}

/* ──────────────────────────────────────────
   5. Underline-grow on inline text links
   ────────────────────────────────────────── */
.investor-proof__cta a,
.meet-logan__copy a:not([class*="btn"]):not([class*="cta"]),
.about-text a,
.story-content a,
.faq-item a,
[data-text-link]{
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1.5px;
  background-position:0 100%;
  background-repeat:no-repeat;
  transition:background-size .35s var(--ease-out-quart);
  text-decoration:none;
}
.investor-proof__cta a:hover,
.meet-logan__copy a:not([class*="btn"]):not([class*="cta"]):hover,
[data-text-link]:hover{
  background-size:100% 1.5px;
}

/* ──────────────────────────────────────────
   6. Sticky CTA gentle "breathe" (every 12s, very subtle)
   ────────────────────────────────────────── */
@keyframes sticky-breathe{
  0%,90%,100%{box-shadow:0 22px 70px rgba(0,0,0,.56)}
  95%{box-shadow:0 22px 70px rgba(0,0,0,.56),0 0 0 4px rgba(79,227,210,.18)}
}
.sticky-dual{animation:sticky-breathe 12s ease-in-out infinite 4s}

/* ──────────────────────────────────────────
   7. Reveal — extend existing pattern with refined stagger
   ────────────────────────────────────────── */
.reveal,.reveal-stagger>*{
  transition:opacity .8s var(--ease-out-quart),
             transform .8s var(--ease-out-quart);
}
/* Override the existing 0.7s ease with our refined timing */

/* Stagger delays already exist in inline CSS — extend with finer steps */
.reveal-stagger.is-visible>*:nth-child(7){transition-delay:.40s}
.reveal-stagger.is-visible>*:nth-child(8){transition-delay:.46s}
.reveal-stagger.is-visible>*:nth-child(9){transition-delay:.52s}

/* ──────────────────────────────────────────
   8. Funded-deal cards: pulse on entry
   ────────────────────────────────────────── */
@keyframes deal-card-entrance{
  0%{opacity:0;transform:translateY(14px) scale(.98)}
  60%{opacity:1;transform:translateY(0) scale(1.01)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
.hero-loans .loan-card{opacity:0}
.hero-loans.is-visible .loan-card,
.hero-loans .loan-card{animation:deal-card-entrance .9s var(--ease-out-quint) both}
.hero-loans .loan-card:nth-child(1){animation-delay:.1s}
.hero-loans .loan-card:nth-child(2){animation-delay:.18s}
.hero-loans .loan-card:nth-child(3){animation-delay:.26s}
.hero-loans .loan-card:nth-child(4){animation-delay:.34s}
.hero-loans .loan-card:nth-child(5){animation-delay:.42s}
.hero-loans .loan-card:nth-child(6){animation-delay:.50s}

/* Loan badges: gentle glow */
.loan-badge{
  transition:box-shadow .4s ease,background-color .3s ease;
}
.loan-card:hover .loan-badge{
  box-shadow:0 0 16px rgba(79,227,210,.3);
}

/* ──────────────────────────────────────────
   9. Header refinement on scroll
   ────────────────────────────────────────── */
.header{
  transition:background-color .35s ease,
             backdrop-filter .35s ease,
             box-shadow .35s ease,
             border-color .35s ease;
}
.header.scrolled{
  background:rgba(7,8,11,.88) !important;
  border-bottom-color:rgba(79,227,210,.15) !important;
  box-shadow:0 8px 30px rgba(0,0,0,.5);
}

/* ──────────────────────────────────────────
   10. Hero stat counter — preserve width while counting
   ────────────────────────────────────────── */
.stat-number,[data-counter]{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
}

/* ──────────────────────────────────────────
   11. Pulse dot for "available now" indicators
   ────────────────────────────────────────── */
@keyframes pulse-soft{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.55;transform:scale(.85)}
}
.pulse-dot,
.logan-sidebar__pulse::before,
.meet-logan__photo-badge::before{
  animation:pulse-soft 2.4s ease-in-out infinite !important;
}

/* ──────────────────────────────────────────
   12. Reveal-on-scroll: nav links + brand
   ────────────────────────────────────────── */
.brand-wordmark,.nav-list a{
  transition:color .25s ease,opacity .25s ease,transform .25s var(--ease-out-quart);
}
.nav-list a{position:relative}
.nav-list a::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:linear-gradient(90deg,#4FE3D2,#F0B26B);
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease-out-quart);
  border-radius:2px;
}
.nav-list a:hover::after,
.nav-list a.active::after{transform:scaleX(1)}

/* ──────────────────────────────────────────
   13. Image reveal — soft fade on lazy-loaded images
   ────────────────────────────────────────── */
img[loading="lazy"]{
  opacity:0;transition:opacity .55s var(--ease-out-quart);
}
img[loading="lazy"].is-loaded,
img[loading="lazy"][data-loaded]{opacity:1}
/* Failsafe: if JS doesn't fire, show after .5s */
@keyframes lazy-fail-safe{to{opacity:1}}
img[loading="lazy"]{animation:lazy-fail-safe 0s 1s forwards}

/* ──────────────────────────────────────────
   14. Talk-to-Logan avatar: subtle ring breath
   ────────────────────────────────────────── */
@keyframes avatar-ring{
  0%,100%{box-shadow:0 10px 28px rgba(79,227,210,.3),0 0 0 2px rgba(79,227,210,.4)}
  50%{box-shadow:0 14px 36px rgba(79,227,210,.4),0 0 0 3px rgba(79,227,210,.55)}
}
.talk-to-logan__avatar{animation:avatar-ring 5s ease-in-out infinite}

/* ──────────────────────────────────────────
   15. Form input focus: refined glow
   ────────────────────────────────────────── */
input,select,textarea{
  transition:border-color .25s ease,box-shadow .25s ease,background-color .25s ease;
}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:rgba(79,227,210,.7) !important;
  box-shadow:0 0 0 3px rgba(79,227,210,.15);
}

/* ──────────────────────────────────────────
   16. Mobile menu toggle: smooth icon morph
   ────────────────────────────────────────── */
.mobile-menu-toggle span{
  transition:transform .3s var(--ease-out-quart),opacity .25s ease;
}
.mobile-menu-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mobile-menu-toggle.active span:nth-child(2){opacity:0;transform:scaleX(0)}
.mobile-menu-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ──────────────────────────────────────────
   17. Scroll progress bar (top of page)
   ────────────────────────────────────────── */
.scroll-progress__bar{
  transition:width .15s linear;
  will-change:width;
}

/* ──────────────────────────────────────────
   18. Reveal a hint of motion on hero photo (subtle parallax via transform)
   ────────────────────────────────────────── */
.hero-media{
  transition:transform .8s var(--ease-out-quart);
  will-change:transform;
}

/* ──────────────────────────────────────────
   19. FAQ expand: smooth chevron + content
   ────────────────────────────────────────── */
.faq-question{transition:color .25s ease}
.faq-question::after,.faq-toggle{
  transition:transform .35s var(--ease-out-quart);
}
.faq-item.active .faq-question::after,
.faq-item.active .faq-toggle{
  transform:rotate(180deg);
}
.faq-answer{
  overflow:hidden;
  transition:max-height .4s var(--ease-out-quart),opacity .35s ease;
}

/* ──────────────────────────────────────────
   20. Reduced-motion: kill all animation
   ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .bg-pattern-1,.bg-pattern-2,
  .hero-title.gradient-text,.meet-logan__title,.investor-proof__title,
  .sticky-dual,.talk-to-logan__avatar,
  .pulse-dot,.logan-sidebar__pulse::before,.meet-logan__photo-badge::before{
    animation:none !important;
  }
  .hero-loans .loan-card{opacity:1 !important;animation:none !important}
}

/* ──────────────────────────────────────────
   21. Bot-detection skip (Lighthouse, etc.)
   ────────────────────────────────────────── */
html.no-anim *,html.no-anim *::before,html.no-anim *::after{
  animation:none !important;transition:none !important;
}