/* ═══════════════════════════════════════════════
   FLUX LANDING · ANIMATIONS & ENHANCEMENTS
   Scroll reveals · Hover magic · Micro-interactions
   ═══════════════════════════════════════════════ */

/* ── Base: hidden state for scroll-triggered elements ── */
[data-animate]{
  opacity:0;
  transform:translateY(32px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform;
}
[data-animate].is-visible{
  opacity:1;
  transform:translateY(0);
}

/* ── Stagger children ── */
[data-animate-stagger] > *{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1);
}
[data-animate-stagger].is-visible > *{
  opacity:1;
  transform:translateY(0);
}
[data-animate-stagger].is-visible > *:nth-child(1){transition-delay:.05s}
[data-animate-stagger].is-visible > *:nth-child(2){transition-delay:.12s}
[data-animate-stagger].is-visible > *:nth-child(3){transition-delay:.19s}
[data-animate-stagger].is-visible > *:nth-child(4){transition-delay:.26s}
[data-animate-stagger].is-visible > *:nth-child(5){transition-delay:.33s}
[data-animate-stagger].is-visible > *:nth-child(6){transition-delay:.40s}

/* ── Slide variants ── */
[data-animate="slide-left"]{transform:translateX(-40px) translateY(0)}
[data-animate="slide-left"].is-visible{transform:translateX(0)}

[data-animate="slide-right"]{transform:translateX(40px) translateY(0)}
[data-animate="slide-right"].is-visible{transform:translateX(0)}

[data-animate="scale-up"]{transform:scale(.92) translateY(0)}
[data-animate="scale-up"].is-visible{transform:scale(1)}

[data-animate="fade"]{transform:none}
[data-animate="fade"].is-visible{transform:none}

[data-animate="rotate-in"]{transform:rotate(-3deg) translateY(20px)}
[data-animate="rotate-in"].is-visible{transform:rotate(0) translateY(0)}

/* ── Hero entrance — special multi-part animation ── */
.hero-copy{
  animation:heroFadeSlide .9s cubic-bezier(.22,1,.36,1) both;
}
.hero-copy .hero-badge{
  animation:heroBadge .6s .15s cubic-bezier(.22,1,.36,1) both;
}
.hero-copy h1{
  animation:heroTitle .8s .22s cubic-bezier(.22,1,.36,1) both;
}
.hero-copy > p{
  animation:heroFadeUp .7s .38s cubic-bezier(.22,1,.36,1) both;
}
.hero-copy .actions{
  animation:heroFadeUp .7s .48s cubic-bezier(.22,1,.36,1) both;
}
.hero-copy .hero-stats{
  animation:heroFadeUp .7s .56s cubic-bezier(.22,1,.36,1) both;
}
.checkout-scene{
  animation:heroCheckout 1s .3s cubic-bezier(.22,1,.36,1) both;
}

