/* Base */
:root {
  --fg: #e6f8ff;
  --accent: #5bf7ff;
  --accent2: #ff5bf7;
  --bg: #000;
  --hue: 0deg;
  --bg1-x: 0px;
  --bg1-y: 0px;
  --bg2-x: 0px;
  --bg2-y: 0px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Orbitron', 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow: hidden;
}

#app {
  position: relative;
  z-index: 10;
  height: 100dvh;
  display: grid;
  place-content: center;
  gap: 1rem;
  text-align: center;
  padding: 2rem;
}

/* Background layers */
.bg {
  position: fixed;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  will-change: transform, filter, opacity;
  transform: translate3d(0,0,0);
  transition: transform .2s cubic-bezier(.2,.8,.2,1), filter .2s linear, opacity .4s ease;
}

.bg1 {
  background-image: url('assets/backgroundtemp.jpg');
  mix-blend-mode: lighten;
  opacity: .66;
  animation: drift1 22s ease-in-out infinite alternate;
  transform: translate(var(--bg1-x), var(--bg1-y)) scale(1.04);
  filter: hue-rotate(calc(var(--hue) * .4)) saturate(1.2) brightness(1.05);
}

.bg2 {
  background-image: url('assets/backgroundtemp2.jpg');
  mix-blend-mode: screen;
  opacity: .55;
  animation: drift2 26s ease-in-out infinite alternate;
  transform: translate(var(--bg2-x), var(--bg2-y)) scale(1.06);
  filter: hue-rotate(calc(var(--hue) * .8)) saturate(1.3) contrast(1.02);
}

@keyframes drift1 {
  0% { transform: translate(-1.2%, -0.8%) scale(1.04); }
  100% { transform: translate(1.1%, 0.9%) scale(1.04); }
}
@keyframes drift2 {
  0% { transform: translate(1.0%, -1.2%) scale(1.06); }
  100% { transform: translate(-1.1%, 1.0%) scale(1.06); }
}

/* Scanlines + subtle noise overlay */
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background:
    repeating-linear-gradient(rgba(0,0,0,0.35) 0 2px, rgba(0,0,0,0) 2px 4px),
    radial-gradient(1200px 600px at 50% 100%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.6) 100%);
  mix-blend-mode: multiply;
  filter: url(#noise);
}

/* Headline glitch */
.glitch {
  position: relative;
  display: inline-block;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: clamp(40px, 10vw, 140px);
  text-shadow:
    0 0 10px rgba(91,247,255,.4),
    0 0 30px rgba(255,91,247,.25);
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.glitch::before { color: var(--accent); transform: translate(1px, 0); mix-blend-mode: screen; clip-path: inset(0 0 50% 0); }
.glitch::after { color: var(--accent2); transform: translate(-1px, 0); mix-blend-mode: screen; clip-path: inset(50% 0 0 0); }

/* Idle micro-glitch */
.glitch { animation: textGlitch 2.2s infinite steps(1, end); }
@keyframes textGlitch {
  0%, 97%, 100% { filter: none; }
  10% { filter: url(#glitchDisplace); }
  11% { transform: translateZ(0); }
  25% { transform: translate3d(0, 0, 0); }
  40% { transform: translate3d(.5px, -.4px, 0); }
  41% { transform: translate3d(0, 0, 0); }
}

.sub {
  margin: 0;
  font-size: clamp(12px, 2.2vw, 20px);
  letter-spacing: .6em;
  opacity: .8;
}
.sub span { opacity: .55; }

/* Burst state intensifies displacement/colors */
body.burst .bg1,
body.burst .bg2 {
  transition-duration: 60ms;
  filter: hue-rotate(var(--hue)) saturate(1.8) contrast(1.1) brightness(1.05);
}
body.burst .bg1 { transform: translate(var(--bg1-x), var(--bg1-y)) scale(1.085) rotate(.15deg); opacity: .78; }
body.burst .bg2 { transform: translate(var(--bg2-x), var(--bg2-y)) scale(1.09) rotate(-.1deg); opacity: .72; }
body.burst .glitch::before { transform: translate(3px, -1px); }
body.burst .glitch::after  { transform: translate(-3px, 1px); }

/* Responsive safe area */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}