/* Dee Spencer — static recreation of the Claude Design handoff.
   Base reset, fonts and keyframes. All component styling is inline
   (faithful to the source); app.js wires hover/focus + interactions. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
::placeholder { color: rgba(22, 18, 16, 0.4); }

/* Animations used across pages (home intro, marquee, track booth, lightbox, bio) */
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes letterPop {
  0% { opacity: 0; transform: translateY(28px) scale(0.7); }
  60% { transform: translateY(-4px) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes introEq { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }
@keyframes introFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes eqBounce { 0%, 100% { transform: scaleY(0.22); } 50% { transform: scaleY(1); } }
@keyframes boothToastIn { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lbZoom { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
@keyframes lbBar { from { width: 0; } to { width: 100vw; } }

@media (prefers-reduced-motion: reduce) {
  .dee-marquee { animation: none !important; }
}