/* styles/base.css — Element defaults, resets, keyframes and font faces.
   Extracted from the former single-file monolith. */

html {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      scroll-behavior: smooth;
      scroll-padding-top: 80px;
    }

body {
      min-height: 100dvh;
      font-family: var(--font-body);
      font-size: var(--text-base);
      color: var(--color-text);
      background-color: var(--color-bg);
      line-height: 1.7;
      overflow-x: hidden;
    }

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }

ul[role="list"], ol[role="list"] { list-style: none; }

h1,h2,h3,h4,h5,h6 { text-wrap: balance; line-height: 1.15; font-family: var(--font-display); }

p, li, figcaption { text-wrap: pretty; max-width: 72ch; overflow-wrap: break-word; }

a { color: inherit; text-decoration: none; }

button { cursor: pointer; background: none; border: none; font: inherit; color: inherit; }

::selection { background: var(--color-gold-dim); color: var(--color-gold-light); }

@keyframes scrollBounce {
      0%, 100% { transform: translateX(-50%) translateY(0); }
      50% { transform: translateX(-50%) translateY(8px); }
    }

@keyframes glowPulse {
      0%, 100% { transform: scale(1);   opacity: 0.7; }
      50%       { transform: scale(1.1); opacity: 1;   }
    }

@keyframes introFadeUp {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: translateY(0);    }
    }

@keyframes ringPulse {
      0%   { transform: scale(1);    opacity: 0.6; }
      100% { transform: scale(1.18); opacity: 0; }
    }

@keyframes bannerFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@keyframes soundBar {
      from { transform: scaleY(0.4); }
      to   { transform: scaleY(1); }
    }

@keyframes ppOverlayIn { from { opacity: 0; } to { opacity: 1; } }

@keyframes ppPanelIn {
      from { transform: translateY(40px); opacity: 0; }
      to   { transform: translateY(0); opacity: 1; }
    }

@keyframes artFloat {
      0%, 100% { transform: scale(1.02) translateY(0); }
      50%       { transform: scale(1.02) translateY(-4px); }
    }

body.player-active { padding-bottom: 76px; }

@keyframes ppGlow { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }