:root {
  --bg: #090909;
  --fg: #f2efe8;
  --soft: rgba(242, 239, 232, 0.44);
  --faint: rgba(242, 239, 232, 0.18);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  user-select: none;
}

.stage {
  width: 100vw;
  height: 100vh;
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  align-items: center;
  justify-items: center;
  padding: clamp(34px, 5vh, 70px) clamp(24px, 5vw, 90px);
}

.date-block {
  align-self: start;
  text-align: center;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0.19em;
  color: rgba(242, 239, 232, 0.54);
  text-transform: uppercase;
  font-size: clamp(11px, 0.8vw, 15px);
  line-height: 1.9;
}
.date-block .day { color: rgba(242, 239, 232, 0.76); }

.hero {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 26vh;
}

.amount {
  display: flex;
  align-items: baseline;
  justify-content: center;
  white-space: nowrap;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  font-size: clamp(62px, 10.9vw, 210px);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  text-shadow: 0 0 36px rgba(255,255,255,0.025);
}

.amount-slot {
  position: relative;
  display: inline-block;
  min-width: 0.54em;
  height: 1.02em;
  overflow: hidden;
  vertical-align: bottom;
}
.amount-slot.symbol { min-width: 0.56em; }
.amount-slot.punct { min-width: 0.25em; opacity: 0.92; }
.amount-char {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  text-align: center;
  will-change: transform, opacity;
}
.amount-slot.static .amount-char { position: relative; }

.amount-slot.sale .old { animation: digitOldDown 820ms cubic-bezier(.2,.72,.2,1) forwards; }
.amount-slot.sale .new { animation: digitNewDown 820ms cubic-bezier(.2,.72,.2,1) forwards; }
.amount-slot.reversal .old { animation: digitOldUp 820ms cubic-bezier(.2,.72,.2,1) forwards; }
.amount-slot.reversal .new { animation: digitNewUp 820ms cubic-bezier(.2,.72,.2,1) forwards; }

@keyframes digitOldDown { from { transform: translateY(0); opacity: 1; } to { transform: translateY(104%); opacity: .08; } }
@keyframes digitNewDown { from { transform: translateY(-104%); opacity: .08; } to { transform: translateY(0); opacity: 1; } }
@keyframes digitOldUp { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-104%); opacity: .08; } }
@keyframes digitNewUp { from { transform: translateY(104%); opacity: .08; } to { transform: translateY(0); opacity: 1; } }

.delta {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -190px);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(16px, 1.7vw, 31px);
  letter-spacing: .03em;
  font-variant-numeric: tabular-nums;
  color: rgba(242, 239, 232, 0.67);
  opacity: 0;
  filter: blur(2px);
  pointer-events: none;
  white-space: nowrap;
}
.delta.play-sale { animation: deltaSale 1550ms cubic-bezier(.16,.84,.25,1) forwards; }
.delta.play-reversal { animation: deltaReversal 1550ms cubic-bezier(.16,.84,.25,1) forwards; }
@keyframes deltaSale {
  0% { opacity: 0; transform: translate(-50%, -180px) scale(.98); filter: blur(4px); }
  20% { opacity: .76; filter: blur(0); }
  68% { opacity: .58; transform: translate(-50%, -68px) scale(1); filter: blur(.2px); }
  100% { opacity: 0; transform: translate(-50%, 4px) scale(.96); filter: blur(7px); }
}
@keyframes deltaReversal {
  0% { opacity: 0; transform: translate(-50%, 26px) scale(.96); filter: blur(5px); }
  20% { opacity: .72; filter: blur(0); }
  70% { opacity: .56; transform: translate(-50%, -76px) scale(1); filter: blur(.2px); }
  100% { opacity: 0; transform: translate(-50%, -178px) scale(.98); filter: blur(7px); }
}

.quote-wrap {
  align-self: end;
  width: min(100%, 1050px);
  min-height: 90px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: clamp(4px, 1vh, 14px);
}
.quote {
  margin: 0;
  color: var(--soft);
  text-align: center;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: clamp(17px, 1.45vw, 28px);
  line-height: 1.45;
  letter-spacing: .005em;
  max-width: 980px;
  transition: opacity 900ms ease, transform 900ms ease, filter 900ms ease;
}
.quote.out { opacity: 0; transform: translateY(-10px); filter: blur(2px); }
.quote.in { opacity: 1; transform: translateY(0); filter: blur(0); }

.fullscreen-btn {
  position: fixed;
  right: 22px;
  top: 20px;
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.44);
  background: rgba(255,255,255,.02);
  font: 500 11px/1 Inter, ui-sans-serif, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 10px 12px;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .25s ease, border-color .25s ease, background .25s ease;
}
.fullscreen-btn:hover, .fullscreen-btn.visible { opacity: .85; border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.04); }

.offline {
  position: fixed;
  left: 18px;
  bottom: 16px;
  font: 500 10px/1.2 Inter, ui-sans-serif, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.28);
  opacity: 0;
  transition: opacity .5s ease;
}
.offline.show { opacity: 1; }

.target-reached .amount { text-shadow: 0 0 42px rgba(255,255,255,.08); }
.target-reached .quote { color: rgba(242,239,232,.64); }

@media (max-width: 760px) {
  .stage { padding-left: 16px; padding-right: 16px; }
  .amount { font-size: clamp(48px, 13vw, 92px); }
  .date-block { font-size: 10px; }
  .quote { font-size: 16px; padding: 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}