/* museum.css — the building around the rooms on /gallery/.
   A rendered entrance, a lobby with three doorways, and the walk into a
   hall, each of which is a .flow--room. Every rule begins at .museum-page
   or [data-museum-state]; without the script the page shows the entrance
   still, the three hall placards, and the plain album strips beneath. */

.museum-page .gallery-shell[data-museum-state]:not([data-museum-state="hall"]) .flow--room { display: none; }
/* museum-boot.js marks the document before the halls parse, so no plate lazy-loads
   behind the entrance before the deferred script sets a state; mount() lifts it */
html[data-museum-boot] .museum-page .flow--room { display: none; }
.museum-page .gallery-shell[data-museum-state="hall"] .museum { display: none; }
/* one hall shows at a time: every room but the one the shell names */
.museum-page .gallery-shell[data-museum-hall]:not([data-museum-hall="hall-1"]) #hall-1,
.museum-page .gallery-shell[data-museum-hall]:not([data-museum-hall="hall-2"]) #hall-2,
.museum-page .gallery-shell[data-museum-hall]:not([data-museum-hall="hall-3"]) #hall-3 { display: none; }

/* #hall-1, #hall-2 and #hall-3 are addresses the script reads, and also the
   rooms' ids, so the browser scrolls to them on arrival — and keeps
   re-trying as the room lays out. A margin of one viewport clamps that
   scroll to the top, where the head and the room already fit. */
.museum-page #hall-1,
.museum-page #hall-2,
.museum-page #hall-3 { scroll-margin-top: 100vh; }

.museum {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: min(calc(100svh - 148px), calc(100vw * 2 / 3));
  min-height: 360px;
  overflow: hidden;
  background: var(--gallery-wall);
  color: var(--gallery-ink);
}

.museum-still,
.museum-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.museum-still img,
.museum-film {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}
.museum-film {
  opacity: 0;
  transition: opacity .55s ease;
  pointer-events: none;
}
.museum-film.is-front { opacity: 1; }
.museum-still { transition: opacity .55s ease; }
.museum[data-film-front] .museum-still { opacity: 0; }

/* the overlay type: a title and the door in, then the three hall placards:
   left, the far end of the lobby, right */
.museum-foyer,
.museum-halls {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5) clamp(16px, 4vw, 48px);
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--gallery-wall) 55%, transparent) 60%, color-mix(in srgb, var(--gallery-wall) 82%, transparent));
}
.museum-foyer[hidden],
.museum-halls[hidden] { display: none; }

/* With no script the shell carries no state, so the foyer and the placards
   would share the bottom edge and cover each other. The foyer takes the top
   edge instead, and the way in and the three doors stay clickable. */
.museum-page .gallery-shell:not([data-museum-state]) .museum-foyer {
  top: 0;
  bottom: auto;
  background: linear-gradient(0deg, transparent, color-mix(in srgb, var(--gallery-wall) 55%, transparent) 60%, color-mix(in srgb, var(--gallery-wall) 82%, transparent));
}

/* English only (owner decision, 2026-09-14): the title and the way in are set
   in the museum's display face, the same as the lobby placards */
.museum-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1;
  letter-spacing: -.01em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .5);
}
.museum-gloss {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .08em;
  color: var(--gallery-ink-muted);
}

.museum-enter,
.museum-door {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 3px;
  color: var(--gallery-ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .2s ease, transform .2s ease;
}

/* Wayfinding shares one charcoal surface; the film supplies the depth. */
.museum-enter,
.museum-door,
.museum-status {
  border: 1px solid color-mix(in srgb, var(--gallery-rim) 36%, transparent);
  background: color-mix(in srgb, var(--gallery-glass-solid) 94%, transparent);
  backdrop-filter: blur(6px);
}
.museum-enter b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: .02em;
}
.museum-door b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: .02em;
}
.museum-enter span,
.museum-door span {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: lowercase;
  color: var(--gallery-ink-muted);
}
/* the placard subtitles carry a proper name; they keep their case */
.museum-door span { text-transform: none; }
.museum-enter:hover,
.museum-door:hover,
.museum-enter:focus-visible,
.museum-door:focus-visible {
  border-color: var(--gallery-cinnabar);
  transform: translateY(-1px);
}
.museum-enter:focus-visible,
.museum-door:focus-visible {
  outline: 3px solid var(--gallery-cinnabar);
  outline-offset: 2px;
}
.museum-door--centre { text-align: center; align-items: center; }
.museum-door--right { text-align: right; align-items: flex-end; }

/* the status line sits over the film's brightest region, so it gets the
   placards' charcoal glass to read on */
.museum-status {
  position: absolute;
  top: var(--space-4);
  left: 50%;
  z-index: 2;
  margin: 0;
  padding: 8px 14px;
  border-radius: 3px;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--gallery-ink);
}
.museum-status:empty { display: none; }

/* the line the visitor reads with the script off, between the building and
   the halls it names */
.museum-noscript {
  margin: var(--space-4) clamp(16px, 4vw, 48px);
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--gallery-rim) 36%, transparent);
  border-radius: 3px;
  background: var(--gallery-glass-solid);
  font-family: var(--font-mono);
  font-size: .78rem;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--gallery-ink);
}
.museum-noscript a { color: inherit; }

/* the walk ends in the dark; the room's own entrance takes over */
.museum-page .gallery-shell[data-museum-state="hall"] { animation: museum-arrive .6s ease both; }
@keyframes museum-arrive {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 760px) {
  .museum {
    height: calc(100svh - 128px);
    min-height: 460px;
  }
  .museum-still img,
  .museum-film { object-position: 50% 55%; }
  .museum-foyer,
  .museum-halls {
    flex-direction: column;
    align-items: stretch;
    /* the vinyl player rests in the bottom-right corner on phones */
    padding-inline-end: 88px;
  }
  .museum-door--centre,
  .museum-door--right { text-align: left; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .museum-film,
  .museum-still,
  .museum-enter,
  .museum-door { transition: none; }
  .museum-page .gallery-shell[data-museum-state="hall"] { animation: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .museum-enter,
  .museum-door,
  .museum-status {
    background: var(--gallery-glass-solid);
    backdrop-filter: none;
  }
}

/* Each hall owns a header control; only the active hall exposes it. */
.museum-page .plate-head { position: relative; }
.flow-browse {
  position: absolute;
  top: var(--qb-chrome-center-y);
  transform: translateY(-50%);
  right: 0;
  color: var(--gallery-ink-muted);
  font: 400 .9rem/1.4 var(--font-body);
}
.flow-browse button {
  min-height: 44px;
  padding: 8px 0 8px 16px;
  flex-shrink: 0;
  border: 0;
  background: none;
  color: var(--gallery-ink);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 5px;
  cursor: pointer;
}

.flow-browse button { display: none; }
body:has(.gallery-shell[data-museum-hall="hall-1"]) .flow-browse [aria-controls="art-overview"]:not([hidden]) { display: block; }
body:has(.gallery-shell[data-museum-hall="hall-2"]) .flow-browse [aria-controls="poster-overview"]:not([hidden]) { display: block; }
body:has(.gallery-shell[data-museum-hall="hall-3"]) .flow-browse [aria-controls="book-overview"]:not([hidden]) { display: block; }
.flow-browse button:focus-visible { outline: 2px solid var(--gallery-ink); outline-offset: 6px; }
@media (max-width: 700px) {
  body:has(.gallery-shell[data-museum-state="hall"]) .plate-head p > [data-museum-count],
  body:has(.gallery-shell[data-museum-state="hall"]) .plate-head p > [aria-hidden] { display: none; }
  .flow-browse { font-size: .8rem; }
}