@font-face {
  font-family: "Pixel Geist";
  src: url("/fonts/GeistPixel-Square.woff2") format("woff2");
  font-display: swap;
}

:root {
  color-scheme: dark;
  background: #000;
  color: #fff;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background: #000;
  color: #fff;
  font-family: "Pixel Geist", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0;
  overflow: hidden;
}

.countdown-shell {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 4vh, 42px);
  padding: 16px;
  transform: translateY(-4vh);
}

.blink-photo {
  width: min(44vw, 420px);
  max-height: 38svh;
  aspect-ratio: 1 / 1;
  position: relative;
}

.blink-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.blink-open {
  opacity: 1;
}

.blink-closed {
  opacity: 0;
  transition: opacity var(--blink-open-ms, 90ms) cubic-bezier(0.18, 0.82, 0.28, 1);
}

body.blink-closing .blink-closed {
  opacity: 0.76;
  transition-duration: var(--blink-close-ms, 44ms);
  transition-timing-function: cubic-bezier(0.12, 0, 0.2, 1);
}

body.blink-shut .blink-closed {
  opacity: 1;
  transition-duration: 18ms;
}

body.blink-opening .blink-closed {
  opacity: 0;
  transition-duration: var(--blink-open-ms, 92ms);
  transition-timing-function: cubic-bezier(0.18, 0.82, 0.28, 1);
}

.timer-panel {
  color: #fff;
  font-size: clamp(2.7rem, 13vw, 9rem);
  line-height: 0.9;
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.status-row {
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.is-complete {
  color: #fff;
}

.secret-image {
  position: fixed;
  inset: 0;
  z-index: 10;
  width: 100vw;
  height: 100svh;
  object-fit: contain;
  object-position: center;
  background: #000;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

body.secret-revealed .countdown-shell {
  opacity: 0;
}

body.secret-revealed .secret-image {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 420px) {
  .blink-photo {
    width: min(72vw, 300px);
    max-height: 34svh;
  }

  .timer-panel {
    font-size: 21vw;
  }
}