@font-face {
  font-family: "Poiret One";
  src: url(../assets/fonts/poiret-one.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Jost";
  src: url(../assets/fonts/jost.woff2) format("woff2");
  font-weight: 300 400;
  font-display: swap;
}

:root {
  --ink: #0b0706;
  --cream: #f4e6c9;
  --brass: #c9a063;
  --neon-core: #fff1dc;
  --neon-glow: #ff4a26;
  --display: "Poiret One", "Century Gothic", sans-serif;
  --body: "Jost", "Century Gothic", sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  --label: #e0bf85;
  /* One motion language: things arrive fast and settle slowly. */
  --settle: cubic-bezier(.16, 1, .3, 1);
  --glide: cubic-bezier(.65, 0, .35, 1);
  --quick: .35s;
  --slow: .7s;
}

* { box-sizing: border-box; }

html { background: var(--ink); scrollbar-width: none; overscroll-behavior-y: none; }

html::-webkit-scrollbar { display: none; }

body {
  margin: 0;
  height: 680vh;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

body.is-loading { overflow: hidden; }

p, h1, h2 { margin: 0; font-weight: inherit; }

::selection { background: var(--brass); color: var(--ink); }

[data-rise] { opacity: 0; }

/* Scene ------------------------------------------------------------------ */

#viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--ink);
}

#stage {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  will-change: transform;
}

#scene {
  display: block;
  width: 100%;
  height: 100%;
}

.is-tall #stage::after {
  content: "";
  position: absolute;
  inset: -1px;
  background: linear-gradient(var(--ink), transparent 15%, transparent 85%, var(--ink));
  pointer-events: none;
}

#vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 95% at 50% 45%, transparent 52%, rgba(6, 3, 2, .72) 100%),
    linear-gradient(to top, rgba(6, 3, 2, .72), transparent 34%);
}

/* Neon title ------------------------------------------------------------- */

#title {
  position: absolute;
  overflow: visible;
  font-family: var(--display);
  pointer-events: none;
}

#title text { font-size: 100px; letter-spacing: .05em; }

.neon-trace {
  fill: none;
  stroke: var(--neon-core);
  stroke-width: 1.4;
  stroke-dasharray: 460;
  stroke-dashoffset: 460;
  opacity: 0;
}

.neon-tube { fill: var(--neon-core); opacity: 0; }

.neon-glow {
  fill: var(--neon-glow);
  stroke: var(--neon-glow);
  stroke-width: 3;
  opacity: 0;
  filter: blur(9px);
}

.is-intro .neon-trace {
  animation:
    trace-draw 2s .7s cubic-bezier(.45, 0, .25, 1) forwards,
    trace-out .7s 2.8s linear forwards;
}

.is-intro .neon-tube { animation: tube-on 1.3s 2.2s steps(1, end) forwards; }

.is-intro .neon-glow { animation: glow-on 1.3s 2.2s steps(1, end) forwards; }

.is-lit .neon-tube, .is-lit .neon-glow { animation: buzz 9s 1s infinite steps(1, end); }

.is-lit .neon-tube { opacity: 1; }
.is-lit .neon-glow { opacity: .95; }

@keyframes trace-draw {
  0% { stroke-dashoffset: 460; opacity: .85; }
  100% { stroke-dashoffset: 0; opacity: .85; }
}

@keyframes trace-out { to { opacity: 0; } }

@keyframes tube-on {
  0%, 9%, 21%, 29%, 47% { opacity: .18; }
  6%, 16%, 25%, 38% { opacity: .9; }
  56%, 100% { opacity: 1; }
}

@keyframes glow-on {
  0%, 9%, 21%, 29%, 47% { opacity: .05; }
  6%, 16%, 25%, 38% { opacity: .7; }
  56%, 100% { opacity: .95; }
}

@keyframes buzz {
  0%, 61%, 64%, 67%, 100% { opacity: 1; }
  62%, 65.5% { opacity: .55; }
}

/* Words ------------------------------------------------------------------ */

#hint, .caption, #whisper {
  position: fixed;
  z-index: 3;
  pointer-events: none;
}

