/* OTC Edge Swipe — drag preview + Apple-style slide animation */
/* Foundation #14 · 2026-05-27 */

html.otc-edge-swiping body {
  transform: translateX(var(--otc-swipe-x, 0));
  transition: none;
  will-change: transform;
}

html.otc-edge-rollback body {
  transform: translateX(0);
  transition: transform 350ms cubic-bezier(0.32, 0.72, 0, 1);
}

html.otc-edge-committing body {
  transform: translateX(calc(var(--otc-swipe-x, 0) * 3));
  transition: transform 350ms cubic-bezier(0.32, 0.72, 0, 1);
  opacity: 0.6;
}

@supports (view-transition-name: none) {
  ::view-transition-old(root) {
    animation: otc-slide-out 350ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
  }
  ::view-transition-new(root) {
    animation: otc-slide-in 350ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
  }

  @keyframes otc-slide-out {
    from { transform: translateX(0); opacity: 1; }
    to   { transform: translateX(-30%); opacity: 0.6; }
  }
  @keyframes otc-slide-in {
    from { transform: translateX(100%); opacity: 0.8; }
    to   { transform: translateX(0); opacity: 1; }
  }
}

@media (prefers-reduced-motion: reduce) {
  html.otc-edge-swiping body,
  html.otc-edge-rollback body,
  html.otc-edge-committing body {
    transform: none !important;
    transition: none !important;
    opacity: 1 !important;
  }
}