@import "tailwindcss";

@theme {
  --color-void: #05060a;
  --color-void-elevated: #0a1018;
  --color-void-panel: #0d1520;
  --color-fg: #e8f4ff;
  --color-muted: #8aa0b4;
  --color-dim: #5a7084;
  --color-neon: #00e8ff;
  --color-neon-deep: #007a88;
  --color-hot: #ff2d95;
  --color-hot-deep: #8a1048;
  --color-warn: #ff5a6a;
  --color-border: color-mix(in oklab, var(--color-neon) 28%, transparent);
  --color-border-hot: color-mix(in oklab, var(--color-hot) 40%, transparent);

  --font-display: "Orbitron", "Segoe UI", system-ui, sans-serif;
  --font-fa: "Vazirmatn", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Share Tech Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: clamp(1.05rem, 0.95rem + 0.4vw, 1.2rem);
  --text-xl: clamp(1.25rem, 1rem + 0.8vw, 1.6rem);
  --text-2xl: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem);

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 10px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-quick: 150ms;
  --motion-fast: 250ms;
  --motion-slow: 400ms;
}

@layer base {
  html,
  body {
    background: var(--color-void);
    color: var(--color-fg);
  }

  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }

  ::selection {
    background: color-mix(in oklab, var(--color-neon) 40%, transparent);
    color: var(--color-void);
  }
}

/* --- atmosphere --- */

.scene-body {
  min-height: calc(100dvh - 7rem);
}

.scene-void {
  --spot-x: 50%;
  --spot-y: 40%;
  --size-display: clamp(3.6rem, 12vw, 7.5rem);
  background:
    radial-gradient(1200px 700px at 50% 110%, color-mix(in oklab, var(--color-hot) 16%, transparent), transparent 60%),
    radial-gradient(900px 500px at 80% 0%, color-mix(in oklab, var(--color-neon) 10%, transparent), transparent 55%),
    radial-gradient(700px 480px at 10% 20%, color-mix(in oklab, var(--color-hot) 8%, transparent), transparent 50%),
    var(--color-void);
}

.scene-spot {
  background: radial-gradient(
    520px circle at var(--spot-x) var(--spot-y),
    color-mix(in oklab, var(--color-neon) 14%, transparent),
    transparent 58%
  );
}

.scanlines {
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    color-mix(in oklab, var(--color-void) 35%, transparent) 2px,
    color-mix(in oklab, var(--color-void) 35%, transparent) 3px
  );
}

.vignette {
  background: radial-gradient(ellipse at center, transparent 42%, #000 100%);
}

.noise {
  opacity: 0.045;
  background-image: repeating-conic-gradient(
    from 0deg at 50% 50%,
    #fff 0 0.00008%,
    transparent 0 0.00016%
  );
}

@media (prefers-reduced-motion: no-preference) {
  .noise {
    animation: noise-shift 0.35s steps(3) infinite;
  }
}

@keyframes noise-shift {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-1%, 1%);
  }
  50% {
    transform: translate(1%, -1%);
  }
  75% {
    transform: translate(-1%, -1%);
  }
  100% {
    transform: translate(0, 0);
  }
}

/* --- rain --- */