#hint {
  left: 0;
  right: 0;
  bottom: clamp(24px, 6vh, 56px);
  display: grid;
  justify-items: center;
  gap: 12px;
  font-size: 13px;
  letter-spacing: .32em;
  text-transform: uppercase;
  text-indent: .32em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .8);
  opacity: 0;
}

#hint i {
  display: block;
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--brass), transparent);
  transform-origin: top;
  animation: drip 2.6s var(--glide) infinite;
}

@keyframes drip {
  0% { transform: scaleY(0); }
  55% { transform: scaleY(1); }
  100% { transform: scaleY(1); opacity: 0; }
}

.caption {
  left: var(--gutter);
  bottom: clamp(32px, 9vh, 88px);
  max-width: calc(100vw - 2 * var(--gutter));
  visibility: hidden;
}

.kicker {
  margin-bottom: .75em;
  font-size: clamp(12px, .95vw, 14px);
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--label);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .9);
}

.caption h2, .caption h1 {
  font-family: var(--display);
  font-size: clamp(30px, 4.2vw, 60px);
  line-height: 1.08;
  text-wrap: balance;
  text-shadow: 0 2px 26px rgba(0, 0, 0, .75);
}

/* The last screen is one word. It draws itself on when you arrive, then fills. */
.caption--door {
  inset: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.4vh, 26px);
  padding: 0 var(--gutter) 3vh;
  text-align: center;
}

/* Quiets the door so the word owns the screen. */
.caption--door::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 62% at 50% 52%, rgba(6, 3, 2, .62), rgba(6, 3, 2, .34) 58%, transparent);
  opacity: 0;
  transition: opacity .6s ease;
}

.caption--door.is-arrived::before {
  opacity: 1;
  transition: opacity 1.6s ease;
}

.caption--door > * { position: relative; }

.door-mark {
  display: block;
  height: clamp(58px, 11vh, 100px);
  width: auto;
}

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

#soon {
  position: relative;
  width: min(74vw, 118vh, 1240px);
  aspect-ratio: 2122 / 698;
}

#soon svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Three stacked copies of the word: the line that draws, the fill, and a pass of light. */
.soon-line path {
  fill: none;
  stroke: var(--cream);
  stroke-width: 2.4;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .5s ease;
}

.soon-line {
  position: relative;
  z-index: 1;
  transition: opacity .5s ease;
}

.soon-fill, .soon-light {
  position: absolute;
  inset: 0;
}

.soon-fill {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: blur(6px);
  transition: opacity .4s ease, filter .4s ease;
}

/* A warm halo behind the word: on its own layer so the letters can repaint freely. */
#soon::before {
  content: "";
  position: absolute;
  inset: -12% -4%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 196, 120, .13), transparent);
  opacity: 0;
  transition: opacity .5s ease;
}

.is-arrived #soon::before {
  opacity: 1;
  transition: opacity 1.6s ease 1.5s;
}

.soon-light {
  opacity: 0;
  -webkit-mask: linear-gradient(105deg, transparent 42%, #000 50%, transparent 58%) 130% 0 / 300% 100% no-repeat;
  mask: linear-gradient(105deg, transparent 42%, #000 50%, transparent 58%) 130% 0 / 300% 100% no-repeat;
}

.soon-light path { fill: #fff6e6; }

.is-arrived .soon-line path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.9s var(--glide) calc(var(--i) * .13s);
}

.is-arrived .soon-line {
  opacity: 0;
  transition: opacity 1s ease 2.2s;
}

.is-arrived .soon-fill {
  opacity: 1;
  filter: none;
  transition: opacity 1.3s ease 1.5s, filter 1.5s var(--settle) 1.5s;
}

.is-arrived .soon-light {
  opacity: .85;
  -webkit-mask-position: -30% 0;
  mask-position: -30% 0;
  transition: -webkit-mask-position 1.7s var(--glide) 2.5s, mask-position 1.7s var(--glide) 2.5s, opacity .2s linear 2.5s;
}

.door-name, .legal {
  opacity: 0;
  translate: 0 10px;
  transition: opacity .4s ease, translate .4s ease;
}

.is-arrived .door-name, .is-arrived .legal {
  opacity: 1;
  translate: none;
  transition: opacity 1s ease 2.6s, translate 1.2s var(--settle) 2.6s;
}

.door-name { margin: 0; }

.legal {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: clamp(16px, 4vh, 36px);
  font-size: 12.5px;
  color: rgba(244, 230, 201, .62);
  text-shadow: 0 1px 8px #000;
}

#whisper {
  position: fixed;
  z-index: 3;
  pointer-events: none;
}

#hint {
  left: 0;
  right: 0;
  bottom: clamp(24px, 6vh, 56px);
  display: grid;
  justify-items: center;
  gap: 12px;
  font-size: 13px;
  letter-spacing: .32em;
  text-transform: uppercase;
  text-indent: .32em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .8);
  opacity: 0;
}

