/* Page 1 — the bridge.
   One wide, symmetrical command deck. Nothing on it but the line and the way through.
   Text above, deck below: no text ever sits over the moving grid. */

.bridge {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr 38vh;
  overflow: hidden;
}

.bridge-head {
  display: flex;
  justify-content: center;
  padding: 18px 24px 0;
}

/* The viewport: the thing you look at. Symmetrical around the centre line. */
.viewport {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 24px 40px;
  gap: 40px;
}

.line {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  /* Michroma is wide. Measured at 1440 and 390, not read off the clamp. */
  font-size: clamp(1.3rem, 4vw, 3.6rem);
  line-height: 1.5;
  letter-spacing: 0.12em;
  /* The tracking pushes the last letter past the box; pull the block back on centre. */
  text-indent: 0.12em;
  max-width: 16ch;
  text-wrap: balance;
}

/* Depth by light, never shadow: a hairline that brightens on the top edge. */
.way-through {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 34px;
  border: 1px solid var(--holo);
  border-radius: 1px;
  background: transparent;
  color: var(--floodlight);
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 160ms var(--ease), opacity 90ms linear;
}
.way-through::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--floodlight);
  opacity: 0;
  transition: opacity 160ms var(--ease);
}
.way-through:hover::before { opacity: 0.5; }
.way-through:hover { background: color-mix(in srgb, var(--holo) 10%, transparent); }
.way-through:active { opacity: 0.96; }

/* The deck. Decorative only, and it carries nothing anyone needs to read. */
.deck {
  position: relative;
  border-top: 1px solid var(--durasteel);
}
.deck canvas {
  display: block;
  width: 100%;
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .way-through, .way-through::before { transition-duration: 0ms; }
}

@media (max-width: 600px) {
  .bridge { grid-template-rows: auto 1fr 30vh; }
  .viewport { gap: 32px; }
  .line { letter-spacing: 0.1em; text-indent: 0.1em; }
}

/* The destination is revealed beneath the illuminated grid panels. */
.entry-sequence { position: fixed; inset: 0; z-index: 100; overflow: hidden; }
.entry-sequence iframe, .entry-sequence canvas { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.entry-sequence iframe { clip-path: inset(100% 0 0); background: var(--hull); }
.entry-sequence canvas { z-index: 1; }
body.entering { overflow: hidden; }