/* Generated file. Source: shared/brand/styles/orders/detail-glass.css. Do not edit directly. Run: node tools/brand/sync-shared-brand.mjs */
/* Media canvas glass effect — edge glow + light sweep */
body[data-orders-surface="cs-detail"] .orders-media-canvas {
  isolation: isolate;
}

body[data-orders-surface="cs-detail"] .orders-media-canvas::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
}

body[data-orders-surface="cs-detail"] .orders-media-canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--orders-tone-custom-soft) 18%, transparent) 0%,
      transparent 28%,
      transparent 68%,
      color-mix(in srgb, var(--orders-tone-custom-soft) 14%, transparent) 100%
    );
  background-size: 220% 220%;
  background-position: 0% 0%;
  opacity: 0.24;
}

@media (prefers-reduced-motion: no-preference) {
  body[data-orders-surface="cs-detail"] .orders-media-canvas::after {
    animation: detail-glass-sweep 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }
}

@keyframes detail-glass-sweep {
  0%, 100% {
    background-position: 0% 0%;
    opacity: 0.12;
  }
  28% {
    background-position: 50% 50%;
    opacity: 0.22;
  }
  56% {
    background-position: 100% 100%;
    opacity: 0.12;
  }
  84% {
    background-position: 20% 80%;
    opacity: 0.06;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-orders-surface="cs-detail"] .orders-media-canvas::after {
    background-position: 25% 25%;
    opacity: 0.14;
  }
}