#hint i {
  display: block;
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--brass), transparent);
  transform-origin: top;
  animation: drip 2.6s var(--glide) infinite;
}

@keyframes drip {
  0% { transform: scaleY(0); }
  55% { transform: scaleY(1); }
  100% { transform: scaleY(1); opacity: 0; }
}

.caption {
  left: var(--gutter);
  bottom: clamp(32px, 9vh, 88px);
  max-width: calc(100vw - 2 * var(--gutter));
  visibility: hidden;
}

.kicker {
  margin-bottom: .75em;
  font-size: clamp(12px, .95vw, 14px);
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--label);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .9);
}

.caption h2, .caption h1 {
  font-family: var(--display);
  font-size: clamp(30px, 4.2vw, 60px);
  line-height: 1.08;
  text-wrap: balance;
  text-shadow: 0 2px 26px rgba(0, 0, 0, .75);
}

/* The latch sits across the middle of the doors, so the words go above it
   and the form below it. */
.caption--door {
  inset: 0;
  max-width: none;
  text-align: center;
}

.door-head {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: 14vh;
}

.door-mark {
  display: block;
  height: clamp(60px, 12vh, 104px);
  width: auto;
  margin: 0 auto 12px;
}

.caption--door h1 { font-size: clamp(38px, min(5.6vw, 9vh), 76px); }

.door-form {
  position: absolute;
  left: 50%;
  top: 66vh;
  width: min(31rem, calc(100vw - 2 * var(--gutter)));
  transform: translateX(-50%);
}

.caption--door.is-live .door-form { pointer-events: auto; }

#signup {
  position: relative;
  padding-bottom: 1.9em;
}

#signup label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.field {
  display: flex;
  border: 1px solid rgba(201, 160, 99, .55);
  background: rgba(11, 7, 6, .72);
  transition: border-color var(--quick) ease, box-shadow var(--slow) var(--settle), opacity var(--quick) ease, translate var(--slow) var(--settle);
}

.field:hover { border-color: rgba(201, 160, 99, .85); }

.field:focus-within {
  border-color: var(--label);
  box-shadow: 0 0 0 4px rgba(201, 160, 99, .12), 0 0 34px rgba(201, 160, 99, .14);
}

.field input, .field button {
  min-width: 0;
  min-height: 54px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--cream);
  font: 300 16px var(--body);
}

.field input {
  flex: 1;
  padding: 0 18px;
  outline: none;
  caret-color: var(--label);
}

.field input::placeholder {
  color: rgba(244, 230, 201, .5);
  transition: color var(--quick) ease;
}

.field input:focus::placeholder { color: rgba(244, 230, 201, .3); }

/* Browsers paint autofilled fields pale yellow, which breaks the door. */
.field input:-webkit-autofill {
  -webkit-text-fill-color: var(--cream);
  box-shadow: inset 0 0 0 100px #120c09;
  caret-color: var(--label);
}

.field button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0 22px;
  background: var(--brass);
  color: var(--ink);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.field button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cream);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s var(--settle);
}

.field button:hover::before, .field button:focus-visible::before { transform: scaleX(1); }

.field button:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }

#form-note {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 1.6em);
  font-size: 14px;
  color: #f0a58c;
  text-shadow: 0 1px 8px #000;
}

#signup.is-sent .field {
  opacity: 0;
  translate: 0 -8px;
  pointer-events: none;
}

