:root {
  --brand: #003f84;
  --brand-bright: #2f7fe0;
  --ink: #ffffff;
  --ink-dim: rgba(255, 255, 255, 0.62);
  --night: #000000;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--night);
  color: var(--ink);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* Once the schedule runs, the pointer must never sit on top of it. */
body.is-running,
body.is-running * {
  cursor: none !important;
}

#keepalive {
  position: fixed;
  left: 0;
  top: 0;
  width: 2px;
  height: 2px;
  opacity: 0.01;
  pointer-events: none;
}

/* ---------- Schedule ---------- */

#stage {
  position: fixed;
  inset: 0;
  background: var(--night);
  opacity: 0;
  transition: opacity 900ms ease;
}

body.is-running #stage {
  opacity: 1;
}

.frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  visibility: hidden;
}

.frame.is-active {
  visibility: visible;
}

/* ---------- Night ---------- */

#night {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--night);
  display: none;
}

body.is-night #night {
  display: block;
}

/* Only appears for a few seconds after a key press, so the screen stays pure black otherwise. */
#night-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6vmin;
  color: rgba(255, 255, 255, 0.35);
  opacity: 0;
  transition: opacity 600ms ease;
  text-align: center;
  white-space: nowrap;
}

#night.show-hint #night-hint {
  opacity: 1;
}

#night-clock {
  font-size: 7vmin;
  font-weight: 300;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

#night-text {
  font-size: 2.2vmin;
  letter-spacing: 0.02em;
}

/* ---------- Splash ---------- */

#splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7vmin;
  padding: 16px;
  background: #00060f;
  transition: opacity 900ms ease, visibility 0s linear 900ms;
}

#splash.is-gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.splash-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 115%, rgba(0, 63, 132, 0.75) 0%, rgba(0, 63, 132, 0) 60%),
    radial-gradient(60% 50% at 50% 40%, rgba(47, 127, 224, 0.10) 0%, rgba(47, 127, 224, 0) 70%),
    #00060f;
}

/* Slow drifting glow so the splash never looks frozen. */
.splash-bg::before,
.splash-bg::after {
  content: "";
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.35;
  will-change: transform;
}

.splash-bg::before {
  left: -25vmax;
  top: -30vmax;
  background: radial-gradient(circle, rgba(0, 63, 132, 0.9), rgba(0, 63, 132, 0) 65%);
  animation: drift-a 26s ease-in-out infinite alternate;
}

.splash-bg::after {
  right: -25vmax;
  bottom: -35vmax;
  background: radial-gradient(circle, rgba(47, 127, 224, 0.55), rgba(47, 127, 224, 0) 65%);
  animation: drift-b 32s ease-in-out infinite alternate;
}

@keyframes drift-a {
  to { transform: translate(18vmax, 14vmax) scale(1.15); }
}

@keyframes drift-b {
  to { transform: translate(-16vmax, -12vmax) scale(1.1); }
}

.logo-wrap {
  position: relative;
  height: min(46vh, 60vw);
  aspect-ratio: 333 / 402;
  transition: transform 900ms var(--ease-out), opacity 700ms ease, filter 900ms ease;
}

.logo {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: var(--ink);
  filter: drop-shadow(0 0 2.5vmin rgba(47, 127, 224, 0.35));
}

/* Bars rise one after another from the baseline. */
.bar {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(0);
  animation: bar-rise 900ms var(--ease-spring) forwards;
}

.bar-1 { animation-delay: 250ms; }
.bar-2 { animation-delay: 400ms; }
.bar-3 { animation-delay: 550ms; }
.bar-4 { animation-delay: 700ms; }