.rain-layer {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='220' viewBox='0 0 160 220'%3E%3Cline x1='8' y1='0' x2='4' y2='28' stroke='%2300e8ff' stroke-width='1' stroke-opacity='0.28'/%3E%3Cline x1='26' y1='40' x2='22' y2='72' stroke='%2300e8ff' stroke-width='1' stroke-opacity='0.18'/%3E%3Cline x1='44' y1='10' x2='40' y2='46' stroke='%23e8f4ff' stroke-width='1.2' stroke-opacity='0.22'/%3E%3Cline x1='62' y1='80' x2='58' y2='108' stroke='%2300e8ff' stroke-width='1' stroke-opacity='0.16'/%3E%3Cline x1='84' y1='20' x2='80' y2='54' stroke='%2300e8ff' stroke-width='1' stroke-opacity='0.3'/%3E%3Cline x1='102' y1='90' x2='98' y2='124' stroke='%23e8f4ff' stroke-width='1' stroke-opacity='0.14'/%3E%3Cline x1='120' y1='8' x2='116' y2='40' stroke='%2300e8ff' stroke-width='1' stroke-opacity='0.24'/%3E%3Cline x1='138' y1='60' x2='134' y2='96' stroke='%2300e8ff' stroke-width='1' stroke-opacity='0.2'/%3E%3Cline x1='18' y1='130' x2='14' y2='162' stroke='%2300e8ff' stroke-width='1' stroke-opacity='0.15'/%3E%3Cline x1='70' y1='150' x2='66' y2='186' stroke='%23e8f4ff' stroke-width='1.1' stroke-opacity='0.2'/%3E%3Cline x1='148' y1='140' x2='144' y2='176' stroke='%2300e8ff' stroke-width='1' stroke-opacity='0.18'/%3E%3C/svg%3E");
  background-size: 160px 220px;
  opacity: 0.7;
}

@media (prefers-reduced-motion: no-preference) {
  .rain-layer {
    animation: rain-fall 0.55s linear infinite;
  }
}

@keyframes rain-fall {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -12px 220px;
  }
}

/* --- perspective floor --- */

.grid-floor {
  bottom: -18%;
  left: 50%;
  height: 52%;
  width: 220%;
  background-image:
    linear-gradient(color-mix(in oklab, var(--color-neon) 22%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--color-neon) 22%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  transform: translateX(-50%) perspective(420px) rotateX(68deg);
  mask-image: linear-gradient(to top, black 8%, transparent 78%);
}

@media (prefers-reduced-motion: no-preference) {
  .grid-floor {
    animation: grid-drift 14s linear infinite;
  }
}

@keyframes grid-drift {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 48px;
  }
}

/* --- glitch 404 --- */

.glitch-404 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--size-display);
  line-height: 0.92;
  letter-spacing: 0.02em;
  color: var(--color-fg);
  white-space: nowrap;
  overflow: hidden;
  text-shadow:
    -1px 0 var(--color-hot),
    1px 0 var(--color-neon),
    0 0 18px color-mix(in oklab, var(--color-neon) 70%, transparent),
    0 0 64px color-mix(in oklab, var(--color-neon) 35%, transparent);
}

.glitch-404::before,
.glitch-404::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}

.glitch-404::before {
  color: var(--color-neon);
  text-shadow: -2px 0 var(--color-neon);
  clip-path: inset(0 0 62% 0);
}

.glitch-404::after {
  color: var(--color-hot);
  text-shadow: 2px 0 var(--color-hot);
  clip-path: inset(62% 0 0 0);
}

@media (prefers-reduced-motion: no-preference) {
  .glitch-404.is-burst::before {
    opacity: 0.9;
    animation: glitch-top 280ms linear 2;
  }
  .glitch-404.is-burst::after {
    opacity: 0.9;
    animation: glitch-bot 280ms linear 2;
  }
  .glitch-404.is-burst {
    animation: glitch-burst 280ms steps(2) 1;
  }
}

@keyframes glitch-top {
  0% {
    clip-path: inset(0 0 70% 0);
    transform: translate(-2px, 0);
  }
  20% {
    clip-path: inset(10% 0 40% 0);
    transform: translate(-5px, 1px);
  }
  40% {
    clip-path: inset(0 0 80% 0);
    transform: translate(3px, 0);
  }
  60% {
    clip-path: inset(20% 0 30% 0);
    transform: translate(-3px, -1px);
  }
  80% {
    clip-path: inset(0 0 55% 0);
    transform: translate(4px, 0);
  }
  100% {
    clip-path: inset(5% 0 65% 0);
    transform: translate(-2px, 0);
  }
}

@keyframes glitch-bot {
  0% {
    clip-path: inset(60% 0 0 0);
    transform: translate(2px, 0);
  }
  25% {
    clip-path: inset(40% 0 10% 0);
    transform: translate(5px, 1px);
  }
  50% {
    clip-path: inset(75% 0 0 0);
    transform: translate(-3px, 0);
  }
  75% {
    clip-path: inset(50% 0 5% 0);
    transform: translate(3px, -1px);
  }
  100% {
    clip-path: inset(62% 0 0 0);
    transform: translate(2px, 0);
  }
}

@keyframes glitch-burst {
  0% {
    transform: translate(0, 0) skewX(0);
    filter: none;
  }
  20% {
    transform: translate(-8px, 1px) skewX(-8deg);
    filter: hue-rotate(20deg);
  }
  40% {
    transform: translate(10px, -2px) skewX(6deg);
  }
  60% {
    transform: translate(-4px, 0) skewX(-3deg);
  }
  100% {
    transform: translate(0, 0) skewX(0);
    filter: none;
  }
}

/* --- type --- */

.title-fa {
  font-family: var(--font-fa);
  text-shadow: 0 0 24px color-mix(in oklab, var(--color-hot) 45%, transparent);
}

.hud-type {
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* --- panels / chrome --- */

.hud-bracket {
  border-color: color-mix(in oklab, var(--color-neon) 55%, transparent);
  box-shadow: 0 0 12px color-mix(in oklab, var(--color-neon) 18%, transparent);
}

.holo-panel {
  background: color-mix(in oklab, var(--color-void-panel) 78%, transparent);
  border: 1px solid var(--color-border);
  box-shadow:
    0 0 24px color-mix(in oklab, var(--color-neon) 12%, transparent),
    inset 0 0 24px color-mix(in oklab, var(--color-neon) 6%, transparent);
  backdrop-filter: blur(8px);
}

.holo-panel-hot {
  border-color: var(--color-border-hot);
  box-shadow:
    0 0 24px color-mix(in oklab, var(--color-hot) 16%, transparent),
    inset 0 0 24px color-mix(in oklab, var(--color-hot) 7%, transparent);
}

.neon-line {
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-neon),
    var(--color-hot),
    var(--color-neon),
    transparent
  );
  box-shadow: 0 0 10px color-mix(in oklab, var(--color-neon) 50%, transparent);
}

.live-dot {
  background: var(--color-neon);
  box-shadow: 0 0 8px var(--color-neon);
}

@media (prefers-reduced-motion: no-preference) {
  .live-dot {
    animation: pulse-live 1.6s var(--ease-out) infinite;
  }
}

@keyframes pulse-live {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(0.75);
  }
}

/* --- neon kanji signs --- */

.neon-sign {
  font-family: var(--font-display);
  color: var(--color-hot);
  text-shadow:
    0 0 8px var(--color-hot),
    0 0 24px color-mix(in oklab, var(--color-hot) 70%, transparent);
  writing-mode: vertical-rl;
}

.neon-sign-cyan {
  color: var(--color-neon);
  text-shadow:
    0 0 8px var(--color-neon),
    0 0 24px color-mix(in oklab, var(--color-neon) 70%, transparent);
}

.sign-a,
.sign-b,
.sign-c {
  display: none;
}

.sign-a {
  top: 18%;
  right: 3%;
}

.sign-b {
  top: 40%;
  left: 3%;
}

.sign-c {
  bottom: 36%;
  left: 4%;
}

