@import "tailwindcss";

/* ─────────────────────────────────────────────────────────
   VYNDR Design System
   Bloomberg terminal + ESPN broadcast + glitch-in-the-matrix.
   "The terminal at sportsbook prices."
   ───────────────────────────────────────────────────────── */

:root {
  /* Surfaces — powered-on screen, slightly warmer than pure black */
  --bg-0: #06060B;
  --bg-1: #0E0E16;
  --bg-2: #15151F;
  --bg-3: #1A1A26;

  /* Borders */
  --border: #1E1E2E;
  --border-hi: #2A2A3E;

  /* Text */
  --text-0: #E8E8F0;
  --text-1: #7A7A8E;
  --text-2: #4A4A5E;

  /* Brand accent — deep forest, button green, glow */
  --acc-0: #0F3D2E;
  --acc-1: #1A5A42;
  --acc-glow: rgba(15, 61, 46, 0.25);

  /* Grade tiers — the most important colors */
  --grade-aplus: #00FFB8;
  --grade-a:     #00D4A0;
  --grade-b:     #4A9EFF;
  --grade-c:     #FFB347;
  --grade-d:     #FF5252;

  /* Sport tints */
  --nba:  #E94B3C;
  --mlb:  #1E90FF;
  --wnba: #F7944A;

  /* Special — Vendetta crimson; kill conditions only */
  --crimson: #8B0000;

  /* Signals */
  --danger: var(--grade-d);
  --warning: var(--grade-c);
  --success: var(--grade-a);

  /* Geometry */
  --diagonal-angle: -2deg;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Glitch intensity — 0..1, can be tuned per-section */
  --glitch: 0.5;
  --scan-opacity:  calc(0.04 + 0.06 * var(--glitch));
  --grain-opacity: calc(0.02 + 0.02 * var(--glitch));
  --rgb-shift:     calc(0.5px + 1.5px * var(--glitch));
  --slash-opacity: calc(0.06 + 0.08 * var(--glitch));
  --sweep-opacity: calc(0.08 + 0.12 * var(--glitch));

  /* ── Legacy aliases — every existing component still resolves ── */
  --bg-primary: var(--bg-0);
  --bg-surface: var(--bg-1);
  --bg-surface-hover: var(--bg-2);
  --bg-elevated: var(--bg-3);
  --border-focus: var(--border-hi);
  --text-primary: var(--text-0);
  --text-secondary: var(--text-1);
  --text-tertiary: var(--text-2);
  --accent: var(--acc-0);
  --accent-light: var(--acc-1);
  --accent-glow: var(--acc-glow);
  --bg: var(--bg-0);
  --card: var(--bg-1);
  --card-hover: var(--bg-2);
  --border-light: var(--border-hi);
  --text: var(--text-0);
  --text-muted: var(--text-1);
  --text-dim: var(--text-2);
  --cyan: var(--grade-a);
  --cyan-hover: var(--grade-aplus);
  --cyan-dim: rgba(0, 212, 160, 0.10);
  --kill: var(--crimson);
  --forest: var(--acc-0);
  --forest-dark: #0A2A20;
  --forest-light: var(--acc-1);
}

/* ─────────────────────────────────────────────────────────
   Base
   ───────────────────────────────────────────────────────── */

* {
  box-sizing: border-box;
}

html {
  background: var(--bg-primary);
  color-scheme: dark;
}

body {
  background: var(--bg-0);
  color: var(--text-0);
  font-family: 'Instrument Sans', 'SF Pro Display', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Instrument Sans', 'SF Pro Display', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text-0);
}

.font-mono,
.mono {
  font-family: 'IBM Plex Mono', 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
}
.num {
  font-family: 'IBM Plex Mono', 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.lbl {
  font-family: 'IBM Plex Mono', 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
}

::selection {
  background: var(--accent);
  color: var(--text-primary);
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--border-focus);
}

/* ─────────────────────────────────────────────────────────
   The Diagonal Cut — signature visual motif
   ───────────────────────────────────────────────────────── */

.diagonal-cut {
  position: relative;
  isolation: isolate;
}

.diagonal-cut::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--diagonal-angle), transparent 0%, var(--accent-glow) 100%);
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}

.diagonal-cut > * {
  position: relative;
  z-index: 1;
}

.diagonal-cut-strong::before {
  background: linear-gradient(var(--diagonal-angle), transparent 0%, rgba(26, 74, 58, 0.20) 100%);
}

/* Radial accent glow — for hero backgrounds */
.radial-glow {
  background:
    radial-gradient(ellipse 60% 50% at 50% 30%, var(--accent-glow), transparent 70%),
    var(--bg-primary);
}

/* ─────────────────────────────────────────────────────────
   Surfaces
   ───────────────────────────────────────────────────────── */

.surface {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform 200ms ease, border-color 200ms ease, background 200ms ease;
}

.surface-hover:hover {
  background: var(--bg-surface-hover);
  border-color: var(--border-focus);
  transform: translateY(-2px);
}

.surface-elevated {
  background: var(--bg-elevated);
  border: 1px solid var(--border-focus);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* ─────────────────────────────────────────────────────────
   Buttons
   ───────────────────────────────────────────────────────── */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--accent);
  color: var(--text-primary);
  border: 1px solid var(--accent-light);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 200ms ease, transform 100ms ease, box-shadow 200ms ease;
  text-decoration: none;
}

.btn-primary:hover {
  background: var(--accent-light);
  box-shadow: 0 4px 16px var(--accent-glow);
}

.btn-primary:active {
  transform: scale(0.98);
}

.btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--accent);
  box-shadow: none;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease;
  text-decoration: none;
}

.btn-ghost:hover {
  border-color: var(--border-focus);
  background: var(--bg-surface);
}

/* ─────────────────────────────────────────────────────────
   Inputs
   ───────────────────────────────────────────────────────── */

.input-field {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  transition: border-color 200ms ease, background 200ms ease;
}

.input-field::placeholder {
  color: var(--text-tertiary);
}

.input-field:focus {
  outline: none;
  border-color: var(--accent-light);
  background: var(--bg-elevated);
}

/* ─────────────────────────────────────────────────────────
   Grade tier helpers
   ───────────────────────────────────────────────────────── */

.grade-a-tier { color: var(--grade-a); }
.grade-b-tier { color: var(--grade-b); }
.grade-c-tier { color: var(--grade-c); }
.grade-d-tier { color: var(--grade-d); }

.grade-a-bg { background: rgba(0, 200, 150, 0.10); border-color: rgba(0, 200, 150, 0.30); }
.grade-b-bg { background: rgba(74, 158, 255, 0.10); border-color: rgba(74, 158, 255, 0.30); }
.grade-c-bg { background: rgba(255, 179, 71, 0.10); border-color: rgba(255, 179, 71, 0.30); }
.grade-d-bg { background: rgba(255, 107, 107, 0.10); border-color: rgba(255, 107, 107, 0.30); }

/* ─────────────────────────────────────────────────────────
   Animations
   ───────────────────────────────────────────────────────── */

@keyframes grade-reveal {
  0%   { transform: scale(0.85); opacity: 0; }
  60%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1.00); opacity: 1; }
}

.animate-grade {
  animation: grade-reveal 400ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes blur-pulse {
  0%, 100% { opacity: 0.65; }
  50%      { opacity: 0.85; }
}

.animate-blur-pulse {
  animation: blur-pulse 3s ease-in-out 1;
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.shimmer-loading {
  background: linear-gradient(
    90deg,
    var(--accent) 0%,
    var(--accent-light) 50%,
    var(--accent) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
}

@keyframes fade-up {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.7; }
}

@keyframes phosphor-pulse {
  0%, 100% { opacity: 0.6; transform: scaleX(0.6); }
  50%      { opacity: 1;   transform: scaleX(1); }
}

.animate-fade-up {
  animation: fade-up 400ms ease-out both;
}

.stagger-1 { animation-delay: 50ms; }
.stagger-2 { animation-delay: 100ms; }
.stagger-3 { animation-delay: 150ms; }
.stagger-4 { animation-delay: 200ms; }
.stagger-5 { animation-delay: 250ms; }
.stagger-6 { animation-delay: 300ms; }

@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-ticker {
  animation: ticker-scroll 60s linear infinite;
}

.animate-ticker:hover {
  animation-play-state: paused;
}

/* ─────────────────────────────────────────────────────────
   Tier blur (the conversion engine)
   ───────────────────────────────────────────────────────── */

.tier-locked {
  position: relative;
  filter: blur(8px);
  user-select: none;
  pointer-events: none;
  animation: blur-pulse 3s ease-in-out 1;
}

.tier-locked-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(180deg, transparent 0%, rgba(10, 10, 15, 0.6) 60%, rgba(10, 10, 15, 0.85) 100%);
  border-radius: inherit;
  z-index: 2;
  padding: 24px;
  text-align: center;
}

/* ─────────────────────────────────────────────────────────
   Utilities
   ───────────────────────────────────────────────────────── */

.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }

