/* Decksmith semantic motion layer: field order first, Morph only when explicit. */
:root {
  --motion-fast: 180ms;
  --motion-med: 380ms;
  --motion-morph: 780ms;
  --motion-slow: 1100ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-morph: cubic-bezier(.16, 1, .3, 1);
}

.deck-shell::before {
  content: "";
  position: fixed;
  inset: -20%;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 15%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 28%),
    radial-gradient(circle at 80% 30%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 26%);
  filter: blur(8px);
  opacity: .30;
  animation: decksmith-bg-drift 18s ease-in-out infinite alternate;
}

.deck {
  isolation: isolate;
  perspective: 1800px;
}

.slide {
  display: block;
  visibility: hidden;
  opacity: 0;
  transform: translate3d(5%, 0, 0) scale(.986);
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
  transition:
    opacity 300ms var(--ease-out),
    transform var(--motion-morph) var(--ease-morph),
    filter 360ms var(--ease-out),
    visibility 0s linear var(--motion-morph);
  will-change: opacity, transform, filter;
  backface-visibility: hidden;
  contain: layout paint style;
}

.slide.active {
  visibility: visible;
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
  pointer-events: auto;
  z-index: 2;
  transition-delay: 0s;
}

.slide.exiting {
  visibility: visible;
  opacity: 0;
  transform: translate3d(-5%, 0, 0) scale(1.016);
  filter: blur(8px);
  pointer-events: none;
  z-index: 1;
  transition:
    opacity 300ms var(--ease-out) 160ms,
    transform var(--motion-morph) var(--ease-morph),
    filter 360ms var(--ease-out) 120ms,
    visibility 0s linear var(--motion-morph);
}

.deck-shell.transition-back .slide {
  transform: translate3d(-5%, 0, 0) scale(.986);
}

.deck-shell.transition-back .slide.active {
  transform: translate3d(0, 0, 0) scale(1);
}

.deck-shell.transition-back .slide.exiting {
  transform: translate3d(5%, 0, 0) scale(1.016);
}

.slide.measure {
  visibility: hidden !important;
  opacity: 0 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  filter: none !important;
  pointer-events: none !important;
  transition: none !important;
  z-index: -1 !important;
}

.slide.active [data-motion-role] {
  animation-duration: var(--motion-med);
  animation-timing-function: var(--ease-out);
  animation-fill-mode: both;
  animation-delay: var(--motion-delay, 0ms);
  animation-name: decksmith-field-rise;
  will-change: opacity, transform, clip-path, filter;
}

.slide.active [data-motion-role="kicker"],
.slide.active [data-motion-role="meta"],
.slide.active [data-motion-role="eyebrow"] {
  animation-name: decksmith-kicker-in;
}

.slide.active [data-motion-role="title"] {
  animation-name: decksmith-title-in;
  animation-duration: 520ms;
}

.slide.active [data-motion-role="subtitle"],
.slide.active [data-motion-role="lede"],
.slide.active [data-motion-role="body"] {
  animation-name: decksmith-copy-in;
}

.slide.active [data-motion-role="visual"],
.slide.active [data-motion-role="chart"],
.slide.active [data-motion-role="diagram"],
.slide.active [data-motion-role="code"],
.slide.active [data-motion-role="media"] {
  animation-name: decksmith-visual-in;
  animation-duration: 560ms;
}

.slide.active [data-motion-role="list-item"],
.slide.active [data-motion-role="card"],
.slide.active [data-motion-role="step"],
.slide.active [data-motion-role="annotation"] {
  animation-name: decksmith-item-in;
}

.slide.active [data-motion-role="chart-mark"],
.slide.active [data-motion-role="diagram-node"] {
  animation-name: decksmith-mark-in;
  animation-duration: 460ms;
}

.slide.active [data-motion-role="caption"],
.slide.active [data-motion-role="footer"] {
  animation-name: decksmith-caption-in;
}

.morph-source {
  opacity: 0 !important;
  animation: none !important;
}

.morph-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  pointer-events: none;
  margin: 0 !important;
  transform-origin: 0 0;
  box-sizing: border-box;
  overflow: hidden;
  contain: layout paint style;
  will-change: transform, opacity, filter;
}

.morph-ghost,
.morph-ghost * {
  animation: none !important;
  transition: none !important;
}

.progress span { transition: width var(--motion-med) var(--ease-out); }
.deck-ui button { transition: transform var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out); }
.deck-ui button:hover { transform: translateY(-1px); background: rgba(255,255,255,.14); }

@keyframes decksmith-kicker-in {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes decksmith-title-in {
  from { opacity: 0; transform: translate3d(0, 26px, 0) scale(.992); clip-path: inset(0 0 34% 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); clip-path: inset(0 0 0 0); }
}

@keyframes decksmith-copy-in {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes decksmith-field-rise {
  from { opacity: 0; transform: translate3d(0, 20px, 0) scale(.99); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes decksmith-visual-in {
  from { opacity: 0; transform: translate3d(0, 24px, 0) scale(.982); filter: blur(3px); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@keyframes decksmith-item-in {
  from { opacity: 0; transform: translate3d(0, 22px, 0) scale(.99); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes decksmith-mark-in {
  from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.94); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes decksmith-caption-in {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes decksmith-bg-drift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to { transform: translate3d(1.5%, 1%, 0) scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .slide { transform: none; filter: none; }
}

@media print {
  .deck-shell::before { display: none; }
  .slide { visibility: visible; opacity: 1; transform: none; filter: none; transition: none; pointer-events: auto; }
  .slide [data-motion-role] { animation: none !important; }
  .morph-ghost { display: none; }
}