/* fx.css: wasteland effects layer. Everything here is decorative; content works without it. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.32s ease-in both vt-out}::view-transition-new(root){animation:.38s ease-out both vt-in}
@keyframes vt-out{to{clip-path:inset(0 0 0 100%);filter:contrast(1.6) brightness(1.4)}}
@keyframes vt-in{from{clip-path:inset(0 100% 0 0);filter:sepia(1) contrast(2) brightness(1.6)}}
/* 1 intro: critical CSS is inlined in <head> by build-site.mjs */
/* 2 hero atmosphere */
.hero{position:relative;overflow:hidden}.hero-in{position:relative;z-index:1}
.hero .dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain .6s steps(3) infinite}
.hero::before{content:"";position:absolute;left:-5%;right:-5%;bottom:0;height:90px;pointer-events:none;background:linear-gradient(to top,#e0913f22,transparent);filter:blur(6px);animation:shimmer 3.2s ease-in-out infinite alternate}
.paused .hero::after,.paused.hero::after,.paused.hero::before{animation-play-state:paused}
@keyframes grain{0%{transform:translate(0)}33%{transform:translate(-8px,5px)}66%{transform:translate(6px,-7px)}}
@keyframes shimmer{from{transform:skewX(-2deg) scaleY(1)}to{transform:skewX(2deg) scaleY(1.25)}}
/* 3 highway */
.road{position:fixed;left:14px;top:0;bottom:0;width:10px;z-index:2;pointer-events:none;background:#2a1f16;border-left:1px solid #4a3826;border-right:1px solid #4a3826}
.road::after{content:"";position:absolute;left:4px;top:-40px;bottom:-40px;width:2px;background:repeating-linear-gradient(#f2b56b 0 18px,transparent 18px 40px);transform:translateY(var(--rp,0px))}
.mm{display:inline-block;vertical-align:middle;margin-right:10px;font:700 .62rem/1 system-ui,sans-serif;letter-spacing:.08em;color:#16110d;background:#7fa46a;border:2px solid #f3e7cf;border-radius:4px;padding:4px 6px;transform:translateY(-3px)}
@media (max-width:1240px){.road{display:none}}
/* 4 road-sign cards */
.card{--mx:50%;--my:0%;position:relative;background:radial-gradient(circle at var(--mx) var(--my),#f2b56b22,transparent 45%),linear-gradient(160deg,#33271c,#241a12 60%,#2c2016);border:2px solid #5a4430;box-shadow:inset 0 0 0 4px #1b140e,inset 0 0 0 5px #6b5038,0 6px 18px #0007;transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .2s,box-shadow .2s,border-color .2s}
.card::before,.card::after{content:"";position:absolute;top:7px;width:6px;height:6px;border-radius:50%;background:radial-gradient(#b8a080,#4a3826);box-shadow:0 0 0 1px #0006}.card::before{left:8px}.card::after{right:8px}
.card:hover,.card:focus-within{border-color:var(--acc);box-shadow:inset 0 0 0 4px #1b140e,inset 0 0 0 5px #8a6440,0 0 0 1px #e0913f55,0 0 34px #f2b56b40,0 10px 26px #0009}
.card:hover{transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-3px)}
/* 5 cursor */
html.fxc,html.fxc a,html.fxc button{cursor:none}html.fxc input,html.fxc textarea,html.fxc select{cursor:auto}
.cur{position:fixed;left:0;top:0;width:22px;height:22px;margin:-11px 0 0 -11px;z-index:60;pointer-events:none;border:1.5px solid #f2b56b;border-radius:50%;transition:width .15s,height .15s,margin .15s}
.cur::before,.cur::after{content:"";position:absolute;background:#f2b56b}.cur::before{left:50%;top:-5px;bottom:-5px;width:1.5px;transform:translateX(-50%)}.cur::after{top:50%;left:-5px;right:-5px;height:1.5px;transform:translateY(-50%)}
.cur.big{width:34px;height:34px;margin:-17px 0 0 -17px;background:#f2b56b22}
.trail{position:fixed;left:0;top:0;z-index:59;width:90px;height:90px;margin:-45px 0 0 -45px;border-radius:50%;pointer-events:none;background:radial-gradient(#ffd29a22,transparent 65%)}
/* 6 glitch */
.glx{animation:glx .6s steps(8) 1}
@keyframes glx{0%{opacity:.2;text-shadow:3px 0 #e0913f,-3px 0 #5ad}20%{opacity:1;transform:skewX(-8deg)}35%{opacity:.4;text-shadow:-2px 0 #e0913f,2px 0 #5ad;transform:none}50%{opacity:1;clip-path:inset(20% 0 40% 0)}65%{clip-path:none;opacity:.7}100%{opacity:1;text-shadow:none}}
/* 8 radio */
.radio{position:fixed;right:14px;bottom:14px;z-index:40;display:flex;align-items:center;gap:8px;background:#120d09ee;border:1px solid #5a4430;border-radius:22px;padding:5px 12px 5px 6px;color:var(--ink);font:600 .8rem/1 ui-monospace,monospace;box-shadow:0 6px 20px #0008}
.radio button{width:32px;height:32px;border-radius:50%;border:2px solid var(--acc);background:radial-gradient(#3a2a1a,#16110d);color:var(--acc2);font-size:.9rem;cursor:pointer;display:grid;place-items:center}
.radio .fq{min-width:70px;font-variant-numeric:tabular-nums}.radio .bar{width:44px;height:6px;border-radius:3px;background:linear-gradient(90deg,#4a3826,#4a3826);position:relative;overflow:hidden}
.radio .bar b{position:absolute;top:0;bottom:0;width:3px;background:#f2b56b;left:var(--n,40%)}.radio .st{color:var(--mut);font-weight:400}
/* 9 parallax */
.plx{position:relative;height:clamp(220px,38vw,420px);overflow:hidden;border-radius:10px;margin:10px 0 6px;border:1px solid var(--line);background:#2a160b}
.plx img{position:absolute;left:-4%;width:108%;will-change:transform}.plx .l0{top:0;height:115%;object-fit:cover}.plx .l1{bottom:8%}.plx .l2{bottom:-4%}
.plxcap{font-size:.8rem;color:var(--mut);margin:0 0 18px}
/* 10 easter eggs */
.night .spot{position:fixed;inset:0;z-index:45;pointer-events:none;background:radial-gradient(circle 170px at var(--cx,50%) var(--cy,40%),transparent 0,#000a 60%,#000e 100%)}
.flyr{position:fixed;z-index:70;pointer-events:none;width:64px;left:-80px;top:30vh;animation:fly 2.2s ease-in forwards}
@keyframes fly{0%{transform:translate(0,0) rotate(-6deg)}50%{transform:translate(55vw,-12vh) rotate(4deg) scale(1.3)}100%{transform:translate(115vw,-35vh) rotate(-10deg) scale(.7)}}
.toast{position:fixed;left:50%;bottom:70px;transform:translateX(-50%);z-index:80;background:#120d09f0;border:1px solid var(--acc);padding:8px 14px;border-radius:8px;font-size:.9rem}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}.hero::before,.hero::after,.hero .dust,.cur,.trail{display:none}.card{transform:none!important}}
.foot{padding-bottom:72px}