/* Advanced motion layer — specialty pages and specialties hub */

/* Hero canvas + cursor spotlight */
.fx-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.9}
.fx-spot{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(520px circle at var(--cx,70%) var(--cy,30%),rgba(59,164,240,.16),transparent 60%);transition:background .08s linear}
.hero{isolation:isolate}

/* Heartbeat line */
.fx-ecg{position:absolute;left:0;right:0;bottom:18px;height:70px;z-index:-1;pointer-events:none;opacity:.55}
.fx-ecg path{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fx-ecg .base{stroke:rgba(124,196,247,.12)}
.fx-ecg .beat{stroke:url(#ecgGrad);stroke-dasharray:420 2600;stroke-dashoffset:3020;animation:ecg 4.2s linear infinite;filter:drop-shadow(0 0 6px rgba(59,164,240,.8))}
@keyframes ecg{to{stroke-dashoffset:0}}

/* Magnetic buttons */
.btn.mag{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .25s,color .25s,border-color .25s}
.btn.mag>*{pointer-events:none}

/* 3D tilt containers */
.tilt3d{transform-style:preserve-3d;will-change:transform;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.tilt3d .float-badge,.tilt3d .claim-head{transform:translateZ(40px)}
.tilt3d .claim-row{transform-style:preserve-3d}

/* Heading word reveal */
.hw{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.hw>span{display:inline-block;transform:translateY(105%) rotate(4deg);transform-origin:left bottom;transition:transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 55ms)}
.in .hw>span,.hw-in .hw>span{transform:none}
h2 em{position:relative}
h2 em::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.12em;border-radius:4px;background:linear-gradient(90deg,var(--blue),var(--orange));transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.7,0,.2,1) .55s;opacity:.85}
.in h2 em::after,.hw-in h2 em::after{transform:scaleX(1)}

/* "Get Paid" letters */
.big .ch{display:inline-block;transform:translateY(60%) scale(.6);opacity:0;transition:transform .7s cubic-bezier(.3,1.6,.5,1),opacity .4s;transition-delay:calc(var(--i) * 60ms)}
.in .big .ch{transform:none;opacity:1}
.in .big{background:linear-gradient(90deg,var(--blue) 0%,var(--blue-soft) 40%,#fff 50%,var(--blue-soft) 60%,var(--blue) 100%);background-size:250% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:bigShine 5s linear infinite 1.4s}
@keyframes bigShine{to{background-position:-250% center}}

/* Code ticker strip */
.fx-ticker{position:relative;background:var(--navy-800);overflow:hidden;padding:.85rem 0;border-bottom:1px solid var(--line);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.fx-ticker .tt{display:flex;gap:1rem;width:max-content;animation:scroll 40s linear infinite}
.fx-ticker:hover .tt{animation-play-state:paused}
.fx-ticker span{display:inline-flex;align-items:center;gap:.55rem;font-size:.85rem;color:var(--muted);white-space:nowrap;padding:.35rem .8rem .35rem .4rem;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03)}
.fx-ticker span b{font:700 .78rem ui-monospace,Menlo,Consolas,monospace;color:#06122A;background:var(--blue);padding:.18rem .45rem;border-radius:6px}
.fx-ticker span i{font-style:normal;font-size:.7rem;font-weight:700;color:var(--orange-2);letter-spacing:.06em}

/* Denial stamps */
.dcard{isolation:isolate}
.stamp{position:absolute;top:1.1rem;right:1.1rem;font:800 .72rem Sora,Inter,sans-serif;letter-spacing:.14em;padding:.35rem .6rem;border:2px solid currentColor;border-radius:6px;transform:rotate(-12deg) scale(2.2);opacity:0;pointer-events:none;transition:transform .45s cubic-bezier(.3,1.6,.5,1),opacity .3s,color .4s}
.stamp.on{opacity:.9;transform:rotate(-12deg) scale(1)}
.stamp.denied{color:#D9480F}
.stamp.fixed{color:#1E88E5}
.stamp.swap{transform:rotate(-12deg) scale(1.25);opacity:0}

/* Rule icon stroke draw */
.rule .ri svg path{stroke-dasharray:80;stroke-dashoffset:80;transition:stroke-dashoffset 1.2s cubic-bezier(.7,0,.2,1) .2s}
.rule.in .ri svg path{stroke-dashoffset:0}
.rule .ri{transition:transform .5s cubic-bezier(.3,1.6,.5,1),background .3s,color .3s}
.rule:hover .ri{transform:rotate(-10deg) scale(1.12);background:var(--orange);color:#fff}

/* Timeline: alternate slide + ripple */
.js .step.reveal{transform:translateX(-40px)}
.js .step.reveal:nth-child(even){transform:translateX(40px)}
.js .step.reveal.in{transform:none}
.step.lit .dot::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--blue);animation:ripple 1.8s ease-out infinite}
@keyframes ripple{from{transform:scale(1);opacity:.8}to{transform:scale(2.2);opacity:0}}

/* Stats shine */
.stat{isolation:isolate}
.stat::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,transparent 35%,rgba(59,164,240,.12) 50%,transparent 65%);transform:translateX(-100%);transition:transform .9s}
.stat:hover::after{transform:translateX(100%)}

/* Jump nav sliding pill */
.jump-in{position:relative}
.jump .jpill{position:absolute;top:0;left:0;height:0;border-radius:999px;background:var(--navy-800);transition:transform .45s cubic-bezier(.7,0,.2,1),width .45s cubic-bezier(.7,0,.2,1);z-index:0}
.jump.has-pill a{position:relative;z-index:1}
.jump.has-pill a.on{background:transparent}

/* Back-to-top progress ring */
.totop{overflow:visible}
.totop .ring{position:absolute;inset:-5px;width:58px;height:58px;transform:rotate(-90deg)}
.totop .ring circle{fill:none;stroke-width:3}
.totop .ring .bg{stroke:rgba(245,130,31,.2)}
.totop .ring .fg{stroke:var(--blue);stroke-linecap:round;stroke-dasharray:170;stroke-dashoffset:170}

/* Table row scan line */
.tbl{position:relative}
.tbl::after{content:"";position:absolute;left:0;right:0;top:0;height:60px;background:linear-gradient(180deg,transparent,rgba(59,164,240,.12),transparent);transform:translateY(-60px);pointer-events:none}
.tbl.in::after{animation:scan 2.2s cubic-bezier(.5,0,.5,1) .3s 1 forwards}
@keyframes scan{0%{transform:translateY(-60px);opacity:1}90%{opacity:1}100%{transform:translateY(var(--h,600px));opacity:0}}

/* Prose link underline */
.prose a{background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .35s,color .25s}
.prose a:hover{background-size:100% 2px}

/* Checks pop in sequence */
.js .checks li{opacity:0;transform:translateX(12px);transition:opacity .5s,transform .5s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 80ms)}
.checks.in li{opacity:1;transform:none}
.checks svg{transition-delay:calc(var(--i,0) * 80ms + .2s)}

@media (hover:none){.fx-spot{display:none}}
@media (prefers-reduced-motion:reduce){
  .fx-canvas,.fx-ecg,.fx-spot{display:none}
  .hw>span,.big .ch,.checks li,.js .step.reveal{transform:none!important;opacity:1!important}
  .stamp{display:none}
  .fx-ticker .tt{animation:none}
}

/* ---------- Dark sections (alternating with light) ---------- */
.sec-dark{position:relative;background:var(--navy-900);color:var(--text);overflow:hidden;isolation:isolate}
.sec-dark::before{content:"";position:absolute;inset:-50%;z-index:-1;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at 30% 30%,#000 0%,transparent 55%);animation:gridDrift 34s linear infinite}
.sec-dark::after{content:"";position:absolute;width:560px;height:560px;right:-160px;top:-120px;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(59,164,240,.22),transparent 65%);filter:blur(10px);animation:float2 22s ease-in-out infinite}
.sec-dark h2,.sec-dark h3,.sec-dark h3.sub{color:#fff}
.sec-dark .head p,.sec-dark .note-sm{color:var(--muted)}
/* table */
.sec-dark .tbl{background:rgba(12,27,54,.7);border-color:rgba(124,196,247,.16);box-shadow:0 30px 70px rgba(0,0,0,.35);backdrop-filter:blur(6px)}
.sec-dark .tbl th{background:rgba(8,20,40,.6);color:var(--muted);border-bottom-color:rgba(124,196,247,.14)}
.sec-dark .tbl td{color:#E8F1FB;border-bottom-color:rgba(124,196,247,.1)}
.sec-dark .tbl td.n{color:var(--muted)}
.sec-dark .tbl tbody tr:hover{background:rgba(59,164,240,.08)}
/* modifiers */
.sec-dark .mod{background:rgba(12,27,54,.65);border-color:rgba(124,196,247,.14)}
.sec-dark .mod:hover{border-color:rgba(245,130,31,.5);box-shadow:0 14px 34px rgba(0,0,0,.35)}
.sec-dark .mod .code{background:var(--orange);color:#fff}
.sec-dark .mod p{color:var(--muted)}.sec-dark .mod p b{color:#fff}
/* timeline */
.sec-dark .steps::before{background:rgba(124,196,247,.15)}
.sec-dark .step{background:rgba(12,27,54,.65);border-color:rgba(124,196,247,.14)}
.sec-dark .step:hover{border-color:rgba(59,164,240,.5);box-shadow:0 14px 34px rgba(0,0,0,.35)}
.sec-dark .step h3{color:#fff}.sec-dark .step p{color:var(--muted)}
.sec-dark .step .dot{background:var(--navy-800);border-color:rgba(124,196,247,.25);color:var(--muted)}
/* hub "why" boxes */
.sec-dark .why .box{background:rgba(12,27,54,.65);border-color:rgba(124,196,247,.14)}
.sec-dark .why .box:hover{border-color:rgba(245,130,31,.5)}
.sec-dark .why h3{color:#fff}.sec-dark .why p{color:var(--muted)}
.sec-dark+.sec,.sec+.sec-dark{border-top:0}
.mod .code{flex:none;white-space:nowrap}
.mod{flex-direction:column;gap:.65rem}.mod .code{align-self:flex-start}
@media (max-width:640px){.sec-dark .tbl tr{border-bottom-color:rgba(124,196,247,.12)}}