#signup.is-sent #form-note {
  top: 0;
  height: 56px;
  display: grid;
  place-items: center;
  color: var(--cream);
  font: 400 clamp(17px, 1.5vw, 20px) var(--display);
  animation: note-in var(--slow) var(--settle) .12s both;
}

@keyframes note-in {
  from { opacity: 0; translate: 0 8px; }
}

.legal {
  margin-top: .3rem;
  font-size: 12.5px;
  color: rgba(244, 230, 201, .68);
  text-shadow: 0 1px 8px #000;
}

#whisper {
  position: fixed;
  z-index: 3;
  pointer-events: none;
}

#hint {
  left: 0;
  right: 0;
  bottom: clamp(24px, 6vh, 56px);
  display: grid;
  justify-items: center;
  gap: 12px;
  font-size: 13px;
  letter-spacing: .32em;
  text-transform: uppercase;
  text-indent: .32em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .8);
  opacity: 0;
}

#hint i {
  display: block;
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--brass), transparent);
  transform-origin: top;
  animation: drip 2.6s var(--glide) infinite;
}

@keyframes drip {
  0% { transform: scaleY(0); }
  55% { transform: scaleY(1); }
  100% { transform: scaleY(1); opacity: 0; }
}

.caption {
  left: var(--gutter);
  bottom: clamp(32px, 9vh, 88px);
  max-width: calc(100vw - 2 * var(--gutter));
  visibility: hidden;
}

.kicker {
  margin-bottom: .75em;
  font-size: clamp(12px, .95vw, 14px);
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--label);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .9);
}

.caption h2, .caption h1 {
  font-family: var(--display);
  font-size: clamp(30px, 4.2vw, 60px);
  line-height: 1.08;
  text-wrap: balance;
  text-shadow: 0 2px 26px rgba(0, 0, 0, .75);
}

/* The latch sits across the middle of the doors, so the words go above it
   and the form below it. */
.caption--door {
  inset: 0;
  max-width: none;
  text-align: center;
}

.door-head {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: 14vh;
}

.door-mark {
  display: block;
  height: clamp(60px, 12vh, 104px);
  width: auto;
  margin: 0 auto 12px;
}

.caption--door h1 { font-size: clamp(38px, min(5.6vw, 9vh), 76px); }

.door-form {
  position: absolute;
  left: 50%;
  top: 66vh;
  width: min(31rem, calc(100vw - 2 * var(--gutter)));
  transform: translateX(-50%);
}

.caption--door.is-live .door-form { pointer-events: auto; }

#signup label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.field {
  display: flex;
  border: 1px solid rgba(201, 160, 99, .6);
  background: rgba(11, 7, 6, .68);
}

.field:focus-within { border-color: var(--cream); }

.field input, .field button {
  min-width: 0;
  min-height: 48px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--cream);
  font: 300 16px var(--body);
}

.field input { flex: 1; padding: 0 14px; outline: none; }

.field input::placeholder { color: rgba(244, 230, 201, .5); }

.field button {
  padding: 0 16px;
  background: var(--brass);
  color: var(--ink);
  font-weight: 400;
  white-space: nowrap;
  cursor: pointer;
}

.field button:hover { background: var(--cream); }

.field button:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }

#form-note { min-height: 1.5em; margin-top: .6rem; font-size: 14px; }

.legal { margin-top: .4rem; font-size: 12px; color: rgba(244, 230, 201, .62); }

#whisper {
  left: 0;
  right: 0;
  top: clamp(40px, 13vh, 120px);
  padding: 0 var(--gutter);
  font-family: var(--display);
  font-size: clamp(20px, 2.2vw, 28px);
  text-align: center;
  text-shadow: 0 2px 18px #000, 0 0 3px #000;
  opacity: 0;
  filter: blur(.25em);
  transition: opacity var(--slow) var(--settle), filter var(--slow) var(--settle);
}

#whisper.is-on { opacity: 1; filter: blur(0); }

/* The voice behind the door comes from down by the gap, where the feet appear. */
#whisper.is-low {
  top: auto;
  bottom: clamp(52px, 11vh, 104px);
}

