/* Scroll depth uses the existing field, photograph and practice sheet.
   Copy, controls and product geometry retain their normal document order. */
@media (prefers-reduced-motion: no-preference) {
  .astra-v2.depth-ready .a-reveal { opacity: 1; transform: none; transition: none; }
  .depth-ready .a-play-layout,
  .depth-ready .a-corner-layout,
  .depth-ready .a-swing-layout { isolation: isolate; }
  /* A plane is wider than its own box once perspective projects its tilt, and
     on a phone these layouts already reach both edges of the screen, so the
     extra width reaches the document and the page pans a pixel or two
     sideways. Contain each scene at its section, which is the full page
     width, so every deliberate bleed still paints out to the edge of the
     screen and only off-screen width is dropped. Clip, not hidden: a section
     must not become a scroll container. */
  .depth-ready .a-iq,
  .depth-ready .a-corner,
  .depth-ready .a-swing { overflow-x: clip; }

  .depth-ready .a-stage-wrap {
    transform-origin: 50% 65%;
    transform: perspective(1500px) translate3d(0, var(--depth-field-y, 0px), 0)
      rotateX(var(--depth-field-tilt, 0deg));
  }
  .depth-ready .a-corner-photo {
    transform-origin: 85% 35%;
    transform: perspective(1400px) translate3d(0, var(--depth-photo-y, 0px), -18px)
      rotateY(var(--depth-photo-yaw, 0deg));
  }
  .depth-ready .a-practice {
    transform-origin: 10% 55%;
    transform: perspective(1400px) translate3d(0, var(--depth-sheet-y, 0px), 0)
      rotateY(var(--depth-sheet-yaw, 0deg)) rotateX(var(--depth-sheet-tilt, 0deg));
  }
  .depth-ready .a-swing-visual {
    transform-origin: 85% 50%;
    transform: perspective(1600px) translate3d(0, var(--depth-swing-y, 0px), 0)
      rotateY(var(--depth-swing-yaw, 0deg));
  }
  .depth-ready .a-swing-visual > img {
    transform: translate3d(0, var(--depth-image-y, 0px), 0) scale(1.07);
  }
  /* Reading and operating a product always settles its plane. A mouse, touch
     or keyboard interaction holds that state until the section leaves view. */
  .depth-ready .a-play-layout[data-depth-engaged] .a-stage-wrap,
  .depth-ready .a-stage-wrap:focus-within,
  .depth-ready .a-corner-layout[data-depth-engaged] .a-practice,
  .depth-ready .a-practice:focus-within { transform: none; }
  .depth-ready .depth-visible > .a-stage-wrap,
  .depth-ready .depth-visible > .a-corner-photo,
  .depth-ready .depth-visible > .a-practice,
  .depth-ready .depth-visible > .a-swing-visual { will-change: transform; }
}
/* Short desktop windows need the complete original lockup above the tagline. */
@media (min-width: 761px) and (min-height: 521px) and (max-height: 800px) {
  body.astra-v2 .lights { --opening-composition-lift: 0px; }
  body.astra-v2 .lights-inner { inset: 16px 0 145px; }
  body.astra-v2 .lights-lockup img { width: min(31vw, 43svh); }
  body.astra-v2 .lights-tagline { font-size: clamp(58px, 10svh, 80px); }
  body.astra-v2 .lights-line { margin-top: 18px; }
  body.astra-v2 .lights-rule { margin-bottom: 18px; }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .depth-ready .a-corner-photo { transform-origin: 50% 0; }
  .depth-ready .a-practice { transform-origin: 50% 0; }
  .depth-ready .a-swing-visual { transform-origin: 50% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .depth-ready .a-stage-wrap,
  .depth-ready .a-corner-photo,
  .depth-ready .a-practice,
  .depth-ready .a-swing-visual,
  .depth-ready .a-swing-visual > img { transform: none !important; will-change: auto; }
}