/* Motion layer. Loaded after deck.css and extra.css. */

:root {
  --motion-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --motion-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --motion-slide-enter: 480ms;
  --motion-slide-exit: 360ms;
  --motion-rise: 420ms;
  --motion-step: 360ms;
}

.deck[data-theme="light"] {
  background: var(--paper);
}

.deck[data-theme="dark"] {
  background: var(--night);
}

/* Keep the owner-approved clean surface. */
.slide::before,
.slide::after,
.slide__media::before,
.slide__media::after {
  display: none !important;
  content: none !important;
}

@media (min-aspect-ratio: 1/1) {
  .slide {
    opacity: 0;
    transform: translate3d(18px, 0, 0);
    transition-property: opacity, transform !important;
    transition-duration: var(--motion-slide-exit) !important;
    transition-timing-function: linear, var(--motion-ease-out) !important;
  }

  .slide.is-active {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-duration: var(--motion-slide-enter) !important;
    will-change: opacity, transform;
  }

  .slide.is-leaving {
    /* The incoming slide cross-fades over this opaque backing layer. */
    opacity: 1;
    transform: translate3d(-18px, 0, 0);
    transition-duration: var(--motion-slide-exit) !important;
    will-change: opacity, transform;
  }

  .deck.is-back .slide {
    transform: translate3d(-18px, 0, 0);
  }

  .deck.is-back .slide.is-active {
    transform: translate3d(0, 0, 0);
  }

  .deck.is-back .slide.is-leaving {
    transform: translate3d(18px, 0, 0);
  }

  .slide.is-initial {
    transition: none !important;
  }
}

/* Calm entrance choreography: title, content, then the visual. */
.slide.is-active .rise {
  animation-name: motion-rise;
  animation-duration: var(--motion-rise);
  animation-timing-function: var(--motion-ease-out);
  animation-fill-mode: both;
}

.slide.is-active .slide__text > .rise:nth-child(1) { animation-delay: 40ms; }
.slide.is-active .slide__text > .rise:nth-child(2) { animation-delay: 100ms; }
.slide.is-active .slide__text > .rise:nth-child(3) { animation-delay: 155ms; }
.slide.is-active .slide__text > .rise:nth-child(4) { animation-delay: 210ms; }
.slide.is-active .slide__text > .rise:nth-child(5) { animation-delay: 265ms; }
.slide.is-active .slide__text > .rise:nth-child(6) { animation-delay: 320ms; }
.slide.is-active .slide__text > .rise:nth-child(7) { animation-delay: 375ms; }
.slide.is-active .slide__text > .rise:nth-child(8) { animation-delay: 430ms; }

.slide:not(.slide--info).is-active > .slide__media,
.slide:not(.slide--info).is-active > .triptych {
  animation: motion-rise var(--motion-rise) var(--motion-ease-out) 155ms both;
}

@keyframes motion-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Diagram stages are class-driven so fast navigation can interrupt cleanly. */
.slide__media .step {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition-property: opacity, transform !important;
  transition-duration: var(--motion-step) !important;
  transition-timing-function: var(--motion-ease-out) !important;
}

.slide__media .step.is-shown {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.slide__media--diagram .motion-flow {
  stroke-dasharray: 18 14;
}

.slide.is-active .slide__media--diagram .step.is-shown .motion-flow {
  animation: diagram-flow 2.8s linear 360ms infinite;
}

.slide:not(.is-active) .slide__media--diagram .motion-flow {
  animation-play-state: paused;
}

@keyframes diagram-flow {
  to { stroke-dashoffset: -64; }
}

/* Focused terminal loops on the five slides marked data-hud. */
.slide .code-hud {
  position: absolute;
  z-index: 5;
  inset-inline: 0;
  inset-block-end: -8vw;
  inline-size: 100%;
  min-block-size: 6.2vw;
  padding: 0;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--fg) 58%, transparent);
  font-family: var(--mono);
  font-size: clamp(15px, 1.05vw, 18px);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  line-height: 1.28;
}

.code-hud__head,
.code-hud__status {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
}

.code-hud__head {
  margin-block-end: 0.3em;
  color: color-mix(in srgb, var(--fg) 36%, transparent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.code-hud__terminal {
  min-block-size: 3.84em;
  transition: opacity 160ms var(--motion-ease-out), transform 160ms var(--motion-ease-out);
}

.code-hud.is-resetting .code-hud__terminal {
  opacity: 0;
  transform: translate3d(0, -4px, 0);
}

.code-hud__line {
  min-block-size: 1.28em;
  white-space: nowrap;
}

.code-hud__line::before {
  content: "> ";
  color: color-mix(in srgb, var(--fg) 28%, transparent);
}

.code-hud__status {
  margin-block-start: 0.24em;
  color: color-mix(in srgb, var(--fg) 46%, transparent);
}

.code-hud__status b {
  color: var(--fg);
  font-weight: 600;
}

.code-hud__cursor {
  display: inline-block;
  margin-inline-start: 0.25em;
  color: var(--accent-b);
  animation: motion-cursor 900ms steps(2, end) infinite;
}

.slide:not(.is-active) .code-hud__cursor {
  animation-play-state: paused;
}

@keyframes motion-cursor {
  0%, 45% { opacity: 1; }
  46%, 100% { opacity: 0; }
}

/* One persistent strip. It never remounts, so its transform loop stays continuous. */
.hud__progress {
  display: none !important;
}

.code-strip {
  position: fixed;
  z-index: 12;
  inset-inline: var(--stage-pad);
  inset-block-end: 0;
  display: flex;
  block-size: clamp(34px, 3vw, 48px);
  align-items: center;
  overflow: hidden;
  color: rgb(20 20 20 / 26%);
  font-family: var(--mono);
  font-size: clamp(12px, 0.95vw, 16px);
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 180ms var(--motion-ease-out);
}

body[data-slide-theme="dark"] .code-strip {
  color: rgb(237 232 220 / 27%);
}

body[data-slide-kind="info"] .code-strip {
  opacity: 0;
}

.code-strip__track {
  display: flex;
  inline-size: max-content;
  flex: none;
  transform: translate3d(0, 0, 0);
  animation: code-strip-run 52s linear infinite;
  will-change: transform;
}

.code-strip__sequence {
  display: flex;
  flex: none;
  align-items: center;
  gap: 3.2em;
  padding-inline-end: 3.2em;
}

.code-strip__sequence span::before {
  content: "// ";
}

@keyframes code-strip-run {
  to { transform: translate3d(-50%, 0, 0); }
}

body.is-print .code-strip {
  display: none !important;
}

body.is-print .slide,
body.is-print .slide *,
body.is-print .slide::before,
body.is-print .slide::after {
  animation: none !important;
  transition: none !important;
}

body.is-print .slide__media .step {
  opacity: 1 !important;
  transform: none !important;
}

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

  .slide {
    transform: none !important;
  }

  .slide__media .step,
  .slide .rise,
  .slide:not(.slide--info) > .slide__media,
  .slide:not(.slide--info) > .triptych {
    opacity: 1 !important;
    transform: none !important;
  }

  .code-strip__track {
    transform: none !important;
    will-change: auto;
  }

  .code-hud__cursor {
    opacity: 1;
  }
}