/* Benny Graves — home: THE HALL OF GOLD (test build, only with ?home=hall; see hall.js). Nothing here applies without
   it: every rule is under html.home-hall or on the hall's own classes. */

/* the black-stock sheet carries one photograph print instead of the plaque wall */
.home-hall .view-home .hall-wall .wall-in { padding: 12px }
.home-hall .view-home .hall-wall .plaques, .home-hall .view-home .hall-wall .more-genres { display: none }

.view-home .hall {
  position: relative; overflow: hidden; isolation: isolate; background: #0b0806;
  height: clamp(520px, calc(100vh - 110px), 62vw); height: clamp(520px, calc(100svh - 110px), 62vw);
}
.view-home .hl-photo { position: absolute; display: block; max-width: none; pointer-events: none; -webkit-user-drag: none }
/* dimming is always a black layer fading (its opacity = 1 − brightness), never a filter: a phone fades that for free,
   while a fading filter re-draws the whole photo and every plaque each frame */
.view-home .hl-dim { position: absolute; inset: 0; pointer-events: none; background: #000; opacity: 0; transition: opacity 1.1s ease; will-change: opacity }
.view-home .hall.hl-dark .hl-dim { opacity: .45 }
.view-home .hl-vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(130% 95% at 50% 40%, rgba(4, 3, 2, 0) 55%, rgba(4, 3, 2, .62) 100%) }
/* under the heading on a computer: the floor goes dark so the type reads */
.view-home .hl-shade { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; pointer-events: none; background: linear-gradient(180deg, rgba(8, 6, 4, 0), rgba(8, 6, 4, .78) 62%) }
.view-home .hall.hl-tall .hl-shade { top: 0; bottom: auto; height: 26%; background: linear-gradient(0deg, rgba(8, 6, 4, 0), rgba(8, 6, 4, .55)) }

/* the wall of plaques, in the photo's perspective (hall.js sets it); it swings up to face you the first time */
.view-home .hl-wall { position: absolute; inset: 0; pointer-events: none }
.view-home .hl-grid { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 1.15s cubic-bezier(.2, .75, .2, 1) }
.view-home .hall.hl-dark .hl-grid { transform: rotateX(34deg) }
.view-home .hl-item { position: absolute; pointer-events: auto; will-change: transform; transition: transform .4s cubic-bezier(.2, .8, .2, 1) }
.view-home .hl-item::before, .view-home .hl-item::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: opacity .55s ease }
.view-home .hl-item::after { background: #000; opacity: .58; will-change: opacity }   /* unlit; its layer made up front, not mid-reveal */
.view-home .hl-item.lit::after { opacity: 0 }
.view-home .hl-item::before { background: rgb(255, 236, 205); opacity: 0; transition-duration: .3s; will-change: opacity }   /* catching the light */
.view-home .hl-item.near::before { opacity: .07 }
.view-home .hl-item .hp-door { display: block; outline-offset: 6px; -webkit-tap-highlight-color: transparent; touch-action: manipulation }
.view-home .hl-item .hp-pq { transition: none; box-shadow: 0 calc(3 * var(--pq-u)) calc(6 * var(--pq-u)) rgba(0, 0, 0, .55) }
.view-home .hl-item .hp-door:hover .hp-pq { transform: none }
/* leaning out: a deeper shadow, made once and faded in (never re-drawn as the pointer arrives) */
.view-home .hl-item .hp-door::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; will-change: opacity; transition: opacity .3s ease;
  box-shadow: 0 calc(6 * var(--pq-u)) calc(11 * var(--pq-u)) rgba(0, 0, 0, .62) }
.view-home .hl-item.near .hp-door::before { opacity: 1 }
/* the downlight over each plaque */
.view-home .hl-glow {
  position: absolute; pointer-events: none; opacity: 0; transition: opacity .7s ease; will-change: opacity;
  /* plain alpha, never a blend mode: a blended sibling flattens the wall's 3D (the plaques could no longer lean out) */
  background: radial-gradient(closest-side, rgba(255, 214, 150, .34), rgba(255, 200, 120, .09) 55%, rgba(255, 200, 120, 0));
}
.view-home .hl-glow.lit { opacity: .7 }
/* the reveal: each light comes on after its own delay (hall.js sets --d) */
.view-home .hall.hl-rising .hl-item::after, .view-home .hall.hl-rising .hl-glow { transition-delay: var(--d, 0s) }

/* walking in: the chosen plaque comes forward, the rest go dark */
.view-home .hall.leaving .hl-item:not(.go)::after { opacity: .72; transition-duration: .4s }
.view-home .hall.leaving .hl-glow { opacity: .15 }
.view-home .hl-item.go { z-index: 3; transition: transform .62s cubic-bezier(.3, .7, .2, 1) }

/* "Choose your sound. Enter the studio." over the photo: bottom left on a computer, at the top on a phone */
.view-home .hall .wall-head {
  --wall-ink: #efe3cc; position: absolute; z-index: 4; left: clamp(22px, 3.4vw, 52px); bottom: clamp(22px, 3.4vw, 46px); width: min(52%, 700px);
  padding: 0; color: #efe3cc; pointer-events: none; text-shadow: 0 2px 24px rgba(0, 0, 0, .6);
}
.view-home .hall .facts { display: none }
.view-home .hall .choose { margin-top: 0; font-size: clamp(34px, 4.1vw, 62px) }
.view-home .hall .choose span { color: #efe3cc }
.view-home .hl-hint { margin: clamp(12px, 1.4vw, 18px) 0 0; font: italic 400 16px/1.25 "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif; color: rgba(239, 227, 204, .72) }
.view-home .hl-mouse { display: none }
@media (hover: hover) and (pointer: fine) { .view-home .hl-mouse { display: inline } .view-home .hl-touch { display: none } }
.view-home .hall.hl-tall .wall-head { left: 16px; right: 16px; top: 16px; bottom: auto; width: auto }
.view-home .hall.hl-tall .choose { font-size: clamp(30px, 9.4vw, 40px) }
.view-home .hall.hl-tall .hl-hint { font-size: 14px }

@media (max-width: 759px) {
  .home-hall .view-home .hall-wall .wall-in { padding: 6px }
  .view-home .hall { height: max(640px, calc(100vh - 76px)); height: max(640px, calc(100svh - 76px)) }
}

@media (prefers-reduced-motion: reduce) {
  .view-home .hl-grid, .view-home .hl-item, .view-home .hl-item::before, .view-home .hl-item::after, .view-home .hl-glow, .view-home .hl-dim { transition: none }
  .view-home .hall.hl-dark .hl-grid { transform: none }
}