@font-face {
  font-family: "Modak";
  src: url("/fonts/modak-latin-400-normal.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Titan One";
  src: url("/fonts/titan-one-latin-400-normal.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Atkinson";
  src: url("/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson";
  src: url("/fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --midnight: #0d2450;
  --night: #123a6b;
  --snow: #eef5f8;
  --candy: #d9252f;
  --candy-deep: #8c1219;
  --bulb: #ffc531;
  --bulb-deep: #a86a00;
  --numerals: "Modak", "Arial Rounded MT Bold", system-ui, sans-serif;
  --display: "Titan One", "Arial Rounded MT Bold", system-ui, sans-serif;
  --body: "Atkinson", system-ui, sans-serif;
  --gutter: clamp(20px, 6vw, 48px);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--midnight);
  color: var(--snow);
  font: 400 1.25rem/1.5 var(--body);
}

h1, h2, p, dl, dd { margin: 0; }

[hidden] { display: none !important; }

:focus-visible { outline: 4px solid var(--bulb); outline-offset: 3px; }

/* The diorama: words are pressed into the snow in front of the tree. */
.scene {
  position: relative;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
}

.scene-art, .scene-bulbs {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.scene-art { object-fit: cover; object-position: 50% 100%; }

.bulb { mix-blend-mode: screen; animation: twinkle 2s steps(1, end) infinite; }

@keyframes twinkle {
  0%, 49% { opacity: 0.8; }
  50%, 100% { opacity: 0; }
}

/* Snow moves at 8 frames a second, like stop-motion shot on twos. */
.snowfall {
  position: absolute;
  inset: -100% 0 0;
  background-image:
    radial-gradient(circle 3px at 20px 30px, #fff 98%, transparent),
    radial-gradient(circle 5px at 110px 90px, #fff 98%, transparent),
    radial-gradient(circle 2px at 170px 170px, #fff 98%, transparent);
  background-size: 210px 210px;
  opacity: 0.8;
  animation: fall 6s steps(48, end) infinite;
}

@keyframes fall { to { transform: translateY(420px); } }

.scene-title {
  position: absolute;
  top: max(24px, env(safe-area-inset-top));
  left: var(--gutter);
  right: var(--gutter);
  text-align: center;
  font-weight: 700;
  font-size: clamp(1.15rem, 4.8vw, 1.6rem);
  line-height: 1.25;
  text-shadow: 0 2px 6px var(--midnight);
}

.scene-copy {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: max(24px, env(safe-area-inset-bottom));
  text-align: center;
}

h1 {
  font: 400 clamp(2.8rem, 13.5vw, 6rem)/1 var(--display);
  color: var(--candy);
  text-shadow: 0 3px 0 #fff;
}

.scene-status {
  margin-top: 12px;
  color: var(--midnight);
  font-weight: 700;
  font-size: clamp(1.5rem, 6.6vw, 2.2rem);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  white-space: pre-line;
}

.stay-awake, .give-link {
  display: inline-block;
  min-height: 52px;
  margin-top: 14px;
  padding: 12px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--candy);
  color: #fff;
  font: 700 1.2rem/1.4 var(--body);
  text-decoration: none;
  box-shadow: 0 5px 0 var(--candy-deep);
  cursor: pointer;
}

.stay-awake:active, .give-link:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--candy-deep); }

.stay-awake[disabled] { background: var(--midnight); box-shadow: none; cursor: default; }

main, .credits {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section { padding-top: 56px; }

h2 {
  font: 400 clamp(2.2rem, 10vw, 3.2rem)/1 var(--display);
  color: var(--bulb);
  margin-bottom: 16px;
}

.facts { margin: 28px 0; }

.facts div { padding: 12px 0; border-top: 2px solid var(--night); }

.facts dt { color: var(--bulb); font-weight: 700; font-size: 1.05rem; }

.facts dd { font-size: 1.4rem; line-height: 1.3; }

.lyrics p { font-size: clamp(1.5rem, 6.6vw, 1.9rem); line-height: 1.4; margin-bottom: 24px; }

.lyrics .chorus { font-weight: 700; color: var(--bulb); }

.credits { padding-top: 48px; padding-bottom: 48px; font-size: 1rem; color: #b9cdde; }

.credits p + p { margin-top: 8px; }

/* The countdown fills the phone, so a street full of them reads as lights. */
.count {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: var(--gutter);
  text-align: center;
  background: var(--candy);
  color: #fff;
}

.count[data-beat="odd"] { background: var(--bulb); color: var(--midnight); }

.count-label, .count-song { font-weight: 700; font-size: clamp(1.5rem, 7vw, 2.4rem); }

.count-number {
  font: 400 min(62vw, 58vh)/0.9 var(--numerals);
  text-shadow: 0 6px 0 var(--candy-deep);
  animation: press 0.375s steps(3, end);
}

.count[data-beat="odd"] .count-number { text-shadow: 0 6px 0 var(--bulb-deep); }

.count[data-sing] .count-number { font-size: min(36vw, 40vh); }

@keyframes press {
  from { transform: scale(1.3, 0.72); }
  to { transform: scale(1, 1); }
}

/* On big screens the diorama stays phone-shaped so the tree is never cropped. */
@media (min-width: 700px) {
  .scene { width: min(100%, 75svh); margin-inline: auto; }
  h1 { font-size: min(6rem, 9.5svh); }
}

@media (prefers-reduced-motion: reduce) {
  .bulb, .snowfall, .count-number { animation: none; }
  .count, .count[data-beat="odd"] { background: var(--midnight); color: var(--snow); }
  .count-number, .count[data-beat="odd"] .count-number { text-shadow: none; }
}