/* ════════════════════════════════════════════════════════════
   STICKY SCENES — see js/scenes.js
   A scene is a tall, transparent outer box holding a sticky stage that fills
   the viewport. The stage stays still and dissolves in over the section above.
   Revert: remove this <link> and js/scenes.js; the data-fade-scene sections
   fall back to their normal layout.
   ════════════════════════════════════════════════════════════ */

.scene {
  position: relative;
  z-index: 2;
  /* Pulled up so the stage dissolves in over the section above it. Half a
     viewport, matching the overlap the painting site uses. */
  margin-top: -50vh;
  padding: 0 !important;
  /* overflow:hidden here would make this a scroll container and kill sticky. */
  overflow: visible;
  /* While the stage is still transparent it must not intercept clicks meant
     for the section underneath. The stage opts back in. */
  pointer-events: none;
}

.scene__stage {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding: clamp(48px, 6vw, 96px) 0;
  overflow: hidden;
  opacity: 0; /* js/scenes.js drives opacity and transform together */
  /* Tilts up from its base rather than pivoting about the middle. */
  transform-origin: 50% 100%;
  will-change: opacity, transform;
  pointer-events: auto;
}

/* The stage is the painted surface now, so decorative pseudo-elements that were
   positioned against the section need to follow it in. */
.scene .cta-banner__inner,
.scene .owner-strip__inner { position: relative; z-index: 1; }

@media (max-width: 767px) {
  .scene { margin-top: -28vh; }
  .scene__stage { padding: clamp(40px, 10vw, 72px) 0; }
}