/* =========================================================
   QUOREAL / V60: WHY QUOREAL scroll-linked cutout entrance
   2026-10-16
   Scope: desktop TOP / WHY QUOREAL photographic English heading only.

   V59 hid / scaled the title using IntersectionObserver classes, while
   position overrides replaced the existing section scroll transform.
   WORKS already uses the scroll progress custom properties set by
   brand-motion.js. Reuse those values here while preserving the final
   desktop position approved in V58. Do not modify mobile / other stages.
   ========================================================= */

@media (min-width: 901px) {
  /* Final resting offset from V58. Retain as a fallback when JS is off. */
  .strength .why-head.q-section-stage .q-section-stage__en {
    --q-why-final-x: max(24px, min(120px, calc((100vw - var(--container)) / 2 - 22px)));
    --q-why-final-y: clamp(-56px, -3vw, -40px);
    transform: translate(var(--q-why-final-x), var(--q-why-final-y)) !important;
  }

  /* Follow the exact scroll-driven scale, displacement, and reveal
     timing already used by the WORKS heading. No 1-second autoplay:
     motion only progresses as the section scrolls into the viewport. */
  html.q-motion-enabled .strength .why-head.q-section-stage .q-section-stage__en {
    transform:
      translate(var(--q-why-final-x), var(--q-why-final-y))
      translate3d(var(--q-stage-x, 0px), var(--q-stage-y, 0px), 0)
      rotate(var(--q-stage-rotate, 0deg))
      scaleX(var(--q-stage-scale-x, 1))
      scaleY(var(--q-stage-scale-y, 1)) !important;
    opacity: var(--q-stage-title-opacity, 0) !important;
    clip-path: inset(
      var(--q-stage-clip-top, 0%)
      var(--q-stage-clip-right, 0%)
      var(--q-stage-clip-bottom, 0%)
      var(--q-stage-clip-left, 0%)
    ) !important;
    letter-spacing: var(--q-stage-letter-spacing, -.058em) !important;
    transform-origin: 72% 52% !important;
    transition: none !important;
    filter: grayscale(1) contrast(1.13) !important;
    will-change: transform, opacity !important;
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 901px) {
  html.q-motion-enabled .strength .why-head.q-section-stage .q-section-stage__en {
    transform: translate(var(--q-why-final-x), var(--q-why-final-y)) !important;
    opacity: 1 !important;
    clip-path: none !important;
  }
}