/* The route: four diamonds, evenly spaced because each leg is the same length.
   Everything shares one centre line on a pixel centre, which is why the width is odd,
   the height divides by three, and main.js snaps the position to the pixel grid. */
#rail {
  --height: 189px;
  position: fixed;
  z-index: 3;
  left: 0;
  top: 0;
  width: 45px;
  height: var(--height);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s var(--settle);
}

/* Soft shade so the rail holds up over busy shelves without looking like a panel. */
#rail::before {
  content: "";
  position: absolute;
  inset: -34px -22px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(8, 5, 4, .62), rgba(8, 5, 4, .34) 62%, transparent);
  pointer-events: none;
}

.is-ready #rail {
  opacity: 1;
  pointer-events: auto;
}

.rail-line {
  position: absolute;
  left: 22px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(244, 230, 201, .2);
}

.rail-line i {
  position: absolute;
  inset: 0;
  background: var(--label);
  transform: scaleY(0);
  transform-origin: top;
}

/* The marker travels the line. It turns a quarter per leg, and a diamond turned a
   quarter looks the same, so it always lands square on the next stop. */
.rail-mark {
  position: absolute;
  z-index: 1;
  left: 22.5px;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  will-change: transform;
}

.rail-gem {
  position: absolute;
  left: -12.5px;
  top: -12.5px;
  width: 25px;
  height: 25px;
  overflow: visible;
  will-change: transform;
  filter: drop-shadow(0 0 5px rgba(255, 214, 150, .4));
}

.gem-edge {
  fill: #150e0a;
  stroke: var(--cream);
  stroke-width: 1;
}

.gem-core { fill: var(--cream); }

/* Fine marks either side that ease in as the marker settles on a stop. */
.rail-flank {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.rail-flank::before, .rail-flank::after {
  content: "";
  position: absolute;
  top: -.5px;
  width: 7px;
  height: 1px;
  background: var(--label);
}

.rail-flank::before { right: 15.5px; }
.rail-flank::after { left: 15.5px; }

.rail-stop {
  position: absolute;
  left: 0;
  width: 100%;
  height: 34px;
  margin-top: -17px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: rgba(244, 230, 201, .62);
  transition: color var(--quick) ease;
  -webkit-tap-highlight-color: transparent;
}

.rail-stop[data-stop="0"] { top: 0; }
.rail-stop[data-stop="1"] { top: calc(var(--height) / 3); }
.rail-stop[data-stop="2"] { top: calc(var(--height) * 2 / 3); }
.rail-stop[data-stop="3"] { top: var(--height); }

.rail-stop svg {
  position: absolute;
  left: 16px;
  top: 11px;
  width: 13px;
  height: 13px;
  overflow: visible;
  transition: transform .5s var(--settle);
}

.rail-stop path {
  fill: #150e0a;
  stroke: currentColor;
  stroke-width: 1;
  transition: fill var(--quick) ease;
}

.rail-stop.is-passed { color: var(--label); }

.rail-stop:hover, .rail-stop:focus-visible { color: var(--cream); }

.rail-stop:hover svg, .rail-stop:focus-visible svg { transform: scale(1.3); }

.rail-stop:hover path, .rail-stop:focus-visible path { fill: #3a2c20; }

.rail-stop:focus-visible { outline: none; }

.rail-stop span {
  position: absolute;
  left: calc(100% + 2px);
  top: 50%;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--cream);
  text-shadow: 0 1px 8px #000, 0 0 2px #000, 0 0 14px #000;
  opacity: 0;
  translate: -8px -50%;
  transition: opacity var(--quick) ease, translate .5s var(--settle);
  pointer-events: none;
}

.rail-stop:hover span, .rail-stop:focus-visible span {
  opacity: 1;
  translate: 0 -50%;
}

/* Easter eggs ------------------------------------------------------------ */

.spot {
  position: absolute;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.spot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 214, 150, .2), transparent);
  opacity: 0;
  transition: opacity var(--slow) var(--settle);
}

.spot:hover::after, .spot:focus-visible::after { opacity: 1; }

