:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #050505;
  color: #f5f5f5;
}

@font-face {
  font-family: "Thermal Thin Headline";
  src: url("./assets/fonts/Thermal-Thin-Headline.ttf") format("truetype");
  font-weight: 400;
  font-display: block;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html,
body,
#viewer {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #050505;
}

button {
  appearance: none;
  border: 0;
  color: inherit;
  font: inherit;
}

#stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: #050505;
  cursor: none;
}

#page {
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  user-select: none;
  background: #050505;
}

#effects {
  position: absolute;
  z-index: 2;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  overflow: hidden;
}

#session-timer-frame {
  position: absolute;
  z-index: 4;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#session-timer {
  --remaining-angle: 360deg;
  position: absolute;
  top: 7%;
  right: 2.4%;
  width: clamp(24px, 3vw, 42px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #fff 0deg var(--remaining-angle),
    transparent var(--remaining-angle) 360deg
  );
}

body[data-page="9"] #session-timer-frame,
body[data-page="12"] #session-timer-frame,
body[data-page="14"] #session-timer-frame,
body[data-page="16"] #session-timer-frame,
body[data-page="23"] #session-timer-frame {
  display: none;
}

body[data-page="9"] #page,
body[data-page="16"] #page,
body[data-page="23"] #page {
  object-fit: cover;
}

body[data-page="9"] #effects,
body[data-page="16"] #effects,
body[data-page="23"] #effects {
  width: 100vw;
  height: 100vh;
}

.click-zone {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  width: 34vw;
  pointer-events: auto;
}

#click-left {
  left: 0;
}

#click-right {
  right: 0;
}

#chrome {
  position: fixed;
  z-index: 10;
  left: 50%;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: rgba(8, 8, 8, 0.72);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.34);
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
  transition: opacity 160ms ease, transform 160ms ease;
  backdrop-filter: blur(18px);
}

body.show-ui #chrome,
#chrome:focus-within {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

#chrome button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.09);
  cursor: pointer;
}

#chrome button:hover,
#chrome button:focus-visible {
  background: rgba(255, 255, 255, 0.17);
  outline: none;
}

#counter {
  min-width: 54px;
  padding: 0 7px;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  color: rgba(255, 255, 255, 0.72);
}

.spotlight {
  position: absolute;
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 999px;
  box-shadow: 0 0 0 999vmax rgba(0, 0, 0, 0.28), 0 0 38px rgba(255, 255, 255, 0.32);
  opacity: 0;
  transform: scale(0.96);
  animation: spotlight-in var(--duration, 1200ms) ease forwards;
}

.scanline {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
  opacity: 0;
  animation: scan var(--duration, 4200ms) ease-in-out forwards;
}

.marker {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  opacity: 0;
  animation: ping var(--duration, 1800ms) ease-out forwards;
}

.media-layer {
  position: absolute;
  overflow: hidden;
  background: #000;
  opacity: 0;
  animation: media-in 480ms ease forwards;
}

.media-layer video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.image-sequence {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.random-band {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.random-band.is-visible {
  opacity: 1;
}

.image-overlay {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.image-overlay.classroom-clock {
  z-index: 4;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.26));
}

.transform-disc-stage {
  position: absolute;
  overflow: visible;
  pointer-events: none;
  transform-style: preserve-3d;
}

.transform-disc {
  position: absolute;
  z-index: 5;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  cursor: grab !important;
  pointer-events: auto;
  transform-origin: 50% 50%;
  touch-action: none;
}

.transform-disc:active {
  cursor: grabbing !important;
}

.transform-disc.is-selected {
  outline: 2px solid rgba(255, 255, 255, 0.76);
  outline-offset: 6px;
}

.transform-timer-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  border-radius: 50%;
  pointer-events: none;
}

.transform-timer-full,
.transform-timer-sector {
  fill: rgba(255, 28, 13, 0.88);
  filter: drop-shadow(0 0 12px rgba(255, 28, 13, 0.25));
}

.transform-timer-sector {
  transition: d 180ms linear;
}

.transform-panel {
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 8;
  width: 178px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(6, 6, 6, 0.72);
  color: rgba(255, 255, 255, 0.92);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 11px;
  line-height: 1;
  cursor: default !important;
  pointer-events: auto;
  backdrop-filter: blur(10px);
}

.transform-panel-title {
  margin-bottom: 8px;
  color: #ff8f69;
  font-size: 12px;
}

.transform-panel label {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.transform-panel input {
  width: 100%;
  min-width: 0;
  padding: 4px 5px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: text !important;
  font: inherit;
}

.transform-panel-hint {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.58);
}

.transform-panel-reset {
  width: 100%;
  margin-top: 9px;
  padding: 6px 7px;
  border: 1px solid rgba(255, 143, 105, 0.45);
  border-radius: 5px;
  background: rgba(255, 28, 13, 0.16);
  color: #ffb199;
  cursor: pointer !important;
  font: inherit;
}

.transform-panel-reset:hover,
.transform-panel-reset:focus-visible {
  background: rgba(255, 28, 13, 0.28);
  outline: none;
}

.interactive-embed {
  position: absolute;
  border: 0;
  background: transparent;
  opacity: 0;
  pointer-events: none;
}

.interactive-embed.is-loaded {
  opacity: 1;
}

.count-up-label {
  position: absolute;
  color: #d8ca00;
  font-family: "Thermal Thin Headline", ui-serif, Georgia, serif;
  font-size: clamp(24px, 4.15vw, 80px);
  font-weight: 400;
  font-optical-sizing: none;
  font-synthesis: none;
  letter-spacing: 0;
  line-height: clamp(21px, 3.65vw, 70px);
  pointer-events: none;
  white-space: nowrap;
}

.count-up-label.count-up-red {
  color: #ff1c0d;
}

.count-up-value,
.count-up-suffix {
  display: block;
}

.slide-label {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #f4f4f4;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(10px, 1.18vw, 32px);
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.08;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

.slide-label span {
  display: block;
}

.live-timer {
  position: absolute;
  display: grid;
  place-items: center;
}

.live-timer-dial {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.live-timer-sector {
  fill: rgba(255, 28, 13, 0.9);
  filter: drop-shadow(0 0 8px rgba(255, 28, 13, 0.38));
}

.live-timer-edge {
  stroke: #ff1c0d;
  stroke-width: 1.7;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px rgba(255, 28, 13, 0.65));
}

.live-timer-center-cutout {
  fill: #050505;
  stroke: rgba(255, 28, 13, 0.65);
  stroke-width: 0.9;
}

.live-timer.is-finished .live-timer-center-cutout {
  animation: timer-pulse 900ms ease-in-out infinite alternate;
}

.clock-bars-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.clock-bar {
  will-change: transform;
}

.clock-bar-line {
  stroke: #fff;
  stroke-linecap: square;
}

.clock-center {
  fill: #fff;
}

.clock-second-tip {
  fill: #fff;
}

.hidden {
  display: none;
}

@keyframes spotlight-in {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  18%,
  78% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.02);
  }
}

@keyframes scan {
  0% {
    top: 10%;
    opacity: 0;
  }
  12%,
  82% {
    opacity: 0.8;
  }
  100% {
    top: 88%;
    opacity: 0;
  }
}

@keyframes ping {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(3.2);
  }
}

@keyframes media-in {
  to {
    opacity: 1;
  }
}

@keyframes timer-pulse {
  to {
    opacity: 0.45;
  }
}