/* Aether Motion: compositor-friendly scene surfaces and deliberate layer lifetimes. */

/* Keep the photographic grade in the static shade layers, not a moving full-screen filter. */
.home-cinema-image,
.home-chapter-image,
.home-feature-0 .home-chapter-image img,
.scene-backdrop{filter:none}
.scene-light{mix-blend-mode:normal;opacity:.2}
.atlas-ready .home-chapter-image img,
.scene-hotspot{transition:none}

/* Opaque pigments preserve the warm glass treatment without sampling the moving scene. */
.site-header,
.atlas-ready .atlas-controls,
.product-details,
.product-editorial,
.product-note,
.menu-information,
.menu-editorial,
.menu-taste-note,
.menu-controls button,
.scene-hotspot span,
.am-explorer-dock{backdrop-filter:none;-webkit-backdrop-filter:none}
.site-header{background:linear-gradient(180deg,#081411f7,#081411e8)}
.atlas-ready .atlas-controls{background:#061210ed}
.product-details,.product-editorial{background:#221611e6}
.product-note{background:#251710e6}
.menu-information,.menu-editorial{background:#0e1b17e8}
.menu-taste-note{background:#102019e8}
.menu-controls button{background:#102019e6}
.scene-hotspot span{background:#071713d9}
.am-explorer-dock{background:#161915f5}

/* Enhancement-only surfaces stay absent in the reading and no-script layouts. */
.motion-matte{display:none}
.scene-hotspot::before,.scene-hotspot::after{animation-play-state:paused}

@media(prefers-reduced-motion:no-preference){
  /* The timeline owns both visibility and opacity, including legacy !important rules. */
  html.am-motion-ready .product-slide{
    clip-path:none;
    opacity:var(--scene-opacity,0)!important;
    transform:translate3d(0,var(--product-reveal-y,0px),0);
  }
  html.am-motion-ready .atlas-ready .home-chapter-image,
  html.am-motion-ready .atlas-ready .home-chapter-tint,
  html.am-motion-ready .story-interlude-media,
  html.am-motion-ready .product-detail-frame{clip-path:none;transition:none}

  /* Four flat matte edges replace a changing full-screen clip mask. */
  .home-chapter-stick{--motion-matte-color:#0c1d20}
  .home-feature-0 .home-chapter-stick{--motion-matte-color:#0a1b1c}
  .home-feature-1 .home-chapter-stick{--motion-matte-color:#a76c39}
  .home-feature-2 .home-chapter-stick{--motion-matte-color:#263831}
  .story-interlude-stage{--motion-matte-color:#0c1110}
  html.am-motion-ready .motion-matte{
    display:block;position:absolute;inset:0;z-index:2;
    overflow:hidden;pointer-events:none;
  }
  .motion-matte>i{
    display:block;position:absolute;margin:0;
    background:var(--motion-matte-color,#0c1110);pointer-events:none;
  }
  .motion-matte>.matte-left,.motion-matte>.matte-right{top:0;bottom:0;width:50%}
  .motion-matte>.matte-top,.motion-matte>.matte-bottom{left:0;right:0;height:50%}
  .motion-matte>.matte-left{left:0;transform:translate3d(var(--matte-x,-100%),0,0)}
  .motion-matte>.matte-right{right:0;transform:translate3d(calc(var(--matte-x,-100%) * -1),0,0)}
  .motion-matte>.matte-top{top:0;transform:translate3d(0,var(--matte-y,-100%),0)}
  .motion-matte>.matte-bottom{bottom:0;transform:translate3d(0,calc(var(--matte-y,-100%) * -1),0)}

  /* Bars keep a fixed box: only their visual scale follows scroll progress. */
  html.am-motion-ready :is(.cinema-progress,.feature-progress,.gallery-progress,.product-progress,.menu-progress,.story-interlude-progress)>span{
    width:100%;height:100%;transform:scaleX(var(--motion-progress,0));transform-origin:left center;transition:none;
  }
  html.am-motion-ready .atlas-controls i{
    width:100%;transform:scaleX(var(--atlas-progress,0));transform-origin:left center;transition:none;
  }
  html.am-motion-ready .story-ledger-progress>span,
  html.am-motion-ready .manifesto-progress{
    height:100%;transform:scaleY(var(--motion-progress,0));transform-origin:center top;transition:none;
  }

  /* Reserve layers only around the viewport; inactive panels release their descendants too. */
  html.am-motion-ready :is(.home-cinema-image,.home-chapter,.home-chapter-image,.product-slide,.menu-slide,.scene-backdrop,.scene-light,.product-cutout,.product-orbit,.menu-cutout,.menu-shutter,.story-interlude-media,.story-interlude-media img,.motion-matte>i){will-change:auto!important}
  html.am-motion-ready .motion-near :is(.home-cinema-image,.home-chapter-image,.scene-backdrop,.scene-light,.product-cutout,.product-orbit,.menu-cutout,.menu-shutter,.story-interlude-media img,.motion-matte>i){will-change:transform!important}
  html.am-motion-ready .motion-near :is(.home-chapter,.product-slide,.menu-slide).motion-present{will-change:opacity,transform!important}
  html.am-motion-ready :is(.atlas-ready .home-chapter,.product-slide,.menu-slide):not(.motion-present){visibility:hidden!important;will-change:auto!important}
  html.am-motion-ready :is(.atlas-ready .home-chapter,.product-slide,.menu-slide):not(.motion-present) *{will-change:auto!important}
  html.am-motion-ready :is(.atlas-ready .home-chapter,.product-slide,.menu-slide).motion-present{visibility:visible!important}
  html.am-motion-ready .motion-near .motion-present .scene-hotspot:not([inert]):not([aria-hidden="true"])::before,
  html.am-motion-ready .motion-near .motion-present .scene-hotspot:not([inert]):not([aria-hidden="true"])::after{animation-play-state:running}
}

@media(prefers-reduced-motion:reduce){
  .motion-matte{display:none!important}
}