@property --hue {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

:root {
  --ink: #05020a;
  --paper: #f7f3ff;
  --pink: #ff1cf7;
  --cyan: #00f7ff;
  --lime: #c8ff00;
  --orange: #ff5c00;
  --violet: #721cff;
  --hue: 0deg;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--ink);
  height: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  height: 100%;
  overflow: hidden;
  color: var(--paper);
  background:
    radial-gradient(circle at 12% 20%, color-mix(in srgb, var(--violet) 45%, transparent), transparent 27%),
    radial-gradient(circle at 88% 42%, color-mix(in srgb, var(--pink) 35%, transparent), transparent 24%),
    linear-gradient(115deg, #030107 0 46%, #0d001a 60%, #02060a 100%);
  font-family: "IBM Plex Mono", monospace;
  cursor: none;
  animation: hue-cycle 14s linear infinite;
}

main { height: calc(100dvh - 98px); }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .15;
  background-image:
    linear-gradient(rgba(0,247,255,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,28,247,.45) 1px, transparent 1px);
  background-size: 72px 72px;
  transform: perspective(500px) rotateX(55deg) scale(1.6) translateY(14%);
  transform-origin: bottom;
  animation: grid-drift 8s linear infinite;
}

.noise, .scanlines {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}

.noise {
  opacity: .075;
  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='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  animation: noise-shake .18s steps(2) infinite;
}

.scanlines {
  opacity: .13;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #000 3px 5px);
}

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: difference;
}

.cursor-dot { width: 8px; height: 8px; background: white; }
.cursor-ring { width: 42px; height: 42px; border: 1px solid white; transition: width .2s, height .2s; }

.particles span {
  position: fixed;
  z-index: 2;
  width: var(--size);
  height: var(--size);
  left: var(--x);
  bottom: -40px;
  border: 1px solid hsl(var(--color) 100% 60%);
  box-shadow: 0 0 12px hsl(var(--color) 100% 60%);
  animation: particle-up var(--duration) linear var(--delay) infinite;
  pointer-events: none;
}

.kinetic-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.morph {
  position: absolute;
  display: block;
  border-radius: 46% 54% 62% 38% / 38% 42% 58% 62%;
  mix-blend-mode: screen;
  filter: blur(35px);
  opacity: .28;
}

.morph-a { width: 42vmax; height: 32vmax; left: -16vmax; top: 4vh; background: var(--violet); animation: morph-a 11s ease-in-out infinite alternate; }
.morph-b { width: 36vmax; height: 40vmax; right: -12vmax; top: 9vh; background: var(--pink); animation: morph-b 13s ease-in-out -4s infinite alternate; }
.morph-c { width: 28vmax; height: 22vmax; left: 36vw; bottom: -14vmax; background: var(--cyan); animation: morph-c 9s ease-in-out -2s infinite alternate; }

.laser {
  position: absolute;
  left: -20vw;
  width: 140vw;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), white, var(--pink), transparent);
  box-shadow: 0 0 12px var(--cyan), 0 0 28px var(--pink);
  transform-origin: center;
}

.laser-a { top: 35%; animation: laser-a 7s ease-in-out infinite alternate; }
.laser-b { top: 72%; animation: laser-b 9s ease-in-out -3s infinite alternate; }

.radar {
  position: absolute;
  width: min(75vmin, 720px);
  aspect-ratio: 1;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(0,247,255,.18);
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 10%, rgba(0,247,255,.08) 10.2% 10.5%);
  transform: translate(-50%, -50%);
}

.radar::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 78%, rgba(0,247,255,.3) 96%, transparent 100%);
  animation: radar-spin 5s linear infinite;
}

.topbar {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  min-height: 54px;
  padding: 0 clamp(18px, 4vw, 70px);
  border-bottom: 1px solid rgba(255,255,255,.28);
  background: rgba(3,1,8,.35);
  backdrop-filter: blur(12px);
  font-size: 11px;
  letter-spacing: .22em;
}

.coordinates { text-align: center; color: var(--cyan); }
.clock { text-align: right; color: var(--pink); }
.live i { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 14px var(--lime); animation: blink .8s steps(2) infinite; }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: .5fr minmax(300px, 1.5fr) minmax(300px, .82fr) .5fr;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: clamp(20px, 4vh, 50px) clamp(18px, 4vw, 70px) clamp(42px, 7vh, 70px);
  isolation: isolate;
}

.title-wrap { z-index: 8; grid-column: 2; margin-right: -18vw; }

.eyebrow {
  display: inline-block;
  padding: 8px 12px;
  color: var(--ink);
  background: var(--lime);
  font-size: clamp(9px, .8vw, 12px);
  font-weight: 600;
  letter-spacing: .18em;
  transform: rotate(-2deg);
  box-shadow: 7px 7px 0 var(--pink);
}

h1 {
  position: relative;
  margin: 24px 0 14px;
  font-family: "Unbounded", sans-serif;
  font-size: clamp(48px, min(10.6vw, 15vh), 190px);
  font-weight: 900;
  letter-spacing: -.09em;
  line-height: .7;
  text-transform: uppercase;
  filter: drop-shadow(10px 8px 0 rgba(255,28,247,.55));
  animation: title-breathe 3s ease-in-out infinite;
}

h1 span { display: block; white-space: nowrap; }
h1 .outline { color: transparent; -webkit-text-stroke: clamp(1px, .16vw, 3px) var(--cyan); transform: translateX(7vw); text-shadow: 0 0 25px var(--cyan); }

.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: .8;
  white-space: nowrap;
  pointer-events: none;
}

.glitch::before { color: var(--cyan); clip-path: inset(15% 0 60% 0); transform: translate(-7px, -3px); animation: glitch-a 2.1s steps(1) infinite; }
.glitch::after { color: var(--pink); clip-path: inset(64% 0 11% 0); transform: translate(9px, 5px); animation: glitch-b 1.7s steps(1) infinite; }

.ticker-word {
  color: var(--cyan);
  font-size: clamp(9px, 1vw, 14px);
  letter-spacing: .35em;
  text-shadow: 0 0 12px var(--cyan);
  animation: letter-dance 2s ease-in-out infinite alternate;
}

.portrait-stage {
  position: relative;
  z-index: 5;
  grid-column: 3;
  width: min(38vw, 56vh, 560px);
  aspect-ratio: .82;
  transform-style: preserve-3d;
  transition: transform .12s ease-out;
}

.portrait-card {
  position: absolute;
  inset: 5%;
  overflow: hidden;
  clip-path: polygon(12% 0, 100% 0, 100% 86%, 87% 100%, 0 100%, 0 13%);
  border: 2px solid var(--cyan);
  background: #020508;
  box-shadow: 0 0 30px var(--cyan), 25px 25px 0 rgba(255,28,247,.3), -18px -12px 0 rgba(200,255,0,.22);
  animation: card-float 4s ease-in-out infinite;
}

.portrait-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.35) 48%, transparent 55%);
  transform: translateX(-150%);
  animation: shine 3.8s ease-in-out infinite;
}

.portrait-card img, .rgb-copy {
  position: absolute;
  inset: -3%;
  width: 106%;
  height: 106%;
  object-fit: cover;
  filter: saturate(1.45) contrast(1.15);
}

.rgb-copy { background: url("cyborg.jpg") center/cover; opacity: .25; mix-blend-mode: screen; }
.rgb-red { transform: translateX(-8px); filter: sepia(1) saturate(8) hue-rotate(285deg); animation: rgb-red 2.3s steps(2) infinite; }
.rgb-blue { transform: translateX(8px); filter: sepia(1) saturate(8) hue-rotate(125deg); animation: rgb-blue 1.9s steps(2) infinite; }
.image-scan { position: absolute; inset: -50% 0 auto; z-index: 5; height: 35%; background: linear-gradient(transparent, rgba(0,247,255,.35), transparent); animation: scan 2.5s linear infinite; }
.image-code, .image-status { position: absolute; z-index: 6; bottom: 12px; padding: 5px 8px; background: #05020acc; font-size: 9px; letter-spacing: .15em; }
.image-code { left: 12px; color: var(--cyan); }
.image-status { right: 12px; color: var(--lime); }
.portrait-glow { position: absolute; inset: 8%; border-radius: 50%; background: conic-gradient(from var(--hue), var(--pink), var(--cyan), var(--lime), var(--pink)); filter: blur(45px); opacity: .65; animation: spin 5s linear infinite; }

.target { position: absolute; z-index: 6; width: 35px; height: 35px; border: 1px solid var(--lime); animation: target 2s ease-in-out infinite; }
.target::before, .target::after { content: ""; position: absolute; background: var(--lime); }
.target::before { width: 160%; height: 1px; top: 50%; left: -30%; }
.target::after { height: 160%; width: 1px; left: 50%; top: -30%; }
.target-a { top: 14%; left: -4%; }
.target-b { right: -8%; bottom: 20%; animation-delay: -1s; }

.orbit { position: absolute; z-index: 7; inset: -3%; border: 1px dashed rgba(255,255,255,.38); border-radius: 50%; animation: spin 13s linear infinite; }
.orbit span { position: absolute; top: 6%; left: 20%; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--ink); background: var(--lime); font: 700 16px "Unbounded"; box-shadow: 0 0 25px var(--lime); }
.orbit-two { inset: 9% -12%; border-color: var(--pink); animation-direction: reverse; animation-duration: 8s; transform: rotateX(65deg); }
.orbit-two span { top: 72%; left: 83%; background: var(--pink); box-shadow: 0 0 25px var(--pink); }

.micro-copy { z-index: 9; display: flex; flex-direction: column; gap: 24px; font-family: "Syncopate", sans-serif; font-size: 9px; letter-spacing: .18em; writing-mode: vertical-rl; }
.micro-copy span:nth-child(odd) { color: var(--pink); }
.micro-copy span:nth-child(even) { color: var(--cyan); }
.micro-left { grid-column: 1; transform: rotate(180deg); }
.micro-right { grid-column: 4; justify-self: end; }

.stamp {
  position: absolute;
  right: 4vw;
  bottom: 4vh;
  z-index: 9;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 14px 20px;
  border: 2px solid var(--orange);
  border-radius: 50%;
  color: var(--orange);
  font: 700 clamp(9px, .8vw, 12px) "Unbounded";
  transform: rotate(-9deg);
  box-shadow: inset 0 0 18px rgba(255,92,0,.35), 0 0 18px rgba(255,92,0,.35);
  animation: stamp-wobble 2.4s ease-in-out infinite;
}

.stamp strong { font-size: 2em; }
.orb { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .5; mix-blend-mode: screen; }
.orb-one { width: 14vw; aspect-ratio: 1; left: -5vw; top: 12%; border: 3vw solid var(--violet); animation: orb-drift 7s ease-in-out infinite; }
.orb-two { width: 9vw; aspect-ratio: 1; right: 12%; bottom: 2%; background: var(--cyan); filter: blur(40px); animation: orb-drift 5s ease-in-out -2s infinite reverse; }

.floating-words { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.floating-words span { position: absolute; padding: 6px 9px; border: 1px solid currentColor; font: 700 clamp(7px, .65vw, 10px) "Syncopate"; letter-spacing: .1em; opacity: .65; animation: word-float 5s ease-in-out var(--delay) infinite alternate; }
.floating-words span:nth-child(1) { left: 3%; top: 15%; color: var(--cyan); --delay: -1s; }
.floating-words span:nth-child(2) { left: 18%; bottom: 11%; color: var(--pink); --delay: -3s; }
.floating-words span:nth-child(3) { right: 3%; top: 18%; color: var(--lime); --delay: -2s; }
.floating-words span:nth-child(4) { right: 17%; bottom: 13%; color: var(--cyan); --delay: -4s; }
.floating-words span:nth-child(5) { left: 47%; top: 8%; color: var(--pink); --delay: -2.5s; }
.floating-words span:nth-child(6) { left: 4%; top: 55%; color: var(--lime); --delay: -.5s; }
.floating-words span:nth-child(7) { right: 2%; top: 51%; color: var(--pink); --delay: -1.7s; }
.floating-words span:nth-child(8) { left: 54%; bottom: 8%; color: var(--lime); --delay: -3.2s; }

.equalizer { position: absolute; left: 3vw; bottom: 8vh; z-index: 3; display: flex; align-items: end; gap: 4px; height: 42px; transform: skewX(-12deg); }
.equalizer i { display: block; width: 3px; height: 20%; background: var(--cyan); box-shadow: 0 0 9px var(--cyan); animation: equalize .8s ease-in-out calc(var(--n, 1) * -.09s) infinite alternate; }
.equalizer i:nth-child(2n) { --n: 2; background: var(--pink); }
.equalizer i:nth-child(3n) { --n: 3; }
.equalizer i:nth-child(4n) { --n: 4; background: var(--lime); }
.equalizer i:nth-child(5n) { --n: 5; }

.screen-marquee { position: absolute; z-index: 12; left: -2%; bottom: 0; display: flex; width: max-content; color: var(--ink); background: var(--lime); box-shadow: 0 0 22px var(--lime); font: 900 clamp(11px, 1.4vw, 22px) "Unbounded"; line-height: 1.45; white-space: nowrap; transform: rotate(-.6deg) scale(1.02); }
.screen-marquee div { animation: marquee 16s linear infinite; }

footer { position: relative; z-index: 20; display: flex; justify-content: space-between; align-items: center; height: 44px; padding: 0 clamp(18px, 4vw, 70px); color: var(--cyan); background: black; border-top: 1px solid var(--cyan); font-size: 9px; letter-spacing: .18em; }
.footer-eye { color: var(--pink); font-size: 24px; text-shadow: 0 0 20px var(--pink); animation: blink .7s steps(2) infinite; }

@keyframes hue-cycle { to { --hue: 360deg; } }
@keyframes grid-drift { to { background-position: 0 72px, 72px 0; } }
@keyframes noise-shake { 0% { transform: translate(0); } 25% { transform: translate(-2%, 1%); } 50% { transform: translate(1%, -2%); } 75% { transform: translate(2%, 2%); } }
@keyframes blink { 50% { opacity: .15; } }
@keyframes title-breathe { 50% { transform: scale(1.018) skewX(-1deg); filter: drop-shadow(-9px 9px 0 rgba(0,247,255,.55)); } }
@keyframes glitch-a { 0%, 91%, 100% { transform: translate(-7px,-3px); } 92% { transform: translate(18px,3px); } 94% { transform: translate(-20px,-1px); } 97% { transform: translate(5px,6px); } }
@keyframes glitch-b { 0%, 88%, 100% { transform: translate(9px,5px); } 89% { transform: translate(-25px,-5px); } 93% { transform: translate(15px,2px); } 96% { transform: translate(-2px,-8px); } }
@keyframes letter-dance { to { letter-spacing: .5em; color: var(--pink); } }
@keyframes card-float { 50% { transform: translateY(-15px) rotate(1deg); box-shadow: 0 0 45px var(--pink), -25px 25px 0 rgba(0,247,255,.25), 18px -12px 0 rgba(200,255,0,.3); } }
@keyframes shine { 45%, 100% { transform: translateX(180%); } }
@keyframes scan { to { top: 120%; } }
@keyframes rgb-red { 50% { transform: translate(7px, -4px); clip-path: inset(10% 0 62% 0); } }
@keyframes rgb-blue { 40% { transform: translate(-6px, 5px); clip-path: inset(60% 0 13% 0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes target { 50% { transform: rotate(45deg) scale(.7); opacity: .4; } }
@keyframes stamp-wobble { 50% { transform: rotate(-4deg) scale(1.07); } }
@keyframes orb-drift { 50% { transform: translate(60px, 40px) scale(1.25); } }
@keyframes marquee { to { transform: translateX(-100%); } }
@keyframes big-pulse { 50% { color: var(--cyan); text-shadow: -8px 8px 0 var(--pink), 7px -7px 0 var(--lime); transform: skewY(2deg) scale(.98); } }
@keyframes chip { 50% { transform: translateY(-8px) rotate(2deg); box-shadow: 0 0 16px currentColor; background: color-mix(in srgb, currentColor 20%, transparent); } }
@keyframes particle-up { to { transform: translateY(-115vh) rotate(720deg) scale(.2); opacity: 0; } }
@keyframes morph-a { to { transform: translate(40vw, 14vh) rotate(80deg) scale(.7); border-radius: 70% 30% 25% 75% / 55% 70% 30% 45%; filter: blur(65px); } }
@keyframes morph-b { to { transform: translate(-34vw, -12vh) rotate(-110deg) scale(1.25); border-radius: 25% 75% 68% 32% / 70% 24% 76% 30%; filter: blur(55px); } }
@keyframes morph-c { to { transform: translate(-18vw, -52vh) rotate(150deg) scale(1.4); border-radius: 77% 23% 35% 65% / 31% 62% 38% 69%; } }
@keyframes laser-a { to { transform: translateY(26vh) rotate(17deg) scaleX(.72); opacity: .2; } }
@keyframes laser-b { to { transform: translateY(-42vh) rotate(-13deg) scaleX(.85); opacity: .35; } }
@keyframes radar-spin { to { transform: rotate(360deg); } }
@keyframes word-float { to { transform: translate(18px, -14px) rotate(4deg); opacity: .18; filter: blur(1px); } }
@keyframes equalize { to { height: 100%; filter: hue-rotate(160deg); } }

@media (max-width: 900px) {
  body { cursor: auto; }
  .cursor { display: none; }
  .hero { display: block; padding: 0 14px 34px; }
  .title-wrap { position: absolute; z-index: 8; top: 7%; left: 8%; width: 84%; margin: 0; }
  h1 { font-size: clamp(42px, min(14vw, 10vh), 110px); }
  h1 .outline { transform: translateX(3vw); }
  .portrait-stage { position: absolute; right: 7vw; bottom: 6%; width: min(65vw, 47vh, 500px); margin: 0; }
  .micro-left { position: absolute; left: 15px; top: 16%; }
  .micro-right { position: absolute; right: 15px; top: 56%; }
  .stamp { right: 6vw; bottom: 3vh; }
  .equalizer { bottom: 7vh; }
}

@media (max-width: 540px) {
  main { height: calc(100dvh - 80px); }
  .topbar { grid-template-columns: 1fr 1fr; min-height: 46px; height: 46px; padding: 0 14px; font-size: 8px; }
  .coordinates { display: none; }
  .hero { padding-inline: 14px; }
  .title-wrap { top: 8%; left: 8%; padding: 0; }
  h1 { letter-spacing: -.1em; line-height: .78; }
  .ticker-word { line-height: 1.8; }
  .portrait-stage { right: 3vw; bottom: 8%; width: min(79vw, 45vh); }
  .micro-copy, .stamp { display: none; }
  .floating-words span:nth-child(n+5) { display: none; }
  .equalizer { left: 14px; bottom: 7%; height: 30px; }
  footer { height: 34px; gap: 12px; padding-inline: 14px; font-size: 7px; }
  .footer-eye { font-size: 18px; }
}

@media (max-height: 620px) and (min-width: 541px) {
  main { height: calc(100dvh - 84px); }
  .topbar { min-height: 44px; height: 44px; }
  footer { height: 40px; }
  .eyebrow, .ticker-word { font-size: 8px; }
  .portrait-stage { width: min(35vw, 48vh); }
  .stamp { display: none; }
}