@keyframes heroFadeSlide{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes heroBadge{
  from{opacity:0;transform:translateY(-10px) scale(.9)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes heroTitle{
  from{opacity:0;transform:translateY(25px);filter:blur(4px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}
@keyframes heroFadeUp{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes heroCheckout{
  from{opacity:0;transform:translateX(50px) scale(.95) rotate(-2deg)}
  to{opacity:1;transform:translateX(0) scale(1) rotate(0)}
}

/* ── Enhanced floating providers ── */
.float-provider{
  animation:floatEnhanced 6s ease-in-out infinite !important;
  transition:transform .3s, box-shadow .3s !important;
}
.float-provider:hover{
  transform:translateY(-4px) scale(1.06) !important;
  box-shadow:0 14px 32px #194f2f1a !important;
}
.float-provider.jazz{animation-delay:-1.2s !important}
.float-provider.easy{animation-delay:-3.5s !important}
.float-provider.qr{animation-delay:-2.1s !important}

@keyframes floatEnhanced{
  0%,100%{transform:translateY(0) rotate(0deg)}
  25%{transform:translateY(-6px) rotate(.5deg)}
  50%{transform:translateY(-9px) rotate(0deg)}
  75%{transform:translateY(-4px) rotate(-.5deg)}
}

/* ── Phone frame premium hover ── */
.phone-frame{
  transition:transform .55s cubic-bezier(.22,1,.36,1), box-shadow .55s ease !important;
}
.phone-frame:hover{
  transform:rotate(0) translateY(-6px) !important;
  box-shadow:8px 38px 60px -15px #133d2b66,inset 0 0 0 1px #c7cec8 !important;
}

/* ── Enhanced feature cards ── */
.feature-card{
  transition:transform .35s cubic-bezier(.22,1,.36,1), border-color .35s, box-shadow .35s !important;
  position:relative;
  overflow:hidden;
}
.feature-card::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,var(--green),var(--orange));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.feature-card:hover::before{
  transform:scaleX(1);
}
.feature-card:hover{
  transform:translateY(-6px) !important;
  box-shadow:0 16px 40px #14472b0e !important;
  border-color:#a5b896 !important;
}
.feature-card:hover .icon-tile{
  transform:scale(1.08) rotate(-3deg);
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}

/* ── Rate cards glow effect ── */
.rate-card{
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s, border-color .35s !important;
  position:relative;
}
.rate-card:hover{
  transform:translateY(-6px) !important;
  box-shadow:0 20px 50px #113d270c !important;
  border-color:#a8b89a !important;
}
.rate-card:hover .rate{
  background:linear-gradient(135deg,var(--green-dark),var(--green));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ── Steps grid numbered animation ── */
.steps-grid article{
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s, border-color .35s !important;
}
.steps-grid article:hover{
  transform:translateY(-5px) !important;
  box-shadow:0 15px 40px #14472b0c !important;
  border-color:#a9bfa0 !important;
}
.steps-grid article:hover .icon-tile{
  background:var(--green);
  color:white;
  border-color:var(--green-dark);
  transition:all .3s cubic-bezier(.22,1,.36,1);
}
.steps-grid article:hover .step-top > b{
  color:var(--green);
  transition:color .3s;
}

/* ── Security grid lift ── */
.security-grid article{
  transition:transform .3s, box-shadow .3s !important;
  padding-top:25px;
  border-top-width:2px;
}
.security-grid article:hover{
  transform:translateY(-4px) !important;
  border-top-color:var(--green) !important;
}

/* ── FAQ accordion smooth ── */
.faq details{
  transition:border-color .3s, box-shadow .3s, transform .25s !important;
}
.faq details:hover{
  border-color:#bdd4ae !important;
  box-shadow:0 6px 20px #14472b08 !important;
}
.faq details[open]{
  box-shadow:0 8px 28px #14472b0a !important;
}
.faq details p{
  animation:faqReveal .35s cubic-bezier(.22,1,.36,1);
}
@keyframes faqReveal{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}

/* ── CTA card shimmer ── */
.cta-card{
  position:relative;
  overflow:hidden;
}
.cta-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 30%,#ffffff08 50%,transparent 70%);
  animation:ctaShimmer 4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes ctaShimmer{
  0%,100%{transform:translateX(-100%)}
  50%{transform:translateX(100%)}
}

/* ── Journey card flowing line ── */
.journey-list li:not(:last-child)::before{
  border-left:1px dashed #bed4c6;
  animation:dashFlow 2s linear infinite;
  background-image:repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 4px,
    #bed4c6 4px,
    #bed4c6 8px
  );
}

/* ── Workspace art parallax-like tilt ── */
.workspace-art{
  transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s !important;
}
.workspace-art:hover{
  transform:rotate(0deg) translateY(-4px) !important;
  box-shadow:0 25px 60px -20px #123f2c3d !important;
}

/* ── Sample bars growing animation ── */
.sample-bars > i{
  animation:barGrow .6s cubic-bezier(.22,1,.36,1) both;
}
.sample-bars > i:nth-child(1){animation-delay:.1s}
.sample-bars > i:nth-child(2){animation-delay:.14s}
.sample-bars > i:nth-child(3){animation-delay:.18s}
.sample-bars > i:nth-child(4){animation-delay:.22s}
.sample-bars > i:nth-child(5){animation-delay:.26s}
.sample-bars > i:nth-child(6){animation-delay:.3s}
.sample-bars > i:nth-child(7){animation-delay:.34s}
.sample-bars > i:nth-child(8){animation-delay:.38s}
.sample-bars > i:nth-child(9){animation-delay:.42s}
.sample-bars > i:nth-child(10){animation-delay:.46s}
.sample-bars > i:nth-child(11){animation-delay:.5s}
.sample-bars > i:nth-child(12){animation-delay:.54s}

@keyframes barGrow{
  from{height:0;opacity:0}
  to{height:var(--bar);opacity:1}
}

/* ── Code card typewriter cursor ── */
.code-card pre code::after{
  content:"▊";
  color:#d2dbbf;
  animation:blink 1.1s step-end infinite;
  margin-left:2px;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* ── Navigation link subtle underline ── */
.desktop-nav a{
  position:relative;
}
.desktop-nav a::after{
  content:"";
  position:absolute;
  bottom:-2px;
  left:0;right:0;
  height:2px;
  background:var(--green);
  border-radius:1px;
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.desktop-nav a:hover::after,.desktop-nav a.active::after{
  transform:scaleX(1);
}

/* ── Enhanced button hover with ripple ── */
.flux-public .button{
  position:relative;
  overflow:hidden;
  transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, background .25s !important;
}
.flux-public .button:hover{
  transform:translateY(-2px) !important;
}
.flux-public .button:active{
  transform:translateY(0) scale(.98) !important;
}

/* ── Text link arrow hop ── */
.text-link .icon{
  transition:transform .25s cubic-bezier(.22,1,.36,1) !important;
}
.text-link:hover .icon{
  transform:translate(5px,-1px) !important;
}

/* ── Hero gradient text enhanced ── */
.hero h1 > span{
  background-size:200% 200%;
  animation:gradientShift 5s ease infinite;
}
@keyframes gradientShift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

/* ── Section eyebrow subtle entrance ── */
.section-heading .eyebrow{
  display:inline-block;
  position:relative;
}

/* ── Orbit rings slow rotation on hero ── */
.scene-orbit{
  animation:orbitSpin 30s linear infinite !important;
}
.scene-orbit.second{
  animation:orbitSpin 45s linear reverse infinite !important;
}
@keyframes orbitSpin{
  from{transform:rotate(-20deg) scaleX(.85)}
  to{transform:rotate(340deg) scaleX(.85)}
}
.scene-orbit.second{
  animation-name:orbitSpin2 !important;
}
@keyframes orbitSpin2{
  from{transform:rotate(-45deg)}
  to{transform:rotate(315deg)}
}

/* ── Transfer card hover ── */
.transfer-card{
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s, border-color .35s !important;
}
.transfer-card:hover{
  transform:translateY(-5px) !important;
  box-shadow:0 18px 45px #113d270a !important;
}

/* ── Smooth scroll header shadow on scroll ── */
.site-header{
  transition:box-shadow .3s ease, background .3s !important;
}
.site-header.scrolled{
  box-shadow:0 4px 20px #14392b0c !important;
  background:#f5f4eeF5 !important;
}

/* ── Demo method card selection pulse ── */
.demo-method.selected{
  animation:methodPulse .4s cubic-bezier(.22,1,.36,1);
}
@keyframes methodPulse{
  0%{box-shadow:0 0 0 0 #6676504d}
  70%{box-shadow:0 0 0 8px #66765000}
  100%{box-shadow:0 3px 8px #0478570a}
}

/* ── Gentle glow on hero badge ── */
.hero-badge{
  animation:heroBadgeGlow 3s ease-in-out infinite alternate;
}
@keyframes heroBadgeGlow{
  from{box-shadow:0 4px 14px #102a2807}
  to{box-shadow:0 4px 20px #102a2812,0 0 0 1px #dedfd320}
}

/* ── Footer link hover effect ── */
.footer-grid > div > a:not(.brand){
  transition:color .2s, transform .2s !important;
}
.footer-grid > div > a:not(.brand):hover{
  transform:translateX(3px) !important;
}

/* ── Smooth page-level transitions ── */
.flux-public main{
  animation:pageIn .5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes pageIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}

/* ═══ Prefers Reduced Motion ═══ */
@media(prefers-reduced-motion:reduce){
  [data-animate],[data-animate-stagger] > *{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .hero-copy,.hero-copy .hero-badge,.hero-copy h1,.hero-copy > p,
  .hero-copy .actions,.hero-copy .hero-stats,.checkout-scene,
  .sample-bars > i,.cta-card::after,.scene-orbit,.hero h1 > span,
  .hero-badge,.flux-public main,.code-card pre code::after{
    animation:none !important;
  }
  .feature-card::before,.desktop-nav a::after{
    transition:none !important;
  }
}