/* TechX Motion FX v1.0 — layers on top of the TechX Bakersfield theme. */

@media (prefers-reduced-motion: no-preference) {

/* ---------- Scroll progress beam ---------- */
.txfx-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:80;background:linear-gradient(90deg,#0066FC,#2B80FF,#7FB4FF);box-shadow:0 0 12px rgba(0,102,252,.8);pointer-events:none}

/* ---------- Intro X-sweep (once per session) ---------- */
.txfx-intro{position:fixed;inset:0;z-index:999;background:#05070B;display:flex;align-items:center;justify-content:center;animation:txfxIntroOut .45s ease 1s forwards}
.txfx-intro svg{width:120px;height:120px}
.txfx-intro path{stroke:#0066FC;stroke-width:10;stroke-linecap:round;fill:none;stroke-dasharray:220;stroke-dashoffset:220;animation:txfxDraw .6s cubic-bezier(.3,.7,.3,1) .05s forwards;filter:drop-shadow(0 0 14px rgba(0,102,252,.8))}
.txfx-intro path:nth-child(2){animation-delay:.22s}
@keyframes txfxDraw{to{stroke-dashoffset:0}}
@keyframes txfxIntroOut{to{opacity:0;transform:translateY(-100%);visibility:hidden}}
.txfx-intro-logo{position:absolute;height:52px;width:auto;opacity:0;transform:scale(.8)}
.txfx-intro-logoin svg{animation:txfxXOut .3s ease .55s forwards}
.txfx-intro-logoin .txfx-intro-logo{animation:txfxLogoIn .35s cubic-bezier(.2,.7,.2,1) .55s forwards}
@keyframes txfxXOut{to{opacity:0;transform:scale(1.25)}}
@keyframes txfxLogoIn{to{opacity:1;transform:scale(1)}}

/* ---------- Hero constellation canvas + scanline ---------- */
.txfx-net{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero .wrap{position:relative;z-index:2}
.txfx-scan{position:absolute;left:0;right:0;top:-10%;height:2px;z-index:1;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(43,128,255,.7),transparent);box-shadow:0 0 18px rgba(43,128,255,.55);animation:txfxScan 8s ease-in-out infinite}
@keyframes txfxScan{0%,55%{top:-4%;opacity:0}60%{opacity:1}92%{opacity:1}100%{top:104%;opacity:0}}

/* ---------- Headline glitch-in ---------- */
.txfx-glitch{position:relative;animation:txfxFlick .64s steps(2,end) 1}
.txfx-glitch::before,.txfx-glitch::after{content:attr(data-text);position:absolute;inset:0;overflow:hidden;pointer-events:none}
.txfx-glitch::before{color:#2B80FF;transform:translate(-3px,0);clip-path:polygon(0 12%,100% 12%,100% 38%,0 38%);animation:txfxSliceA .64s steps(3,end) 1}
.txfx-glitch::after{color:#fff;transform:translate(3px,0);clip-path:polygon(0 58%,100% 58%,100% 86%,0 86%);animation:txfxSliceB .64s steps(3,end) 1}
@keyframes txfxFlick{0%,100%{opacity:1}45%{opacity:.86}}
@keyframes txfxSliceA{0%{transform:translate(-6px,2px)}40%{transform:translate(4px,-2px)}80%{transform:translate(-3px,1px)}100%{transform:translate(0,0);opacity:0}}
@keyframes txfxSliceB{0%{transform:translate(6px,-2px)}40%{transform:translate(-4px,2px)}80%{transform:translate(3px,-1px)}100%{transform:translate(0,0);opacity:0}}

/* ---------- Section head beam ---------- */
.section-head{position:relative}
.section-head::before{content:"";position:absolute;top:-18px;left:0;height:2px;width:120px;background:linear-gradient(90deg,#0066FC,transparent);transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.2,.7,.2,1) .15s}
.section-head.in::before{transform:scaleX(1)}

/* ---------- Card tilt glare ---------- */
a.card{transform-style:preserve-3d;will-change:transform}
.txfx-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(360px circle at var(--gx,50%) var(--gy,50%),rgba(43,128,255,.16),transparent 70%)}
a.card:hover .txfx-glare{opacity:1}
a.card{position:relative;overflow:hidden}

/* ---------- Magnetic buttons ---------- */
.btn-solid{will-change:transform}

/* ---------- Ticker edge fades ---------- */
.ticker{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}

/* ---------- Decode effect cursor ---------- */
.txfx-decoding{color:inherit}

} /* end reduced-motion gate */