/* Scroll entrances only. Runtime classes never change the authored layout or text wrapping. */
@media (prefers-reduced-motion: no-preference) {
  .motion-pending { opacity: 0; }
  .motion-pending:focus-within { opacity: 1; }

  .motion-entering {
    --motion-delay: calc(var(--motion-order, 0) * var(--egg-motion-stagger));
    animation: egg-motion-rise var(--egg-motion-enter) var(--egg-motion-ease) var(--motion-delay) both;
  }
  .motion-entering[data-motion="heading"] { animation-name: egg-motion-heading; }
  .motion-entering[data-motion="graphic"] {
    animation-name: egg-motion-graphic;
    animation-timing-function: var(--egg-motion-spring);
    transform-origin: center 65%;
  }
  .motion-entering[data-motion="sequence"] { animation: none; }
  .motion-entering .motion-part {
    animation: egg-motion-part var(--egg-motion-enter) var(--egg-motion-ease) calc(var(--motion-delay) + var(--motion-part, 0) * var(--egg-motion-stagger)) both;
  }
  .motion-entering .ab-member__avatar {
    animation-name: egg-motion-graphic;
    animation-timing-function: var(--egg-motion-spring);
    transform-origin: center;
  }
  .motion-entering :is(.egg-marker, .ab-jchip) {
    animation: egg-motion-mark var(--egg-motion-enter) var(--egg-motion-ease) var(--motion-delay) both;
    transform-origin: left center;
  }

  /* The photograph settles behind a sheet of the surrounding section's own color. */
  .motion-entering.motion-surface,
  .motion-entering .motion-surface { position: relative; overflow: hidden; }
  .motion-entering:not(.motion-initial).motion-surface::after,
  .motion-entering:not(.motion-initial) .motion-surface::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: var(--motion-cover, var(--bsp-paper));
    transform-origin: center top;
    animation: egg-motion-unveil var(--egg-motion-media) var(--egg-motion-ease) var(--motion-delay) both;
  }
  .motion-entering.motion-surface > :is(img, video),
  .motion-entering .motion-surface > :is(img, video),
  .motion-entering .motion-surface > .egg-zoom > img {
    animation: egg-motion-image var(--egg-motion-media) var(--egg-motion-ease) var(--motion-delay) both;
  }

  /* The first viewport is readable immediately; entrances never delay its paint. */
  .motion-entering.motion-initial:not([data-motion="sequence"]),
  .motion-entering.motion-initial .motion-part { animation-name: egg-motion-settle; }
}

@keyframes egg-motion-rise {
  from { opacity: 0; transform: translate3d(0, var(--egg-motion-distance), 0); }
  to { opacity: 1; transform: none; }
}
@keyframes egg-motion-heading {
  from { opacity: 0; transform: translate3d(0, var(--egg-motion-distance), 0) skewY(1.5deg); }
  to { opacity: 1; transform: none; }
}
@keyframes egg-motion-part {
  from { opacity: 0; transform: translate3d(0, calc(var(--egg-motion-distance) * .5), 0); }
  to { opacity: 1; transform: none; }
}
@keyframes egg-motion-settle {
  from { transform: translate3d(0, calc(var(--egg-motion-distance) * .4), 0); }
  to { transform: none; }
}
@keyframes egg-motion-graphic {
  from { opacity: 0; transform: translate3d(0, calc(var(--egg-motion-distance) * .5), 0) rotate(-6deg) scale(.86); }
  to { opacity: 1; transform: none; }
}
@keyframes egg-motion-mark {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes egg-motion-unveil {
  from { transform: scaleY(1); }
  to { transform: scaleY(0); }
}
@keyframes egg-motion-image {
  from { transform: scale(1.065); }
  to { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .motion-pending { opacity: 1; }
  .motion-entering, .motion-entering .motion-part { animation: none; }
}

@media print {
  .motion-pending { opacity: 1; }
  .motion-entering, .motion-entering .motion-part { animation: none; }
  .motion-entering.motion-surface::after,
  .motion-entering .motion-surface::after { display: none; }
}