/* Motion and polish layer for thrashdigital.com. Safe to remove: the site works without it. */

/* Scroll progress bar */
#fxbar{position:fixed;top:0;left:0;height:3px;width:100%;background:linear-gradient(90deg,#ff7a00,#ffb347);transform:scaleX(0);transform-origin:0 50%;z-index:100;pointer-events:none}

/* Header tightens on scroll */
header .nav{transition:height .25s ease}
header{transition:box-shadow .25s ease,background .25s ease}
header.small .nav{height:56px}
header.small{box-shadow:0 8px 24px rgba(0,0,0,.35)}
.nav ul a:not(.btn){position:relative;padding:4px 0}
.nav ul a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .25s ease}
.nav ul a:not(.btn):hover::after,.nav ul a.active::after{transform:scaleX(1)}

/* Buttons: light sweep */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .6s ease}
.btn-primary:hover::after{left:130%}

/* Reveal on scroll (classes are added by fx.js only, so no-JS visitors see everything) */
.rv{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease;transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}

/* Cards */
.card,.step,.remote-card{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card:hover,.step:hover,.remote-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.14);border-color:rgba(255,122,0,.5)}
.card .icon{transition:transform .35s ease,background .25s}
.card:hover .icon{transform:rotate(-8deg) scale(1.12);background:#ffe3cc}
.rv.in.card:hover,.rv.in.step:hover,.rv.in.remote-card:hover{transform:translateY(-6px)}

/* Hero: glowing orbs, grid, mouse spotlight */
.hero,.page-hero,.cta-band{position:relative;overflow:hidden}
.hero>.wrap,.page-hero>.wrap,.cta-band>.wrap{position:relative;z-index:1}
.hero::before,.page-hero::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;right:-120px;top:-180px;background:radial-gradient(circle,rgba(255,122,0,.35),transparent 65%);filter:blur(20px);animation:orb 12s ease-in-out infinite;pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse at 70% 30%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse at 70% 30%,#000 10%,transparent 70%);pointer-events:none}
.hero .glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--mx,60%) var(--my,30%),rgba(255,122,0,.16),transparent 60%);transition:background .1s}
@keyframes orb{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-60px,50px) scale(1.15)}}
.cta-band::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent,rgba(255,122,0,.18),transparent 30%);animation:spin 14s linear infinite;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* Rotating headline word */
.rot{display:inline-block;transition:opacity .35s ease,transform .35s ease}
.rot.out{opacity:0;transform:translateY(-10px)}

/* Hero mockup: floats, with chips */
.browser-wrap{position:relative}
.browser{animation:floaty 7s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:rotate(1.5deg) translateY(0)}50%{transform:rotate(1.5deg) translateY(-14px)}}
.mock .m-cards div{background:linear-gradient(100deg,#f6f1e3 30%,#fffaf0 50%,#f6f1e3 70%);background-size:220% 100%;animation:shimmer 2.8s linear infinite}
.mock .m-cards div:nth-child(2){animation-delay:.3s}.mock .m-cards div:nth-child(3){animation-delay:.6s}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
.mock .m-lines div{transform-origin:0 50%;animation:grow 3.2s ease-in-out infinite alternate}
.mock .m-lines div:nth-child(2){animation-delay:.25s}.mock .m-lines div:nth-child(3){animation-delay:.5s}
@keyframes grow{from{transform:scaleX(.55)}to{transform:scaleX(1)}}
.chip{position:absolute;background:#fff;color:#111;font-weight:700;font-size:.82rem;padding:9px 14px;border-radius:99px;box-shadow:0 12px 30px rgba(0,0,0,.35);white-space:nowrap;z-index:2;animation:chip 5s ease-in-out infinite}
.chip.c1{left:-34px;top:6%}
.chip.c2{right:-14px;top:52%;animation-delay:1.2s}
.chip.c3{left:6%;bottom:-18px;animation-delay:2.2s}
@keyframes chip{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(max-width:900px){.chip.c1{left:0}.chip.c2{right:0}}

/* Trades marquee */
.trades{background:var(--accent);color:var(--accent-ink);overflow:hidden;white-space:nowrap;padding:14px 0;font-family:"Space Grotesk",Inter,sans-serif;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:.95rem}
.trades div{display:inline-block;padding-left:100%;animation:slide 40s linear infinite}
.trades:hover div{animation-play-state:paused}
.trades span{margin:0 18px}.trades span::before{content:"✦";margin-right:36px;opacity:.55}
@keyframes slide{to{transform:translateX(-100%)}}

/* Samples showcase (home page) */
.showcase{display:flex;gap:18px;overflow-x:auto;padding:6px 20px 26px;margin:0 -20px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.showcase::-webkit-scrollbar{height:8px}.showcase::-webkit-scrollbar-thumb{background:#cbd2dc;border-radius:4px}
.sc{flex:0 0 min(300px,78vw);scroll-snap-align:start;border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--line);text-decoration:none;color:inherit;box-shadow:var(--shadow);transition:transform .3s ease,box-shadow .3s ease}
.sc:hover{transform:translateY(-8px) rotate(-.6deg);box-shadow:0 22px 44px rgba(0,0,0,.2)}
.sc .pv{height:200px;text-shadow:0 2px 10px rgba(0,0,0,.6);padding:18px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}
.sc .pv::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.25) 50%,transparent 60%);transform:translateX(-120%);transition:transform .8s ease}
.sc:hover .pv::after{transform:translateX(120%)}
.sc .pv b{font-size:1.4rem;line-height:1.1;font-family:"Space Grotesk",Inter,sans-serif}
.sc .pv i{display:block;width:56px;height:6px;border-radius:3px;margin-top:10px}
.sc .tx{padding:14px 18px 18px}.sc .tx h3{font-size:1.05rem;margin-bottom:2px}.sc .tx small{color:var(--ink-soft);display:block;margin-bottom:6px}.sc .tx span{color:var(--accent);font-weight:700}

/* Floating quote button on phones (added by fx.js) */
.fxq{position:fixed;left:14px;right:14px;bottom:14px;z-index:60;background:var(--accent);color:var(--accent-ink);text-align:center;font-weight:700;padding:14px;border-radius:12px;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.4);transform:translateY(140%);transition:transform .35s ease}
.fxq.show{transform:none}
@media(min-width:700px){.fxq{display:none}}

@media(prefers-reduced-motion:reduce){
 .rv{opacity:1;transform:none;transition:none}
 .browser,.chip,.mock .m-cards div,.mock .m-lines div,.hero::before,.page-hero::before,.cta-band::before,.trades div{animation:none}
 .browser{transform:rotate(1.5deg)}
 .fxq{transition:none}
}
body:has(.hw-bar) .fxq{bottom:66px}