/* TTM Site Next — LAB · PAGE SCENES foundation (Product + About).
   Base geometry the page-scenes.js engine drives: each scene is a tall
   relative region whose pin sticks to the viewport while the region
   scrolls past; the body is the element the engine transforms.
   (home.css does not carry these — home's scenes use their own pattern.) */

.hscene { position: relative; }

.hscene-pin {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center; /* pan scenes get inline flex-start from the engine */
  align-items: stretch;
  overflow: clip; /* entering/exiting scenes travel sideways — never leak */
}

.hscene-body {
  width: 100%;
  will-change: transform, opacity, filter;
}

/* BEATS — when the engine arms a beats scene (desktop), the beat groups
   stack absolutely inside their wrap and play one at a time; the engine
   sets the wrap's height to the tallest group. (product.css references
   this rule; home.css never carried it.) */
.beats-on [data-beat] {
  position: absolute;
  inset: 0;
  will-change: transform, opacity;
}