/* Theatre — standalone, opt-in viewport entrances. */
:where(.does-fadein, .does-slideright, .does-slideup, .does-grow, .does-zoomin, .does-zoomout)[data-theatre-ready] {
  --_theatre-x: 0px;
  --_theatre-y: 0px;
  --_theatre-scale: 1;
  --_theatre-visible-scale: 1;
  opacity: 0;
  translate: var(--_theatre-x) var(--_theatre-y);
  scale: var(--_theatre-scale);
  pointer-events: none;
  transition-property: opacity, translate, scale;
  transition-duration: var(--theatre-exit-duration, 180ms);
  transition-timing-function: var(--theatre-ease, cubic-bezier(.2, .7, .25, 1));
}
.does-slideright[data-theatre-ready] { --_theatre-x: -5px; }
.does-slideup[data-theatre-ready] { --_theatre-y: 5px; }
.does-grow[data-theatre-ready] { --_theatre-y: 3px; --_theatre-scale: .98; }
.does-zoomin[data-theatre-ready] { --_theatre-visible-scale: 1.015; }
.does-zoomout[data-theatre-ready] { --_theatre-scale: 1.015; }
/* Establish the initial hidden state immediately, without an initial fade-out. */
:where(.does-fadein, .does-slideright, .does-slideup, .does-grow, .does-zoomin, .does-zoomout)[data-theatre-ready]:not([data-theatre-seen]) {
  transition-duration: 0s;
}
:where(.does-fadein, .does-slideright, .does-slideup, .does-grow, .does-zoomin, .does-zoomout)[data-theatre-ready][data-theatre-visible] {
  opacity: 1;
  translate: 0 0;
  scale: var(--_theatre-visible-scale);
  pointer-events: auto;
  transition-duration: var(--theatre-duration, 620ms);
}
/* The fade finishes first; the small zoom continues to settle afterward. */
:where(.does-zoomin, .does-zoomout)[data-theatre-ready][data-theatre-visible] {
  transition-duration: var(--theatre-duration, 620ms), var(--theatre-duration, 620ms), var(--theatre-zoom-duration, 1600ms);
}
/* Keyboard navigation must never wait for the entrance queue. */
:where(.does-fadein, .does-slideright, .does-slideup, .does-grow, .does-zoomin, .does-zoomout)[data-theatre-ready]:focus-within {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  pointer-events: auto;
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  :where(.does-fadein, .does-slideright, .does-slideup, .does-grow, .does-zoomin, .does-zoomout)[data-theatre-ready] {
    opacity: 1;
    translate: none;
    scale: none;
    pointer-events: auto;
    transition: none;
  }
}
@media print {
  :where(.does-fadein, .does-slideright, .does-slideup, .does-grow, .does-zoomin, .does-zoomout)[data-theatre-ready] {
    opacity: 1;
    translate: none;
    scale: none;
    transition: none;
  }
}