/* ── BASE ───────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--black);
  color: var(--white);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  cursor: crosshair;
}

/* High-contrast readable type across product, content and utility pages. */
body p,
body li {
  font-size: 15px !important;
}

body :is(
  .top-ticker-item,
  .bottom-ticker-item,
  .section-label,
  .page-hero-label,
  .drop-tagline,
  .drop-formats,
  .story-label,
  .workshop-label,
  .pm-label,
  .pm-formats,
  .spec-key,
  .footer-tagline,
  .footer-socials a,
  .footer-copy,
  .footer-legal
) {
  font-size: 12px !important;
}

body :is(.spec-val, .dl-plugin-desc, .dl-formats) {
  font-size: 14px !important;
}

body :is(button, .buy-btn, .try-btn, .buy-btn-lg, .try-btn-lg, .drop-link) {
  font-size: 13px !important;
}

/* ── TYPE ALIGNMENT ─────────────────────────────────────────────────── */
/* Balanced rag on display headings and centered measures on hero copy so
   multi-line text sits as one coherent block on every page. */
:is(.hero-title, .cs-logo, .page-hero-title, .story-title, .workshop-title, .drop-name, .quote-text) {
  text-wrap: balance;
}
:is(.hero-sub, .cs-tagline, .page-hero-sub, .drop-body, .workshop-sub) {
  text-wrap: pretty;
}
.hero-sub, .cs-tagline, .quote-text {
  margin-left: auto; margin-right: auto;
}

/* ── FOCUS / PRESSED STATES ─────────────────────────────────────────── */
:is(a, button, [role="link"]):focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: 3px;
}
:is(.buy-btn, .try-btn, .buy-btn-lg, .try-btn-lg):active {
  transform: translateY(0);
  transition-duration: .06s;
}

/* ── SCROLLBAR ──────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: var(--pu-low); }

/* ── ANIMATIONS ─────────────────────────────────────────────────────── */
@keyframes fadein  { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes fadein2 { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }
@keyframes fadein3 { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
@keyframes tickerscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes linepulse { 0%,100%{ opacity:.3; } 50%{ opacity:1; } }

/* Slow attention blink — used by the hero ".point" period and pill dot */
@keyframes dotblink {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 16px rgba(77,255,170,0.65)); }
  50%      { opacity: 0.2; filter: drop-shadow(0 0 0 rgba(77,255,170,0)); }
}
@keyframes cuebob { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(6px); } }

/* Smoother, staggered scroll-reveal. Overrides the per-page inline
   `.js-reveal .reveal` rule via the extra `html` in the selector;
   --reveal-delay is set per element by main.js. */
html.js-reveal .reveal {
  transition:
    opacity .7s cubic-bezier(0.22, 1, 0.36, 1),
    transform .7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
}

/* Slow drifting starfield — two layers move in opposite diagonals for parallax */
@keyframes drift-a { from { transform: translate3d(0,0,0); } to { transform: translate3d(-30px,-22px,0); } }
@keyframes drift-b { from { transform: translate3d(0,0,0); } to { transform: translate3d(26px,18px,0); } }

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