:root {
  --u: min(1vw, 1.3333vh);
  --ink: #ff845e;
  --glow: #ff4a2a;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: #0a1a5c url("/assets/home/bg.webp") center bottom / cover no-repeat;
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", "Arial Hebrew", Arial, "Noto Sans Hebrew", sans-serif;
  overflow: hidden;
}
.stage {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: max(12px, calc((100vh - var(--u) * 75) / 2 + var(--u) * 5.5)) 12px 12px;
}
.counter {
  --h: min(calc(var(--u) * 14.6), calc((100vw - 24px) / (var(--n, 3) * 0.6824 + 0.5923)));
  display: flex;
  justify-content: center;
  align-items: flex-start;
  color: var(--ink);
  transform: translateX(calc(var(--h) * 49 / 233));
  filter: drop-shadow(0 0 calc(var(--u) * 0.18) rgba(235, 30, 40, 0.95))
          drop-shadow(0 0 calc(var(--u) * 0.45) rgba(220, 20, 40, 0.85))
          drop-shadow(0 0 calc(var(--u) * 0.9) rgba(200, 20, 40, 0.45));
}
.unit { display: flex; flex-direction: column; align-items: center; }
.digits { display: flex; gap: calc(var(--h) * 33 / 233); }
.digits svg, .colon { display: block; height: var(--h); width: auto; }
.digits svg { aspect-ratio: 126 / 233; }
.colon {
  aspect-ratio: 16 / 233;
  margin: 0 calc(var(--h) * 53 / 233) 0 calc(var(--h) * 69 / 233);
}
.seg { fill: currentColor; }
.seg.off { display: none; }
.colon { animation: blink 2s steps(1, end) infinite; }
@keyframes blink { 50% { opacity: 0.15; } }
@media (prefers-reduced-motion: reduce) { .colon { animation: none; } }
.label {
  display: block;
  height: auto;
  margin-top: calc(var(--h) * 31 / 233);
}
.days-label { width: calc(var(--h) * 86 / 233); transform: translateX(calc(var(--h) * 6 / 233)); }
.hours-label { width: calc(var(--h) * 106 / 233); transform: translateX(calc(var(--h) * -9.5 / 233)); }
.headline { margin: 0; font-size: inherit; line-height: 0; }
.caption {
  display: block;
  width: calc(var(--u) * 93.9);
  max-width: 100%;
  height: auto;
  margin-top: calc(var(--u) * 5.2);
}
@media (max-aspect-ratio: 3/4) {
  :root { --u: calc((100vw - 24px) / 95); }
  .counter {
    --h: min(calc(var(--u) * 26), calc((100vw - 24px) / (var(--n, 3) * 0.6824 + 0.5923)));
    transform: none;
  }
}
@media (min-aspect-ratio: 2/1) {
  body {
    background-image: linear-gradient(to bottom, rgba(10, 26, 92, 0.95), rgba(10, 26, 92, 0.75) 30%, rgba(10, 26, 92, 0) 60%),
                      url("/assets/home/bg.webp");
  }
}