*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --techno: 'Orbitron', 'Eurostile', 'Microgramma', sans-serif;
  --ink: #080c10;
  --slate: #1a2428;
  --cyan-dim: #3a5860;
  --cyan: #6a98a0;
  --cyan-bright: #9ec8d0;
  --glow: #c8e4ea;
}

html,
body {
  height: 100%;
}

/* Abstract blurred industrial streaks */
.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--ink);
}

.scene__base {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0c1218 0%, #141c22 28%, #101820 55%, #0a1014 100%);
}

.scene__streak {
  position: absolute;
  left: -15%;
  width: 130%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(120, 168, 176, 0.08) 12%,
    rgba(200, 228, 234, 0.55) 38%,
    rgba(158, 200, 208, 0.35) 62%,
    rgba(100, 140, 148, 0.12) 88%,
    transparent 100%
  );
  filter: blur(6px);
  opacity: 0.7;
}

.scene__streak--1 { top: 8%; height: 3px; filter: blur(10px); opacity: 0.9; }
.scene__streak--2 { top: 14%; filter: blur(14px); opacity: 0.5; }
.scene__streak--3 { top: 22%; height: 1px; filter: blur(4px); opacity: 0.35; }
.scene__streak--4 { top: 38%; height: 4px; filter: blur(18px); opacity: 0.65; }
.scene__streak--5 { top: 52%; filter: blur(12px); opacity: 0.4; }
.scene__streak--6 { top: 68%; height: 2px; filter: blur(8px); opacity: 0.25; }

.scene__band {
  position: absolute;
  left: -20%;
  width: 140%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(60, 90, 98, 0.15) 20%,
    rgba(140, 180, 188, 0.25) 50%,
    rgba(60, 90, 98, 0.15) 80%,
    transparent
  );
  filter: blur(40px);
}

.scene__band--1 {
  top: 10%;
  height: 18vh;
  opacity: 0.8;
  animation: drift 14s ease-in-out infinite alternate;
}

.scene__band--2 {
  top: 35%;
  height: 8vh;
  filter: blur(60px);
  opacity: 0.5;
  animation: drift 18s ease-in-out infinite alternate-reverse;
}

.scene__band--3 {
  top: 55%;
  height: 28vh;
  filter: blur(80px);
  opacity: 0.35;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(40, 60, 68, 0.3) 30%,
    rgba(80, 120, 128, 0.2) 70%,
    transparent
  );
}

.scene__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 40% at 50% 12%, rgba(158, 200, 208, 0.22), transparent 70%),
    radial-gradient(ellipse 70% 30% at 30% 45%, rgba(106, 152, 160, 0.12), transparent 65%);
  filter: blur(30px);
}

.scene__noise {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(255, 255, 255, 0.03) 2px,
    rgba(255, 255, 255, 0.03) 3px
  );
}

.scene__vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, transparent 25%, transparent 70%, rgba(0, 0, 0, 0.7) 100%),
    radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, 0.55) 100%);
}

/* Custom cursor */
.has-cursor,
.has-cursor * {
  cursor: none !important;
}

.cursor {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.08s ease;
}

.cursor.is-visible {
  opacity: 1;
}

.cursor__dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(158, 200, 208, 0.85);
  background: rgba(200, 228, 234, 0.15);
  box-shadow: 0 0 10px rgba(158, 200, 208, 0.35);
  will-change: transform;
}

.cursor__frame {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  transform-origin: top left;
  border: 1px solid rgba(158, 200, 208, 0.25);
  transition: opacity 0.1s ease, border-color 0.1s ease, box-shadow 0.1s ease;
  will-change: transform, width, height;
}

.cursor.is-hover .cursor__frame {
  opacity: 1;
  border-color: rgba(158, 200, 208, 0.45);
}

.cursor.is-click .cursor__frame {
  border-color: rgba(200, 228, 234, 0.75);
  box-shadow: 0 0 30px rgba(158, 200, 208, 0.2);
}

.cursor__corner {
  position: absolute;
  width: 10px;
  height: 10px;
  border-color: rgba(200, 228, 234, 0.8);
  border-style: solid;
  opacity: 0;
  transition: opacity 0.1s ease, width 0.12s ease, height 0.12s ease;
}

.cursor.is-hover .cursor__corner {
  opacity: 1;
}

.cursor.is-click .cursor__corner {
  width: 14px;
  height: 14px;
  border-color: rgba(200, 228, 234, 1);
}

.cursor__corner--tl { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.cursor__corner--tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.cursor__corner--bl { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }
.cursor__corner--br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

.cursor__runner {
  position: fixed;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(200, 228, 234, 0.9);
  background: rgba(158, 200, 208, 0.2);
  box-shadow: 0 0 14px rgba(158, 200, 208, 0.5);
  opacity: 0;
  will-change: transform;
}

.cursor__runner--b {
  width: 7px;
  height: 7px;
  border-color: rgba(158, 200, 208, 0.55);
  background: rgba(158, 200, 208, 0.08);
  box-shadow: 0 0 8px rgba(158, 200, 208, 0.3);
}

.cursor.is-hover .cursor__runner {
  opacity: 1;
}

.cursor.is-click .cursor__runner {
  border-width: 2px;
  box-shadow: 0 0 22px rgba(200, 228, 234, 0.65);
}

@keyframes drift {
  from { transform: translateX(-3%) scaleY(1); }
  to { transform: translateX(3%) scaleY(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .scene__band {
    animation: none;
  }
}