:root {
  --ink: #030405;
  --white: #f3f5f6;
  --muted: rgba(243, 245, 246, 0.55);
  --faint: rgba(243, 245, 246, 0.2);
  --rule: rgba(243, 245, 246, 0.16);
  --cyan: #51d7ee;
  --magenta: #d54eb7;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --display: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--ink); }

body {
  overflow: hidden;
  color: var(--white);
  font-family: var(--display);
  -webkit-font-smoothing: antialiased;
}

button { color: inherit; font: inherit; }

.home-shell {
  position: relative;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #020304;
}

.void, .void > div { position: absolute; }
.void { inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(circle at 58% 44%, #0a1014 0, #040608 26%, #020304 63%); }

.void__haze { width: 60vw; height: 60vw; border-radius: 50%; filter: blur(90px); opacity: 0.1; transition: opacity 800ms ease, transform 1100ms cubic-bezier(.16,1,.3,1); }
.void__haze--cyan { right: -22vw; top: -22vw; background: var(--cyan); }
.void__haze--magenta { left: -28vw; bottom: -30vw; background: var(--magenta); }
.is-dj .void__haze--magenta { opacity: 0.24; transform: translate(10vw, -6vw) scale(1.16); }
.is-recording .void__haze--cyan { opacity: 0.25; transform: translate(-11vw, 7vw) scale(1.14); }

.void__grid {
  inset: 0;
  opacity: 0.16;
  background-image: linear-gradient(rgba(81,215,238,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(81,215,238,.08) 1px, transparent 1px);
  background-size: 82px 82px;
  mask-image: radial-gradient(circle at 58% 45%, black 0, transparent 64%);
  transform: perspective(800px) rotateX(68deg) translateY(28vh) scale(1.6);
}

.void__scan {
  z-index: 8;
  top: -10%; left: 0; width: 100%; height: 1px;
  opacity: 0.26;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  box-shadow: 0 0 20px var(--cyan);
  animation: scan 9s linear infinite;
}

.signal {
  position: absolute;
  z-index: 3;
  left: 62%;
  top: 46%;
  width: clamp(350px, 42vw, 720px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  transition: left 1200ms cubic-bezier(.16,1,.3,1), transform 1200ms cubic-bezier(.16,1,.3,1), filter 900ms ease;
  filter: drop-shadow(0 0 45px rgba(81,215,238,.06));
}

.is-dj .signal { left: 68%; transform: translate(-50%, -50%) rotate(-4deg) scale(1.04); filter: drop-shadow(0 0 55px rgba(213,78,183,.15)); }
.is-recording .signal { left: 56%; transform: translate(-50%, -50%) rotate(4deg) scale(1.04); filter: drop-shadow(0 0 55px rgba(81,215,238,.16)); }

.signal__orbit, .signal__frame, .signal__core { position: absolute; inset: 50%; transform: translate(-50%, -50%); }
.signal__orbit { border: 1px solid rgba(81,215,238,.16); border-radius: 50%; }
.signal__orbit--one { width: 88%; height: 36%; transform: translate(-50%, -50%) rotate(-18deg); animation: orbit-one 22s linear infinite; }
.signal__orbit--two { width: 74%; height: 74%; border-color: rgba(213,78,183,.13); animation: orbit-two 28s linear infinite reverse; }
.signal__orbit--three { width: 46%; height: 92%; transform: translate(-50%, -50%) rotate(42deg); border-color: rgba(243,245,246,.09); animation: orbit-three 34s linear infinite; }

.signal__frame { width: 43%; height: 43%; border: 1px solid rgba(81,215,238,.22); transform: translate(-50%, -50%) rotate(45deg); animation: frame-breathe 6s ease-in-out infinite; }
.signal__frame--two { width: 29%; height: 29%; border-color: rgba(213,78,183,.27); animation-delay: -3s; animation-direction: reverse; }

.signal__core {
  width: 23%; height: 23%; display: grid; place-items: center; overflow: visible;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
}
.signal__neon-mark { position: absolute; z-index: 2; left: 50%; top: 50%; width: 420%; max-width: none; height: auto; opacity: .72; transform: translate(-50%, -50%); filter: brightness(.92) saturate(1.12) drop-shadow(0 0 3px rgba(151,243,255,.9)) drop-shadow(0 0 12px rgba(26,197,255,.72)) drop-shadow(0 0 30px rgba(0,128,255,.34)); animation: neon-flicker 5.8s linear infinite; }
.signal__neon-aura { position: absolute; inset: 12%; pointer-events: none; border-radius: 50%; opacity: .48; background: radial-gradient(circle, rgba(53,211,255,.18), rgba(0,143,255,.06) 40%, transparent 70%); filter: blur(10px); animation: neon-aura 5.8s linear infinite; }
.is-dj .signal__core, .is-recording .signal__core { border-color: transparent; box-shadow: none; }

.signal__point { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px currentColor; animation: point-pulse 3s ease-in-out infinite; }
.signal__point--one { left: 15%; top: 37%; }
.signal__point--two { right: 13%; top: 29%; color: var(--magenta); background: currentColor; animation-delay: -1.2s; }
.signal__point--three { right: 29%; bottom: 12%; animation-delay: -2.1s; }

.void__vignette { inset: 0; z-index: 6; pointer-events: none; background: radial-gradient(circle at 58% 44%, transparent 10%, rgba(2,3,4,.1) 42%, rgba(2,3,4,.92) 100%), linear-gradient(90deg, rgba(2,3,4,.68), transparent 48%); }
.void__noise { inset: 0; z-index: 7; pointer-events: none; opacity: .035; 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='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E"); }

.home-header {
  position: absolute; z-index: 20; inset: 0 0 auto;
  height: 90px; padding: 0 clamp(24px, 5vw, 72px);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  border-bottom: 1px solid rgba(243,245,246,.1);
}
.home-logo { width: clamp(132px, 14vw, 190px); }
.home-header__status { display: flex; align-items: center; gap: 11px; color: rgba(243,245,246,.38); font: 600 8px/1 var(--mono); letter-spacing: .18em; }
.status-light { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: status 2s ease-in-out infinite; }
.menu-trigger { justify-self: end; width: 42px; height: 42px; padding: 12px 8px; display: grid; align-content: center; gap: 7px; border: 0; background: transparent; cursor: pointer; }
.menu-trigger span { width: 100%; height: 1px; background: var(--white); transition: transform 250ms ease; }
.menu-trigger span:last-child { width: 65%; justify-self: end; }
.menu-trigger:hover span:last-child { width: 100%; }

.entry {
  position: absolute; z-index: 10; left: clamp(24px, 7vw, 110px); top: 50%;
  width: min(620px, 45vw); transform: translateY(-44%);
}
.entry__eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; color: rgba(243,245,246,.46); font: 700 8px/1 var(--mono); letter-spacing: .2em; }
.entry__eyebrow span { width: 32px; height: 1px; background: var(--cyan); box-shadow: 0 0 10px rgba(81,215,238,.5); }
.entry h1 { margin: 0; font-size: clamp(64px, 7.3vw, 126px); font-weight: 650; letter-spacing: -.07em; line-height: .82; text-transform: uppercase; }
.entry__instruction { margin: 28px 0 34px; color: rgba(243,245,246,.7); font-size: clamp(16px, 1.25vw, 21px); font-weight: 300; letter-spacing: -.015em; }

.destinations { width: min(580px, 100%); display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.destination-stack { min-width: 0; display: grid; align-self: start; }
.destination-stack > .destination { width: 100%; }
.destination { position: relative; min-height: 104px; padding: 20px 22px; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; border: 0; background: rgba(5,7,9,.28); color: inherit; text-align: left; text-decoration: none; cursor: pointer; overflow: hidden; transition: background 350ms ease, color 350ms ease; }
.destination--recording { border-left: 1px solid var(--rule); }
.destination::before { position: absolute; inset: auto 0 0; height: 2px; content: ""; transform: scaleX(0); transform-origin: left; transition: transform 500ms cubic-bezier(.16,1,.3,1); }
.destination--dj::before { background: var(--magenta); box-shadow: 0 0 18px var(--magenta); }
.destination--recording::before { background: var(--cyan); box-shadow: 0 0 18px var(--cyan); }
.destination:hover, .destination:focus-visible, .destination[aria-pressed="true"] { outline: none; background: rgba(243,245,246,.055); }
.destination:hover::before, .destination:focus-visible::before, .destination[aria-pressed="true"]::before { transform: scaleX(1); }
.destination__number { color: rgba(243,245,246,.32); font: 700 8px/1 var(--mono); }
.destination__body { display: grid; gap: 7px; }
.destination__body small { color: rgba(243,245,246,.32); font: 600 7px/1 var(--mono); letter-spacing: .18em; }
.destination__body strong { font-size: 18px; font-weight: 600; letter-spacing: .045em; }
.destination__body em { margin-top: -2px; color: rgba(243,245,246,.42); font: 600 7px/1 var(--mono); font-style: normal; letter-spacing: .16em; text-transform: uppercase; }
.destination__arrow { color: rgba(243,245,246,.55); font-size: 17px; transition: transform 300ms ease, color 300ms ease; }
.destination:hover .destination__arrow, .destination:focus-visible .destination__arrow { transform: translate(3px, -3px); color: var(--white); }

.destinations.is-menu-open .destination--dj .destination__arrow { transform: rotate(180deg); color: var(--white); }
.deck-menu { display: grid; grid-template-columns: 1fr; max-height: 0; min-height: 0; overflow: hidden; opacity: 0; pointer-events: none; border-top: 0 solid var(--rule); background: rgba(3,5,7,.96); transform: translateY(-6px); transition: max-height 420ms cubic-bezier(.16,1,.3,1), opacity 250ms ease, transform 420ms cubic-bezier(.16,1,.3,1), border-width 250ms ease; }
.destinations.is-menu-open .deck-menu { max-height: 320px; opacity: 1; pointer-events: auto; border-top-width: 1px; transform: translateY(0); }
.deck-menu__intro { min-height: 76px; padding: 16px 20px; display: grid; align-content: center; gap: 9px; border-bottom: 1px solid var(--rule); background: linear-gradient(90deg, rgba(213,78,183,.08), transparent); }
.deck-menu__intro small { color: rgba(213,78,183,.82); font: 700 8px/1 var(--mono); letter-spacing: .14em; }
.deck-menu__intro strong { max-width: 360px; font-size: 12px; line-height: 1.35; letter-spacing: .045em; }
.deck-menu__link { position: relative; min-height: 78px; padding: 16px 46px 16px 20px; display: grid; align-content: center; gap: 8px; color: var(--white); text-decoration: none; transition: background 250ms ease; }
.deck-menu__link + .deck-menu__link { border-top: 1px solid var(--rule); }
.deck-menu__link::after { position: absolute; inset: auto 0 0; height: 2px; content: ""; background: var(--magenta); box-shadow: 0 0 18px rgba(213,78,183,.75); transform: scaleX(0); transform-origin: left; transition: transform 350ms cubic-bezier(.16,1,.3,1); }
.deck-menu__link:hover, .deck-menu__link:focus-visible { outline: none; background: rgba(243,245,246,.055); }
.deck-menu__link:hover::after, .deck-menu__link:focus-visible::after { transform: scaleX(1); }
.deck-menu__link small { color: rgba(243,245,246,.34); font: 600 7px/1 var(--mono); letter-spacing: .13em; }
.deck-menu__link strong { font-size: 15px; line-height: 1.18; letter-spacing: .035em; }
.deck-menu__link span { position: absolute; right: 18px; top: 50%; color: rgba(243,245,246,.5); transform: translateY(-50%); }

.entry__readout { min-height: 12px; margin: 16px 0 0; color: rgba(243,245,246,.3); font: 600 7px/1.3 var(--mono); letter-spacing: .17em; }
.is-dj .entry__readout { color: rgba(213,78,183,.7); }
.is-recording .entry__readout { color: rgba(81,215,238,.7); }

.coordinates { position: absolute; z-index: 10; right: 30px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 14px; writing-mode: vertical-rl; color: rgba(243,245,246,.22); font: 600 7px/1 var(--mono); letter-spacing: .17em; }
.coordinates i { width: 1px; height: 42px; background: linear-gradient(var(--cyan), var(--magenta)); opacity: .5; }

.home-footer { position: absolute; z-index: 10; inset: auto 0 0; height: 54px; padding: 0 clamp(24px, 5vw, 72px); display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(243,245,246,.08); color: rgba(243,245,246,.25); font: 600 7px/1 var(--mono); letter-spacing: .16em; }

@keyframes scan { from { transform: translateY(0); } to { transform: translateY(120vh); } }
@keyframes orbit-one { to { transform: translate(-50%, -50%) rotate(342deg); } }
@keyframes orbit-two { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes orbit-three { to { transform: translate(-50%, -50%) rotate(402deg); } }
@keyframes frame-breathe { 0%,100% { opacity: .32; transform: translate(-50%, -50%) rotate(45deg) scale(.93); } 50% { opacity: .8; transform: translate(-50%, -50%) rotate(45deg) scale(1.04); } }
@keyframes core-pulse { 0%,100% { opacity: .2; transform: scale(.94); } 50% { opacity: .45; transform: scale(1.03); } }
@keyframes neon-flicker { 0%, 7%, 9%, 19%, 22%, 63%, 65%, 100% { opacity: .66; transform: translate(-50%, -50%) scale(1); } 8%, 20%, 64% { opacity: .16; transform: translate(-50%, -50%) scale(.995); } 8.5%, 21%, 64.5% { opacity: .84; transform: translate(-50%, -50%) scale(1.01); } 37% { opacity: .52; } 38% { opacity: .75; } }
@keyframes neon-aura { 0%, 7%, 9%, 19%, 22%, 63%, 65%, 100% { opacity: .48; transform: scale(1); } 8%, 20%, 64% { opacity: .08; transform: scale(.86); } 8.5%, 21%, 64.5% { opacity: .72; transform: scale(1.08); } }
@keyframes point-pulse { 0%,100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes status { 0%,100% { opacity: .4; } 50% { opacity: 1; } }

@media (max-width: 820px) {
  .home-header { height: 72px; grid-template-columns: 1fr auto; }
  .home-header__status { display: none; }
  .home-logo { width: 132px; }
  .signal { left: 72%; top: 27%; width: 82vw; opacity: .78; }
  .is-dj .signal, .is-recording .signal { left: 58%; }
  .void__vignette { background: linear-gradient(180deg, rgba(2,3,4,.28), rgba(2,3,4,.05) 35%, rgba(2,3,4,.92) 73%), radial-gradient(circle at 62% 28%, transparent, rgba(2,3,4,.82) 72%); }
  .entry { left: 24px; right: 24px; top: auto; bottom: 79px; width: auto; transform: none; }
  .entry__eyebrow { margin-bottom: 18px; }
  .entry h1 { font-size: clamp(56px, 17vw, 82px); line-height: .86; }
  .entry__instruction { margin: 18px 0 22px; font-size: 16px; }
  .destinations { grid-template-columns: 1fr; }
  .destination { min-height: 80px; }
  .destination--recording { border-left: 0; border-top: 1px solid var(--rule); }
  .destinations.is-menu-open .deck-menu { max-height: 286px; }
  .deck-menu__intro { min-height: 70px; padding: 14px 15px; }
  .deck-menu__intro strong { font-size: 11px; }
  .deck-menu__link { min-height: 72px; padding: 13px 38px 13px 15px; }
  .deck-menu__link small { font-size: 6px; letter-spacing: .1em; }
  .deck-menu__link strong { font-size: 14px; }
  .deck-menu__link span { right: 12px; }
  .coordinates { display: none; }
  .home-footer { height: 44px; }
  .home-footer span:nth-child(2) { display: none; }
}

@media (max-height: 720px) and (min-width: 821px) {
  .entry { transform: translateY(-40%); }
  .entry h1 { font-size: clamp(58px, 6.4vw, 96px); }
  .entry__eyebrow { margin-bottom: 16px; }
  .entry__instruction { margin: 18px 0 22px; }
  .destination { min-height: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}