/* ---- "The Sound of Snowflakes" — a winter-night page for Dave's own song ---- */

@font-face {
  font-family: "Special Elite";
  src: url("fonts/SpecialElite.woff2") format("woff2");
  font-display: swap;
}

:root {
  --night:     #0c1a2e;
  --night-2:   #060f1d;
  --frost:     #eef5fd;
  --frost-2:   #cad9ec;
  --frost-dim: rgba(208,224,244,.34);
  --ice:       #8fc4f0;
  --ice-deep:  #4f8fcf;
  --glass:     rgba(225,238,253,.07);
  --glass-edge:rgba(190,216,245,.22);
  --shadow:    rgba(2,8,20,.55);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  color: var(--frost);
  background:
    radial-gradient(125% 90% at 50% -15%, #24456f 0%, var(--night) 52%, var(--night-2) 100%) fixed;
  line-height: 1.55;
  overflow-x: hidden;
}

/* falling snow sits behind everything */
#snow {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}

.page {
  position: relative; z-index: 1;
  max-width: 680px;
  margin: 0 auto;
  padding: clamp(1.8rem, 5vw, 3.4rem) 1.1rem 3rem;
}

/* ---------- Header ---------- */
.song-head { text-align: center; margin-bottom: clamp(1.6rem, 5vw, 2.4rem); }
.song-eyebrow {
  font-family: "Special Elite", "Courier New", monospace;
  letter-spacing: .28em; text-transform: uppercase;
  font-size: .72rem; color: var(--ice);
  margin: 0 0 .7rem;
}
.song-title {
  font-weight: 600;
  font-size: clamp(1.9rem, 8.5vw, 3.1rem);
  letter-spacing: .01em;
  margin: 0;
  color: var(--frost);
  text-wrap: balance;
  text-shadow: 0 2px 20px rgba(70,130,200,.35);
}
.song-by {
  font-style: italic; color: var(--frost-2);
  font-size: clamp(.95rem, 3.4vw, 1.08rem);
  margin: .7rem 0 0;
}
.song-by .yrs { white-space: nowrap; }

/* ---------- Player bar (frosted glass) ---------- */
.player {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center; gap: .9rem;
  margin: 0 auto;
  padding: .85rem 1rem;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(180deg, rgba(143,196,240,.16), rgba(143,196,240,.06));
  border: 1px solid var(--glass-edge);
  border-bottom: none;
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
}
.snow-key {
  width: 48px; height: 48px; border: none; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #bfe0fb, var(--ice) 55%, var(--ice-deep));
  color: #082038; font-size: 1.05rem; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 4px 12px rgba(20,60,110,.5), inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform .06s ease, box-shadow .06s ease, filter .12s ease;
}
.snow-key:hover { filter: brightness(1.06); }
.snow-key:active { transform: translateY(2px); }
.snow-key .g { line-height: 1; pointer-events: none; }
.player-meta { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.player-song {
  font-family: "Special Elite", "Courier New", monospace;
  font-size: 1.02rem; color: var(--frost);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.player-note { font-size: .78rem; font-style: italic; color: var(--frost-2); }
.player-time {
  font-family: "Special Elite", "Courier New", monospace;
  font-size: .82rem; letter-spacing: .02em; color: var(--frost-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.player-time .slash { opacity: .5; }

/* ---------- Lyrics — the feature ---------- */
.lyrics {
  position: relative;
  list-style: none; margin: 0 auto;
  padding: 1.6rem 1.5rem;
  border-radius: 0 0 14px 14px;
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  border-top: none;
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  max-height: min(58vh, 27rem);
  overflow-y: auto;
  text-align: center;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 2rem, #000 calc(100% - 2rem), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 2rem, #000 calc(100% - 2rem), transparent 100%);
  scrollbar-width: thin;
  scrollbar-color: rgba(143,196,240,.4) transparent;
}
.lyric {
  padding: .55rem .4rem;
  color: var(--frost-dim);
  font-size: clamp(1.05rem, 4vw, 1.28rem);
  line-height: 1.5;
  cursor: pointer;
  transition: color .4s ease, text-shadow .4s ease, transform .4s ease;
}
.lyric:hover { color: var(--frost-2); }
.lyric.lit {
  color: #ffffff;
  text-shadow: 0 0 22px rgba(143,196,240,.7), 0 0 4px rgba(255,255,255,.5);
  transform: scale(1.015);
}

/* ---------- Download + back ---------- */
.song-actions { text-align: center; margin-top: 2.2rem; }
.dl-btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: "Special Elite", "Courier New", monospace;
  font-size: 1rem; letter-spacing: .02em;
  color: #082038;
  background: linear-gradient(180deg, #bfe0fb 0%, var(--ice) 100%);
  border: 1px solid var(--ice-deep);
  padding: .8rem 1.5rem; border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(20,60,110,.45), inset 0 1px 0 rgba(255,255,255,.55);
  transition: transform .07s ease, box-shadow .07s ease, filter .12s ease;
}
.dl-btn:hover { filter: brightness(1.05); }
.dl-btn:active { transform: translateY(2px); }
.dl-ico { font-size: 1.15rem; line-height: 1; }
.dl-note { font-size: .8rem; color: var(--frost-2); font-style: italic; margin-top: .55rem; }

.back-link {
  display: inline-block; margin-top: 2.4rem;
  font-family: "Special Elite", "Courier New", monospace;
  font-size: .82rem; letter-spacing: .08em;
  color: var(--frost-2); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .12s ease, border-color .12s ease;
}
.back-link:hover { color: var(--frost); border-color: var(--ice); }

footer {
  margin-top: 2.2rem; text-align: center;
  font-size: .82rem; color: var(--frost-2); font-style: italic;
}

@media (max-width: 460px) {
  .lyrics { max-height: 62vh; }
}

@media (prefers-reduced-motion: reduce) {
  .lyric { transition: color .01s; transform: none; }
  .lyric.lit { transform: none; }
}