@view-transition { navigation: auto; }

:root {
  color-scheme: dark;
  --bg: #0a1320;
  --ink: #e8f3ff;
  --dim: #7f93a8;
  --blue: #3ca0ff;
  --violet: #a03cff;
  --edge: rgba(150, 200, 255, .16);
  --seam: 50%;
  --S: clamp(300px, min(74vh, 43vw), 760px);
  --pad: clamp(16px, 3vw, 48px);
  --head: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --mono: "JetBrains Mono", Consolas, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  font-family: var(--mono);
  color: var(--ink);
  background: var(--bg);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); overscroll-behavior: none; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
::selection { background: var(--blue); color: #000; }
.skip { position: fixed; z-index: 50; top: 8px; left: 8px; padding: 10px 14px; background: var(--blue); color: #000; transform: translateY(-160%); }
.skip:focus { transform: none; }

/* grunge layers */
body::before, body::after { position: fixed; inset: 0; z-index: 30; content: ""; pointer-events: none; }
body::before { opacity: .16; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
body::after { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .6) 100%); }

/* top bar */
.bar { position: fixed; z-index: 20; top: 0; left: 0; right: 0; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--pad); font-size: 10px; letter-spacing: .16em; color: var(--dim); transition: opacity .4s ease; }
.mark { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font: 800 15px var(--head); letter-spacing: .18em; }
.mark b { display: grid; place-items: center; width: 28px; height: 28px; background: var(--blue); color: #000; font: 700 13px var(--mono); letter-spacing: -.08em; box-shadow: 3px 3px 0 #000, 3px 3px 0 1px rgba(255, 255, 255, .2); }
.bar__clock { font-variant-numeric: tabular-nums; }

/* stage: two full-size layers revealed by a moving seam (content never reflows) */
.split { position: fixed; inset: 0; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; isolation: isolate; }
.split.is-dragging { cursor: grabbing; }
.panel { position: absolute; inset: 0; display: block; overflow: hidden; outline: none; will-change: clip-path; }
.panel--stream { clip-path: inset(0 calc(100% - var(--seam)) 0 0); background:
  radial-gradient(ellipse 60% 70% at 50% 50%, #11324f 0%, #0a1826 45%, transparent 78%),
  linear-gradient(180deg, #0c1726, #0a1320); }
.panel--works { clip-path: inset(0 0 0 var(--seam)); background:
  radial-gradient(ellipse 60% 70% at 50% 50%, #14212d 0%, #0b1522 48%, transparent 80%),
  linear-gradient(180deg, #0b1522, #0a1320); }
.panel--works::before { position: absolute; inset: 0; content: ""; opacity: .5;
  background-image: linear-gradient(#7fb4e610 1px, transparent 1px), linear-gradient(90deg, #7fb4e610 1px, transparent 1px);
  background-size: 48px 48px; mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000, transparent 75%); }
.panel--stream::before { position: absolute; inset: 0; content: ""; opacity: .55;
  background: repeating-linear-gradient(0deg, transparent 0 46px, #3ca0ff0d 46px 47px, transparent 47px 140px);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000, transparent 75%); }
.panel:focus-visible::after { position: absolute; inset: 10px; border: 2px dashed var(--blue); content: ""; z-index: 9; }

/* one whole skull per layer: the seam slices it, so it is always joined */
.skull { position: absolute; z-index: 2; top: 50%; left: 50%; width: var(--S); height: var(--S); max-width: none; object-fit: contain; transform: translate(-50%, -52%); filter: drop-shadow(0 0 40px #3ca0ff40); pointer-events: none; transition: filter .6s ease, opacity .6s ease; animation: fade 1.2s ease both .35s; }
@media (hover: hover) {
  .split:has(.panel--stream:hover) .panel--works .skull, .split:has(.panel--works:hover) .panel--stream .skull { opacity: .55; filter: saturate(.4) brightness(.7); }
  .split:has(.panel--stream:hover) .panel--stream .skull, .split:has(.panel--works:hover) .panel--works .skull { filter: drop-shadow(0 0 28px #3ca0ff70) brightness(1.08); }
}

/* seam + grip */
.seam { position: absolute; z-index: 6; top: 0; bottom: 0; left: var(--seam); width: 2px; margin-left: -1px; background: linear-gradient(transparent, var(--blue) 18%, #bfe0ff 50%, var(--blue) 82%, transparent); box-shadow: 0 0 18px #3ca0ffaa, 0 0 2px #fff; transform-origin: center; animation: seam 1s var(--ease) both; pointer-events: none; }
.grip { position: absolute; z-index: 7; bottom: 40px; left: var(--seam); display: inline-flex; align-items: center; gap: 12px; padding: 8px 14px 7px; transform: translateX(-50%); border: 1px solid var(--edge); border-radius: 999px; background: linear-gradient(180deg, #1a2d43cc, #0a1320cc); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 #ffffff26, 0 4px 0 #000a; font-size: 9.5px; letter-spacing: .22em; color: #b4c7da; cursor: ew-resize; touch-action: none; animation: fade 1s ease both 1.2s; }
.grip:focus-visible { outline: 2px dashed var(--blue); outline-offset: 5px; }
.grip i { color: var(--blue); font-style: normal; font-size: 16px; line-height: 1; animation: nudge 2.4s ease-in-out infinite; }
.grip i:last-child { animation-direction: reverse; }
.grip b { font-weight: 500; }
.grip__touch { display: none; }
@media (hover: none) { .grip__fine { display: none; } .grip__touch { display: inline; } }

/* index chip (neobrutal) */
.chip { position: absolute; z-index: 5; top: 92px; display: grid; place-items: center; width: 54px; height: 54px; background: var(--ink); color: #000; font: 800 28px var(--head); letter-spacing: .04em; box-shadow: 5px 5px 0 var(--blue); }
.panel--stream .chip { left: var(--pad); }
.panel--works .chip { right: var(--pad); }
.chip, .glass, .panel__copy { transition: opacity .35s ease; }

/* glass instruments: appear on hover, never move */
.glass { position: absolute; z-index: 5; display: block; width: min(300px, 26vw); padding: 12px 14px 10px; border: 1px solid var(--edge); background: linear-gradient(160deg, rgba(120, 190, 255, .12), rgba(60, 160, 255, .03) 60%); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(0, 0, 0, .4), 6px 6px 0 rgba(60, 160, 255, .22); font-size: 9.5px; letter-spacing: .14em; color: #b4c7da; opacity: 0; }
.glass--signal { top: 168px; left: var(--pad); }
.glass--bench { top: 168px; right: var(--pad); }
@media (hover: hover) { .panel:hover .glass, .panel:focus-visible .glass { opacity: 1; } }
@media (hover: none) { .glass { opacity: 1; } }
.glass__head, .glass__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--dim); }
.glass__head { padding-bottom: 9px; border-bottom: 1px dashed #ffffff22; }
.glass__foot { padding-top: 9px; border-top: 1px dashed #ffffff22; }
.rec { display: inline-flex; align-items: center; gap: 6px; color: var(--blue); }
.rec i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 8px var(--blue); animation: blink 1.6s steps(2) infinite; }
.wave { display: flex; align-items: center; gap: 2px; height: 58px; }
.wave i { flex: 1; height: 100%; background: linear-gradient(var(--blue), #8fcaff); transform: scaleY(var(--h)); opacity: .85; animation: wob 1.9s ease-in-out infinite; animation-delay: var(--d); }
.slot { display: flex; align-items: center; gap: 10px; margin-top: 7px; padding: 8px 9px; background: linear-gradient(180deg, #0a1018, #121c28); border: 1px solid #000; box-shadow: inset 0 2px 5px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .08); }
.slot:first-of-type { margin-top: 9px; }
.slot__led { flex: none; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #cfe8ff, var(--blue) 55%, #0b3a6a); box-shadow: 0 0 8px #3ca0ffaa; }
.slot__led--x { background: radial-gradient(circle at 35% 30%, #e6c9ff, var(--violet) 55%, #3b0b6a); box-shadow: 0 0 8px #a03cffaa; }
.slot u { flex: 1; color: #1f2c3a; text-decoration: none; overflow: hidden; white-space: nowrap; background: #0a0f15; padding: 0 4px; }
.slot em { font-style: normal; color: var(--dim); }

/* copy */
.panel__copy { position: absolute; z-index: 5; bottom: 82px; display: grid; gap: 14px; }
.panel--stream .panel__copy { left: var(--pad); }
.panel--works .panel__copy { right: var(--pad); justify-items: end; text-align: right; }
.kicker { color: var(--blue); font-size: 10px; letter-spacing: .3em; }
.title { font: 800 clamp(56px, min(10.5vw, 15vh), 168px)/.82 var(--head); text-transform: uppercase; letter-spacing: -.005em; text-shadow: 3px 3px 0 #000; }
.panel--works .title { color: transparent; -webkit-text-stroke: 2px var(--ink); text-shadow: none; transition: color .3s ease; }
.panel--works:hover .title, .panel--works:focus-visible .title { color: var(--ink); }
.go { margin-top: 6px; }
.go__btn { display: inline-flex; align-items: center; gap: 14px; padding: 13px 22px 12px; border: 2px solid #000; background: linear-gradient(180deg, #62b4ff, #2b84df 58%, #1f6fc2); color: #021426; font: 700 12px var(--mono); letter-spacing: .22em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -3px 0 rgba(0, 0, 0, .28), 5px 5px 0 #000, 5px 5px 0 1px #ffffff26; transition: transform .15s ease, box-shadow .15s ease; }
.go__btn i { font-style: normal; font-size: 16px; transition: transform .25s var(--ease); }
.panel:hover .go__btn i { transform: translateX(5px); }
.panel:active .go__btn { transform: translate(3px, 3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -3px 0 rgba(0, 0, 0, .28), 2px 2px 0 #000; }

/* leaving: chrome clears while the chosen side opens */
.split.is-leaving .chip, .split.is-leaving .glass, .split.is-leaving .panel__copy, .split.is-leaving .grip { opacity: 0; transition: opacity .25s ease; }
.split.is-leaving .seam { opacity: 0; transition: opacity .3s ease; }
body:has(.is-leaving) .bar { opacity: 0; }
.split.is-out::after { position: absolute; inset: 0; z-index: 40; background: var(--bg); content: ""; animation: fade .22s ease both; }

/* motion */
@keyframes fade { from { opacity: 0; } }
@keyframes seam { from { transform: scaleY(0); } }
@keyframes seamx { from { transform: scaleX(0); } }
@keyframes blink { 50% { opacity: .25; } }
@keyframes wob { 50% { transform: scaleY(calc(var(--h) * .45)); } }
@keyframes nudge { 50% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* narrow screens: the split runs top / bottom, swipe up or down */
@media (max-width: 1000px) { .glass { display: none; } }
@media (max-width: 760px) {
  :root { --S: min(64vw, 38vh); }
  .panel--stream { clip-path: inset(0 0 calc(100% - var(--seam)) 0); }
  .panel--works { clip-path: inset(var(--seam) 0 0 0); }
  .seam { top: var(--seam); bottom: auto; left: 0; right: 0; width: auto; height: 2px; margin: -1px 0 0; background: linear-gradient(90deg, transparent, var(--blue) 18%, #bfe0ff 50%, var(--blue) 82%, transparent); animation-name: seamx; }
  .grip { top: var(--seam); bottom: auto; left: auto; right: 14px; transform: translateY(-50%); padding: 7px 11px 6px; cursor: ns-resize; }
  .grip i { transform: rotate(90deg); animation: none; }
  .chip { top: 74px; width: 40px; height: 40px; font-size: 22px; }
  .panel--works .chip { top: calc(50% + 28px); right: auto; left: var(--pad); }
  .panel__copy { gap: 10px; }
  .panel--stream .panel__copy { bottom: calc(50% + 28px); left: var(--pad); }
  .panel--works .panel__copy { bottom: 28px; right: auto; left: var(--pad); justify-items: start; text-align: left; }
  .title { font-size: clamp(44px, 12vw, 80px); }
  .go__btn { padding: 10px 16px; font-size: 11px; }
}
@media (max-height: 640px) and (min-width: 761px) { .chip { top: 76px; } .glass { display: none; } }

/* phones: calmer header, bigger tap targets */
@media (max-width: 760px) {
  .bar { height: 60px; }
  .bar__clock { display: none; }
  .bar .onair { min-height: 38px; }
  .grip { min-height: 40px; }
  .go__btn { min-height: 44px; }
  .panel--stream .chip, .chip { top: 72px; }
}

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the seam is dragged by us, never by the browser: no link/image ghost, no text selection, no long-press callout */
.split, .split * { -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }