:root {
  --bg: #040406;
  --cyan: #5be9ff;
  --violet: #9b7bff;
  --magenta: #ff2e88;
  --x: 50%;
  --y: 50%;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
}

html, body {
  height: 100%;
  background: radial-gradient(ellipse at 50% 42%, #0c0f1c 0%, #06070b 55%, var(--bg) 100%);
  overflow: hidden;
  cursor: default;
}

body {
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

canvas#bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

/* ---------- layered depth-of-field field ---------- */
.depth,
.fog,
.bokeh {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}

/* far, softly-blurred colour fields — parallax as one group */
.depth {
  transform: translate(calc(var(--px, 0) * 18px), calc(var(--py, 0) * 18px));
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1);
}

.orb {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  opacity: 0.5;
}

.orb-1 {
  width: 48vmax; height: 48vmax;
  left: 8%; top: 6%;
  background: radial-gradient(circle, rgba(91, 233, 255, 0.5), transparent 62%);
  filter: blur(110px);
  animation: float-1 46s ease-in-out infinite alternate;
}

.orb-2 {
  width: 40vmax; height: 40vmax;
  right: 4%; top: 22%;
  background: radial-gradient(circle, rgba(255, 46, 136, 0.42), transparent 62%);
  filter: blur(120px);
  opacity: 0.42;
  animation: float-2 58s ease-in-out infinite alternate;
}

.orb-3 {
  width: 34vmax; height: 34vmax;
  left: 26%; bottom: 2%;
  background: radial-gradient(circle, rgba(155, 123, 255, 0.44), transparent 62%);
  filter: blur(100px);
  animation: float-3 52s ease-in-out infinite alternate;
}

.orb-4 {
  width: 26vmax; height: 26vmax;
  right: 24%; bottom: 12%;
  background: radial-gradient(circle, rgba(120, 180, 255, 0.4), transparent 62%);
  filter: blur(90px);
  opacity: 0.4;
  animation: float-4 40s ease-in-out infinite alternate;
}

@keyframes float-1 { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(6vw, 5vh) scale(1.12); } }
@keyframes float-2 { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(-7vw, 4vh) scale(1.15); } }
@keyframes float-3 { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(5vw, -6vh) scale(1.1); } }
@keyframes float-4 { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(-4vw, -4vh) scale(1.18); } }

/* mid-distance atmospheric haze that sits between the orbs and the particles */
.fog {
  transform: translate(calc(var(--px, 0) * 10px), calc(var(--py, 0) * 10px));
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
  opacity: 0.6;
  background:
    radial-gradient(60vmax 40vmax at 30% 20%, rgba(91, 233, 255, 0.06), transparent 60%),
    radial-gradient(55vmax 45vmax at 75% 75%, rgba(255, 46, 136, 0.05), transparent 60%),
    linear-gradient(to bottom, rgba(6, 8, 16, 0) 30%, rgba(4, 5, 11, 0.5) 100%);
  filter: blur(8px);
}

/* foreground out-of-focus bokeh — parallax hardest so it reads as closest */
.bokeh {
  z-index: 2;
  transform: translate(calc(var(--px, 0) * -42px), calc(var(--py, 0) * -42px));
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1);
  opacity: 0.5;
  background:
    radial-gradient(7vmax 7vmax at 14% 78%, rgba(91, 233, 255, 0.5), transparent 70%),
    radial-gradient(5vmax 5vmax at 82% 26%, rgba(255, 46, 136, 0.45), transparent 70%),
    radial-gradient(4vmax 4vmax at 62% 88%, rgba(155, 123, 255, 0.4), transparent 70%),
    radial-gradient(3vmax 3vmax at 34% 14%, rgba(120, 180, 255, 0.4), transparent 70%);
  filter: blur(26px);
  mix-blend-mode: screen;
  animation: bokeh-breathe 12s ease-in-out infinite;
}

@keyframes bokeh-breathe {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.62; }
}

.nebula {
  position: fixed;
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.4;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

.nebula-a {
  background: radial-gradient(circle, rgba(91, 233, 255, 0.4), transparent 65%);
  top: -12%;
  left: -18%;
  animation: drift-a 40s ease-in-out infinite alternate;
}

.nebula-b {
  background: radial-gradient(circle, rgba(255, 46, 136, 0.30), transparent 65%);
  bottom: -18%;
  right: -12%;
  animation: drift-b 52s ease-in-out infinite alternate;
}

@keyframes drift-a {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(9vw, 7vh) scale(1.18); }
}

@keyframes drift-b {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-11vw, -9vh) scale(1.12); }
}

.vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(4,4,6,0) 0%, rgba(4,4,6,0.32) 65%, rgba(2,2,3,0.86) 100%);
}

.spotlight {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.55;
  background: radial-gradient(
    560px circle at var(--x) var(--y),
    rgba(91, 233, 255, 0.10),
    rgba(155, 123, 255, 0.05) 42%,
    transparent 72%
  );
  transition: opacity 0.6s ease;
}

.grain {
  position: fixed;
  inset: -100px;
  z-index: 4;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* CRT scanlines — fine horizontal raster + a slow rolling sweep */
.scanlines {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.55;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0) 0px,
      rgba(0, 0, 0, 0) 2px,
      rgba(0, 0, 0, 0.35) 3px,
      rgba(0, 0, 0, 0) 4px
    );
}

.scanlines::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 22vh;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(91, 233, 255, 0.05) 45%,
    rgba(255, 46, 136, 0.05) 55%,
    transparent
  );
  animation: roll 7s linear infinite;
}

@keyframes roll {
  0%   { transform: translateY(-30vh); }
  100% { transform: translateY(130vh); }
}

/* subtle CRT brightness flicker over the whole frame */
.crt-flicker {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: rgba(120, 160, 255, 0.02);
  mix-blend-mode: overlay;
  animation: flicker 3.5s steps(1, end) infinite;
}

@keyframes flicker {
  0%, 100% { opacity: 0.35; }
  6%       { opacity: 0.7; }
  8%       { opacity: 0.2; }
  9%       { opacity: 0.6; }
  40%      { opacity: 0.4; }
  42%      { opacity: 0.85; }
  43%      { opacity: 0.3; }
  70%      { opacity: 0.5; }
  72%      { opacity: 0.2; }
}

.stage {
  position: relative;
  z-index: 3;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 900px;
}

.ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(91, 233, 255, 0.14);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease 0.4s;
}

body.loaded .ring { opacity: 1; }

.ring-a {
  width: min(56vw, 620px);
  height: min(56vw, 620px);
  border-style: dashed;
  animation: spin 90s linear infinite;
}

.ring-b {
  width: min(72vw, 780px);
  height: min(72vw, 780px);
  border-color: rgba(155, 123, 255, 0.09);
  animation: spin 130s linear infinite reverse;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.logo-wrap {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
}

.halo {
  position: absolute;
  inset: -55% -25%;
  z-index: -1;
  background: radial-gradient(
    closest-side,
    rgba(91, 233, 255, 0.22) 0%,
    rgba(120, 180, 255, 0.12) 35%,
    rgba(155, 123, 255, 0.06) 60%,
    rgba(155, 123, 255, 0) 78%
  );
  filter: blur(46px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 2s ease 0.5s;
}

body.loaded .halo {
  opacity: 1;
  animation: halo-breathe 5.5s ease-in-out infinite 1.6s;
}

@keyframes halo-breathe {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.12); opacity: 1; }
}

.logo {
  position: relative;
  display: flex;
  align-items: baseline;
  font-weight: 700;
  font-size: clamp(3.2rem, 13vw, 9rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: #eef6f8;
  opacity: 0;
  filter: blur(14px);
  transform: scale(0.92);
  clip-path: inset(-60% 100% -60% 0);
  transition:
    opacity 1.1s ease 0.15s,
    filter 1.1s ease 0.15s,
    transform 1.1s cubic-bezier(.16,.9,.2,1) 0.15s,
    clip-path 1.4s cubic-bezier(.16,.9,.2,1) 0.15s;
}

body.loaded .logo {
  opacity: 1;
  filter: blur(0px);
  transform: scale(1);
  clip-path: inset(-60% -20% -60% -20%);
}

.mark {
  position: relative;
  background: linear-gradient(115deg, #f5fbff 0%, var(--cyan) 38%, var(--violet) 72%, var(--magenta) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 10px rgba(91, 233, 255, 0.28));
  animation: breathe 5.5s ease-in-out infinite;
  animation-delay: 1.6s;
}

.tld {
  font-size: 0.24em;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--cyan);
  opacity: 0.75;
  margin-left: 0.12em;
  transform: translateY(-0.15em);
}

@keyframes breathe {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(91, 233, 255, 0.28)); }
  50%      { filter: drop-shadow(0 0 18px rgba(91, 233, 255, 0.42)); }
}

/* RGB channel-split ghosts, cloned from data-text */
.logo::before,
.logo::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  clip-path: inset(0 0 0 0);
}

.logo::before { color: var(--cyan); }
.logo::after  { color: var(--magenta); }

/* random glitch pulse, toggled via JS */
.logo.glitch .mark {
  animation: none;
  text-shadow:
    2px 0 rgba(91, 233, 255, 0.85),
    -2px 0 rgba(255, 46, 136, 0.85);
}

.logo.glitch {
  animation: glitch-shift 0.26s steps(2, end);
}

.logo.glitch::before {
  opacity: 0.9;
  animation: glitch-cyan 0.26s steps(2, end);
}

.logo.glitch::after {
  opacity: 0.9;
  animation: glitch-magenta 0.26s steps(2, end);
}

/* stronger variant — heavier slicing + longer, fired occasionally */
.logo.glitch-hard { animation: glitch-shift 0.42s steps(3, end); }
.logo.glitch-hard::before { animation: glitch-cyan 0.42s steps(3, end); }
.logo.glitch-hard::after  { animation: glitch-magenta 0.42s steps(3, end); }

@keyframes glitch-shift {
  0%   { transform: translate3d(0,0,0); }
  20%  { transform: translate3d(-3px,1px,0)  skewX(-6deg); }
  40%  { transform: translate3d(3px,-2px,0)  skewX(4deg); }
  60%  { transform: translate3d(-2px,0,0); }
  80%  { transform: translate3d(2px,1px,0)   skewX(-3deg); }
  100% { transform: translate3d(0,0,0); }
}

@keyframes glitch-cyan {
  0%   { transform: translate3d(0,0,0);   clip-path: inset(0 0 65% 0); }
  25%  { transform: translate3d(-5px,-2px,0); clip-path: inset(20% 0 30% 0); }
  50%  { transform: translate3d(-3px,2px,0);  clip-path: inset(55% 0 8% 0); }
  75%  { transform: translate3d(-6px,0,0);    clip-path: inset(10% 0 70% 0); }
  100% { transform: translate3d(0,0,0);   clip-path: inset(0 0 0 0); }
}

@keyframes glitch-magenta {
  0%   { transform: translate3d(0,0,0);   clip-path: inset(60% 0 5% 0); }
  25%  { transform: translate3d(5px,2px,0);   clip-path: inset(15% 0 55% 0); }
  50%  { transform: translate3d(4px,-2px,0);  clip-path: inset(40% 0 25% 0); }
  75%  { transform: translate3d(6px,0,0);     clip-path: inset(70% 0 5% 0); }
  100% { transform: translate3d(0,0,0);   clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  .logo, .ring, .mark, .halo, .nebula, .orb, .bokeh,
  .scanlines::after, .crt-flicker { animation: none !important; transition: none !important; }
  .logo { opacity: 1; filter: none; transform: none; clip-path: none; }
  .logo::before, .logo::after { display: none; }
  .ring, .halo { opacity: 1; }
  .crt-flicker { opacity: 0.4; }
}

@media (max-width: 480px) {
  .spotlight { display: none; }
}