/* Night-sky backdrop + gate/lockup, ported from the local studio. */

.bg-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
#backgroundCanvas { z-index: 0; }
#milkyWayCanvas { z-index: 1; }
#starsCanvas { z-index: 2; }
body { position: relative; }
header.top, main, footer, .toast { position: relative; z-index: 3; }

/* ------------------------------------------------------------------ gate */

.gate {
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-content: center; justify-items: center;
  gap: 0; text-align: center;
  background: radial-gradient(120% 80% at 50% 40%, rgba(10, 10, 22, .55), rgba(4, 4, 10, .92) 70%);
  backdrop-filter: blur(2px);
  transition: opacity .8s ease, transform .8s ease;
}
.gate.gone { opacity: 0; transform: scale(1.02); pointer-events: none; }

.lockup { position: relative; font-family: var(--serif); font-weight: 500; line-height: 1; }
.lock-line { display: flex; align-items: center; justify-content: center; }
.lock-line.cmo { font-size: clamp(72px, 11vw, 132px); letter-spacing: -.01em; color: var(--fg); }
.lock-line.cmo .ltr { display: inline-block; }
.lock-line.cmo .x { color: var(--muted); }
.lock-line.exec {
  margin-top: 18px; font-family: var(--mono); font-weight: 400;
  font-size: clamp(14px, 1.9vw, 21px); letter-spacing: .42em;
  text-transform: uppercase; color: var(--muted);
}
.lock-line.exec .ech, .lock-line.exec .x-slot {
  opacity: 0; transform: translateY(4px);
  transition: opacity .5s ease, transform .5s ease;
}
.lock-line.exec.morphed .ech { opacity: 1; transform: none; }
.lock-line.exec.morphed .x-slot { opacity: 1; transform: none; }
.lock-line.exec .ech:nth-child(1) { transition-delay: .5s; }
.lock-line.exec .ech:nth-child(3) { transition-delay: .58s; }
.lock-line.exec .ech:nth-child(4) { transition-delay: .64s; }
.lock-line.exec .ech:nth-child(5) { transition-delay: .70s; }
.lock-line.exec .ech:nth-child(6) { transition-delay: .76s; }
.lock-line.exec .ech:nth-child(7) { transition-delay: .82s; }
.lock-line.exec .ech:nth-child(8) { transition-delay: .88s; }
.x-slot { display: inline-block; width: .62em; height: 1em; }

.gate-sub {
  margin: 22px 0 0; font-family: var(--sans); font-size: 12.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2);
}
.gate-hint { margin: 10px 0 0; font-size: 13.5px; color: var(--muted); }

/* dashboard reveal */
#page { opacity: 0; transform: translateY(10px); transition: opacity .8s ease .1s, transform .8s cubic-bezier(.2,.8,.2,1) .1s; }
#page.on { opacity: 1; transform: none; }

html.reduce .gate, html.reduce #page { transition: none; }