/* welcome center — a single wide unit-room. Same chrome, same hinge,
   same backdrop as the elastic tower. Click the wall → story unfolds. */

/* welcome room is wider than tower units to cradle Whet's 2:1 animation */
.welcome-scene .room-slot.welcome-slot {
  width: 880px;
  height: 480px;
  transition: height 1.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.welcome-scene .room-slot.welcome-slot.is-expanded {
  height: 920px;          /* room (480) + flap-drop (~440) */
}

.welcome-scene .room.welcome-room {
  width: 880px;
  height: 480px;
}

/* the "interior" is just Whet's animation in an iframe — the whole stage. */
.welcome-interior {
  position: absolute;
  top: 42px;              /* below the banner */
  right: 0;
  bottom: 0;
  left: 0;
  background: #ffffff;
  overflow: hidden;
}
.welcome-anim {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: #ffffff;
}

/* opaque tower-body lattice override — wider for welcome */
.welcome-scene.building-scene::before {
  width: 880px;
}

/* roof + foundation widths match the welcome room */
.welcome-scene .tower-roof { width: 880px; }
.welcome-scene .tower-foundation { width: 920px; }

/* ---- closed wall (flap-front): the welcome plaque text ---- */
.welcome-room .flap-front {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 56px 60px 64px;    /* extra bottom padding so story button clears the footer bar */
  cursor: pointer;            /* whole wall is clickable */
}
.welcome-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--livery-ink);
  max-width: 560px;
  margin: 0 auto;
}
.welcome-text p {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.welcome-text .lead {
  font-family: "IBM Plex Mono", "Menlo", monospace;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: lowercase;
  opacity: 0.62;
}
.welcome-text .lede {
  font-size: 22px;
  line-height: 1.32;
  font-style: italic;
  font-weight: 400;
  padding-left: 14px;
}
.welcome-text .lede.strong {
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* story button — invitation to hinge the wall down */
.welcome-story-btn {
  align-self: center;
  margin: 22px 0 26px;
  background: transparent;
  border: 1px solid rgba(45, 78, 78, 0.28);
  color: var(--livery-ink);
  padding: 10px 22px;
  font-family: "IBM Plex Mono", "Menlo", monospace;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
  display: inline-flex;
  gap: 4px;
}
.welcome-story-btn:hover,
.welcome-story-btn:focus {
  background: rgba(45, 78, 78, 0.07);
  border-color: rgba(45, 78, 78, 0.55);
  transform: translateY(-1px);
  outline: none;
}
.welcome-story-bracket { opacity: 0.55; }

/* ---- open wall (flap-back): bridge headline + visit-tower CTA ---- */
.welcome-room .flap-back.welcome-back {
  padding: 0;
  display: flex;
  flex-direction: column;
  background: var(--crt-bg);
}
.welcome-back .crt-top-bar {
  /* same chrome as tower units */
  padding: 14px 28px 12px;
}
.welcome-back .crt-top-name {
  font-size: 12px;
  letter-spacing: 0.30em;
  opacity: 0.80;
}

/* bridge: the central headline on the back of the wall */
.welcome-bridge {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 36px;
}
.welcome-bridge h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 38px;
  font-weight: 400;
  line-height: 1.18;
  text-align: center;
  color: var(--crt-phos);
  text-shadow: 0 0 8px rgba(127, 255, 148, 0.32);
  letter-spacing: -0.005em;
}
.welcome-bridge .amp {
  font-style: italic;
  opacity: 0.78;
  font-size: 28px;
  display: inline-block;
  padding: 4px 0;
  color: var(--crt-dim);
  letter-spacing: 0.04em;
}

.welcome-back-cta {
  padding: 16px 28px 22px;
  border-top: 1px solid rgba(127, 255, 148, 0.16);
  display: flex;
  justify-content: center;
}
.welcome-visit {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(63, 191, 90, 0.08);
  border: 1px solid rgba(63, 191, 90, 0.45);
  color: var(--crt-phos);
  padding: 11px 22px;
  font-family: "IBM Plex Mono", "Menlo", monospace;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  text-decoration: none;
  border-radius: 2px;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
  text-shadow: 0 0 4px rgba(127, 255, 148, 0.30);
}
.welcome-visit:hover,
.welcome-visit:focus {
  background: rgba(63, 191, 90, 0.18);
  border-color: rgba(63, 191, 90, 0.70);
  transform: translateY(-1px);
  outline: none;
}
.welcome-visit-arrow {
  font-size: 16px;
  transition: transform 0.15s;
}
.welcome-visit:hover .welcome-visit-arrow {
  transform: translateX(4px);
}

/* shoji exit when navigating into the tower */
body.welcome-page.exiting .scene {
  animation: welcome-shoji-out 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes welcome-shoji-out {
  to { transform: translateX(-100%); opacity: 0; }
}

/* welcome page should NOT animate building.scene shoji-in — it's the lobby */
body.welcome-page .scene.building-scene {
  animation: none;
}