/*!
 * Scrollwork engine 1.0.0: mechanism styles only.
 *
 * No colours, fonts or layout opinions live here. Those belong to the page.
 * Every rule is gated on html.sw-on (added by the engine) so a page whose
 * script fails to run still reads top to bottom as an ordinary document.
 */

/* Pinned scenes. The engine sets the section height; the stage sticks.
   The stage is always a positioning context, engine or not, so layers
   inside it stay in their box. */
.sw-stage,
[data-sw-stage] {
  position: relative;
}
html.sw-on [data-sw-scene="pin"] {
  position: relative;
}
html.sw-on [data-sw-scene="pin"] > .sw-stage,
html.sw-on [data-sw-scene="pin"] > [data-sw-stage] {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

/* Horizontal rail inside a pinned stage. */
html.sw-on [data-sw-track] {
  display: flex;
  width: max-content;
  flex-wrap: nowrap;
}

/* Scrubbed media fills whatever box the page gives it. */
video[data-sw-scrub],
canvas[data-sw-frames] {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Split text units (words; lines are groups of words). */
.sw-u {
  display: inline-block;
}

/* One-shot entrances for ordinary content. */
html.sw-on [data-sw-in] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--sw-i, 0) * 90ms);
}
html.sw-on [data-sw-in].sw-in {
  opacity: 1;
  transform: none;
}
html.sw-reduced [data-sw-in] {
  transform: none;
  transition-property: opacity;
}

/* ?sw-debug */
html.sw-debug [data-sw-scene] {
  outline: 1px dashed rgba(255, 0, 170, 0.6);
  outline-offset: -1px;
}
.sw-debug-panel {
  position: fixed;
  left: 8px;
  bottom: 8px;
  z-index: 2147483647;
  margin: 0;
  padding: 8px 10px;
  max-width: calc(100vw - 16px);
  font: 11px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: #e8ffe8;
  background: rgba(0, 0, 0, 0.78);
  border-radius: 4px;
  pointer-events: none;
  white-space: pre;
}