:root {
  --ink: #030307;
  --white: #f7f6fa;
  --pink: #ff2e9a;
  --pink-hot: #ff62b5;
  --line: rgba(255, 255, 255, 0.2);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
  font-family: "Arial Narrow", "Roboto Condensed", "Segoe UI", sans-serif;
  letter-spacing: .08em;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  box-shadow: inset 0 0 140px rgba(0,0,0,.9);
}

#data-field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: .34;
  pointer-events: none;
}

.noise {
  position: fixed;
  inset: -50%;
  z-index: 30;
  opacity: .035;
  pointer-events: none;
  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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.85'/%3E%3C/svg%3E");
  animation: noiseShift .18s steps(2) infinite;
}

.cursor-light {
  position: fixed;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,46,154,.12), transparent 67%);
  mix-blend-mode: screen;
  transition: opacity .3s ease;
}

.hud {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px;
  font-size: 10px;
  letter-spacing: .32em;
  pointer-events: none;
}

.hud__brand { display: flex; align-items: center; gap: 12px; }
.hud__mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,46,154,.8);
  color: var(--pink-hot);
  font-weight: 900;
  letter-spacing: -.08em;
  box-shadow: 0 0 22px rgba(255,46,154,.22), inset 0 0 18px rgba(255,46,154,.08);
  clip-path: polygon(0 0, 85% 0, 100% 15%, 100% 100%, 15% 100%, 0 85%);
}
.hud__name { font-weight: 800; text-shadow: 0 0 15px rgba(255,255,255,.35); }
.hud__status { color: rgba(255,255,255,.7); display: flex; align-items: center; gap: 10px; }
.hud__status i {
  display: block;
  width: 6px;
  height: 6px;
  background: var(--pink);
  box-shadow: 0 0 12px var(--pink);
  animation: blink 1.5s steps(2) infinite;
}

.split {
  position: relative;
  z-index: 2;
  width: 100vw;
  height: 100svh;
  min-height: 620px;
  display: flex;
  isolation: isolate;
}

.panel {
  position: relative;
  flex: 1 1 50%;
  overflow: hidden;
  transition: flex 1s var(--ease), filter .8s ease;
  isolation: isolate;
  cursor: crosshair;
}

.split:has(.panel:hover) .panel:not(:hover) { flex-basis: 43%; filter: saturate(.65) brightness(.62); }
.panel:hover { flex-basis: 57%; }

.panel__image {
  position: absolute;
  inset: -4%;
  background-position: center;
  background-size: cover;
  transform: scale(1.035);
  transition: transform 1.4s var(--ease), filter 1s ease;
  will-change: transform;
}
.panel:hover .panel__image { transform: scale(1.095); }

.panel--novel .panel__image {
  background-image: url("assets/graphic-novel.png");
  background-position: center 42%;
  filter: contrast(1.04) saturate(.75);
}

.panel--game .panel__image {
  background-image: url("assets/the-loop.jpeg");
  background-position: center 38%;
  filter: contrast(1.08) saturate(.95);
}

.panel__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(3,3,7,.2), transparent 22%, transparent 60%, rgba(3,3,7,.92) 100%),
    linear-gradient(90deg, rgba(3,3,7,.3), transparent 45%, rgba(3,3,7,.24));
}
.panel--novel .panel__veil {
  background:
    linear-gradient(to bottom, rgba(255,255,255,.05), transparent 28%, transparent 58%, rgba(3,3,7,.84) 100%),
    linear-gradient(90deg, rgba(255,255,255,.12), transparent 52%, rgba(3,3,7,.18));
}

.panel__grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: .23;
  background-image:
    linear-gradient(rgba(255,255,255,.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.11) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}

.panel__content {
  position: absolute;
  left: clamp(28px, 5vw, 84px);
  bottom: clamp(108px, 15vh, 175px);
  z-index: 5;
  text-transform: uppercase;
  text-shadow: 0 4px 28px rgba(0,0,0,.65);
  transition: transform .9s var(--ease);
}
.panel:hover .panel__content { transform: translateY(-9px); }
.panel__content--right { left: auto; right: clamp(28px, 5vw, 84px); text-align: right; }

.panel__index {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .36em;
  color: var(--pink-hot);
}
.panel__index::before { content: ""; display: inline-block; width: 42px; height: 1px; margin: 0 12px 3px 0; background: var(--pink); box-shadow: 0 0 8px var(--pink); }
.panel__content--right .panel__index::before { display: none; }
.panel__content--right .panel__index::after { content: ""; display: inline-block; width: 42px; height: 1px; margin: 0 0 3px 12px; background: var(--pink); box-shadow: 0 0 8px var(--pink); }

.panel h1, .panel h2 {
  margin: 0;
  font-size: clamp(36px, 5.6vw, 88px);
  line-height: .82;
  font-weight: 950;
  letter-spacing: -.065em;
  transform: scaleX(.82);
  transform-origin: left;
}
.panel__content--right h2 { transform-origin: right; }
.panel p {
  margin: 12px 0 0;
  font-size: clamp(15px, 1.45vw, 23px);
  font-weight: 500;
  letter-spacing: .58em;
}
.panel__signal {
  display: block;
  margin-top: 22px;
  font-size: 8px;
  letter-spacing: .42em;
  color: rgba(255,255,255,.58);
}

