.signal-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  min-height: 100svh;
  overflow: hidden;
  background: #050708;
  color: #eee9df;
}

.signal-gate[hidden] { display: none; }
.signal-gate-art { position: absolute; inset: 0; background: url('/assets/cover-art.webp') center 37% / cover no-repeat; opacity: .56; transform: scale(1.025); }
.signal-gate-shade { position: absolute; inset: 0; background: radial-gradient(circle at 50% 37%, transparent 0 7%, #06080966 35%, #050708f3 78%), linear-gradient(0deg, #050708 0%, transparent 58%); }
.signal-gate-panel { position: relative; width: min(520px, calc(100% - 44px)); padding: 34px 30px; text-align: center; border: 1px solid #ad4b4145; background: #080b0bd9; box-shadow: 0 28px 90px #000c; backdrop-filter: blur(8px); }
.signal-gate-code { margin: 0 0 19px; color: #d16b61; font: 600 10px/1.5 var(--sans); letter-spacing: .22em; }
.signal-gate h2 { margin: 0 0 13px; font: 400 clamp(34px, 7vw, 54px)/1.08 var(--serif); letter-spacing: -.035em; }
.signal-gate-panel > p:not(.signal-gate-code) { max-width: 350px; margin: 0 auto 27px; color: #b8b8ad; font-size: 12px; }
.signal-gate .button { min-width: 225px; margin-inline: auto; }
.signal-gate-silent { display: block; margin: 18px auto 0; padding: 5px; color: #969c93; font-size: 11px; border-bottom: 1px solid #ffffff2b; }
.signal-gate-silent:hover { color: #fff; border-color: #fff; }
body.signal-gate-open { overflow: hidden; }

@media (max-width: 640px) {
  .signal-gate-art { background-position: center 29%; }
  .signal-gate-panel { padding: 29px 22px; }
}

@media (prefers-reduced-motion: no-preference) {
  .signal-gate:not([hidden]) .signal-gate-art { animation: signal-gate-breathe 9s ease-in-out infinite alternate; }
  @keyframes signal-gate-breathe { to { transform: scale(1.06); filter: saturate(1.12); } }
}