/* interactive layer */
.splash{--mx:50%;--my:50%;--tx:0;--ty:0;--glow:.0;cursor:crosshair;touch-action:none;-webkit-tap-highlight-color:transparent;user-select:none}
.beam{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle 340px at var(--mx) var(--my),#f2eddd1f,#f2eddd0a 45%,transparent 70%);mix-blend-mode:screen;opacity:.9;transition:opacity .6s}
.splash.idle .beam{opacity:.45}
.flicker{position:absolute;inset:0;z-index:3;pointer-events:none;background:#f2eddd;opacity:0;mix-blend-mode:overlay}
.flash{position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(circle at var(--fx,50%) var(--fy,50%),#f2eddd 0,#f2eddd88 12%,transparent 55%);opacity:0}
.flash.go{animation:flash .55s ease-out}
@keyframes flash{0%{opacity:.85}100%{opacity:0}}
.scratch{position:absolute;top:0;bottom:0;width:1px;background:#f2eddd;opacity:0;z-index:3;pointer-events:none}
.scratch.go{animation:scr .35s linear}
@keyframes scr{0%,100%{opacity:0}10%{opacity:.28}60%{opacity:.12}}
.mark-turn{animation:none!important;transform:rotateY(calc(var(--tx)*9deg)) rotateX(calc(var(--ty)*-6deg)) translate3d(calc(var(--tx)*6px),calc(var(--ty)*4px),0);transition:transform .25s cubic-bezier(.2,.7,.2,1);will-change:transform}
.splash:not(.live) .mark-turn{animation:drift 14s ease-in-out infinite!important;transition:none}
.edge{transform:translateZ(-4px) translate(calc(1px + var(--tx)*7px),calc(2px + var(--ty)*5px));opacity:calc(.18 + var(--glow)*.3);transition:opacity .3s}
.mark{filter:drop-shadow(0 0 calc(var(--glow)*18px) #f2eddd66) drop-shadow(0 1px 1px #f2eddd44);transition:filter .3s}
.mark-stage.pop .mark-turn{animation:pop .5s ease-out!important}
@keyframes pop{0%{transform:scale(1)}25%{transform:scale(1.035) rotateZ(-.4deg)}100%{transform:scale(1)}}
.gate i{transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s}
.splash.live .gate i{border-color:#e6e0d4aa}
.splash.live .gate i:nth-child(1){transform:translate(calc(var(--tx)*7px),calc(var(--ty)*7px))}
.splash.live .gate i:nth-child(2){transform:translate(calc(var(--tx)*7px),calc(var(--ty)*7px))}
.splash.live .gate i:nth-child(3){transform:translate(calc(var(--tx)*7px),calc(var(--ty)*7px))}
.splash.live .gate i:nth-child(4){transform:translate(calc(var(--tx)*7px),calc(var(--ty)*7px))}
.grain{transition:opacity .3s;opacity:calc(.11 + var(--glow)*.1)}
h1{transition:letter-spacing .6s,opacity .6s}
.splash.live h1{letter-spacing:.03em}
.hint{position:absolute;z-index:2;left:0;right:0;bottom:84px;text-align:center;font-size:9px;letter-spacing:2px;color:#e7e2d2aa;pointer-events:none;animation:hint 3s ease-in-out infinite;transition:opacity .8s}
.splash.live .hint{opacity:0;animation:none}
@keyframes hint{0%,100%{opacity:.25}50%{opacity:.8}}
.counter{font-variant-numeric:tabular-nums}
.splash.still .beam,.splash.still .grain{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.mark-turn{transition:none!important;transform:none!important}.flash.go,.scratch.go{animation:none}}
@media(max-width:600px){.hint{bottom:70px;font-size:8px}}
/* western / cinematic layer */
.desert{position:absolute;left:-3%;right:-3%;bottom:0;height:34%;z-index:0;pointer-events:none;transform:translate3d(calc(var(--tx)*-10px),0,0);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.desert svg{width:100%;height:100%;display:block}
.sun{position:absolute;left:50%;bottom:20%;width:120vmax;height:60vmax;transform:translate(-50%,50%);z-index:0;pointer-events:none;background:radial-gradient(ellipse at center,#f2dfb82e 0,#f2dfb812 28%,transparent 62%);animation:sun 9s ease-in-out infinite}
@keyframes sun{0%,100%{opacity:.7}50%{opacity:1}}
.dust{position:absolute;inset:0;z-index:1;pointer-events:none;width:100%;height:100%}
.vig{position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(ellipse at center,transparent 45%,#000000b8 100%)}
.bar{position:absolute;left:0;right:0;height:7%;background:#000;z-index:5;pointer-events:none;transition:height 2.6s cubic-bezier(.7,0,.2,1)}
.bar.t{top:0}.bar.b{bottom:0}
.splash.intro .bar{height:50.5%;transition:none}
.fade{position:absolute;inset:0;background:#000;z-index:6;pointer-events:none;opacity:0;transition:opacity 2.4s ease}
.splash.intro .fade{opacity:1;transition:none}
.title-card{animation:push 22s ease-out both}
@keyframes push{from{transform:scale(1)}to{transform:scale(1.045)}}
.mark{filter:sepia(.22) drop-shadow(0 0 calc(var(--glow)*18px) #f2dfb866) drop-shadow(0 1px 1px #f2eddd44)}
.western-rule{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:22px;color:#f2eddd99;font-size:11px;letter-spacing:6px}
.western-rule:before,.western-rule:after{content:'';width:clamp(40px,8vw,110px);height:1px;background:linear-gradient(90deg,transparent,#f2eddd88)}
.western-rule:after{transform:scaleX(-1)}
.beam{background:radial-gradient(circle 340px at var(--mx) var(--my),#f2dfb829,#f2dfb80d 45%,transparent 70%)}
@media(max-width:600px){.bar{height:6%}.western-rule{margin-top:16px;font-size:9px}.desert{height:26%}}
@media(prefers-reduced-motion:reduce){.title-card,.sun{animation:none}.bar,.fade{transition:none}}
.mast,.foot{z-index:7}
.bar{height:4.2%}.splash.intro .bar{height:50.5%}
@media(max-width:600px){.bar{height:3.2%}.splash.intro .bar{height:50.5%}}
.desert{height:26%}
h1{margin-top:92px!important}
@media(max-width:600px){h1{margin-top:68px!important}}
h1{font-size:clamp(13px,1.4vw,18px)!important}
@media(max-width:600px){h1{font-size:12.5px!important}}