@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('fonts/outfit-latin.woff2') format('woff2');
}

:root {
  /* Panel look: overridden at runtime from config.json */
  --panel-bg: rgba(9, 13, 24, 0.48);
  --panel-bg-solid: rgba(9, 13, 24, 0.72);
  --panel-blur: 24px;
  --panel-saturate: 1.25;
  --panel-border: 1px solid rgba(255, 255, 255, 0.16);
  --text: #f7f8fb;
  --track: rgba(255, 255, 255, 0.18);
  --fill: #f7f8fb;
  --font: 'Outfit';
  --phase-fade: 3s;
  --scene-fade: 5s;
  --kb-scale: 1.08;
  --kb-duration: 90s;

  /* One design unit = 1 reference pixel. Landscape reference is 1920x1080. */
  --u: min(calc(100vw / 1920), calc(100vh / 1080));

  /* Landscape reference sizes (px @ 1920x1080) */
  --top: 56;
  --side: 0;
  --pad-y: 34;
  --pad-x: 72;
  --radius: 44;
  --stack-gap: 22;
  --label: 44;
  /* Number sizes per unit; overridable from config.json -> numberSizes.landscape */
  --n-weeks: var(--nl-weeks, 260);
  --n-days: var(--nl-days, 205);
  --n-hours: var(--nl-hours, 165);
  --n-minutes: var(--nl-minutes, 165);
  --n-seconds: var(--nl-seconds, 105);
  --unit-label: 38;
  --unit-gap: 10;
  --gap-big: 68;
  --gap-small: 68;
  --row-gap: 0;
  --pct: 40;
  --bar: 10;
  --btn: 26;
}

/* Portrait reference is 390x844 */
html[data-layout="portrait"] {
  --u: min(calc(100vw / 390), calc(100vh / 844));
  --top: 52;
  --side: 18;
  --pad-y: 24;
  --pad-x: 22;
  --radius: 26;
  --stack-gap: 14;
  --label: 18;
  /* config.json -> numberSizes.portrait */
  --n-weeks: var(--np-weeks, 128);
  --n-days: var(--np-days, 100);
  --n-hours: var(--np-hours, 72);
  --n-minutes: var(--np-minutes, 72);
  --n-seconds: var(--np-seconds, 46);
  --unit-label: 14;
  --unit-gap: 6;
  --gap-big: 44;
  --gap-small: 24;
  --row-gap: 14;
  --pct: 20;
  --bar: 6;
  --btn: 12;
}

@supports (height: 100dvh) {
  :root { --u: min(calc(100vw / 1920), calc(100dvh / 1080)); }
  html[data-layout="portrait"] { --u: min(calc(100vw / 390), calc(100dvh / 844)); }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #0a1228;
  color: var(--text);
  font-family: var(--font), system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

body.cursor-hidden, body.cursor-hidden * { cursor: none !important; }

/* ---------- Scenes ---------- */

#scenes { position: fixed; inset: 0; overflow: hidden; }

.scene {
  position: absolute;
  inset: 0;
  opacity: 1;
  transition: opacity var(--scene-fade) ease-in-out;
}
.scene.entering { opacity: 0; }

.kb {
  position: absolute;
  inset: 0;
  transform-origin: center;
  will-change: transform;
}
html.kenburns .kb { animation: kb var(--kb-duration) ease-in-out infinite alternate; }

@keyframes kb {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(var(--kb-scale)) translate(-1.5%, -1%); }
}

@media (prefers-reduced-motion: reduce) {
  html.kenburns .kb { animation: none; }
}

.kb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 0;
  transition: opacity var(--phase-fade) linear;
}

/* ---------- Panel ---------- */

.stage {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: calc(var(--top) * var(--u)) calc(var(--side) * var(--u)) 0;
  pointer-events: none;
}

.panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--stack-gap) * var(--u));
  padding: calc(var(--pad-y) * var(--u)) calc(var(--pad-x) * var(--u));
  border-radius: calc(var(--radius) * var(--u));
  background: var(--panel-bg-solid);
  border: var(--panel-border);
  box-shadow: 0 calc(24 * var(--u)) calc(80 * var(--u)) rgba(0, 0, 0, 0.28);
  color: var(--text);
}
html[data-layout="portrait"] .panel { width: 100%; }

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .panel {
    background: var(--panel-bg);
    -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(var(--panel-saturate));
    backdrop-filter: blur(var(--panel-blur)) saturate(var(--panel-saturate));
  }
}

.label {
  font-size: calc(var(--label) * var(--u));
  font-weight: 500;
  letter-spacing: 0.35em;
  padding-left: 0.35em; /* balance trailing letter-spacing so it centres */
  opacity: 0.9;
  line-height: 1.1;
  text-transform: uppercase;
}
.label:empty { display: none; }

.digits {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: calc(var(--gap-big) * var(--u));
}
/* Landscape: both rows collapse into one flex row of five units */
.row { display: contents; }

html[data-layout="portrait"] .digits {
  flex-direction: column;
  align-items: center;
  gap: calc(var(--row-gap) * var(--u));
}
html[data-layout="portrait"] .row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
html[data-layout="portrait"] .row-big   { gap: calc(var(--gap-big) * var(--u)); }
html[data-layout="portrait"] .row-small { gap: calc(var(--gap-small) * var(--u)); }

.unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--unit-gap) * var(--u));
}

.num {
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
#v-weeks   { font-size: calc(var(--n-weeks) * var(--u)); }
#v-days    { font-size: calc(var(--n-days) * var(--u)); }
#v-hours   { font-size: calc(var(--n-hours) * var(--u)); }
#v-minutes { font-size: calc(var(--n-minutes) * var(--u)); }
#v-seconds { font-size: calc(var(--n-seconds) * var(--u)); }

.ulabel {
  font-size: calc(var(--unit-label) * var(--u));
  font-weight: 500;
  letter-spacing: 0.18em;
  padding-left: 0.18em;
  opacity: 0.85;
  line-height: 1.1;
}

.progress {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: calc(var(--stack-gap) * var(--u));
}
.track {
  flex: 1;
  position: relative;
  height: calc(var(--bar) * var(--u));
  border-radius: calc(var(--bar) * var(--u));
  background: var(--track);
  overflow: hidden;
}
.fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  border-radius: inherit;
  background: var(--fill);
}
.pct {
  font-size: calc(var(--pct) * var(--u));
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* ---------- Full screen button ---------- */

.fs-btn {
  --b: max(16px, calc(var(--btn) * var(--u)));
  position: fixed;
  right: max(var(--b), env(safe-area-inset-right));
  bottom: max(var(--b), env(safe-area-inset-bottom));
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.75em 1.15em;
  min-height: 48px;
  border-radius: 999px;
  border: var(--panel-border);
  background: var(--panel-bg-solid);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: var(--text);
  font: 500 var(--b)/1 var(--font), system-ui, sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  transition: opacity 0.4s ease, transform 0.2s ease;
}
.fs-btn[hidden] { display: none; }
.fs-btn:hover { transform: scale(1.04); }
.fs-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.fs-btn svg {
  width: 1.25em; height: 1.25em;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}