/* Each wheel/touch delta scrubs a finite composition. All visual properties
   are functions of that position: no autoplay, snapping, or transition timers. */
#deck.motion-ready {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: pan-x pinch-zoom;
}

#deck.motion-ready .slide,
#deck.motion-ready .slide.is-active,
#deck.motion-ready .slide.is-leaving {
  --slide-offset: 0;
  --slide-distance: 0;
  --scene-reveal: 100%;
  --scene-z: 1;
  display: none;
  visibility: hidden;
  opacity: 1;
  z-index: var(--scene-z);
  pointer-events: none;
  transition: none;
  transform: none;
  clip-path: inset(0 0 calc(100% - var(--scene-reveal)) 0);
  backface-visibility: hidden;
  contain: layout style paint;
}
#deck.motion-ready .slide.is-near { display: flex; }
#deck.motion-ready .slide.is-visible { visibility: visible; }
#deck.motion-ready .slide.is-active { pointer-events: auto; }
#deck.motion-ready .canvas { transform: none; }

/* The opening is one pinned composition. Light rises over the dark brand;
   clipping both the background and its dark logo keeps contrast intact. */
#deck.motion-ready.hero-pair-reveal #identidade,
#deck.motion-ready.hero-pair-reveal #marca-luz { opacity: 1; }
#deck.motion-ready.hero-pair-reveal #marca-luz {
  clip-path: circle(var(--hero-reveal-radius, 0px) at 50% 100%);
}
#deck.motion-ready:not(.hero-pair-reveal) #marca-luz { clip-path: none; }

/* Opaque scenes reveal from the top, preserving contrast at every fractional
   stop. Foregrounds continue moving independently at different depths. */
#deck.motion-ready .motion-layer {
  transform: translate3d(0, calc(var(--slide-offset) * var(--layer-travel, 20cqh)), 0)
    scale(calc(1 - var(--slide-distance) * .055));
  transform-origin: 50% 55%;
  opacity: clamp(.72, calc(1 - var(--slide-distance) * (.22 + var(--layer-shift, 0) * .15)), 1);
}
#deck.motion-ready .motion-piece {
  transform: translate3d(0, calc(var(--slide-offset) * var(--piece-travel, 6cqh)), 0);
  opacity: clamp(.78, calc(1 - var(--slide-distance) * (.15 + var(--piece-stagger, 0) * .2)), 1);
}
#deck.motion-ready .slide:not(#identidade):not(#marca-luz) :is(.page-header, .folio) {
  transform: translate3d(0, calc(var(--slide-offset) * 4.5cqh), 0);
  opacity: clamp(.6, calc(1 - var(--slide-distance) * .4), 1);
}
#deck.motion-ready .slide:not(#identidade):not(#marca-luz) .folio {
  opacity: clamp(.4, calc(.65 - var(--slide-distance) * .25), .65);
}
#deck.motion-ready :is(.about-photo, .personality-portrait) img {
  transform: scale(calc(1 + var(--slide-distance) * .22))
    translate3d(0, calc(var(--slide-offset) * -8%), 0);
  transform-origin: center;
}
#deck.motion-ready .application-layout figure img {
  transform: scale(calc(1 + var(--slide-distance) * .085))
    translate3d(0, calc(var(--slide-offset) * -5%), 0);
}
#deck.motion-ready .voice-background {
  transform: scale(calc(1.015 + var(--slide-distance) * .12))
    translate3d(0, calc(var(--slide-offset) * -5%), 0);
}
#deck.motion-ready .vertical-rail {
  transform: translate3d(0, calc(var(--slide-offset) * -22cqh), 0);
  opacity: clamp(0, calc(1 - var(--slide-distance) * 1.4), 1);
}
#deck.motion-ready .application-rail {
  transform: translate3d(0, calc(var(--slide-offset) * -17cqh), 0);
}
/* Keep only the neighboring scenes ready between input events; layer
   promotion no longer toggles on every mouse detent or idle frame. */
#deck.motion-ready .slide.is-near { will-change: clip-path; }
#deck.motion-ready .slide.is-near .motion-layer,
#deck.motion-ready .slide.is-near :is(.about-photo, .personality-portrait, .application-layout figure) img,
#deck.motion-ready .slide.is-near .voice-background { will-change: transform, opacity; }

.motion-ready ~ .presentation-controls #progress-bar {
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  transition: none;
  will-change: transform;
}
.presentation-controls button { transition: background .2s ease, color .2s ease, transform .2s ease; }
.presentation-controls button:active { transform: scale(.92); }

/* The mobile offer is one joined composition: independently translating and
   scaling its cards breaks their shared edges as the scroll position changes. */
@media (max-width: 700px) and (orientation: portrait) {
  #deck.motion-ready #oferta .offer-layout {
    transform: translate3d(0, calc(var(--slide-offset) * 20cqh), 0)
      scale(calc(1 - var(--slide-distance) * .035));
    transform-origin: 50% 55%;
    opacity: clamp(.8, calc(1 - var(--slide-distance) * .18), 1);
  }
  #deck.motion-ready #oferta .offer-layout > .motion-layer {
    transform: none;
    opacity: 1;
    will-change: auto;
  }
  #deck.motion-ready #oferta.is-near .offer-layout { will-change: transform, opacity; }
}

@media (prefers-reduced-motion: reduce) {
  #deck.motion-ready .slide,
  #deck.motion-ready .canvas,
  #deck.motion-ready #oferta .offer-layout,
  #deck.motion-ready :is(.motion-layer, .motion-piece, .page-header, .folio, .vertical-rail, .application-rail, .voice-background),
  #deck.motion-ready :is(.about-photo, .personality-portrait, .application-layout figure) img {
    transform: none !important;
    clip-path: none !important;
  }
  #deck.motion-ready .slide,
  #deck.motion-ready .slide.is-near,
  #deck.motion-ready .slide.is-visible { display: none; visibility: hidden; }
  #deck.motion-ready .slide.is-active { display: flex; visibility: visible; opacity: 1; }
  #deck.motion-ready :is(.motion-layer, .motion-piece, .page-header, .vertical-rail) { opacity: 1; }
  #deck.motion-ready .folio { opacity: .65; }
  #deck.motion-ready #oferta .offer-layout { opacity: 1; }
  #deck.motion-ready #oferta.is-near .offer-layout { will-change: auto; }
  #deck.motion-ready .slide.is-near,
  #deck.motion-ready .slide.is-near :is(.motion-layer, .voice-background),
  #deck.motion-ready .slide.is-near :is(.about-photo, .personality-portrait, .application-layout figure) img { will-change: auto; }
  .presentation-controls button { transition: none; }
}

@media print {
  #deck.motion-ready { overflow: visible; }
  #deck.motion-ready .slide,
  #deck.motion-ready .slide.is-active,
  #deck.motion-ready .slide.is-leaving {
    display: block !important;
    transform: none !important;
    clip-path: none !important;
  }
  #deck.motion-ready .canvas,
  #deck.motion-ready #oferta .offer-layout,
  #deck.motion-ready :is(.motion-layer, .motion-piece, .page-header, .folio, .vertical-rail, .application-rail, .voice-background),
  #deck.motion-ready :is(.about-photo, .personality-portrait, .application-layout figure) img {
    transform: none !important;
    opacity: 1 !important;
  }
}