/*
 * The switch. The most important piece of craft on the site.
 *
 * Four beats: the progress bar overshoots and floods white, the picture
 * squashes to a line, the line collapses to a dot, the dot blooms into the
 * modern hero. Under reduced motion all of it becomes a short fade.
 */

.crt {
  position: fixed;
  inset: 0;
  z-index: 1200;
  pointer-events: none;
  display: none;
}

.crt.is-running { display: block; }

/* Beat 2: the white flood */
.crt__flood {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
}

.crt.is-flooding .crt__flood {
  animation: flood 0.26s var(--ease-crt) forwards;
}

@keyframes flood {
  from { opacity: 0; }
  to { opacity: 1; }
}

/*
 * Beat 3: the tube switching off.
 *
 * The whole viewport is scaled on Y to a hairline, then on X to a dot. Two
 * separate scales, because a real tube collapses vertically first.
 */
.crt__tube {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  transform-origin: 50% 50%;
}

.crt.is-collapsing .crt__tube {
  opacity: 1;
  animation: tube-off 0.58s var(--ease-crt) forwards;
}

@keyframes tube-off {
  0% { transform: scale(1, 1); filter: brightness(1); }
  42% { transform: scale(1, 0.016); filter: brightness(2.6); }
  58% { transform: scale(1, 0.0075); filter: brightness(3.2); }
  100% { transform: scale(0.004, 0.0075); filter: brightness(4); }
}

/* Beat 3b: the dot holds, then releases */
.crt__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  box-shadow: 0 0 22px 7px rgba(255, 255, 255, 0.85);
}

.crt.is-dot .crt__dot { animation: dot-hold 0.42s var(--ease-out) forwards; }

@keyframes dot-hold {
  0% { opacity: 1; transform: scale(1); }
  62% { opacity: 1; transform: scale(0.85); }
  100% { opacity: 0; transform: scale(0.2); }
}

/* Beat 4: the bloom. Particles are drawn on canvas, sized to the viewport. */
.crt__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.crt.is-blooming .crt__canvas { opacity: 1; }

/* The modern page rises as the particles land. */
.stage-modern {
  opacity: 1;
  transition: opacity 0.5s linear;
}

.is-switching .stage-modern { opacity: 0; }

.stage-modern[data-entering="true"] {
  animation: modern-in 1.15s var(--ease-out) forwards;
}

@keyframes modern-in {
  from { opacity: 0; transform: scale(1.035); filter: blur(7px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* Reduced motion: no tube, no particles, just a short honest fade. */
@media (prefers-reduced-motion: reduce) {
  .crt.is-collapsing .crt__tube,
  .crt.is-dot .crt__dot,
  .crt.is-flooding .crt__flood { animation: none; }

  .crt.is-running .crt__flood { opacity: 1; transition: opacity 0.2s linear; }
  .crt.is-done .crt__flood { opacity: 0; }
  .crt__canvas { display: none; }
  .stage-modern[data-entering="true"] { animation: none; }
}

/* The wizard dialog breaking its own frame on the overshoot. */
.dialog--wizard.is-overshooting {
  animation: wizard-burst 0.42s var(--ease-crt) forwards;
}

@keyframes wizard-burst {
  0% { transform: translate(-50%, -50%) scale(1); }
  35% { transform: translate(-50%, -50%) scale(1.04); }
  100% { transform: translate(-50%, -50%) scale(14); opacity: 0; }
}

.progress__fill.is-overshooting {
  animation: overshoot 0.5s var(--ease-crt) forwards;
}

@keyframes overshoot {
  0% { width: 100%; }
  100% { width: 320%; }
}

@media (prefers-reduced-motion: reduce) {
  .dialog--wizard.is-overshooting,
  .progress__fill.is-overshooting { animation: none; }
}