:root { --acid:#b7ff00; --black:#050605; --white:#eef2e8; }
* { box-sizing:border-box; }
html { background:var(--black); color:var(--white); scroll-behavior:smooth; }
body { margin:0; min-height:100svh; overflow:hidden; font-family:"Space Mono", monospace; background:#020302; }
.bunker { position:fixed; inset:-3%; z-index:0; overflow:hidden; background:#020302; }
.bunker-image { position:absolute; inset:-5%; background:url('./assets/vileform-unified-hero-v6.png') center 54%/cover no-repeat; filter:contrast(1.08) saturate(.76) brightness(.78) hue-rotate(-3deg); image-rendering:auto; will-change:transform; }
.bunker:before { content:""; position:absolute; z-index:1; inset:-20%; background:radial-gradient(ellipse at 25% 55%,rgba(190,205,190,.18),transparent 28%),radial-gradient(ellipse at 75% 42%,rgba(160,180,170,.12),transparent 26%),radial-gradient(ellipse at 50% 70%,rgba(130,160,120,.1),transparent 34%); filter:blur(30px); mix-blend-mode:screen; animation:fog-drift 13s ease-in-out infinite alternate; }
.bunker:after { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 42%,transparent 0 20%,rgba(0,0,0,.1) 48%,rgba(0,0,0,.87) 100%),linear-gradient(180deg,rgba(0,0,0,.28),transparent 33%,rgba(0,0,0,.42)); }
@keyframes camera { 0%{transform:scale(1.045) translate3d(calc(-.5% + var(--px)),calc(0% + var(--py)),0)} 46%{transform:scale(1.09) translate3d(calc(.8% + var(--px)),calc(-.55% + var(--py)),0)} 49%{transform:scale(1.085) translate3d(calc(.2% + var(--px)),calc(-.2% + var(--py)),0)} 100%{transform:scale(1.055) translate3d(calc(-.7% + var(--px)),calc(.35% + var(--py)),0)} }
@keyframes fog-drift { from{transform:translate3d(-4%,2%,0) scale(1)} to{transform:translate3d(5%,-3%,0) scale(1.14)} }
#toxic-scene { position:fixed; inset:0; width:100%; height:100%; z-index:1; mix-blend-mode:screen; }
.grain { position:fixed; inset:-50%; z-index:1; pointer-events:none; opacity:.035; animation:noise .5s steps(2) infinite; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
@keyframes noise { 0%{transform:translate(0)} 25%{transform:translate(2%,-1%)} 50%{transform:translate(-1%,2%)} 75%{transform:translate(1%,1%)} }
.site-header { position:fixed; z-index:5; top:0; left:0; width:100%; display:flex; align-items:center; justify-content:space-between; padding:30px 38px; mix-blend-mode:difference; }
.wordmark { color:#fff; text-decoration:none; letter-spacing:-.08em; font-family:"Archivo Black", sans-serif; font-size:1.05rem; }
.wordmark span { color:#9e0b0b; margin:0 .18em; }
.menu { width:48px; height:48px; border:1px solid rgba(255,255,255,.45); border-radius:50%; background:rgba(0,0,0,.12); display:grid; place-content:center; gap:6px; cursor:pointer; }
.menu span { width:18px; height:1px; display:block; background:white; }
.hero { position:relative; z-index:3; min-height:100svh; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:90px 24px 38px; text-align:center; }
.eyebrow { position:absolute; top:102px; font-size:.65rem; letter-spacing:.22em; color:#dbe7c5; }
.brand-mini { position:absolute; top:66px; width:250px; height:90px; overflow:hidden; filter:drop-shadow(0 6px 10px #000); }
.brand-mini img { position:absolute; width:250px; height:250px; left:0; top:-105px; object-fit:cover; mix-blend-mode:screen; filter:contrast(1.25) saturate(.9); }
.status-dot { display:inline-block; width:6px; height:6px; margin-right:8px; border-radius:50%; background:var(--acid); box-shadow:0 0 16px var(--acid); animation:pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50%{opacity:.25; transform:scale(.6)} }
.brand-lockup { position:relative; width:min(58vw,590px); aspect-ratio:1; display:grid; place-items:center; }
.logo-wrap { position:relative; width:82%; overflow:visible; filter:drop-shadow(0 18px 24px rgba(0,0,0,.45)); animation:logo-hit 8s steps(1) infinite; -webkit-mask-image:radial-gradient(ellipse at center,#000 42%,rgba(0,0,0,.92) 67%,transparent 96%); mask-image:radial-gradient(ellipse at center,#000 42%,rgba(0,0,0,.92) 67%,transparent 96%); }
.logo-wrap:after { content:""; position:absolute; inset:0; background:linear-gradient(100deg,transparent 35%,rgba(183,255,0,.2) 50%,transparent 65%); transform:translateX(-130%); animation:scan 4.8s ease-in-out infinite; }
.logo-wrap img { width:100%; display:block; mix-blend-mode:screen; filter:contrast(1.16) saturate(.68) brightness(.78) hue-rotate(-5deg); opacity:.88; }
.signal-line { display:none; }
.cut-line { position:absolute; width:85%; height:1px; background:linear-gradient(90deg,transparent,#a50000,transparent); box-shadow:0 0 14px #f00000; transform:rotate(-12deg) scaleX(0); animation:cut 7s ease-out infinite; }
@keyframes logo-hit { 0%,91%,93%,100%{transform:translate(0)} 92%{transform:translate(-3px,2px)} }
@keyframes cut { 0%,70%{transform:rotate(-12deg) scaleX(0);opacity:0} 72%{transform:rotate(-12deg) scaleX(1);opacity:1} 78%,100%{opacity:0} }
.intro { position:absolute; top:76%; margin:0; font-size:clamp(.68rem,1vw,.82rem); line-height:1.65; letter-spacing:.34em; text-shadow:0 2px 12px #000; }
.enter { display:flex; align-items:center; gap:40px; color:var(--black); background:var(--acid); padding:15px 18px 15px 23px; text-decoration:none; font-size:.69rem; letter-spacing:.12em; font-weight:700; border:1px solid var(--acid); transition:.25s; }
.enter b { font-size:1rem; font-weight:400; }
.enter:hover { color:var(--acid); background:rgba(5,6,5,.75); box-shadow:0 0 32px rgba(183,255,0,.22); }
.coordinates { position:fixed; z-index:4; left:38px; bottom:34px; font-size:.58rem; line-height:1.7; letter-spacing:.12em; color:rgba(255,255,255,.55); }
.barrel-nav { position:fixed; z-index:4; left:50%; bottom:-50px; width:min(780px,76vw); height:260px; transform:translateX(-50%); pointer-events:none; }
.nav-drum { --turn:0deg; position:absolute; bottom:0; width:190px; height:220px; display:flex; align-items:center; justify-content:center; color:#d9ddd4; text-decoration:none; pointer-events:auto; border-radius:48% 48% 42% 42%/12% 12% 8% 8%; background:linear-gradient(90deg,#050605 0,#282b27 22%,#080a08 53%,#343833 78%,#050605 100%); border:2px solid #454943; box-shadow:inset 0 15px 0 #111411,inset 0 19px 0 #555a52,inset 0 -26px 0 #080908,inset 0 -30px 0 #484c46,0 20px 30px #000; transform:rotate(var(--turn)); transition:transform .28s ease,filter .28s ease; overflow:hidden; }
.nav-drum:before { content:""; position:absolute; inset:14px -4px auto; height:16px; border:3px solid #555b52; border-radius:50%; box-shadow:0 92px 0 -1px #4b5049; opacity:.8; }
.nav-drum:after { content:""; position:absolute; right:-6px; top:0; width:20px; height:78%; background:linear-gradient(90deg,#8fca00,#b7ff00 45%,#314800); border-radius:60% 20% 70% 20%; filter:blur(.3px); opacity:.7; transform:skewY(10deg); }
.nav-drum span { position:relative; z-index:2; font:700 1.55rem/1 "Archivo Black",sans-serif; letter-spacing:.12em; color:#d9ddd4; transform:rotate(-2deg); text-shadow:2px 3px #000; }
.nav-drum i { position:absolute; left:18px; top:42px; font-style:normal; color:#8a0d0d; font-weight:700; font-size:.65rem; }
.nav-drum:hover,.nav-drum:focus-visible { transform:rotate(var(--turn)) translateY(-24px) scale(1.035); filter:brightness(1.35); outline:none; }
.drum-listen { left:2%; --turn:-7deg; }
.drum-tour { left:50%; z-index:2; --turn:3deg; transform:translateX(-50%) rotate(var(--turn)); }
.drum-tour:hover,.drum-tour:focus-visible { transform:translateX(-50%) rotate(var(--turn)) translateY(-24px) scale(1.035); }
.drum-shop { right:2%; --turn:8deg; }
.warning { position:fixed; z-index:4; left:0; bottom:0; width:100%; overflow:hidden; white-space:nowrap; color:rgba(255,255,255,.28); font:700 .55rem/1 "Space Mono"; letter-spacing:.3em; transform:translateY(35%); }
.barrel-nav { width:min(830px,61vw); height:250px; bottom:1.5vh; }
.barrel-photo { position:absolute; z-index:0; inset:auto 0 0; width:100%; height:auto; display:block; pointer-events:none; filter:contrast(1.2) saturate(.52) brightness(.6) hue-rotate(-7deg) drop-shadow(0 18px 20px #000); transform:translateY(34%); }
.barrel-nav:after { content:""; position:absolute; z-index:1; left:3%; right:3%; bottom:0; height:52%; pointer-events:none; background:linear-gradient(180deg,transparent,rgba(10,18,7,.48)),radial-gradient(ellipse at 50% 100%,rgba(145,210,0,.18),transparent 66%); mix-blend-mode:color; }
.nav-drum { bottom:0; width:31%; height:210px; border:0; border-radius:44% 44% 22% 22%/16% 16% 8% 8%; background:none; box-shadow:none; overflow:visible; filter:none; }
.nav-drum:before,.nav-drum:after { display:none; }
.nav-drum span { padding:0; font-size:1rem; letter-spacing:.16em; color:rgba(217,221,212,.82); background:none; border:0; backdrop-filter:none; text-shadow:2px 3px #000,0 0 8px rgba(0,0,0,.8); transform:rotate(-2deg); mix-blend-mode:screen; }
.nav-drum i { left:22%; top:62%; color:rgba(183,255,0,.65); text-shadow:0 1px 4px #000; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.nav-drum:hover,.nav-drum:focus-visible { filter:brightness(1.35); }
.drum-listen { left:0;--turn:-2deg; }
.drum-tour { left:50%;--turn:1deg; }
.drum-shop { right:0;--turn:2deg; }
body:after { content:""; position:fixed; z-index:2; inset:0; pointer-events:none; background:rgba(210,235,220,.12); opacity:0; mix-blend-mode:screen; animation:light-fault 9s steps(1) infinite; }
@keyframes light-fault { 0%,73%,75%,77%,100%{opacity:0} 74%{opacity:.2} 76%{opacity:.08} }
@media (max-width:700px){ .site-header{padding:20px}.intro{top:72%}.coordinates{display:none}.bunker-image{background-position:center 52%}.barrel-nav{width:88vw;height:170px;bottom:1vh}.nav-drum{width:33%;height:145px}.nav-drum span{font-size:.7rem}.nav-drum i{display:none}.drum-listen{left:0}.drum-shop{right:0} }
@media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;animation-iteration-count:1!important} }