@font-face {
  font-family: "Darumadrop One";
  src: url(assets/fonts/darumadrop-latin.woff2) format("woff2");
  font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Darumadrop One";
  src: url(assets/fonts/darumadrop-latin-ext.woff2) format("woff2");
  font-display: block;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Jua";
  src: url(assets/fonts/jua-latin.woff2) format("woff2");
  font-display: block;
}
@font-face {
  font-family: "Jua Extras";
  src: url(assets/fonts/jua-extras.woff2) format("woff2");
  font-display: block;
  unicode-range: U+60, U+A1-AC, U+AE-17E, U+18F, U+192, U+1CD-1CE, U+1D4, U+218-21B, U+237, U+259, U+2C6-2CC, U+2D8-2DD, U+1E9E, U+1EA0-1EF9, U+2010, U+2012-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+20B9, U+2122, U+2212, U+2248, U+2260, U+2264-2265;
}

:root {
  --yellow: #ffd059;
  --butter: #ffe382;
  --orange-deep: #ed5615;
  --display: "Darumadrop One", "Jua Extras", "Jua", ui-rounded, system-ui, sans-serif;
  --body: "Jua", "Jua Extras", ui-rounded, system-ui, sans-serif;
  --shadow: 0 4px 18px rgba(90, 20, 0, .45);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: #e8581a; color: #fff; font-family: var(--body); overflow: hidden; -webkit-font-smoothing: antialiased; }
body.idle { cursor: none; }

#bg {
  position: fixed; inset: -4%;
  background: url(assets/img/daven-hero-bg.webp) center / cover no-repeat;
  animation: drift 80s ease-in-out infinite alternate;
}
#bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(90% 80% at 50% 45%, rgba(110, 30, 0, .1), rgba(110, 30, 0, .5));
}
@keyframes drift { from { transform: scale(1.02); } to { transform: scale(1.1) translate(-1.5%, 1%); } }
#bushes { position: fixed; left: 0; bottom: 0; width: 100%; height: auto; pointer-events: none; }

/* everything is laid out on a 1920x1080 stage that scales to the screen */
#stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; }

.frame i { position: absolute; background: var(--yellow); border-radius: 3px; }
.frame .t { left: 40px; right: 40px; top: 22px; height: 4px; }
.frame .b { left: 40px; right: 40px; bottom: 22px; height: 4px; }
.frame .l { top: 40px; bottom: 40px; left: 22px; width: 4px; }
.frame .r { top: 40px; bottom: 40px; right: 22px; width: 4px; }

.logo { position: absolute; left: 50%; top: 70px; height: 190px; transform: translateX(-50%); filter: drop-shadow(var(--shadow)); }

.center { position: absolute; left: 0; right: 0; top: 280px; bottom: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.digits { display: flex; align-items: baseline; gap: 34px; }
.unit { display: flex; align-items: baseline; gap: 10px; }
.num { font-family: var(--display); font-size: 330px; line-height: .8; text-shadow: 0 10px 0 var(--orange-deep), 0 22px 50px rgba(90, 20, 0, .45); }
.num span { display: inline-block; width: .6em; text-align: center; }
.u { font-family: var(--display); font-size: 64px; color: var(--butter); text-shadow: var(--shadow); }
.digits.final { animation: thump 1s ease-in-out infinite; }
.digits.final .num { color: var(--butter); }
@keyframes thump { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.04); } }
.caption { font-family: var(--display); font-size: 84px; color: var(--butter); margin-top: 56px; text-shadow: var(--shadow); }

/* small marquee of what's going on now */
.marquee {
  position: absolute; left: 70px; right: 70px; bottom: 48px; height: 44px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee[hidden] { display: none; }
.track { position: absolute; left: 0; top: 0; height: 100%; display: flex; align-items: center; white-space: nowrap; will-change: transform; }
.track span { font-size: 28px; line-height: 44px; color: #fff; text-shadow: 0 2px 6px rgba(70, 20, 0, .7); }
.track span::after { content: "·"; margin: 0 18px; color: var(--butter); }
.track .tag { color: var(--butter); text-transform: lowercase; }
.track .tag::after { content: ""; margin: 0 14px; }

#confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; }
.sim { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); background: rgba(60, 20, 0, .6); font: 15px ui-monospace, monospace; padding: 2px 12px; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) { #bg, .digits.final { animation: none; } }