/* Marina: shared presentation for the existing local/hosted motion adapters.
   Opt-in only. Runtime owns measured bounds, gestures, focus, routes and reads.
   Load after existing phone/thread layout. No layout, font, art or page rewrite. */
[data-office-motion] {
  --office-motion-duration: 220ms;
  --office-motion-easing: cubic-bezier(.2,.8,.2,1);
  --office-motion-radius: 16px;
  --office-motion-scrim-opacity: .38;
  --office-motion-progress: 0;
  --office-motion-offset: 0px;
  --office-motion-corner: 0px;
}

@media (max-width:820px) {
  [data-office-motion="drawer"] :is(
    [data-office-layer="drawer-face"],
    [data-office-layer="drawer-face-header"],
    [data-office-layer="drawer-scrim"]
  ),
  [data-office-motion="back"] [data-office-layer="thread-current"] {
    transform: translate3d(var(--office-motion-offset),0,0);
    transition: none;
  }

  [data-office-motion="drawer"] :is(
    [data-office-layer="drawer-face"],
    [data-office-layer="drawer-face-header"]
  ) {
    z-index:20;
  }
  [data-office-motion="drawer"] [data-office-layer="drawer-nav"] {
    z-index:10;
    transform:none;
    transition:none;
  }
  [data-office-motion="drawer"] [data-office-layer="drawer-scrim"] {
    z-index:21;
    background:#000;
    opacity:calc(var(--office-motion-progress) * var(--office-motion-scrim-opacity));
  }

  /* Split header/body faces share one measured displacement. Keep their seam
     square; use full only for an existing genuinely single composite face. */
  [data-office-motion="drawer"] [data-office-layer-edge="top"],
  [data-office-motion="drawer"] [data-office-layer-edge="full"] {
    border-top-left-radius:var(--office-motion-corner);
  }
  [data-office-motion="drawer"] [data-office-layer-edge="bottom"],
  [data-office-motion="drawer"] [data-office-layer-edge="full"] {
    border-bottom-left-radius:var(--office-motion-corner);
  }

  [data-office-motion="back"] [data-office-layer="thread-parent"] {
    z-index:10;
    transform:none;
    transition:none;
  }
  [data-office-motion="back"] [data-office-layer="thread-current"] {
    z-index:20;
  }

  [data-office-motion][data-office-motion-phase="settling"] :is(
    [data-office-layer="drawer-face"],
    [data-office-layer="drawer-face-header"],
    [data-office-layer="thread-current"]
  ) {
    transition:transform var(--office-motion-duration) var(--office-motion-easing),
      border-top-left-radius var(--office-motion-duration) var(--office-motion-easing),
      border-bottom-left-radius var(--office-motion-duration) var(--office-motion-easing);
  }
  [data-office-motion][data-office-motion-phase="settling"] [data-office-layer="drawer-scrim"] {
    transition:transform var(--office-motion-duration) var(--office-motion-easing),
      opacity var(--office-motion-duration) var(--office-motion-easing);
  }
  [data-office-motion][data-office-motion-phase="tracking"] :is(
    [data-office-layer="drawer-face"],
    [data-office-layer="drawer-face-header"],
    [data-office-layer="thread-current"]
  ),
  [data-office-motion][data-office-motion-phase="settling"] :is(
    [data-office-layer="drawer-face"],
    [data-office-layer="drawer-face-header"],
    [data-office-layer="thread-current"]
  ) {will-change:transform}
}

@media (prefers-reduced-motion:reduce) {
  [data-office-motion] {--office-motion-duration:0ms}
  [data-office-motion] :is(
    [data-office-layer="drawer-face"],
    [data-office-layer="drawer-face-header"],
    [data-office-layer="drawer-scrim"],
    [data-office-layer="thread-current"]
  ) {transition:none!important;will-change:auto}
}