/* Home's box (box.js sets the sizes and the turn). Six faces around a centre, each facing in, so from the open
   side you see the back wall and the four walls running out to the corners of the window. The faces are blank
   paper; their edges are drawn flat over them (.box-lines), so they stay smooth while the box moves. */
body.home-page:not(.box-gone)::before { display: none; }   /* no fade under the header while the box is up: it sits on the ceiling */

.box-track { position: relative; block-size: var(--track, 300svh); margin-block-end: clamp(96px, 16vh, 200px); }
.box-stage {
  position: sticky; inset-block-start: 0; block-size: 100svh; overflow: hidden;
  perspective: var(--p, 4000px); perspective-origin: var(--ox, 50%) var(--oy, 50%);
  transition: opacity 300ms var(--ease-out);
}
/* Until box.js has sized and drawn it, the box would be flat faces on top of each other: keep it out of sight. */
.box-stage:not(.is-ready) { opacity: 0; }
@media (scripting: none) { .box-stage:not(.is-ready) { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .box-stage { transition: none; } }
.box { position: absolute; inset: 0; pointer-events: none; transform-style: preserve-3d; transform: translateZ(calc(var(--d, 900px) / -2)); }
.face {
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: var(--bg);
}
.face-back, .face-front { inline-size: var(--w); block-size: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2); }
.face-floor, .face-ceiling { inline-size: var(--w); block-size: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--w) / -2); }
.face-left, .face-right { inline-size: var(--d); block-size: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--d) / -2); }
.face-back { transform: translateZ(calc(var(--d) / -2)); }
.face-front { transform: rotateX(180deg) translateZ(calc(var(--d) / -2)); }   /* upright once the box has turned twice */
.face-floor { transform: rotateX(90deg) translateZ(calc(var(--h) / -2)); }
.face-ceiling { transform: rotateX(-90deg) translateZ(calc(var(--h) / -2)); }
.face-left { transform: rotateY(90deg) translateZ(calc(var(--w) / -2)); }
.face-right { transform: rotateY(-90deg) translateZ(calc(var(--w) / -2)); }
.face-back, .face-floor, .face-front { pointer-events: auto; }
.box-lines { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; pointer-events: none; fill: none; stroke: var(--ink); stroke-width: 1.5px; stroke-linecap: round; }   /* the box itself and the bare walls let clicks through */

/* The back wall: the heat logo, big, and the statement, in the middle. */
.hero { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 0; padding: 0 12%; text-align: center; }
.hero-mark { margin: 0 0 clamp(40px, 5vh, 64px); font-weight: 400; }
/* The box is the letters' own size (the lockup's proportions); the picture spills past it for the glow (site.css). */
.hero-logo { position: relative; display: block; inline-size: clamp(300px, 38vw, 600px); aspect-ratio: 228 / 68; }
.hero-statement { margin: 0; max-inline-size: 22em; font-size: clamp(20px, 1.5vw, 24px); line-height: 1.45; color: var(--strong); text-wrap: balance; }
.hero-opening { margin: 6px 0 0; font-size: clamp(17px, 1.2vw, 19px); color: var(--faint); }
/* Join and Host an event: the same height and width, side by side; Join carries the logo's warmth. */
.hero-next { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-block-start: 36px; }
.hero-next .button { block-size: 48px; min-inline-size: 168px; padding-inline: 26px; font-size: 16px; font-weight: 500; }
.hero-next .button:not(.button-quiet) { box-shadow: 0 0 0 1px #ffffff26, 0 8px 32px -6px #ff991e59, 0 2px 18px -4px #ff298d4d; }
@media (hover: hover) and (pointer: fine) {
  .hero-next .button:not(.button-quiet):hover { box-shadow: 0 0 0 1px #ffffff40, 0 10px 40px -4px #ff991e80, 0 2px 24px -2px #ff298d73; }
}

/* The floor: what members make. When the box has turned it faces you; a long table slides up inside it. */
/* No clipping on a face itself: Chrome stops hit-testing a turned face that clips. The panels inside clip instead. */
.made { position: absolute; inset: 0; inline-size: auto; margin: 0; padding: clamp(48px, 7%, 88px) clamp(28px, 6%, 88px); overflow: hidden; }
.made[hidden] { display: none; }
.made-inner { max-inline-size: 84rem; margin: 0 auto; will-change: transform; }

/* The front: the space, a map that fills the face (home.css). Facing you after the second turn. */
.face-front .place { position: absolute; inset: 0; inline-size: auto; margin: 0; padding: 0; overflow: hidden; }

/* No box, no 3D: the hero fills the first screen and the work follows in the page. */
.flat .box-track { block-size: auto; }
.flat .box-stage { position: relative; block-size: auto; overflow: visible; perspective: none; }
.flat .box { position: relative; transform: none; }
.flat .face { position: relative; inset: auto; margin: 0; transform: none; inline-size: auto; block-size: auto; box-shadow: none; }
.flat .face-back { block-size: 100svh; }
.flat .face-floor { overflow: visible; }
.flat :is(.made, .face-front .place) { position: relative; }
.flat :is(.face-ceiling, .face-left, .face-right, .box-lines) { display: none; }

@media (max-width: 760px) {
  .hero { padding: 0 9%; }
  .hero-mark { margin-block-end: 28px; }
  .hero-logo { inline-size: min(78vw, 340px); }
  .hero-next .button { min-inline-size: 0; flex: 1 1 140px; }
}