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

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

.view-home .crate {
  position: relative; overflow: hidden; isolation: isolate; background: #0b0806;
  height: clamp(520px, calc(100vh - 110px), 62vw); height: clamp(520px, calc(100svh - 110px), 62vw);
  touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  cursor: grab; outline: none;
}
.view-home .crate:focus-visible { outline: 3px solid var(--wall-spot); outline-offset: 4px }
.view-home .cr-photo { position: absolute; display: block; max-width: none; pointer-events: none; -webkit-user-drag: none }
.view-home .cr-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%) }

/* the crate: the plaques stand in the photo's perspective (crate.js sets it from the photo) */
.view-home .cr-stack { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none }
.view-home .cr-item {
  position: absolute; left: 0; top: 0; transform-origin: 50% 100%; will-change: transform, opacity;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  transition: transform .62s cubic-bezier(.2, .75, .2, 1), opacity .42s ease, filter .5s ease;
}
.view-home .cr-item.jump { transition: none }
.view-home .cr-item .hp-door { display: block; pointer-events: none }
.view-home .cr-item .pq { box-shadow: 0 calc(3.5 * var(--pq-u)) calc(7 * var(--pq-u)) rgba(0, 0, 0, .6) }
.view-home .cr-stand { position: absolute; border-radius: 3px; pointer-events: none; background: linear-gradient(180deg, #f3dc9e, #a5782e 60%, #6b4b1c); box-shadow: 0 6px 14px rgba(0, 0, 0, .6); transition: opacity .3s ease }
.view-home .crate.leaving .cr-stand { opacity: .35 }

/* "Choose your sound. Enter the studio." printed over the photo, top left */
.view-home .crate .wall-head {
  --wall-ink: #efe3cc; position: absolute; z-index: 4; left: clamp(22px, 3.4vw, 52px); top: clamp(20px, 3vw, 42px); width: min(46%, 640px);
  padding: 0; color: #efe3cc; pointer-events: none; text-shadow: 0 2px 24px rgba(0, 0, 0, .6);
}
.view-home .crate .facts { color: rgba(239, 227, 204, .86); border-color: rgba(239, 227, 204, .55) }
.view-home .crate .choose { margin-top: clamp(14px, 1.8vw, 24px); font-size: clamp(34px, 4.1vw, 62px) }
.view-home .crate .choose span { color: #efe3cc }

/* the card: the genre in front, its count, the arrows and the way in */
.view-home .cr-card {
  position: absolute; z-index: 5; left: 50%; bottom: clamp(14px, 2.2vw, 28px); transform: translateX(-50%); width: min(880px, calc(100% - 48px));
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 16px 18px 16px 26px; border-radius: 22px;
  background: rgba(18, 13, 9, .6); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid rgba(239, 227, 204, .14);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45); color: #efe3cc; cursor: auto; transition: opacity .3s ease;
}
.view-home .crate.leaving .cr-card { opacity: 0 }
.view-home .cr-what { min-width: 0 }
.view-home .cr-genre { margin: 0; font: italic 500 30px/1.05 "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.view-home .cr-meta { margin: 6px 0 0; font: 600 11px/1 "Hanken Grotesk", -apple-system, "Helvetica Neue", Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: rgba(239, 227, 204, .72) }
.view-home .cr-ctl { display: flex; align-items: center; gap: 10px }
.view-home .cr-btn {
  width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid rgba(239, 227, 204, .3);
  background: rgba(12, 9, 7, .35); color: #efe3cc; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background .2s ease, border-color .2s ease;
}
.view-home .cr-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
@media (hover: hover) { .view-home .cr-btn:hover { background: rgba(239, 227, 204, .1); border-color: rgba(239, 227, 204, .55) } }
.view-home .cr-enter {
  height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 22px; border-radius: 24px; white-space: nowrap;
  background: linear-gradient(180deg, #ecd08f, #c9a253); color: #1a120a; text-decoration: none; box-shadow: 0 10px 30px rgba(201, 162, 83, .3);
  font: 600 12px/1 "Hanken Grotesk", -apple-system, "Helvetica Neue", Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: filter .2s ease, transform .2s ease;
}
@media (hover: hover) { .view-home .cr-enter:hover { filter: brightness(1.06); transform: translateY(-1px) } }
.view-home .cr-btn:focus-visible, .view-home .cr-enter:focus-visible { outline: 2px solid #e2c27a; outline-offset: 3px }

/* walking in: the screen goes dark on the way to the room */
.cr-curtain { position: fixed; inset: 0; z-index: 2147483000; background: #0b0806; opacity: 0; pointer-events: none }

/* iPhone: one tall print, the heading at the top, the card at the bottom */
@media (max-width: 759px) {
  .home-crate .view-home .crate-wall .wall-in { padding: 6px }
  .view-home .crate { height: max(560px, calc(100vh - 76px)); height: max(560px, calc(100svh - 76px)) }
  .view-home .crate .wall-head { left: 16px; top: 16px; width: calc(100% - 32px) }
  .view-home .crate .facts { display: none }
  .view-home .crate .choose { margin-top: 0; font-size: clamp(30px, 9.4vw, 40px) }
  .view-home .cr-card { width: calc(100% - 16px); bottom: 8px; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px 14px 14px 18px }
  .view-home .cr-genre { font-size: 24px }
  .view-home .cr-ctl { justify-content: space-between }
  .view-home .cr-enter { flex: 1; padding: 0 14px }
}
@media (max-width: 359px) { .view-home .cr-enter { letter-spacing: .1em } }

@media (prefers-reduced-motion: reduce) {
  .view-home .cr-item, .view-home .cr-stand, .view-home .cr-card { transition: none }
}