@font-face {
  font-family: 'Literata';
  src: url('/fonts/Literata-Black.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
}

@font-face {
  font-family: 'Literata';
  src: url('/fonts/Literata-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'YoungSerif';
  src: url('/fonts/YoungSerif-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'YoungSerif';
  src: url('/fonts/YoungSerif-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'YoungSerif';
  src: url('/fonts/YoungSerif-MediumItalic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* ── Header: piece pages ──────────────────────── */

header:not(.home-header) a {
  display: inline-block;
  padding: 16px;
}

/* ── Header: homepage ─────────────────────────── */

.home-header {
  display: flex;
  justify-content: center;
  padding: 4vh 0 4vh;
}

#site-logo {
  display: block;
  width: clamp(160px, 30vw, 280px);
  overflow: visible;
}

#site-logo #eight-rainbow,
#site-logo #seconds-rainbow {
  opacity: 0;
  transition: opacity 0.9s ease-in-out;
}

/* ── Keyframes ────────────────────────────────── */

@keyframes logo-bounce {
  0%   { transform: scale(0);    opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  80%  { transform: scale(0.96); }
  100% { transform: scale(1);    opacity: 1; }
}

@keyframes logo-seconds-arrive {
  0%   { opacity: 0; transform: translateY(6px) scale(0.9); }
  100% { opacity: 1; transform: translateY(0)   scale(1); }
}

@keyframes logo-wobble {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(-4deg) scale(1.04); }
  30%  { transform: rotate(3deg)  scale(0.97); }
  45%  { transform: rotate(-2deg) scale(1.02); }
  60%  { transform: rotate(1deg); }
  75%  { transform: rotate(-0.5deg); }
  100% { transform: rotate(0deg); }
}

@keyframes logo-wobble-follow {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(-3deg); }
  50%  { transform: rotate(2deg); }
  75%  { transform: rotate(-1deg); }
  100% { transform: rotate(0deg); }
}

@keyframes logo-breathe {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.05); }
}

@keyframes logo-squash-pop {
  0%   { transform: scaleX(1)    scaleY(1); }
  20%  { transform: scaleX(1.1)  scaleY(0.88); }
  40%  { transform: scaleX(0.92) scaleY(1.12); }
  60%  { transform: scaleX(1.05) scaleY(0.96); }
  80%  { transform: scaleX(0.98) scaleY(1.02); }
  100% { transform: scaleX(1)    scaleY(1); }
}