.divider {
  height: 1px;
  background: var(--border);
  margin: 16px 0;
}

/* ─────────────────────────────────────────────────────────
   Texture layers — seasoning, not the meal
   ───────────────────────────────────────────────────────── */

.tex-scan {
  position: relative;
  isolation: isolate;
}
.tex-scan::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,var(--scan-opacity)) 0px,
    rgba(255,255,255,var(--scan-opacity)) 1px,
    transparent 1px,
    transparent 3px
  );
  z-index: 2;
  mix-blend-mode: screen;
}

.tex-sweep {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.tex-sweep::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 140px;
  top: -140px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(0, 255, 184, var(--sweep-opacity)) 50%,
    transparent
  );
  z-index: 1;
  animation: crt-sweep 7s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes crt-sweep {
  0%   { transform: translateY(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(120vh); opacity: 0; }
}

.tex-vignette {
  position: relative;
}
.tex-vignette::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.45) 100%);
  z-index: 3;
}

.tex-slash {
  position: relative;
}
.tex-slash::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(
    -2deg,
    transparent 0%,
    rgba(0, 212, 160, var(--slash-opacity)) 50%,
    transparent 100%
  );
  z-index: 1;
}

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

/* Page-level CRT vignette, scales with --glitch */
body.tex-grain::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 110% 90% at 50% 50%, transparent 50%, rgba(0,0,0,calc(0.15 + 0.20 * var(--glitch))) 100%);
  z-index: 998;
}

/* ─────────────────────────────────────────────────────────
   RGB split — broadcast misalignment effect
   ───────────────────────────────────────────────────────── */

.rgb-split {
  position: relative;
  display: inline-block;
}
.rgb-split::before,
.rgb-split::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  pointer-events: none;
}
.rgb-split::before {
  color: rgba(255, 60, 60, 0.55);
  transform: translateX(calc(-1 * var(--rgb-shift)));
  mix-blend-mode: screen;
}
.rgb-split::after {
  color: rgba(60, 120, 255, 0.55);
  transform: translateX(var(--rgb-shift));
  mix-blend-mode: screen;
}

/* ─────────────────────────────────────────────────────────
   Wordmark — VYNDR with RGB-split letters, green-glow R, blinking cursor
   ───────────────────────────────────────────────────────── */

.wordmark {
  font-family: 'IBM Plex Mono', 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-weight: 800;
  letter-spacing: 0.10em;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  position: relative;
}
.wm-letter {
  position: relative;
  display: inline-block;
}
.wm-letter::before,
.wm-letter::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  pointer-events: none;
  display: inline-block;
}
.wm-letter::before {
  color: rgba(255, 60, 60, 0.55);
  transform: translateX(calc(-1px - var(--rgb-shift)));
  mix-blend-mode: screen;
}
.wm-letter::after {
  color: rgba(60, 120, 255, 0.55);
  transform: translateX(calc(1px + var(--rgb-shift)));
  mix-blend-mode: screen;
}
.wordmark .vynd { color: var(--text-0); }
.wordmark .r {
  color: var(--grade-a);
  text-shadow: 0 0 calc(var(--wm-size, 32px) * 0.25) rgba(0, 212, 160, 0.6);
  position: relative;
}
.wordmark .r::before { color: rgba(255, 60, 60, 0.45); }
.wordmark .r::after  { color: rgba(0, 255, 184, 0.60); }

