/* Fonts are bundled in ./fonts/ and referenced relatively: @font-face URLs
 * resolve against this stylesheet, so the package renders identically on an
 * air-gapped playout box — no network at render time. Licence in fonts/. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;          /* variable axis — one file covers every weight */
  font-display: block;           /* block, not swap: never flash a fallback on air */
  src: url('./fonts/Inter-Variable.woff2') format('woff2-variations');
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* The graphic's own root. `position: absolute; inset: 0` fills whatever box the
 * renderer hands us: in an iframe mount that is the frame, and inside a shadow
 * root or a positioned container it is that container. `position: fixed` would
 * escape to the browser viewport in the second case. The package never styles
 * `body` — the renderer owns the document, not the graphic. */
.countdown-root {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.countdown {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  filter: blur(8px);
  font-family: 'Inter', system-ui, sans-serif;
  text-align: center;
}

.countdown.visible {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  filter: blur(0);
  transition:
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.5s ease,
    filter 0.5s ease;
}

.countdown.out {
  transform: translate(-50%, -50%) scale(0.8);
  opacity: 0;
  filter: blur(8px);
  transition:
    transform 0.5s cubic-bezier(0.76, 0, 0.24, 1),
    opacity 0.4s ease,
    filter 0.4s ease;
}

.countdown-card {
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 16px;
  padding: 48px 72px;
  box-shadow:
    0 8px 48px rgba(0, 0, 0, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
}

/* Blue accent bar on top */
.countdown-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #2563eb 0%, #60a5fa 50%, #2563eb 100%);
}

.countdown-label {
  font-size: 14px;
  font-weight: 700;
  color: #2563eb;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.countdown-time {
  font-size: 72px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
}

.countdown-mins,
.countdown-secs {
  display: inline-block;
  min-width: 1.1ch;
  text-align: center;
}

.countdown-sep {
  display: inline-block;
  padding: 0 0.05em;
}

/* Pulse animation for last 10 seconds */
.countdown.urgent .countdown-time {
  animation: urgentPulse 1s ease infinite;
  color: #dc2626;
}

@keyframes urgentPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* Digit swap: old slides up and fades, new slides in from below */
.countdown-mins.tick,
.countdown-secs.tick {
  animation: digitSwap 0.36s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes digitSwap {
  0%   { transform: translateY(0.55em); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}