/**
 * TechTalk N3 Motion — visual-only deck contract.
 * No compositor hint is allowed at idle; JavaScript arms real motion only.
 */

.tt-motion-deck {
  position: fixed;
  inset: 0;
  z-index: var(--tt-motion-z-index, calc(var(--z-index-header, 1000) - 2));
  contain: style;
  isolation: isolate;
  overflow: clip;
  pointer-events: none;
  visibility: hidden;
}

.tt-motion-deck[data-tt-motion-state="presented"],
.tt-motion-deck[data-tt-motion-state="armed"],
.tt-motion-deck[data-tt-motion-state="qa-representation"],
.tt-motion-deck[data-tt-motion-state="qa-hidden"] {
  visibility: visible;
}

.tt-motion-slot {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: clip;
  opacity: 0;
  transform: none;
  transform-origin: 50% 35%;
  pointer-events: none;
  will-change: auto;
}

.tt-motion-representation {
  position: absolute;
  inset: 0 auto auto 0;
  contain: style;
  overflow: clip;
  opacity: 1;
  pointer-events: none;
  transform: none;
  user-select: none;
}

.tt-motion-frame {
  position: absolute;
  inset: 0 auto auto 0;
  transform-origin: 0 0;
  pointer-events: none;
}

.tt-motion-representation,
.tt-motion-representation *,
.tt-motion-node,
.tt-motion-pseudo,
.tt-motion-media,
.tt-motion-placeholder {
  animation: none !important;
  caret-color: transparent !important;
  pointer-events: none !important;
  scroll-behavior: auto !important;
  transition: none !important;
  user-select: none !important;
}

.tt-motion-placeholder {
  display: block;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .tt-motion-deck {
    visibility: hidden !important;
  }

  .tt-motion-slot {
    opacity: 0 !important;
    transform: none !important;
    will-change: auto !important;
  }
}