:root {
  --bg-0: #040706;
  --bg-1: #07100d;
  --bg-2: #0d1814;
  --panel: rgba(10, 18, 16, 0.72);
  --panel-strong: rgba(9, 15, 13, 0.86);
  --line: rgba(153, 197, 179, 0.24);
  --line-strong: rgba(153, 197, 179, 0.44);
  --text: #ecf8f2;
  --muted: #a4bfb3;
  --accent: #4ade80;
  --accent-soft: #8bf3b9;
  --accent-ink: #052417;
  --accent-glow: rgba(74, 222, 128, 0.36);
  --cyan-soft: #29d4ee;
  --danger: #fb7185;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-panel: 0 18px 34px rgba(0, 0, 0, 0.34), 0 1px 0 rgba(255, 255, 255, 0.07) inset;
  --shadow-elevated: 0 24px 42px rgba(0, 0, 0, 0.42), 0 0 24px rgba(74, 222, 128, 0.08);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.25, 0.9, 0.3, 1);
  --duration-fast: 280ms;
  --duration-base: 520ms;
  --duration-slow: 900ms;
}

@keyframes waveDriftA {
  0% { transform: translate3d(-18%, 6%, 0) rotate(-2deg); }
  50% { transform: translate3d(8%, -7%, 0) rotate(2deg); }
  100% { transform: translate3d(-14%, 5%, 0) rotate(-1deg); }
}

@keyframes waveDriftB {
  0% { transform: translate3d(20%, -10%, 0) rotate(4deg); }
  50% { transform: translate3d(-8%, 10%, 0) rotate(-3deg); }
  100% { transform: translate3d(14%, -8%, 0) rotate(2deg); }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(74, 222, 128, 0); }
  50% { box-shadow: 0 0 28px rgba(74, 222, 128, 0.22); }
}

@keyframes shimmerLine {
  from { transform: translateX(-110%); }
  to { transform: translateX(210%); }
}

@keyframes floatSoft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes cinematicIntroOut {
  0% { opacity: 1; clip-path: inset(0 0 0 0); }
  100% { opacity: 0; clip-path: inset(0 0 100% 0); visibility: hidden; }
}