/* Art hallway round 2 (art-develop/a2-hallway). On top of art.css (header, wall colours, labels).
   The wall is a free sideways strip: page scrolling is never taken over. Ways to move along it:
   swipe / trackpad / Shift + wheel, click-and-drag, ← → buttons and keys, the mini map, and a
   "See all" grid. The piece you're facing is lit; the floor guide line fills as you walk.
   H1 .hw-grey (whole page grey-white), H2 .hw-roomed (cream page, dark room band),
   H3 .hw-dim (the page dims to dark as you scroll into the hallway). */

.g-hw .hw { position: relative; margin: 0 calc(-1 * var(--gutter)); }

/* ---------- Bar: "3 of 7" and the buttons ---------- */
.hw-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 1180px; margin: 0 auto -60px; padding: 0 var(--gutter); position: relative; z-index: 2;
}
.hw-count { margin: 0; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); }
.hw-count b { font-family: var(--font-head); font-size: 26px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink); }
.hw-tools { display: flex; gap: 8px; }
.hw-btn {
  display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 16px; border: 0; border-radius: 999px;
  font: 500 14px/1 Inter, system-ui, sans-serif; color: var(--ink); background: var(--btn-bg, rgba(255, 255, 255, 0.75));
  box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: background 0.2s, opacity 0.2s;
}
.hw-btn span { font-size: 18px; }
.hw-btn:hover { background: var(--btn-hover, #FFFFFF); }
.hw-btn:disabled { opacity: 0.35; cursor: default; }
.hw-btn:focus-visible, .hw-thumb:focus-visible, .hw-wall:focus-visible { outline: 2px solid var(--focus, #4E6B48); outline-offset: 3px; }

/* ---------- The wall ---------- */
.hw-wall {
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab;
}
.hw-wall::-webkit-scrollbar { display: none; }
.hw-wall.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.hw-track {
  display: flex; align-items: flex-end; gap: clamp(64px, 9vw, 128px); width: max-content;
  padding: 116px max(var(--gutter), calc(50vw - 300px)) 92px;
}
.hw-piece { position: relative; display: flex; flex: none; align-items: flex-end; gap: 20px; transition: opacity 0.5s ease, filter 0.5s ease; }
.g-hw .hw-piece img {
  width: auto; height: min(52vh, 500px); max-width: none; user-select: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 14px 34px rgba(0, 0, 0, 0.16);
}
.hw-piece .g-card { flex: none; width: 168px; transition: box-shadow 0.4s ease; }

/* The piece you're facing is lit, the light centred on the picture; the others step back a little */
/* Snapping lines up the picture's centre (not the picture + label) with the middle of the screen */
.hw-art { position: relative; display: block; flex: none; scroll-snap-align: center; }
.hw-art::before {
  content: ""; position: absolute; z-index: -1; top: 50%; left: 50%; width: 150%; height: 150%; translate: -50% -50%;
  background: radial-gradient(closest-side, var(--spot, rgba(255, 246, 226, 0.95)), transparent);
  opacity: 0; transition: opacity 0.5s ease; pointer-events: none;
}
.hw-wall .hw-track { isolation: isolate; }
.hw:not(.is-grid) .hw-piece:not(.is-here) { opacity: 0.5; filter: saturate(0.7); }
.hw:not(.is-grid) .hw-piece.is-here .hw-art::before { opacity: 1; }
.hw-piece.is-here .g-card { box-shadow: inset 0 0 0 1px var(--line), inset 0 -2px 0 var(--here, #A6566B); }

/* ---------- Floor and the guide line ---------- */
.hw-floor { position: relative; height: 84px; margin-top: -40px; background: linear-gradient(180deg, var(--floor, rgba(0, 0, 0, 0.05)), transparent); border-top: 1px solid var(--line); }
.hw-guide {
  position: absolute; top: -1px; left: 0; width: 100%; height: 2px;
  background: var(--here, #A6566B); transform-origin: 0 50%; transform: scaleX(var(--walked, 0));
}

/* ---------- Mini map ---------- */
.hw-map { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 1180px; margin: -30px auto 0; padding: 0 var(--gutter); }
.hw-thumb {
  width: 54px; height: 40px; padding: 0; border: 0; border-radius: 4px; overflow: hidden; cursor: pointer;
  background: none; opacity: 0.5; box-shadow: 0 0 0 1px var(--line); transition: opacity 0.25s, transform 0.25s, box-shadow 0.25s;
}
.hw-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hw-thumb:hover { opacity: 0.85; }
.hw-thumb[aria-current="true"] { opacity: 1; transform: translateY(-3px); box-shadow: 0 0 0 2px var(--here, #A6566B); }
.hw-hint { margin: 18px 0 0; padding: 0 var(--gutter); font-size: 12.5px; letter-spacing: 0.05em; text-align: center; color: var(--soft); }

/* ---------- "See all": the wall becomes a grid on the page ---------- */
.hw.is-grid .hw-wall { overflow: visible; cursor: default; }
.hw.is-grid .hw-track {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: end; gap: 56px 40px;
  width: auto; max-width: 1180px; margin: 0 auto; padding: 32px var(--gutter) 24px;
}
.hw.is-grid .hw-piece { flex-direction: column; align-items: flex-start; gap: 14px; }
.hw.is-grid .hw-piece img { width: 100%; height: auto; max-height: 360px; object-fit: contain; object-position: left bottom; box-shadow: none; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.16)); }
.hw.is-grid .hw-piece .g-card { width: auto; }
.hw.is-grid .hw-art { width: 100%; }
.hw.is-grid [data-hw-prev], .hw.is-grid [data-hw-next], .hw.is-grid .hw-floor, .hw.is-grid .hw-map, .hw.is-grid .hw-hint { display: none; }

/* ---------- Room colours (H2 room band, H3 dark wall) ---------- */
.room-switch {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; border-radius: 999px;
  background: rgba(255, 253, 248, 0.9); backdrop-filter: blur(8px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 4px 14px rgba(0, 0, 0, 0.1);
}
.room-switch button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.room-switch button i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); }
.room-switch [data-room="charcoal"] i { background: #2B2927; }
.room-switch [data-room="green"] i { background: #2E4532; }
.room-switch [data-room="terracotta"] i { background: #8A4634; }
.room-switch button[aria-pressed="true"] { box-shadow: 0 0 0 2px #4E6B48; }

html[data-room="charcoal"] { --room: #2B2927; --room-ink: #F6F0E8; --room-text: #DDD6CC; --room-soft: #A8A097; --room-here: #EBB1BE; }
html[data-room="green"] { --room: #2E4532; --room-ink: #F7F2E8; --room-text: #DCE3D4; --room-soft: #A9B8A0; --room-here: #F4B9A0; }
html[data-room="terracotta"] { --room: #8A4634; --room-ink: #FFF5EC; --room-text: #F7DED2; --room-soft: #E3B9A6; --room-here: #FFD9C4; }

/* The dark look, shared by the H2 room and the H3 dimmed page */
.hw-roomed .hw-room, html.is-dark {
  --ink: var(--room-ink); --text: var(--room-text); --soft: var(--room-soft); --here: var(--room-here);
  --line: rgba(255, 255, 255, 0.14); --label-bg: rgba(255, 255, 255, 0.06); --btn-bg: rgba(255, 255, 255, 0.08);
  --btn-hover: rgba(255, 255, 255, 0.16); --spot: rgba(255, 236, 205, 0.2); --floor: rgba(0, 0, 0, 0.22); --focus: var(--room-here);
}

/* H1 · grey-white: the spotlight is a gentle warm glow on the grey */
.hw-grey { --spot: rgba(255, 250, 238, 0.95); }

/* H2 · the dark room band, full width, with soft edges where you step in and out */
.hw-roomed .hw-room {
  position: relative; margin: 0 calc(-1 * var(--gutter)); padding: 170px 0 150px;
  background: linear-gradient(180deg, var(--bg) 0, var(--room) 140px, var(--room) calc(100% - 140px), var(--bg) 100%);
  color: var(--text); transition: background 0.4s ease;
}
.hw-roomed .hw-room .hw { margin: 0; }
.hw-roomed .room-switch { position: absolute; top: 120px; right: var(--gutter); z-index: 2; }

/* H3 · the switch sits where round 1's wall switch was; the page colours are mixed by hall.js */
.hw-dim .room-switch { position: fixed; top: 62px; right: var(--gutter); z-index: 40; }
.hw-dim .room-switch .wall-switch-label, .hw-roomed .room-switch .wall-switch-label { margin-right: 2px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #8C8F85; }
.hw-dimzone { padding: 10vh 0 24vh; }
html.is-dimming body { transition: none; }
html.is-dimming body.page-art .t-orchid { opacity: calc(0.6 * (1 - var(--dim, 0))); }
html[data-room] .dock { --ink: #262A22; --text: #575C51; --soft: #9C9F95; }

/* ---------- Small screens ---------- */
@media (max-width: 720px) {
  .hw-track { gap: 40px; padding: 96px var(--gutter) 72px; }
  .hw-piece { flex-direction: column; align-items: flex-start; gap: 12px; }
  .g-hw .hw-piece img { height: 46vh; }
  .hw-piece .g-card { width: auto; }
  .hw-bar { margin-bottom: -48px; }
  .hw-roomed .room-switch { top: 64px; }
  .hw-roomed .hw-room { padding-top: 104px; }
}
@media (prefers-reduced-motion: reduce) {
  .hw-piece, .hw-art::before, .hw-thumb { transition: none; }
}

/* H3 · Once the page is dark, the dock steps away while the gallery is behind it, and comes
   back only when the gallery no longer reaches the dock's spot (set by hall.js). Keyboard
   focus still brings it back. */
html.dock-over-gallery .dock.is-docked { transform: translateY(calc(100% + 30px)); opacity: 0; pointer-events: none; transition-duration: 0.8s; }
html.dock-over-gallery .dock.is-docked:focus-within { transform: none; opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  html.dock-over-gallery .dock.is-docked { transform: none; }
}