@media (min-width: 1440px) {
  .sign-a,
  .sign-b,
  .sign-c {
    display: block;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .neon-sign {
    animation: sign-flicker 5.5s step-end infinite;
  }
  .neon-sign-cyan {
    animation: sign-flicker 7s step-end infinite;
    animation-delay: 1.4s;
  }
}

@keyframes sign-flicker {
  0%,
  92%,
  100% {
    opacity: 1;
  }
  93% {
    opacity: 0.15;
  }
  94% {
    opacity: 1;
  }
  96% {
    opacity: 0.3;
  }
  97% {
    opacity: 1;
  }
}

/* --- button --- */

.cyber-btn {
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  background: color-mix(in oklab, var(--color-neon) 12%, var(--color-void));
  border: 1px solid var(--color-neon);
  color: var(--color-neon);
  box-shadow:
    0 0 18px color-mix(in oklab, var(--color-neon) 28%, transparent),
    inset 0 0 18px color-mix(in oklab, var(--color-neon) 10%, transparent);
  transition-property: color, background-color, box-shadow, transform;
  transition-duration: var(--motion-quick);
  transition-timing-function: var(--ease-out);
}

.cyber-btn:hover:not(:disabled) {
  background: var(--color-neon);
  color: var(--color-void);
  box-shadow: 0 0 28px color-mix(in oklab, var(--color-neon) 55%, transparent);
}

.cyber-btn:active:not(:disabled) {
  transform: scale(0.96);
}

.cyber-btn:disabled {
  opacity: 0.55;
}

.cyber-btn-hot {
  background: color-mix(in oklab, var(--color-hot) 14%, var(--color-void));
  border-color: var(--color-hot);
  color: var(--color-hot);
  box-shadow:
    0 0 18px color-mix(in oklab, var(--color-hot) 28%, transparent),
    inset 0 0 18px color-mix(in oklab, var(--color-hot) 10%, transparent);
}

.cyber-btn-hot:hover:not(:disabled) {
  background: var(--color-hot);
  color: var(--color-fg);
  box-shadow: 0 0 28px color-mix(in oklab, var(--color-hot) 55%, transparent);
}

/* --- progress --- */

.scan-bar {
  background: color-mix(in oklab, var(--color-neon) 12%, transparent);
}

.scan-bar > span {
  width: 0%;
  background: linear-gradient(90deg, var(--color-neon-deep), var(--color-neon), var(--color-hot));
  box-shadow: 0 0 12px var(--color-neon);
}

@media (prefers-reduced-motion: no-preference) {
  .scan-bar > span {
    animation: scan-fill 2.4s var(--ease-out) forwards;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scan-bar > span {
    width: 72%;
  }
}

@keyframes scan-fill {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

/* --- enter stagger --- */

.stagger-in {
  opacity: 0;
  transform: translateY(12px);
  filter: blur(4px);
  animation: fade-up var(--motion-slow) var(--ease-out) forwards;
}

.stagger-in:nth-child(1) {
  animation-delay: 40ms;
}
.stagger-in:nth-child(2) {
  animation-delay: 120ms;
}
.stagger-in:nth-child(3) {
  animation-delay: 200ms;
}
.stagger-in:nth-child(4) {
  animation-delay: 280ms;
}
.stagger-in:nth-child(5) {
  animation-delay: 360ms;
}

@keyframes fade-up {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stagger-in {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
  }
}

/* --- denied stamp --- */

.denied-stamp {
  border: 3px solid var(--color-warn);
  color: var(--color-warn);
  text-shadow: 0 0 16px var(--color-warn);
  box-shadow: 0 0 24px color-mix(in oklab, var(--color-warn) 40%, transparent);
  transform: rotate(-12deg);
}

@media (prefers-reduced-motion: no-preference) {
  .denied-stamp {
    animation: stamp-in 280ms var(--ease-out) both;
  }
}

@keyframes stamp-in {
  from {
    opacity: 0;
    transform: rotate(-12deg) scale(1.4);
  }
  to {
    opacity: 1;
    transform: rotate(-12deg) scale(1);
  }
}

/* --- city windows --- */

.city-window {
  background: var(--color-neon);
  opacity: 0.35;
}

@media (prefers-reduced-motion: no-preference) {
  .city-window {
    animation: window-blink 4s step-end infinite;
  }
}

@keyframes window-blink {
  0%,
  100% {
    opacity: 0.45;
  }
  12% {
    opacity: 0.1;
  }
  14% {
    opacity: 0.5;
  }
  70% {
    opacity: 0.2;
  }
  73% {
    opacity: 0.55;
  }
}

.skyline-wrap {
  height: 38vh;
  min-height: 11rem;
}

.skyline-glow {
  background: linear-gradient(
    to top,
    color-mix(in oklab, var(--color-hot) 35%, transparent),
    color-mix(in oklab, var(--color-neon) 18%, transparent),
    transparent
  );
}