.panel__corner {
  position: absolute;
  z-index: 6;
  width: 72px;
  height: 72px;
  opacity: .55;
}
.panel__corner--tl { top: 82px; left: 24px; border-top: 1px solid var(--pink); border-left: 1px solid var(--pink); }
.panel__corner--tr { top: 82px; right: 24px; border-top: 1px solid var(--pink); border-right: 1px solid var(--pink); }
.panel__corner--bl { bottom: 74px; left: 24px; border-bottom: 1px solid rgba(255,255,255,.35); border-left: 1px solid rgba(255,255,255,.35); }
.panel__corner--br { bottom: 74px; right: 24px; border-bottom: 1px solid rgba(255,255,255,.35); border-right: 1px solid rgba(255,255,255,.35); }

.core {
  position: absolute;
  z-index: 12;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  pointer-events: none;
}
.core__line {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 0, rgba(255,255,255,.62) 14%, var(--pink) 49%, rgba(255,255,255,.62) 86%, transparent 100%);
  box-shadow: 0 0 18px rgba(255,46,154,.45);
}
.core__diamond {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  border: 1px solid var(--pink-hot);
  transform: translate(-50%, -50%) rotate(45deg);
  background: rgba(3,3,7,.72);
  box-shadow: 0 0 28px rgba(255,46,154,.72), inset 0 0 12px rgba(255,46,154,.3);
}
.core__pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 76px;
  height: 76px;
  border: 1px solid rgba(255,46,154,.35);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: corePulse 2.4s ease-out infinite;
}

.coming {
  position: absolute;
  z-index: 18;
  left: 50%;
  bottom: 38px;
  transform: translateX(-50%);
  min-width: min(640px, calc(100vw - 48px));
  text-align: center;
  pointer-events: none;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.75));
}
.coming::before, .coming::after {
  content: "";
  position: absolute;
  top: 58%;
  width: min(12vw, 150px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--pink));
}
.coming::before { right: calc(100% + 18px); }
.coming::after { left: calc(100% + 18px); transform: scaleX(-1); }
.coming__pre, .coming__year { display: block; font-size: 7px; letter-spacing: .45em; color: rgba(255,255,255,.6); }
.coming strong {
  position: relative;
  display: block;
  margin: 6px 0 4px;
  font-size: clamp(31px, 4vw, 62px);
  line-height: 1;
  font-weight: 950;
  letter-spacing: .18em;
  color: #fff;
  text-shadow: 3px 0 0 rgba(255,46,154,.72), -2px 0 0 rgba(255,255,255,.2), 0 0 28px rgba(255,46,154,.32);
  animation: microGlitch 5s steps(1) infinite;
}
.coming__year { color: var(--pink-hot); }

.footer {
  position: fixed;
  left: 28px;
  right: 28px;
  bottom: 16px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-size: 7px;
  letter-spacing: .3em;
  color: rgba(255,255,255,.48);
  pointer-events: none;
}
.footer__barcode {
  flex: 0 1 300px;
  height: 9px;
  opacity: .6;
  background: repeating-linear-gradient(90deg, var(--pink) 0 1px, transparent 1px 4px, rgba(255,255,255,.7) 4px 5px, transparent 5px 8px);
}

@keyframes blink { 50% { opacity: .25; } }
@keyframes corePulse { 0% { opacity: .75; transform: translate(-50%,-50%) scale(.35); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.55); } }
@keyframes noiseShift { 0% { transform: translate(0,0); } 25% { transform: translate(2%,-1%); } 50% { transform: translate(-1%,2%); } 75% { transform: translate(1%,1%); } }
@keyframes microGlitch {
  0%, 92%, 100% { transform: translate(0); clip-path: inset(0); }
  93% { transform: translate(-2px,1px); clip-path: inset(10% 0 64% 0); }
  94% { transform: translate(3px,-1px); clip-path: inset(55% 0 18% 0); }
  95% { transform: translate(0); clip-path: inset(0); }
}

@media (max-width: 820px) {
  body { overflow-y: auto; }
  .split { height: auto; min-height: 100svh; display: block; }
  .panel { height: 50svh; min-height: 390px; }
  .split:has(.panel:hover) .panel:not(:hover), .panel:hover { flex-basis: auto; filter: none; }
  .panel__content { left: 24px; right: auto; bottom: 72px; text-align: left; }
  .panel__content--right { left: 24px; right: auto; text-align: left; }
  .panel__content--right h2 { transform-origin: left; }
  .panel__content--right .panel__index::after { display: none; }
  .panel__content--right .panel__index::before { display: inline-block; }
  .panel h1, .panel h2 { font-size: clamp(44px, 13vw, 70px); }
  .core { top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: 1px; transform: none; }
  .core__line { inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), var(--pink), rgba(255,255,255,.7), transparent); }
  .core__diamond, .core__pulse { top: 50%; left: 50%; }
  .coming { position: fixed; bottom: 34px; min-width: calc(100vw - 36px); }
  .coming strong { font-size: clamp(26px, 8vw, 45px); }
  .coming::before, .coming::after { display: none; }
  .footer { display: none; }
  .hud { padding: 14px 16px; }
  .hud__status { display: none; }
  .panel__corner { width: 46px; height: 46px; }
  .panel__corner--tl, .panel__corner--tr { top: 62px; }
  .panel__corner--bl, .panel__corner--br { bottom: 28px; }
}

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