/* FanBankOnly — shared motion system: entrances, hovers, ambient animation.
   Included on every page after the page stylesheet. Honors prefers-reduced-motion. */

/* ---------- scroll-reveal entrances ---------- */
.rv{opacity:0;transform:translateY(30px) scale(.985);transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1);transition-delay:var(--d,0s);will-change:opacity,transform}
.rv-l{transform:translateX(-42px)}
.rv-r{transform:translateX(42px)}
.rv-pop{transform:scale(.88) translateY(14px)}
.rv-fade{transform:none}
.rv-flip{transform:perspective(900px) rotateX(-12deg) translateY(24px);transform-origin:top center}
.rv.in{opacity:1;transform:none}
.rv-l.in,.rv-r.in,.rv-pop.in,.rv-fade.in,.rv-flip.in{transform:none}

/* stagger helper: children inside [data-stagger] get automatic delays (set by motion.js via --d) */
[data-stagger]>.rv{--d:0s}

/* ---------- ambient keyframes ---------- */
@keyframes floaty{0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}50%{transform:translateY(-12px) rotate(var(--rot,0deg))}}
@keyframes floaty-sm{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes spin-slow{to{transform:rotate(360deg)}}
@keyframes wiggle{0%,100%{transform:rotate(var(--rot,0deg))}25%{transform:rotate(calc(var(--rot,0deg) - 6deg))}75%{transform:rotate(calc(var(--rot,0deg) + 6deg))}}
@keyframes grad-pan{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes pulse-ring{0%{box-shadow:0 0 0 0 rgba(255,46,126,.45)}70%{box-shadow:0 0 0 16px rgba(255,46,126,0)}100%{box-shadow:0 0 0 0 rgba(255,46,126,0)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes shine-sweep{from{transform:translateX(-120%) skewX(-18deg)}to{transform:translateX(240%) skewX(-18deg)}}
@keyframes glow-drift{0%,100%{opacity:.55}50%{opacity:.9}}

/* animated gradient text — apply alongside .grad */
.grad-anim{background-size:220% 220%!important;animation:grad-pan 7s ease infinite}

/* floating helpers (opt-in) */
.floaty{animation:floaty 6s ease-in-out infinite}
.floaty-sm{animation:floaty-sm 4.5s ease-in-out infinite}

/* ---------- button shine sweep ---------- */
.btn{position:relative;overflow:hidden}
.btn::after{content:'';position:absolute;top:0;bottom:0;width:45%;left:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-120%) skewX(-18deg);pointer-events:none}
.btn:hover::after{animation:shine-sweep .7s ease}
.btn{transition:transform .18s,box-shadow .18s,filter .18s}
.btn:hover{filter:saturate(1.12)}

/* ---------- sticker / chip play ---------- */
.sticker{transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s}
.sticker:hover{animation:wiggle .45s ease;box-shadow:6px 6px 0 var(--ink,#42122E)}
.hero .chips .chip,.feature .chips .chip{transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s,background .2s}
.hero .chips .chip:hover,.feature .chips .chip:hover{transform:translateY(-4px) rotate(-1deg);box-shadow:5px 6px 0 rgba(66,18,46,.2);background:#fff}

/* ---------- cards: lift + colored top ribbon ---------- */
.card,.step,.num,.plan,.panel,.stat{position:relative;transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s}
.card::before,.step::before,.plan::before{content:'';position:absolute;top:-2px;left:24px;right:24px;height:6px;border-radius:0 0 8px 8px;background:var(--grad,#FF2E7E);opacity:0;transform:scaleX(.4);transition:opacity .3s,transform .3s}
.card:hover::before,.step:hover::before,.plan:hover::before{opacity:1;transform:scaleX(1)}
.card:hover{transform:translateY(-6px) rotate(-.4deg)}
.step:hover{transform:translateY(-6px)}
.step:hover .num{animation:spin-slow 1.2s ease}
.plan:hover{transform:translateY(-6px)}
.num:hover{transform:translateY(-5px) scale(1.02)}
.panel:hover{transform:translateY(-4px)}
.stat:hover{transform:translateY(-4px) scale(1.03)}

/* ---------- nav link underline slide ---------- */
.nav a:not(.cta){position:relative}
.nav a:not(.cta)::after{content:'';position:absolute;left:14px;right:14px;bottom:4px;height:3px;border-radius:3px;background:var(--grad,#FF2E7E);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.nav a:not(.cta):hover::after{transform:scaleX(1)}

/* ---------- FAQ accordion play ---------- */
.faq details{transition:transform .22s,box-shadow .22s}
.faq details:hover{transform:translateX(6px)}
.faq summary::after{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.faq details[open] summary::after{transform:rotate(180deg)}

/* ---------- platform badge: float + pulse ring ---------- */
.platform-badge{animation:floaty-sm 5s ease-in-out infinite;transition:transform .25s}
.platform-badge:hover{animation-play-state:paused;transform:scale(1.06) rotate(-1deg)}
.platform-badge img{transition:transform .3s}
.platform-badge:hover img{transform:scale(1.12) rotate(4deg)}

/* ---------- brand logo row (homepage / agencies) ---------- */
.brand-row{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:30px}
.brand-row .brand-chip{display:inline-flex;align-items:center;gap:12px;background:#fff;border:2px solid var(--ink,#42122E);border-radius:999px;padding:10px 26px 10px 14px;box-shadow:4px 4px 0 var(--ink,#42122E);font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink,#42122E);transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s}
.brand-row .brand-chip img{height:34px;width:auto;display:block;transition:transform .3s}
.brand-row .brand-chip:hover{transform:translateY(-5px) rotate(-1.5deg);box-shadow:6px 8px 0 var(--ink,#42122E)}
.brand-row .brand-chip:hover img{transform:scale(1.15) rotate(-6deg)}
.brand-row-label{font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft,#7A4A63)}

/* ---------- marquee pause on hover ---------- */
.band:hover .marquee{animation-play-state:paused}

/* ---------- estimator side panel: gentle glow ---------- */
.est-side{animation:glow-drift 5s ease-in-out infinite}
.est-side:hover{animation-play-state:paused}

/* ---------- count-up numbers ---------- */
[data-count]{font-variant-numeric:tabular-nums}

/* ---------- tilt targets (motion.js adds transform) ---------- */
[data-tilt]{transform-style:preserve-3d;will-change:transform}

/* ---------- agencies page extras (loaded after agencies.css) ---------- */
.fnode{transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s,border-color .28s}
.fnode:hover{transform:translateY(-8px) scale(1.02)}
.fval{transition:transform .3s}
.fnode:hover .fval{transform:scale(1.08)}
.obar{transition:transform .25s}
.obar:hover{transform:scaleY(1.06)}
.ocard{transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s}
.ocard:hover{transform:translateY(-7px)}
.opanel{transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s}
.opanel:hover{transform:translateY(-7px)}
.ocard .obtn,.opanel .obtn,.pilot-inner .obtn{position:relative;overflow:hidden}
.ocard .obtn::after,.opanel .obtn::after,.pilot-inner .obtn::after{content:'';position:absolute;top:0;bottom:0;width:45%;left:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-120%) skewX(-18deg);pointer-events:none}
.ocard .obtn:hover::after,.opanel .obtn:hover::after,.pilot-inner .obtn:hover::after{animation:shine-sweep .7s ease}
.faq-item{transition:transform .22s,box-shadow .22s,border-color .22s}
.faq-item:hover{transform:translateX(6px)}
.onboard-step{transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s}
.onboard-step:hover{transform:translateY(-6px)}
.pilot-inner{transition:transform .3s}
.pilot-inner:hover{transform:scale(1.01)}

/* ---------- quiz option bounce ---------- */
.opt{transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s,background .18s}
.opt:hover{transform:translate(-2px,-4px)}
.opt.sel{animation:pop-in .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes pop-in{0%{transform:scale(.96)}60%{transform:scale(1.03)}100%{transform:scale(1)}}

/* ---------- gate box pop ---------- */
.gate-box{animation:pop-in .6s cubic-bezier(.34,1.56,.64,1)}

/* preserve designed tilts after reveal */
.est-side.rv.in{transform:rotate(1deg)}
.plan.hot.rv.in{transform:rotate(-.6deg)}
.plan.hot:hover{transform:rotate(-.6deg) translateY(-6px)}

/* ---------- reduced motion: everything calms down ---------- */
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .floaty,.floaty-sm,.platform-badge,.est-side,.grad-anim{animation:none!important}
  .btn::after,.ocard .obtn::after,.opanel .obtn::after,.pilot-inner .obtn::after{display:none}
  html{scroll-behavior:auto}
}