.spot:focus-visible { outline: 1px solid rgba(244, 230, 201, .7); outline-offset: 2px; }

#spot-register { left: 62.6%; top: 40%; width: 7.6%; height: 12%; }
#spot-cards { left: 55.6%; top: 72.5%; width: 15%; height: 12%; }
#spot-door { left: 33.5%; top: 20%; width: 33%; height: 33%; }

#no-sale {
  position: absolute;
  left: 63.2%;
  top: 37.6%;
  width: 4.8%;
  height: 4%;
  overflow: hidden;
  pointer-events: none;
}

#no-sale span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #efe3c8;
  color: #7a1712;
  font: 400 clamp(8px, .72vw, 13px) var(--body);
  letter-spacing: .08em;
  white-space: nowrap;
  transform: translateY(105%);
  transition: transform .28s cubic-bezier(.3, 1.6, .5, 1);
}

#no-sale.is-up span { transform: none; }

#hand {
  position: absolute;
  left: 58%;
  top: 62%;
  width: 11%;
  height: 22%;
  perspective: 900px;
  pointer-events: none;
}

.card {
  position: absolute;
  left: 34%;
  top: 0;
  width: 32%;
  aspect-ratio: 5 / 7;
  transform-origin: 50% 110%;
  transform: rotate(var(--fan)) translateY(16%);
  opacity: 0;
  transition: transform var(--slow) var(--settle), opacity .25s;
}

.card.is-dealt { opacity: 1; transform: rotate(var(--fan)); }

.card b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 6%;
  background: #f1e6d0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .6);
  color: #17110e;
  font: 400 clamp(20px, 2.6vw, 40px) var(--body);
}


#feet {
  position: absolute;
  left: 45%;
  top: 92.7%;
  width: 9.6%;
  height: 2.4%;
  opacity: 0;
  transition: opacity 1.1s;
  pointer-events: none;
}

#feet i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 34%;
  border-radius: 40%;
  background: #050302;
  filter: blur(5px);
}

#feet i:first-child { left: 8%; }
#feet i:last-child { right: 8%; }

#feet.is-there { opacity: .96; }

/* Load-in ---------------------------------------------------------------- */

#loader {
  position: fixed;
  inset: 0;
  z-index: 10;
}

#keyhole { display: block; }

#etch {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  transition: opacity .45s ease;
}

#etch-logo {
  position: relative;
  will-change: transform;
}

#etch-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

#etch-mark {
  display: block;
  height: clamp(120px, 22vh, 176px);
  width: auto;
  opacity: .2;
  clip-path: inset(-2px 100% -2px 0);
  transition: opacity .5s ease-out;
}

#loader.is-marked #etch-mark { opacity: 1; }

/* The frame is the same picture minus the eye, so swapping it in is invisible
   until the eye dissolves and leaves the opening empty. */
#etch.is-opening #etch-frame { opacity: 1; }

#loader #etch.is-opening #etch-mark {
  opacity: 0;
  transition: opacity .5s ease-in;
}

#etch.is-opening #etch-track {
  opacity: 0;
  transition: opacity .3s ease;
}

#etch-track {
  position: relative;
  width: 134px;
  height: 2px;
  margin-top: 20px;
  background: rgba(244, 230, 201, .2);
}

#etch-track i {
  position: absolute;
  inset: 0;
  background: var(--cream);
  transform: scaleX(.045);
  transform-origin: left;
}

.noscript { padding: 2rem; }

@media (max-width: 640px) {
  .caption { bottom: 40px; }
  #soon { width: 86vw; }
  /* No room beside the word on a phone, and nowhere left to go. */
  .is-ready .caption--door.is-arrived ~ #rail { opacity: 0; pointer-events: none; }
  #rail { --height: 150px; }
  .rail-stop span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .soon-line, .soon-light { display: none; }
  .caption--door .soon-fill, .is-arrived .soon-fill { opacity: 1; filter: none; transition: none; }
  #hint i, .is-lit .neon-tube, .is-lit .neon-glow { animation: none; }
  .is-intro .neon-trace { animation: none; }
  .is-intro .neon-tube, .is-intro .neon-glow { animation: none; opacity: 1; }
}