/* fx.css — shared motion for the funnel pages (start, pdf, recorded). Everything here is
   skipped for people who ask for reduced motion. */

/* scroll progress */
.fx-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;pointer-events:none}
.fx-progress i{display:block;height:100%;width:100%;background:#FF5A1F;transform-origin:0 50%;transform:scaleX(0);box-shadow:0 0 12px rgba(255,90,31,.6)}

/* floating orange glow blobs behind everything */
.fx-blobs{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.fx-blobs span{position:absolute;width:46vmax;height:46vmax;border-radius:50%;background:radial-gradient(circle,rgba(255,90,31,.20),rgba(255,90,31,0) 65%);filter:blur(10px);animation:fx-float 22s ease-in-out infinite}
.fx-blobs span:nth-child(1){top:-18vmax;right:-14vmax}
.fx-blobs span:nth-child(2){top:38%;left:-20vmax;animation-duration:27s;animation-delay:-6s}
.fx-blobs span:nth-child(3){bottom:-20vmax;right:-10vmax;animation-duration:31s;animation-delay:-12s}
@keyframes fx-float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(4vmax,-3vmax) scale(1.08)}66%{transform:translate(-3vmax,3vmax) scale(.94)}}

/* headline: lines rise in one after another */
.fx-line{display:inline-block;opacity:0;transform:translateY(22px);animation:fx-rise .8s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes fx-rise{to{opacity:1;transform:none}}

/* scroll reveal with stagger (works with the pages' existing .reveal) */
.reveal{opacity:0;transform:translateY(24px) scale(.985);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:var(--fx-d,0s)}
.reveal.in{opacity:1;transform:none}

/* buttons: lift + shine sweep */
.btn{position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,background .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.45),rgba(255,255,255,0));transform:skewX(-18deg);animation:fx-shine 3.8s ease-in-out infinite}
@keyframes fx-shine{0%,62%{left:-60%}100%{left:130%}}

/* cards: lift + a glow that follows the pointer */
.fx-card{position:relative;transition:transform .25s ease,box-shadow .25s ease}
.fx-card:hover{transform:translateY(-6px)}
.fx-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s ease;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255,90,31,.16),rgba(255,90,31,0) 60%);z-index:0}
.fx-card:hover::before{opacity:1}
.fx-card > *{position:relative;z-index:1}

/* FAQ: smooth open */
.faq details .a{animation:fx-open .35s ease}
@keyframes fx-open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* play button pulse */
.hero-video .play{animation:fx-pulse 2.4s ease-out infinite}
@keyframes fx-pulse{0%{box-shadow:0 0 0 0 rgba(255,90,31,.55)}80%,100%{box-shadow:0 0 0 22px rgba(255,90,31,0)}}


/* ═══ round 2: more interactive ═══ */
/* keep absolutely-placed bits (badges) absolute inside hover cards */
.fx-card > .tier-badge{position:absolute;z-index:3}
/* the 999 badge: centred pill sitting on the card's top edge */
.tier-badge{top:0 !important;left:50% !important;right:auto !important;transform:translate(-50%,-50%);border-radius:999px !important;padding:6px 16px !important;white-space:nowrap;box-shadow:0 6px 18px rgba(255,90,31,.45);animation:fx-bob 2.6s ease-in-out infinite}
@keyframes fx-bob{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-62%)}}

/* 3D tilt toward the pointer (set by fx.js) */
.fx-card{transform-style:preserve-3d;will-change:transform}
.fx-card.fx-tilt{transition:transform .08s linear,box-shadow .25s ease}

/* spinning orange border on the featured card */
.tier-main{isolation:isolate}
.tier-main::after{content:"";position:absolute;inset:-2px;border-radius:22px;padding:2px;z-index:-1;pointer-events:none;
  background:conic-gradient(from var(--fx-a,0deg),rgba(255,90,31,0) 0deg,#FF5A1F 60deg,rgba(255,90,31,0) 140deg,rgba(255,90,31,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:fx-spin 4s linear infinite}
@property --fx-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes fx-spin{to{--fx-a:360deg}}

/* emoji icons bounce on hover */
.fx-card:hover .tier-icon,.fx-card:hover .ic,.fx-card:hover .tier-list .e{animation:fx-hop .5s ease}
.tier-list li:hover .e{animation:fx-hop .5s ease}
@keyframes fx-hop{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(-6px) scale(1.15)}}
.tier-list li{transition:transform .2s ease}
.tier-list li:hover{transform:translateX(-4px)}

/* click ripple */
.fx-ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.45);animation:fx-rip .6s ease-out forwards;pointer-events:none}
@keyframes fx-rip{to{transform:scale(4);opacity:0}}

/* section headings: orange underline draws in when the heading appears */
h2.sec{position:relative}
h2.sec::after{content:"";display:block;height:4px;border-radius:4px;background:#FF5A1F;margin-top:12px;width:0;transition:width .9s cubic-bezier(.2,.8,.2,1) .15s}
h2.sec.fx-in::after{width:72px}

/* platform tour: nudge to show it swipes */
.tour.fx-nudge{animation:fx-nudge 1.4s ease-in-out 2}
@keyframes fx-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-26px)}}

/* steps / includes rows light up on hover */
.inc-item,.ecom-step{transition:background .2s ease,transform .2s ease}
.inc-item:hover,.ecom-step:hover{background:rgba(255,90,31,.06);transform:translateX(-4px)}
.faq summary{transition:color .2s ease,padding .2s ease}
.faq summary:hover{color:#FF5A1F;padding-inline-start:10px}