/* Keep native scrolling cheap while retaining clear, readable product screens.
   Original screenshots remain in the accessibility tree and in normal layout. */

/* The first live frame matches the poster's cover projection. Replace it in
   one paint, without the ghosted zoom of a dissolve between two scene layers. */
.freight-world{background:#20272c}
.freight-poster{position:absolute;inset:0;display:block;opacity:1;transition:none}
.freight-poster img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
#freight-canvas{position:relative;z-index:1;transition:none}
.freight-world[data-ready=true] .freight-poster{opacity:0;visibility:hidden}
.freight-world .road-fallback{display:none}
#experience-motion{display:inline-flex;align-items:center;justify-content:center;gap:6px}
#experience-motion[hidden]{display:none}
#experience-motion::after{content:none!important}
#experience-motion .site-icon{width:12px;height:12px;flex:0 0 12px}
@media(prefers-reduced-motion:reduce){.freight-poster,#freight-canvas{transition:none}}

.phone-frame{--phone-shell-depth:13.05px}
.phone-hardware::before,.phone-hardware::after{content:"";position:absolute;top:6.45%;bottom:6.45%;width:var(--phone-shell-depth);transform-origin:left center;transform:rotateY(90deg);background:linear-gradient(90deg,#aab7c0,#596b78 38%,#8999a4 73%,#526572);pointer-events:none;backface-visibility:visible}
.phone-hardware::before{left:.15px}
.phone-hardware::after{left:calc(100% - .15px)}
.hardware-slice[data-shell-plane=middle]{box-shadow:none}
.hardware-slice[data-shell-plane=back]{background:linear-gradient(115deg,#717f88,#97a3ad 40%,#677782);box-shadow:inset 0 0 0 1px #b6c1c9,0 16px 26px #0009}

/* The screenshot already supplies the reflected detail. A tiny static highlight
   avoids a second full-screen blend surface while leaving the pointer tilt live. */
.mac-frame>.device-sheen,.shop-screens figure>.screen-shot>.device-sheen{mix-blend-mode:normal;background:linear-gradient(120deg,#ffffff06,transparent 30%,transparent 83%,#b7cad105)}
[data-device-active=true][data-device-interacting=true]{will-change:transform}
/* Hiding hardware alone still leaves the offscreen perspective surface alive.
   The observer restores it before entry; transforms never affect story layout. */
[data-device-active=false]{will-change:auto!important;transition:none!important;transform:none!important;transform-style:flat!important;box-shadow:none!important;filter:none!important}
[data-device-active=false]>.phone-hardware,[data-device-active=false]>.device-sheen,[data-device-active=false]>.device-edge{display:none!important}
[data-device-active=false]::before,[data-device-active=false]::after{display:none!important}
[data-device-active=false]>.screen-shot{transform:none!important;will-change:auto!important;box-shadow:none!important}

/* Strong, tighter contact shadows retain depth with much smaller raster bounds. */
.desktop-capture.mac-fourteen{box-shadow:inset 0 0 0 1px #c6cdd67d,3px 2px #7c858d,6px 4px #16212a,10px 8px 14px #0008,0 22px 36px #000a}
.billing-board.mac-frame{box-shadow:inset 0 0 0 1px #07090b,3px 3px #262c33,6px 5px #3c4650,0 20px 34px #0009}
.shop-screens figure>.screen-shot{box-shadow:3px 3px #626a71,0 16px 28px #0009}
.document-file{filter:none}

/* Fixed overlays must not repeatedly blur the moving WebGL canvas below them. */
.site-header,.journey-rail,.story-caption,.product-caption,.world-shade,.zoom-label,.scene-guide-panel,.screen-dialog,.paper-dialog,.paper-dialog-bar{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.scene-guide-panel{background:#10151bf7;box-shadow:0 12px 26px #0008}
.screen-dialog::backdrop,.paper-dialog::backdrop{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:#030608ed}

@media(max-width:600px){
  .phone-frame{--phone-shell-depth:8.1px}
  .hardware-slice[data-shell-plane=back]{box-shadow:inset 0 0 0 1px #b6c1c9,0 12px 19px #0009}
  .desktop-capture.mac-fourteen{box-shadow:inset 0 0 0 1px #c6cdd67d,2px 1px #7c858d,4px 3px #16212a,0 16px 26px #000a}
  .shop-screens figure>.screen-shot{box-shadow:2px 2px #626a71,0 12px 22px #0008}
}
@media(prefers-reduced-motion:reduce){
  [data-device-active]{transition:none!important;will-change:auto!important}
  .phone-hardware::before,.phone-hardware::after{display:none}
}

/* Phone mockups present the original app screens without enlargement controls.
   Their enclosing device still provides the same three-dimensional pointer tilt. */
.phone-frame [data-phone-screen],.shop-screens [data-phone-screen]{cursor:default}
[data-phone-screen]>.zoom-label{display:none!important}

/* Project each original screenshot once. Nested scroll rotations flattened the
   device into a second low-resolution layer, especially in mobile Safari. */
.hero-device-stage[data-depth],.chapter-visual[data-depth],.shop-screens[data-depth],.invoice-composition[data-depth]{
  transform:translateY(var(--depth-y,0px));
}
.phone-frame{--device-ry:-6deg}
.hero-product .hero-phone{
  --device-ry:-8deg;--device-rz:1deg;
  transform:perspective(1500px) translateZ(16px) rotateX(calc(2deg + var(--tilt-x))) rotateY(calc(-8deg + var(--tilt-y))) rotateZ(1deg);
}
.desktop-capture.mac-fourteen{
  transform:perspective(1900px) rotateX(calc(2deg + var(--tilt-x))) rotateY(calc(-7deg + var(--tilt-y))) rotateZ(-1deg);
}
.phone-frame .device-sheen{display:none}
@media(max-width:600px){
  /* Read the app at page size; no tap-to-enlarge interaction is introduced. */
  .hero-product .hero-phone{width:clamp(210px,62vw,260px);--device-ry:-4deg;--device-rz:0deg;transform:perspective(1500px) rotateY(-4deg)}
  .hero-device-stage{--phone-top:105px}
  .desktop-capture.mac-fourteen{transform:perspective(1900px) rotateY(-4deg)}
  .phone-frame{--device-ry:-4deg;--device-rz:0deg;transform:perspective(1500px) rotateY(-4deg)}
  .hero-product>.product-caption{margin-top:34px}
}
@media(prefers-reduced-motion:reduce){
  .hero-product .hero-phone,.desktop-capture.mac-fourteen,.phone-frame{transform:none!important}
}