/* ============================================================
   YOUTAB · BASE
   Tokens, reset, body, cursor, grid, scanline, keyframes
   ============================================================ */

:root {
  --bg: #02020a;
  --cyan: #00f0ff;
  --magenta: #ff0066;
  --purple: #8b00ff;
  --gold: #ffd700;
  --green: #00ff88;
  --glass: rgba(0, 240, 255, 0.04);
  --border: rgba(0, 240, 255, 0.13);
  --text: #e0e0ff;
  --muted: rgba(180, 180, 220, 0.62);
  --muted-2: rgba(200, 200, 255, 0.55);

  --f-display: 'Syncopate', sans-serif;
  --f-mono: 'Share Tech Mono', monospace;
  --f-body: 'Rajdhani', sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  overflow-x: hidden;
  cursor: none;
  min-height: 100vh;
}

/* Custom cursor */
.cursor {
  position: fixed;
  width: 12px;
  height: 12px;
  background: var(--cyan);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform 0.1s, background 0.2s;
  mix-blend-mode: screen;
  box-shadow: 0 0 20px var(--cyan), 0 0 40px var(--cyan);
}
.cursor-ring {
  position: fixed;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(0, 240, 255, 0.4);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease, width 0.3s, height 0.3s;
}

/* Background canvases / textures */
#neural-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.55;
  pointer-events: none;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.025;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.07) 2px,
    rgba(0, 0, 0, 0.07) 4px
  );
}

.grid-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 240, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.03) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%);
          mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%);
}

/* Universal animations */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes glitch {
  0%, 88%, 100% { transform: none; filter: none; }
  89% { transform: translateX(-3px); filter: hue-rotate(90deg); }
  90% { transform: translateX(3px);  filter: hue-rotate(-90deg); }
  91% { transform: translateX(-2px) skewX(2deg); }
  92% { transform: none; }
  94% { transform: translateX(2px); filter: hue-rotate(45deg); }
  95% { transform: none; }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}
@keyframes pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
  50%      { transform: translate(-50%, -50%) scale(1.2); opacity: 0.7; }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes float {
  0%   { transform: translateY(100vh) scale(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.5; }
  100% { transform: translateY(-100px) scale(1); opacity: 0; }
}

.reveal {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced-motion: honor user setting (accessibility) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  body { cursor: auto; }
  .cursor, .cursor-ring { display: none; }
}

/* Visually hidden helper (a11y) */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}