@keyframes bar-rise {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

/* The figure lands on top of the first step. */
.figure {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  opacity: 0;
  transform: translateY(-28%) scale(0.92);
  animation: figure-land 900ms var(--ease-out) 1150ms forwards;
}

@keyframes figure-land {
  0% { opacity: 0; transform: translateY(-28%) scale(0.92); }
  60% { opacity: 1; transform: translateY(2%) scale(1.02, 0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* "IT ACADEMY" letters fade up one by one. */
.wordmark path {
  opacity: 0;
  transform-box: fill-box;
  transform: translateY(40%);
  animation: letter-in 600ms var(--ease-out) forwards;
}

.wordmark path:nth-child(1) { animation-delay: 1500ms; }
.wordmark path:nth-child(2) { animation-delay: 1560ms; }
.wordmark path:nth-child(3) { animation-delay: 1620ms; }
.wordmark path:nth-child(4) { animation-delay: 1680ms; }
.wordmark path:nth-child(5) { animation-delay: 1740ms; }
.wordmark path:nth-child(6) { animation-delay: 1800ms; }
.wordmark path:nth-child(7) { animation-delay: 1860ms; }
.wordmark path:nth-child(8) { animation-delay: 1920ms; }
.wordmark path:nth-child(9) { animation-delay: 1980ms; }

@keyframes letter-in {
  to { opacity: 1; transform: translateY(0); }
}

/* A light sweep across the steps, repeated every few seconds while waiting. */
.shine {
  opacity: 0.0;
  animation: shine 6s ease-in-out 2.3s infinite;
}

@keyframes shine {
  0% { transform: skewX(-18deg) translateX(0); opacity: 0; }
  4% { opacity: 0.7; }
  22% { transform: skewX(-18deg) translateX(560px); opacity: 0.7; }
  23%, 100% { transform: skewX(-18deg) translateX(560px); opacity: 0; }
}

/* ---------- Launch button ---------- */

.launch {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2vmin;
  opacity: 0;
  transform: translateY(2vmin);
  animation: launch-in 800ms var(--ease-out) 2200ms forwards;
}

@keyframes launch-in {
  to { opacity: 1; transform: translateY(0); }
}

.launch-btn {
  display: inline-flex;
  align-items: center;
  gap: 1.6vmin;
  padding: 1.4vmin 3.4vmin 1.4vmin 1.4vmin;
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--brand);
  font: inherit;
  font-size: clamp(16px, 2.6vmin, 40px);
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5), 0 1.5vmin 5vmin rgba(0, 0, 0, 0.45);
  transition: transform 250ms var(--ease-out), box-shadow 250ms ease, background-color 250ms ease;
  animation: pulse 2.8s ease-out 3s infinite;
}

.launch-btn:hover,
.launch-btn:focus-visible {
  transform: scale(1.05);
  outline: none;
}

/* TV remotes move focus with the D-pad: make the focused state unmistakable. */
.launch-btn:focus-visible {
  box-shadow: 0 0 0 0.6vmin #00060f, 0 0 0 1.2vmin var(--brand-bright), 0 1.5vmin 5vmin rgba(0, 0, 0, 0.45);
  animation: none;
}

.launch-btn:active {
  transform: scale(0.97);
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45), 0 1.5vmin 5vmin rgba(0, 0, 0, 0.45); }
  70% { box-shadow: 0 0 0 3vmin rgba(255, 255, 255, 0), 0 1.5vmin 5vmin rgba(0, 0, 0, 0.45); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0 1.5vmin 5vmin rgba(0, 0, 0, 0.45); }
}

.launch-ring {
  width: clamp(32px, 5.4vmin, 80px);
  height: clamp(32px, 5.4vmin, 80px);
  flex: none;
  transform: rotate(-90deg);
}

.ring-track {
  fill: var(--brand);
}

.ring-progress {
  fill: none;
  stroke: var(--brand-bright);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
}

.ring-play {
  fill: var(--ink);
  transform: rotate(90deg);
  transform-origin: 22px 22px;
}

/* Auto-start countdown: the ring fills over --countdown. */
#splash.is-counting .ring-progress {
  opacity: 1;
  animation: ring-fill var(--countdown, 15s) linear forwards;
}

#splash.is-counting .ring-track {
  fill: #00060f;
}

@keyframes ring-fill {
  to { stroke-dashoffset: 0; }
}

.launch-note {
  min-height: 1.4em;
  margin: 0;
  color: var(--ink-dim);
  font-size: clamp(13px, 1.7vmin, 26px);
  letter-spacing: 0.02em;
  text-align: center;
}

/* ---------- Launch transition ---------- */

#splash.is-launching .launch {
  animation: none;
  opacity: 0;
  transform: translateY(2vmin);
  transition: opacity 400ms ease, transform 400ms ease;
}

#splash.is-launching .logo-wrap {
  animation: logo-breathe 1.6s ease-in-out infinite;
}

@keyframes logo-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}

#splash.is-gone .logo-wrap {
  animation: none;
  transform: scale(1.5);
  opacity: 0;
  filter: blur(8px);
}

/* Loading dots under the logo while the schedule loads behind the splash. */
#splash.is-launching .launch-note {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .bar,
  .figure,
  .wordmark path,
  .launch {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }

  .shine,
  .launch-btn,
  .splash-bg::before,
  .splash-bg::after,
  #splash.is-launching .logo-wrap {
    animation: none !important;
  }
}