:root { --orange:#ff3d0a; --black:#050505; --bone:#e9e6de; --muted:#777772; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:var(--black); color:var(--bone); }
body { font-family:"Arial Narrow", "Helvetica Neue", Arial, sans-serif; }
button, input { font:inherit; }

.coming-soon { position:relative; min-height:100svh; overflow:hidden; display:flex; flex-direction:column; isolation:isolate; background:radial-gradient(circle at 50% 38%,#171717 0,#090909 31%,#030303 72%); }
.coming-soon:before { content:""; position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,transparent 49.93%,#ffffff0d 50%,transparent 50.07%),linear-gradient(0deg,transparent 49.93%,#ffffff0a 50%,transparent 50.07%); background-size:100% 100%; }
.coming-soon:after { content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(180deg,#0505050d 0%,transparent 38%,#05050508 100%),url('assets/mountain-shadow.png') center bottom/cover no-repeat; opacity:1; filter:brightness(2.8) contrast(1.08); transform:scale(1.34); transform-origin:center bottom; pointer-events:none; }
.grain { position:absolute; inset:-40%; z-index:8; pointer-events:none; opacity:.045; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%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)' opacity='.8'/%3E%3C/svg%3E"); animation:grain .24s steps(2) infinite; }
@keyframes grain { 0%{transform:translate(0)} 25%{transform:translate(2%,-2%)} 50%{transform:translate(-2%,1%)} 75%{transform:translate(1%,2%)} 100%{transform:translate(-1%,-1%)} }

.topline,.bottomline { width:100%; display:flex; justify-content:space-between; align-items:center; position:relative; z-index:5; padding:22px 30px; color:#898984; font-size:9px; font-weight:700; letter-spacing:.25em; text-transform:uppercase; }
.topline { border-bottom:1px solid #ffffff17; }
.bottomline { margin-top:auto; border-top:1px solid #ffffff17; }
.bottomline a { color:#aaa9a3; text-decoration:none; transition:color .2s; }
.bottomline a:hover { color:var(--orange); }
.bottomline a b { color:var(--orange); font-size:13px; }
.status { display:flex; align-items:center; gap:9px; color:#b9b8b1; }
.status i { width:6px; height:6px; border-radius:50%; background:var(--orange); box-shadow:0 0 14px var(--orange); animation:pulse 2s ease-in-out infinite; }
.top-actions { display:flex; align-items:center; gap:28px; }
.sound-toggle { border:0; padding:0; background:transparent; color:#aaa9a3; cursor:pointer; font-size:9px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }
.sound-toggle b { color:var(--orange); margin-right:7px; font-size:8px; }
.sound-toggle:hover { color:#fff; }
@keyframes pulse { 50%{opacity:.25;transform:scale(.65)} }

.sound-entry[hidden] { display:none; }
.sound-entry { position:fixed; inset:0; z-index:30; display:grid; place-items:center; padding:24px; background:#030303b8; backdrop-filter:blur(8px); }
.sound-entry button { position:relative; min-width:min(360px,calc(100vw - 48px)); border:1px solid #ff3d0aaa; padding:24px 30px; background:#070707e8; color:#f0ede5; cursor:pointer; text-transform:uppercase; box-shadow:0 0 24px #ff3d0a26,inset 0 0 22px #ff3d0a0e; transition:border-color .2s,box-shadow .2s,transform .2s; }
.sound-entry button:hover,.sound-entry button:focus-visible { border-color:var(--orange); box-shadow:0 0 36px #ff3d0a55,inset 0 0 26px #ff3d0a18; transform:translateY(-2px); outline:none; }
.sound-entry small,.sound-entry strong { display:block; }
.sound-entry small { margin-bottom:10px; color:#777772; font-size:8px; font-weight:800; letter-spacing:.28em; }
.sound-entry strong { color:var(--orange); font-size:clamp(20px,3vw,32px); letter-spacing:.04em; }
.sound-entry span { display:block; margin-top:14px; color:var(--orange); font-size:12px; }

.launch-panel { width:min(1120px,calc(100% - 48px)); min-height:0; flex:1; margin:auto; padding:clamp(24px,4vh,52px) 0 22px; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; z-index:2; }
.logo-stage { --rx:0deg; --ry:0deg; --gx:50%; --gy:50%; width:min(520px,62vw); margin-bottom:clamp(22px,3vh,42px); position:relative; perspective:900px; cursor:crosshair; transform-style:preserve-3d; }
.logo-stage:after { content:""; position:absolute; inset:-18%; background:radial-gradient(circle at var(--gx) var(--gy),#ff3d0a1f,transparent 32%); opacity:0; transition:opacity .35s; pointer-events:none; }
.logo-stage:hover:after { opacity:1; }
.logo-window { position:relative; width:100%; aspect-ratio:5334/2210; transform:rotateX(var(--rx)) rotateY(var(--ry)); transform-style:preserve-3d; transition:transform .12s ease-out; filter:drop-shadow(0 0 24px #ff3d0a18); }
.logo-window img { width:100%; height:auto; display:block; }
.logo-white-line { position:absolute; inset:0; filter:brightness(0) invert(1); clip-path:inset(60% 0 22% 0); }
.logo-stage:hover .logo-window { filter:drop-shadow(0 0 34px #ff3d0a35); }
.logo-glow { position:absolute; left:50%; top:42%; width:30%; height:60%; transform:translate(-50%,-50%); background:#ff3d0a24; filter:blur(70px); border-radius:50%; }

.rifle-stage { position:relative; width:min(1120px,100vw); height:clamp(190px,24vh,225px); margin:0 0 10px; overflow:hidden; display:grid; place-items:center; opacity:.72; }
.rifle-stage img { width:100%; position:absolute; top:calc(50% + 24px); transform:translateY(-50%); filter:invert(1) grayscale(1) contrast(1.65) brightness(.9); opacity:.32; mix-blend-mode:screen; }
.announcement { width:auto; max-width:92vw; display:flex; flex-direction:column; align-items:center; text-align:center; position:relative; z-index:3; }
.neon-frame { --angle:0deg; position:relative; display:inline-block; width:fit-content; max-width:100%; padding:clamp(12px,1.5vw,18px) clamp(18px,2.5vw,30px); border:1px solid #ff3d0a7d; background:#05050559; backdrop-filter:blur(1.5px); box-shadow:inset 0 0 20px #ff3d0a0d,0 0 18px #ff3d0a17; }
.neon-frame:before { content:""; position:absolute; inset:-3px; padding:3px; background:conic-gradient(from var(--angle),transparent 0 68%,#ff3d0a 77%,#fff1dc 81%,#ff3d0a 85%,transparent 94%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; filter:drop-shadow(0 0 7px #ff3d0a) drop-shadow(0 0 15px #ff3d0a80); animation:neon-travel 4.5s linear infinite; pointer-events:none; }
@property --angle { syntax:"<angle>"; initial-value:0deg; inherits:false; }
@keyframes neon-travel { to{--angle:360deg} }
h1 { margin:0; text-transform:uppercase; font-weight:900; letter-spacing:-.035em; line-height:.88; }
h1 span,h1 strong { display:block; }
h1 span { color:#f0ede5; font-size:clamp(19px,2.4vw,30px); font-weight:800; }
h1 strong { color:var(--orange); font-size:clamp(29px,4vw,52px); }
.announcement p { margin:22px 0 0; color:#a19f98; font-size:clamp(8px,1vw,11px); font-weight:800; letter-spacing:.25em; text-transform:uppercase; }
.announcement p span { color:var(--orange); }

.notify-form { width:min(730px,100%); display:grid; grid-template-columns:1fr 1fr auto; align-items:end; gap:0; margin-top:clamp(28px,4vh,48px); border:1px solid #2a2a28; background:#090909cc; }
.field { position:relative; padding:12px 18px 11px; border-right:1px solid #2a2a28; }
.field label { display:block; color:#64645f; font-size:8px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; margin-bottom:4px; }
.field input { width:100%; border:0; outline:0; padding:3px 0; background:transparent; color:#f1eee7; font-size:14px; letter-spacing:.04em; }
.field input::placeholder { color:#484844; }
.field:focus-within { box-shadow:inset 0 -1px var(--orange); }
.field:focus-within label { color:var(--orange); }
.notify-form button { align-self:stretch; min-width:160px; border:0; padding:0 20px; background:var(--orange); color:#080808; display:flex; align-items:center; justify-content:space-between; gap:24px; cursor:pointer; font-size:9px; font-weight:900; letter-spacing:.22em; text-transform:uppercase; transition:background .2s,color .2s; }
.notify-form button b { font-size:18px; transition:transform .2s; }
.notify-form button:hover { background:#fff; }
.notify-form button:hover b { transform:translate(3px,-3px); }
.notify-form button:disabled { cursor:wait; opacity:.7; }
.website-field { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.privacy-note { margin:12px 0 0; color:#555550; font-size:8px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.privacy-note.success { color:#d8d5cc; }
.privacy-note.partial { color:#d89c74; }
.privacy-note.error { color:#ff6b42; }

.scope-mark { position:absolute; z-index:1; width:42px; height:42px; border:1px solid #ffffff12; border-radius:50%; }
.scope-mark:before,.scope-mark:after { content:""; position:absolute; background:#ffffff16; }
.scope-mark:before { width:56px; height:1px; left:-8px; top:20px; }.scope-mark:after { width:1px; height:56px; left:20px; top:-8px; }.scope-mark i { position:absolute; inset:14px; border:1px solid #ff3d0a45; border-radius:50%; }
.scope-one { left:7vw; top:24%; }.scope-two { right:8vw; bottom:19%; transform:scale(.65); }

@media(max-width:700px) {
  .topline,.bottomline { padding:18px 16px; gap:20px; }
  .top-actions { gap:16px; }.status { display:none; }
  .launch-panel { width:calc(100% - 32px); padding:28px 0 24px; }
  .logo-stage { width:min(430px,88vw); margin-bottom:22px; }
  .rifle-stage { width:115vw; height:165px; margin:0 0 8px; }.rifle-stage img { width:125%; top:calc(50% + 18px); }
  .announcement p { line-height:1.6; }
  .notify-form { grid-template-columns:1fr; border:0; gap:8px; background:transparent; margin-top:30px; }
  .field { border:1px solid #292927; background:#090909cc; padding:11px 14px; }
  .notify-form button { min-height:55px; padding:0 18px; }
  .scope-one { left:-20px; }.scope-two { right:-14px; }
}
@media(max-height:760px) and (min-width:701px) { .launch-panel{padding:16px 0}.logo-stage{width:340px;margin-bottom:16px}.rifle-stage{height:145px;margin:0 0 6px}.rifle-stage img{top:calc(50% + 17px)}.notify-form{margin-top:24px}.bottomline,.topline{padding-top:14px;padding-bottom:14px} }
@media(prefers-reduced-motion:reduce) { .grain,.status i,.neon-frame:before { animation:none; }.logo-window { transition:none; } }
