/* Entrances preserve layout; existing scroll scenes own their internal motion. */
:root {
  --site-motion-duration: 560ms;
  --site-motion-ease: cubic-bezier(.22, 1, .36, 1);
  --site-motion-rise: 16px;
}

.site-motion-item[data-motion-state="pending"] {
  opacity: 0;
  translate: 0 var(--site-motion-rise);
  pointer-events: none;
}

.site-motion-item[data-motion-state="entering"] {
  animation: site-motion-enter var(--site-motion-duration) var(--site-motion-ease) var(--site-motion-delay, 0ms) both;
}

@keyframes site-motion-enter {
  from { opacity: 0; translate: 0 var(--site-motion-rise); }
  to { opacity: 1; translate: 0 0; }
}

.site-type-ready .type-character { position: relative; opacity: 0; }
.site-type-ready .type-character.is-typed { opacity: 1; }
.site-type-ready .type-character.is-cursor::after {
  content: "";
  position: absolute;
  inset-inline-end: -3px;
  top: .14em;
  width: 2px;
  height: .8em;
  background: currentColor;
}

html[data-motion-paused] .site-motion-item,
html[data-captain-intro="open"] .site-motion-item {
  animation-play-state: paused;
}

@media (max-width: 760px) {
  :root { --site-motion-duration: 480ms; --site-motion-rise: 12px; }
}

@media (prefers-reduced-motion: reduce), print {
  .site-motion-item[data-motion-state] {
    animation: none;
    opacity: 1;
    translate: none;
    pointer-events: auto;
  }
  .site-type-ready .type-character { opacity: 1; }
  .site-type-ready .type-character.is-cursor::after { display: none; }
}