/* ---------- Ghost Code Noir Splash ---------- */
:root{
  --onyx:#0b0b10; --ruby:#ff2b2b; --fog:#E9ECF1; --gold:#E6C27A;
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--fog);
  font-family:ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  background:#000 url('sextronica.world%20bkg.jpg') center bottom / cover no-repeat fixed;
  overflow-x:hidden;
}
/* film grain + vignette */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(1200px 600px at 50% 30%, rgba(126,31,42,.20), transparent 70%),
    radial-gradient(1000px 500px at 70% 90%, rgba(126,31,42,.15), transparent 75%),
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55) 60%, rgba(0,0,0,.85));
  mix-blend-mode:screen;
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="1.2" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.035"/></svg>');
  background-size:160px 160px; mix-blend-mode:overlay;
}
.lock{overflow:hidden}

/* HUD tag (corner badges) */
.hud{ position:fixed; inset:0; z-index:10; pointer-events:none }
.tag{
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
  border:1px solid rgba(230,194,122,.45); border-radius:12px; padding:.45rem .7rem .5rem;
  background:linear-gradient(180deg, rgba(230,194,122,.12), rgba(0,0,0,.40));
  text-shadow:0 2px 10px rgba(0,0,0,.65);
  pointer-events:auto;
}
.tag--tl{ position:fixed; top:28px; left:32px }
.tag--tr{ position:fixed; top:28px; right:32px }
.tag--bl{ position:fixed; bottom:28px; left:32px }
.tag--br{ position:fixed; bottom:28px; right:32px }

/* Stage */
.stage{position:relative; z-index:1; min-height:100svh; display:grid; place-items:center; padding:18svh 6vw 12svh; text-align:center}

/* ENTER button */
.enter{
  appearance:none; border:1px solid rgba(255,43,43,.8); color:#fff; background:rgba(0,0,0,.35);
  padding:1rem 2.6rem; border-radius:999px; font-weight:900; letter-spacing:.4em; text-indent:.4em; text-transform:uppercase;
  font-size:clamp(14px, 2.2vw, 18px);
  box-shadow:0 0 0 2px rgba(255,43,43,.18) inset, 0 6px 24px rgba(255,43,43,.25), 0 0 32px rgba(255,43,43,.15);
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  animation:pulse 1800ms ease-in-out infinite;
}
.enter:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(255,43,43,.35), 0 0 42px rgba(255,43,43,.22) }
@keyframes pulse{
  0%,100%{ box-shadow:0 6px 24px rgba(255,43,43,.25), 0 0 32px rgba(255,43,43,.15) }
  50%{ box-shadow:0 10px 36px rgba(255,43,43,.38), 0 0 56px rgba(255,43,43,.26) }
}
.whisper{ margin-top:16px; opacity:.75; letter-spacing:.35em; text-transform:uppercase; font-size:11px; color:#f5d8d8; text-shadow:0 2px 12px rgba(0,0,0,.85) }

/* Headline + beltline */
.hero{
  margin:18px 0 8px; font-weight:800; font-size:clamp(22px,3.6vw,48px); text-shadow:0 3px 14px rgba(0,0,0,.7);
}
.gold{ color:#E6C27A; text-shadow:0 0 22px rgba(230,194,122,.2), 0 2px 0 rgba(0,0,0,.65) }
.belt{
  .belt {
  margin-top: -4rem;
  opacity: 0.95;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: clamp(16px, 2.5vw, 24px);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}



/* Modal */
.modal{
  position:fixed; inset:0; background:rgba(3,3,6,.78); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  display:grid; place-items:center; padding:24px; transition:opacity .18s ease, visibility .18s ease; opacity:0; visibility:hidden; z-index:20;
}
.modal[aria-hidden="false"]{ opacity:1; visibility:visible; }
.sheet{
  width:min(480px, 92vw); background:linear-gradient(180deg, rgba(20,20,25,.92), rgba(9,9,12,.92));
  border:1px solid rgba(255,43,43,.28); border-radius:18px; padding:24px 22px 20px; position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 0 4px rgba(255,43,43,.08) inset;
}
.close{ position:absolute; top:6px; right:10px; width:34px; height:34px; border-radius:999px; border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.25); color:#fff; font-size:22px; line-height:0; cursor:pointer }
h2{margin:0 0 .35rem; font-size:20px; letter-spacing:.14em; text-transform:uppercase}
p{margin:.25rem 0 0}
.meta{opacity:.75; font-size:12px}
.form{display:flex; gap:10px; margin-top:14px}
.form input{ flex:1; min-width:0; background:#0f0f14; color:#fff; border:1px solid rgba(255,255,255,.2); border-radius:12px; padding:.85rem .9rem; outline:none }
.form input:focus{ border-color:rgba(255,43,43,.7); box-shadow:0 0 0 3px rgba(255,43,43,.18) }
.form .send{ border:1px solid rgba(255,43,43,.8); color:#fff; background:rgba(0,0,0,.35); border-radius:12px; padding:.85rem 1rem; font-weight:800; letter-spacing:.1em; cursor:pointer; box-shadow:0 8px 24px rgba(255,43,43,.25) }
.form .send:hover{ box-shadow:0 10px 28px rgba(255,43,43,.35) }

/* a11y + responsive */
.sr{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
@media (prefers-reduced-motion:reduce){ .enter{animation:none} .modal{transition:none} }
@media (max-width:520px){
  .form{flex-direction:column}
  .tag--tl,.tag--tr,.tag--bl,.tag--br{ transform:scale(.9) }
}


.corner-button {
  position: absolute;
  padding: 10px 20px;
  background-color: yellow;
  border-radius: 25px;
  font-weight: bold;
  font-family: 'Arial', sans-serif;
  font-size: 14px;
  z-index: 1000;
}
.top-left { top: 20px; left: 20px; }
.top-right { top: 20px; right: 20px; }
.bottom-left { bottom: 20px; left: 20px; }
.bottom-right { bottom: 20px; right: 20px; }

.splash-footer {
  position: absolute;
  bottom: 80px;
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #fff;
  font-family: 'Arial', sans-serif;
  z-index: 999;
}