:root {
  --background: 240 5% 4%;
  --foreground: 240 5% 96%;
  --card: 240 5% 8%;
  --card-foreground: 240 5% 96%;
  --primary: 80 87% 59%;
  --primary-foreground: 240 5% 4%;
  --muted: 83 27% 10%;
  --muted-foreground: 240 6% 63%;
  --border: 240 6% 16%;
  --input: 240 6% 16%;
  --ring: 80 87% 59%;
  --radius: 0.625rem;
}

.dark {
  --background: 240 5% 4%;
  --foreground: 240 5% 96%;
  --card: 240 5% 8%;
  --card-foreground: 240 5% 96%;
  --primary: 80 87% 59%;
  --primary-foreground: 240 5% 4%;
  --muted: 83 27% 10%;
  --muted-foreground: 240 6% 63%;
  --border: 240 6% 16%;
  --input: 240 6% 16%;
  --ring: 80 87% 59%;
  --radius: 0.625rem;
}

:root {
  --db-duration-fast: 120ms;
  --db-duration-base: 260ms;
  --db-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --db-ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: no-preference) {
  .db-transition {
    transition:
      transform var(--db-duration-base) var(--db-ease-standard),
      opacity var(--db-duration-base) var(--db-ease-standard);
  }
  .db-hover:hover { box-shadow: 0 0 0 1px hsl(var(--ring)), 0 8px 30px -8px hsl(var(--ring)); }
  .db-pressable:active { transform: scale(0.98); }
  .db-reveal {
    opacity: 0;
    animation: db-reveal var(--db-duration-base) var(--db-ease-entrance) forwards;
  }
  @keyframes db-reveal {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
  }
  .db-stagger > * {
    opacity: 0;
    animation: db-reveal var(--db-duration-base) var(--db-ease-entrance) forwards;
  }
  .db-stagger > *:nth-child(2) { animation-delay: 60ms; }
  .db-stagger > *:nth-child(3) { animation-delay: 120ms; }
  .db-stagger > *:nth-child(4) { animation-delay: 180ms; }
}

.db-grain { position: relative; isolation: isolate; }
.db-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: no-preference) {
  .db-scroll-progress {
    position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 50;
    transform-origin: 0 50%; background: hsl(var(--primary));
    animation: db-progress auto linear; animation-timeline: scroll(root block);
  }
  @keyframes db-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .db-parallax {
    animation: db-parallax auto linear; animation-timeline: view(); animation-range: cover;
    will-change: transform;
  }
  @keyframes db-parallax { from { transform: translateY(12px); } to { transform: translateY(-12px); } }
  .db-kinetic > * {
    display: inline-block; white-space: pre; opacity: 0;
    animation: db-kinetic var(--db-duration-base) var(--db-ease-entrance) forwards;
  }
  @keyframes db-kinetic { from { opacity: 0; transform: translateY(0.4em); } to { opacity: 1; transform: none; } }
  .db-kinetic > *:nth-child(2) { animation-delay: 80ms; }
  .db-kinetic > *:nth-child(3) { animation-delay: 160ms; }
  .db-kinetic > *:nth-child(4) { animation-delay: 240ms; }
  .db-kinetic > *:nth-child(5) { animation-delay: 320ms; }
}