/* mcec.io: a tower at night. Dark whatever the system theme, by design. */
:root {
  --night: #050607;
  --lamp: #f2cf98;
  --lamp-rim: rgba(255, 228, 184, 0.82);
  --words: #8b9198;
  --words-quiet: #6f767e;
  color-scheme: dark;
}

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

html,
body {
  margin: 0;
  height: 100%;
  background: var(--night);
}

body {
  overflow: hidden;
  color: var(--words);
  -webkit-font-smoothing: antialiased;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "URW Palladio L", P052, "Book Antiqua", Georgia, serif;
}

.scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: 50% 0;
}

.stage {
  position: relative;
  min-height: 100%;
}

.quiet {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The one lit window, and the only way in. Unlabelled on purpose; named for
   assistive tech. scene.js places it over the window it picked. */
.door {
  position: fixed;
  left: calc(58.5% - 22px);
  top: calc(36% - 22px);
  width: 44px;
  height: 44px;
  --pane: 12px;
  display: block;
  -webkit-tap-highlight-color: transparent;
}

.lamp {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transition: filter 1.4s ease;
}

.halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--pane) * 11);
  height: calc(var(--pane) * 11);
  margin: calc(var(--pane) * -5.5) 0 0 calc(var(--pane) * -5.5);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 208, 146, 0.16), rgba(255, 196, 128, 0.05) 46%, rgba(255, 190, 120, 0) 100%);
  transition: scale 1.4s ease;
}

/* Without the script there is no render to sit on: show the window plainly. */
.door::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 13px;
  margin: -6.5px 0 0 -4.5px;
  background: var(--lamp);
}

.js .door::after { display: none; }

.door:hover .lamp,
.door:focus-visible .lamp { filter: brightness(1.18) saturate(1.06); }

.door:hover .halo,
.door:focus-visible .halo { scale: 1.3; }

.door:focus-visible {
  outline: 1px solid var(--lamp-rim);
  outline-offset: 3px;
}

/* 404: the same tower, every window dark. */
.lost {
  display: grid;
  align-content: end;
  justify-items: center;
  padding: 0 16px calc(10vh + env(safe-area-inset-bottom, 0px));
  text-align: center;
}

/* Darkness pooled under the words, so the windows behind them stay quiet. */
.lost::before {
  content: "";
  position: fixed;
  inset: auto 0 0;
  height: 46vh;
  pointer-events: none;
  background: radial-gradient(ellipse min(36rem, 92vw) 17vh at 50% calc(100% - 10vh - 1.9rem), rgba(5, 6, 7, 0.8), rgba(5, 6, 7, 0.45) 55%, rgba(5, 6, 7, 0) 100%);
}

.lost > * { position: relative; }

.lost h1 {
  margin: 0 0 0.55em;
  font-weight: 400;
  font-size: 1.1875rem;
  line-height: 1.3;
  letter-spacing: 0.015em;
  color: var(--words);
}

.lost p {
  margin: 0;
  font-size: 0.9375rem;
}

.lost a {
  color: var(--words-quiet);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.32em;
  transition: color 0.6s ease;
}

.lost a:hover,
.lost a:focus-visible { color: var(--words); }

.lost a:focus-visible {
  outline: 1px solid var(--words);
  outline-offset: 5px;
}

/* The one moment: the tower surfaces out of the dark as the eye lifts,
   it holds, and then a light comes on. After that, near stillness. */
.js .scene { opacity: 0; }
.js .lamp,
.js .halo { opacity: 0; }
.js .lost > * { opacity: 0; }

.go .scene {
  animation:
    surface 4.4s cubic-bezier(0.45, 0, 0.25, 1) 0.2s both,
    lift 6.6s cubic-bezier(0.2, 0.6, 0.25, 1) both;
}

.go .lamp { animation: on 0.9s linear 5.4s both; }
.go .halo { animation: bloom 2.6s cubic-bezier(0.2, 0.7, 0.3, 1) 5.6s both; }
.go .lost > * { animation: surface 2.4s ease 3.4s both; }

.pass .figure { animation: pass 3.4s cubic-bezier(0.45, 0.05, 0.55, 0.95); }

.held .scene,
.held .lamp,
.held .halo,
.held .figure,
.held .lost > * { animation-play-state: paused; }

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

@keyframes lift {
  from { transform: translateY(-4%) scale(1.07); }
  to { transform: none; }
}

@keyframes on {
  0% { opacity: 0; }
  5% { opacity: 0.6; }
  9% { opacity: 0.05; }
  24% { opacity: 1; }
  100% { opacity: 1; }
}

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

@keyframes pass {
  from { transform: translateX(0); }
  to { transform: translateX(var(--walk, 20px)); }
}

.figure { transform-box: view-box; }

@media (prefers-reduced-motion: reduce) {
  .js .scene,
  .js .lamp,
  .js .halo,
  .js .lost > * {
    opacity: 1;
    animation: none;
    transform: none;
  }
  .lamp,
  .halo,
  .lost a { transition: none; }
  .pass .figure { animation: none; }
}