/* Hand-written overrides on top of the Tailwind Play CDN config (see templates/partials/head.html). */
html, body { margin: 0; padding: 0; background: #131313; }
body { overscroll-behavior: none; }
::-webkit-scrollbar { display: none; }
.scrollbar-none { scrollbar-width: none; }
html { scroll-behavior: smooth; scroll-padding-top: 7.5rem; }

/* DESIGN.md: 0px radius everywhere except the deliberate circles (dots, play buttons) */
button, input, select, textarea, img, video, article, section > div { border-radius: 0; }
input, select, textarea { border-radius: 0; -webkit-appearance: none; appearance: none; }
select { background-image: none; }

/* Focus rings: stark 1px white or gold, no diffusion */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 1px solid #f8f8f8; outline-offset: 2px;
}

/* Disclosure marquee strip */
.marquee-track { display: inline-flex; align-items: center; animation: marquee 60s linear infinite; will-change: transform; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee:hover .marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* Lightbox */
#lightbox.is-open { display: flex; }

/* Player state */
[data-player].is-playing [data-play] .material-symbols-outlined::before { content: ""; }
[data-player].is-playing > div.relative > [data-play] { opacity: 0; }
[data-player].is-playing > div.relative:hover > [data-play] { opacity: 1; }
video { background: #0e0e0e; }

/* Material symbols sizing */
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; }

/* Print: the comp card sheet only */
@media print {
  body { background: #fff; color: #000; }
  header, footer, .marquee, #lightbox, #story, #portfolio, #film, section#top, #contact { display: none !important; }
  #stats { padding: 0; }
  #stats * { color: #000 !important; background: #fff !important; border-color: #000 !important; }
}