.wm-cursor {
  display: inline-block;
  width: 0.16em;
  height: 0.9em;
  margin-left: 0.18em;
  background: var(--grade-a);
  box-shadow: 0 0 calc(var(--wm-size, 32px) * 0.3) rgba(0, 212, 160, 0.8);
  animation: cursor-blink 1.1s steps(2) infinite;
}
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.wm-anim { animation: wm-tear 5.5s ease-in-out infinite; }
@keyframes wm-tear {
  0%, 4%, 100% { transform: translateX(0); }
  5%   { transform: translateX(2px) skewX(-2deg); filter: hue-rotate(20deg); }
  6%   { transform: translateX(-1px); }
  7%   { transform: translateX(0); filter: none; }
  47%  { transform: translateX(0); }
  48%  { transform: translateX(-2px) skewX(1deg); }
  49%  { transform: translateX(1px); }
  50%  { transform: translateX(0); }
}

/* ─────────────────────────────────────────────────────────
   Glitch text — occasional horizontal tear, broadcast tinted ghosts
   ───────────────────────────────────────────────────────── */

.glitch-text {
  position: relative;
  display: inline-block;
}
.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  pointer-events: none;
}
.glitch-text::before {
  color: rgba(255, 60, 60, 0.7);
  transform: translateX(calc(-1px - var(--rgb-shift)));
  mix-blend-mode: screen;
  animation: glitch-shift-r 4s steps(40) infinite;
}
.glitch-text::after {
  color: rgba(60, 180, 255, 0.7);
  transform: translateX(calc(1px + var(--rgb-shift)));
  mix-blend-mode: screen;
  animation: glitch-shift-b 4s steps(40) infinite reverse;
}
@keyframes glitch-shift-r {
  0%, 100% { clip-path: inset(0 0 0 0); transform: translateX(calc(-1px - var(--rgb-shift))); }
  92%      { clip-path: inset(20% 0 60% 0); transform: translateX(-3px); }
  94%      { clip-path: inset(60% 0 10% 0); transform: translateX(2px); }
  96%      { clip-path: inset(0 0 0 0); }
}
@keyframes glitch-shift-b {
  0%, 100% { clip-path: inset(0 0 0 0); }
  93%      { clip-path: inset(45% 0 35% 0); transform: translateX(3px); }
  95%      { clip-path: inset(10% 0 70% 0); transform: translateX(-2px); }
  97%      { clip-path: inset(0 0 0 0); }
}

/* ─────────────────────────────────────────────────────────
   Transmission badge, frequency badge, phosphor underline
   ───────────────────────────────────────────────────────── */

.transmission {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--grade-a);
  background: rgba(0, 212, 160, 0.06);
  border: 1px solid rgba(0, 212, 160, 0.30);
  border-radius: 3px;
}
.transmission .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--grade-a);
  box-shadow: 0 0 8px var(--grade-a);
  animation: pulse-live 1.4s ease-in-out infinite;
}
@keyframes pulse-live {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(1.3); }
}

.freq-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 10px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-1);
}
.freq-badge .ch { color: var(--grade-a); font-weight: 700; }

.phosphor-line {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--grade-a), transparent);
  box-shadow: 0 0 8px rgba(0, 212, 160, 0.60);
  width: 100%;
}

/* The V watermark — Vendetta nod, hero background */
.v-watermark {
  position: absolute;
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 70vmin;
  line-height: 0.8;
  color: var(--acc-0);
  opacity: 0.06;
  letter-spacing: -0.05em;
  user-select: none;
  pointer-events: none;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}

/* CRT phosphor glow utility for grade letters */
.grade-glow-aplus { color: var(--grade-aplus); text-shadow: 0 0 18px var(--grade-aplus), 0 0 36px rgba(0, 255, 184, 0.40); }
.grade-glow-a     { color: var(--grade-a);     text-shadow: 0 0 14px rgba(0, 212, 160, 0.70), 0 0 30px rgba(0, 212, 160, 0.30); }
.grade-glow-b     { color: var(--grade-b);     text-shadow: 0 0 12px rgba(74, 158, 255, 0.60), 0 0 24px rgba(74, 158, 255, 0.20); }
.grade-glow-c     { color: var(--grade-c);     text-shadow: 0 0 12px rgba(255, 179, 71, 0.55); }
.grade-glow-d     { color: var(--grade-d);     text-shadow: 0 0 12px rgba(255, 82, 82, 0.55); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}