/* Transparent sections reveal the backdrop; product previews keep their own backgrounds. */
.workspace-backdrop {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}
body { isolation: isolate; }

/* Animate shared color tokens, including gradients, without changing demo motion. */
@property --bg { syntax: '<color>'; inherits: true; initial-value: #f2efe9; }
@property --surface { syntax: '<color>'; inherits: true; initial-value: #faf8f4; }
@property --text { syntax: '<color>'; inherits: true; initial-value: #202832; }
@property --muted { syntax: '<color>'; inherits: true; initial-value: #5d646b; }
@property --line { syntax: '<color>'; inherits: true; initial-value: #d8d7d4; }
@property --teal { syntax: '<color>'; inherits: true; initial-value: #008f87; }
@property --orange { syntax: '<color>'; inherits: true; initial-value: #e85e3c; }
@property --card { syntax: '<color>'; inherits: true; initial-value: #e9e8e1; }
@property --accent { syntax: '<color>'; inherits: true; initial-value: #6254c7; }
@property --tint { syntax: '<color>'; inherits: true; initial-value: #e6e2f1; }
@property --family-tint { syntax: '<color>'; inherits: true; initial-value: #e5e1ef; }
@media (prefers-reduced-motion: no-preference) {
  html {
    transition-property: --bg, --surface, --text, --muted, --line, --teal,
      --orange, --card, --accent, --tint, --family-tint;
    transition-duration: 320ms;
    transition-timing-function: ease-in-out;
  }
  .orbit-one, .orbit-two, .closing-section {
    transition: background-color 320ms ease-in-out, border-color 320ms ease-in-out;
  }
}
/* Keep demo feedback available to screen readers without visible status copy. */
#demo-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@media print { .workspace-backdrop { display: none; } }