:root{--ink:#07090d;--cream:#f3ead7;--red:#ed252d}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#090b10;color:white;font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}button,a{font:inherit}.site{min-height:100svh;position:relative;overflow:hidden;background:#090b10}
.store{min-height:100svh;background:var(--cream);color:var(--ink);position:relative}.store-nav{height:84px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:3px solid #101116;background:#f8f0df;position:relative;z-index:4}.logo{color:inherit;text-decoration:none;transform:rotate(-2deg);line-height:.76;text-align:center}.logo b{display:block;font:900 27px/1 Impact,sans-serif}.logo span{color:var(--red);font:900 21px/1 Impact,sans-serif;letter-spacing:6px}.nav-links{display:flex;gap:36px;font-weight:900;font-size:12px;letter-spacing:1px;text-transform:uppercase}.nav-links a{color:inherit;text-decoration:none}.cart{border:2px solid #111;background:transparent;padding:10px 14px;font-weight:900;cursor:pointer;box-shadow:3px 3px 0 #111}.cart b{display:inline-grid;place-items:center;margin-left:8px;width:20px;height:20px;border-radius:50%;color:white;background:var(--red)}.marquee{overflow:hidden;color:white;background:#13151b;border-bottom:4px solid #111;padding:9px 0;font:900 11px/1 monospace;letter-spacing:2px;white-space:nowrap}.marquee div{width:max-content;animation:marquee 18s linear infinite}@keyframes marquee{to{transform:translateX(-50%)}}
.shop-hero{min-height:calc(100svh - 118px);position:relative;display:grid;grid-template-columns:minmax(380px,.8fr) 1.3fr;gap:3vw;align-items:center;padding:7vh 5vw;overflow:hidden;background:radial-gradient(circle at 18% 40%,#ffe85c 0 4%,transparent 4.2%),linear-gradient(115deg,#f9e73b 0 41%,#e53239 41.2%)}.halftone{position:absolute;inset:0;opacity:.14;background-image:radial-gradient(#080808 1.1px,transparent 1.4px);background-size:9px 9px;pointer-events:none}.shop-copy{position:relative;z-index:2;max-width:600px}.eyebrow{display:inline-block;background:#111;color:white;padding:8px 12px;transform:rotate(-2deg);font:900 11px monospace;letter-spacing:2px}.shop-copy h1{margin:19px 0 17px;font:900 clamp(46px,6.3vw,104px)/.84 Impact,sans-serif;letter-spacing:-2px;text-transform:uppercase;text-shadow:4px 4px 0 #ffffffbf}.shop-copy h1 em{color:white;font-style:normal;text-shadow:5px 5px 0 #111;-webkit-text-stroke:2px #111}.shop-copy>p:not(.eyebrow){max-width:480px;font-weight:700;line-height:1.6}.shop-button{display:inline-flex;gap:28px;color:white;text-decoration:none;margin-top:17px;padding:17px 20px;background:#111;font-weight:900;box-shadow:7px 7px 0 white;transition:.2s}.shop-button:hover{background:#312e81;transform:translate(-2px,-2px);box-shadow:10px 10px 0 white}.shop-button span{font-size:22px}.rack-wrap{position:relative;z-index:2;transform:rotate(1.2deg);filter:drop-shadow(20px 24px 0 #0003)}
.comic-rack{position:relative;width:min(100%,870px);padding:58px 30px 28px;background:linear-gradient(90deg,#242633,#535664 3%,#242631 7% 93%,#555967 97%,#20222c);border:5px solid #0a0b0e;box-shadow:inset 0 0 0 4px #858995,inset 0 0 40px #000}.rack-label{position:absolute;top:11px;left:50%;transform:translateX(-50%) rotate(-1deg);padding:8px 22px;background:#f6e8c7;border:3px solid #111;font:900 13px monospace;letter-spacing:2px;white-space:nowrap}.rack-label span{color:var(--red)}.comics{display:grid;grid-template-columns:repeat(3,1fr);align-items:end;gap:14px 10px}.comic{aspect-ratio:.7;max-height:30vh;min-height:180px;position:relative;padding:12px;border:3px solid #0a0a0a;box-shadow:5px 5px 0 #0b0b0e;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;transform:rotate(calc((var(--i) - 2.5)*.7deg));transition:.25s}.comic:hover{transform:translateY(-12px) rotate(0);z-index:3}.comic:after{content:"";position:absolute;inset:0;background:radial-gradient(#111 1px,transparent 1.3px);background-size:7px 7px;opacity:.16}.comic h3{margin:0;position:relative;z-index:2;font:900 clamp(20px,2vw,36px)/.82 Impact,sans-serif;text-shadow:2px 2px 0 white}.comic h3 span{display:block}.issue{position:absolute;top:8px;right:8px;z-index:3;padding:4px;background:#fff;border:2px solid #111;font:900 10px monospace}.burst{position:absolute;inset:19% 9% auto;z-index:1;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;font:900 54px Impact;background:#fff9b5;border:5px solid #111;box-shadow:0 0 0 9px #ffffff57}.comic button{position:absolute;z-index:4;right:7px;bottom:7px;border:2px solid #111;background:white;font-weight:900;cursor:pointer}.comic-violet{background:#7258c9}.comic-yellow{background:#ffd32c}.comic-red{background:#ec3940}.comic-blue{background:#3fa4d9}.comic-green{background:#6bc76a}.comic-pink{background:#f078b6}.shelf{height:20px;margin:15px -18px -14px;background:#858995;border:4px solid #111;display:flex;justify-content:space-around}.shelf i{display:block;width:7px;background:#111}
.vault{position:fixed;inset:0;z-index:20;perspective:1300px;overflow:hidden;background:#07090c;transition:visibility 0s 2.2s}.is-entered .vault{visibility:hidden;pointer-events:none}.vault-room{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle,#35181d,#11131a 62%,#050608)}.ghost-rack{width:min(68vw,780px);opacity:.62;filter:blur(5px) saturate(.8);transform:scale(.93)}.door{position:absolute;top:0;bottom:0;width:50.5%;overflow:hidden;background:linear-gradient(110deg,#090b10,#555a60 16%,#14171c 28%,#686d74 48%,#171a20 68%,#4a4f55 86%,#090b10);border-color:#050607;border-style:solid;transition:transform 1.75s cubic-bezier(.7,0,.2,1);will-change:transform;box-shadow:inset 0 0 80px #000,0 0 35px #000}.door-left{left:0;border-width:0 9px 0 0;transform-origin:left}.door-right{right:0;border-width:0 0 0 9px;transform-origin:right}.is-opening .door-left{transform:translateX(-102%) rotateY(-7deg)}.is-opening .door-right{transform:translateX(102%) rotateY(7deg)}.steel-noise{position:absolute;inset:0;opacity:.35;background-image:repeating-linear-gradient(92deg,transparent 0 3px,#ffffff17 4px,transparent 5px 8px),radial-gradient(#fff 1px,transparent 1px);background-size:auto,5px 5px;mix-blend-mode:overlay}.door:before{content:"";position:absolute;inset:5.5vw;border:1.5vw solid #262a30;outline:5px solid #08090b;box-shadow:inset 0 0 0 5px #777c84,inset 0 0 80px #08090d,0 0 0 4px #868a8e}.door-glass{position:absolute;top:16%;bottom:19%;width:76%;border:10px solid #0b0d11;box-shadow:0 0 0 8px #61666c,inset 0 0 70px #05070b;background:#3a42495c;backdrop-filter:blur(10px)}.glass-left{right:-38%;border-radius:50% 0 0 50%}.glass-right{left:-38%;border-radius:0 50% 50% 0}.door-glass:after{content:"";position:absolute;inset:0;background:linear-gradient(125deg,#ffffff38,transparent 28% 70%,#ffffff1a)}.rivets{position:absolute;inset:4.5vw;background-image:radial-gradient(circle,#050609 0 3px,#81868d 4px 6px,transparent 7px);background-size:100% 50px}
.top-beam,.bottom-beam{position:absolute;z-index:25;left:0;right:0;height:46px;display:flex;align-items:center;justify-content:center;gap:14px;color:#b8bdc4;background:linear-gradient(#2e3238,#090b0e 50%,#2b2f34);border:3px solid #050607;font:700 10px monospace;letter-spacing:3px;transition:transform 1.2s ease .2s}.top-beam{top:0}.bottom-beam{bottom:0}.top-beam b{position:absolute;right:3vw;color:#707780}.bottom-beam span{color:#f6c631}.status-light{width:8px;height:8px;border-radius:50%;background:#55ff84;box-shadow:0 0 12px #55ff84}.is-opening .top-beam{transform:translateY(-110%)}.is-opening .bottom-beam{transform:translateY(110%)}
.vault-title{position:absolute;z-index:30;left:50%;top:13%;width:90%;transform:translateX(-50%);text-align:center;transition:.45s;text-shadow:0 4px 18px #000}.vault-title span{display:block;font:800 11px monospace;letter-spacing:7px;color:#d9dee1}.vault-title strong{display:block;margin:9px 0;font:900 clamp(48px,7vw,110px)/.85 Impact,sans-serif;color:#eff1f0;-webkit-text-stroke:2px #17191d;text-shadow:0 5px 0 #22262b,0 8px 0 #08090b,0 0 35px #000}.vault-title small{color:#adb2b7;font:italic 14px Georgia,serif;letter-spacing:2px}.enter-button{position:absolute;z-index:35;left:50%;bottom:10%;transform:translateX(-50%);width:310px;height:168px;border:0;color:white;background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;text-shadow:0 2px 2px #000;transition:.45s}.red-button{position:relative;width:98px;height:98px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 38% 27%,#ff7478 0 4%,#e7131d 22%,#a00008 58%,#4d0004 70%);border:8px solid #15171a;box-shadow:0 0 0 5px #777c82,0 0 0 9px #17191c,0 9px 12px #000,0 0 34px #ff001499;transition:.16s}.red-button i{width:45px;height:21px;border-radius:50%;background:#ffffff3b;transform:translateY(-18px);filter:blur(3px)}.button-halo{position:absolute;top:-6px;width:112px;height:112px;border-radius:50%;border:1px solid #ff2f3a73;animation:pulse 1.7s infinite}.enter-button:hover .red-button{filter:brightness(1.2);transform:scale(1.06)}.enter-button:active .red-button{transform:scale(.94)}.enter-button b{margin-top:13px;font:900 15px monospace;letter-spacing:1px}.enter-button small{margin-top:6px;color:#999fa6;font:700 9px monospace;letter-spacing:3px}@keyframes pulse{70%,100%{transform:scale(1.45);opacity:0}}.is-opening .vault-title,.is-opening .enter-button{opacity:0;transform:translateX(-50%) scale(.82);pointer-events:none}.opening-copy{position:absolute;z-index:29;left:50%;top:50%;transform:translate(-50%,-50%) scale(.8);opacity:0;white-space:nowrap;padding:13px 18px;background:#0b0e12;border:1px solid #50ff82;color:#50ff82;font:800 11px monospace;letter-spacing:3px;transition:.4s .6s}.opening-copy span{color:white}.is-opening .opening-copy{opacity:1;transform:translate(-50%,-50%) scale(1)}.is-entered .opening-copy{opacity:0}
@media(max-width:850px){.nav-links{display:none}.store-nav{height:70px}.shop-hero{grid-template-columns:1fr;padding:6vh 6vw 10vh}.shop-copy{text-align:center;margin:auto}.shop-copy>p:not(.eyebrow){margin-inline:auto}.rack-wrap{margin-top:20px}.comic{min-height:145px}.vault-title{top:11%}.vault-title strong{font-size:clamp(44px,13vw,76px)}.ghost-rack{width:92vw}.door:before{inset:7vw 3vw}.enter-button{bottom:7%}}@media(max-width:520px){.shop-copy h1{font-size:48px}.comics{grid-template-columns:repeat(2,1fr)}.comic{max-height:none}.comic-rack{padding-inline:18px}.vault-title span{letter-spacing:4px}.vault-title small{font-size:11px}.enter-button{width:270px}.top-beam b{display:none}.top-beam{font-size:8px;letter-spacing:1px}.opening-copy{font-size:8px;letter-spacing:1px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}.marquee div{animation:none}}
.ghost-rack{opacity:.82;filter:blur(3px) saturate(.9)}
.door{background:linear-gradient(110deg,#090b10e6,#555a60d4 16%,#14171cd9 28%,#686d74cf 48%,#171a20d9 68%,#4a4f55d1 86%,#090b10e6)}
.door-glass{background:#3a424929}
