/*
 * Scroll sequence section. Without the script (or with reduced motion) it is a plain
 * list of beats, each a still and its text. `.seq--live`, set by scroll-sequence.js,
 * turns it into a tall section with a sticky stage: a canvas and the beats over it.
 */

.seq {
  /* Rendered studio floor fills the viewport; captions occupy camera-authored
     negative space, without fading machinery into the page background. */
  --seq-stage: #fff;
  --seq-ink: #202020;
  --seq-muted: #5c5c5c;
  --seq-frame-y: 50%;
  /* Keep the page length fixed; the authored scroll map budgets each chapter. */
  --seq-screens: 9.5;
  position: relative;
  background: var(--seq-stage);
  color: var(--seq-ink);
}

.seq__canvas,
.seq__poster,
.seq__skip {
  display: none;
}

/* Static form: no script, reduced motion, or print. */
.seq__beats {
  list-style: none;
  margin: 0 auto;
  padding: 48px 16px;
  max-width: 1120px;
  display: grid;
  gap: 48px;
}

.seq__beat {
  display: grid;
  gap: 16px;
  align-items: center;
}

.seq__still img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .seq__beat {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 40px;
  }
  .seq__still {
    order: 2;
  }
}

.seq__title {
  font-family: Sentient, Georgia, serif;
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin: 0 0 14px;
  text-wrap: balance;
}

.seq__body {
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.4;
  color: var(--seq-muted);
  margin: 0;
  max-width: 34em;
}

/* Live form. */
.seq--live {
  height: calc(var(--seq-screens) * 100vh);
  height: calc(var(--seq-screens) * 100svh);
}

.seq--live .seq__stage {
  position: sticky;
  top: var(--seq-top, 0px);
  height: calc(100vh - var(--seq-top, 0px));
  height: calc(100svh - var(--seq-top, 0px));
  overflow: hidden;
}

.seq--live .seq__canvas,
.seq--live .seq__poster {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.seq--live .seq__poster {
  object-fit: cover;
  object-position: center var(--seq-frame-y);
}

.seq--live:not(.seq--pending) .seq__poster {
  visibility: hidden;
}

.seq--live .seq__still {
  display: none;
}

.seq--live .seq__beats {
  position: absolute;
  inset: 0;
  max-width: none;
  padding: 0;
  display: block;
  pointer-events: none;
}

.seq--live .seq__beat {
  position: absolute;
  left: clamp(24px, 6vw, 96px);
  top: 50%;
  width: min(28rem, 30vw);
  display: block;
  opacity: 0;
  transform: translateY(calc(-50% + 18px));
  /* A beat that is leaving goes at once, so a fast scroll across a boundary never
     shows two beats' text on top of each other; only the arriving beat eases in. */
  transition: none;
}

.seq--live .seq__beat.is-past {
  transform: translateY(calc(-50% - 18px));
}

.seq--live .seq__beat.is-on {
  opacity: 1;
  transform: translateY(-50%);
  pointer-events: auto;
  transition: opacity 0.3s ease 0.05s, transform 0.4s ease;
}

.seq--live .seq__beats,
.seq--live .seq__skip {
  z-index: 2;
}

.seq__skip:focus-visible {
  outline: 2px solid #002fd3;
  outline-offset: 2px;
}

/* Keyboard and screen-reader users can jump past the pinned section. */
.seq--live .seq__skip {
  display: block;
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  background: #202020;
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  transform: translateY(-200%);
}

.seq--live .seq__skip:focus {
  transform: none;
}

/* Phone and portrait retain the full stage, with a camera-authored reading
   pocket above the action. Conveyor tails may continue beyond the viewport. */
@media (max-width: 767px), (max-aspect-ratio: 1/1) {
  .seq--live {
    --seq-screens: 8;
  }
  .seq--live {
    /* Longer workflow explanations need more air above the portrait action. */
    --seq-artwork-offset-y: 80px;
  }
  .seq--live .seq__beat {
    left: 20px;
    right: 20px;
    width: auto;
    max-width: 34ch;
    top: 24px;
    transform: translateY(12px);
  }
  .seq--live .seq__beat.is-past {
    transform: translateY(-12px);
  }
  .seq--live .seq__beat.is-on {
    transform: none;
  }
  .seq__title {
    font-size: clamp(24px, 6.4vw, 30px);
    margin-bottom: 10px;
  }
  .seq__body {
    font-size: 14px;
  }
}

@media (max-aspect-ratio: 1/1) {
  .seq--live {
    /* Keep the gripper in view when a tablet crops the portrait render. */
    --seq-frame-y: 25%;
    --seq-frame-taps-y: 50%;
  }
}

@media (max-width: 767px), (max-aspect-ratio: 1/1) {
  .seq--live .seq__beat[data-chapter="tall"] {
    /* Keep the specification above the previous cell's background pallet. */
    top: 8px;
    max-width: none;
  }
  .seq--live .seq__beat[data-chapter="tall"] .seq__body {
    max-width: none;
  }
}

@media (max-width: 599px) {
  .seq--live {
    /* Reserve clearance above the background pallet on short phones during the tall
       grasp; the existing camera focus eases this framing in and out. */
    --seq-artwork-tall-offset-y: 48px;
  }
}

@media (max-width: 767px) and (max-height: 650px) {
  .seq--live {
    /* Keep the portrait camera's upper caption pocket on short phone screens. */
    --seq-frame-y: 0%;
    /* Show the full tablet display while keeping the cases below the copy. */
    --seq-frame-taps-y: 40%;
  }
  .seq--live .seq__beat {
    top: 16px;
    left: 16px;
    right: 16px;
  }
  .seq__title {
    font-size: 24px;
    margin-bottom: 8px;
  }
  .seq__body {
    font-size: 13px;
    line-height: 1.35;
  }
}

/* Captions follow safe frame intervals on phones as well as desktop. */
.seq--live .seq__beat[data-caption-windows] {
  transition: transform 200ms ease;
}
.seq--live .seq__beat[data-caption-windows].is-on {
  opacity: var(--seq-caption-opacity, 1);
}

/* Reduced motion: the script leaves the section static; make sure nothing animates. */
@media (prefers-reduced-motion: reduce) {
  .seq--live .seq__beat {
    transition: none;
  }
}

/* Wider workflow reveals leave their middle clear for the feed lines and pallet
   route. Other chapters retain their reading column. */
@media (min-width: 768px) and (orientation: landscape) {
  .seq--live {
    /* Keep the top-layer grasp visible while the lower chassis exits the stage. */
    --seq-frame-tall-y: 0%;
    /* Keep the exchange pallet and jack visible below the protective volume. */
    --seq-frame-safety-y: 100%;
  }
  .seq--live .seq__beat[data-chapter="taps"].is-caption-right {
    left: auto;
    right: clamp(24px, 6vw, 96px);
  }
  .seq--live .seq__beat[data-layout="full-cell"],
  .seq--live .seq__beat[data-chapter="safety"],
  .seq--live .seq__beat[data-chapter="sheet"],
  .seq--live .seq__beat[data-chapter="taps"] {
    top: clamp(28px, 6vh, 72px);
    width: min(28rem, 30vw);
    transform: translateY(18px);
  }
  .seq--live .seq__beat[data-layout="full-cell"].is-past,
  .seq--live .seq__beat[data-chapter="safety"].is-past,
  .seq--live .seq__beat[data-chapter="sheet"].is-past,
  .seq--live .seq__beat[data-chapter="taps"].is-past {
    transform: translateY(-18px);
  }
  .seq--live .seq__beat[data-layout="full-cell"].is-on,
  .seq--live .seq__beat[data-chapter="safety"].is-on,
  .seq--live .seq__beat[data-chapter="sheet"].is-on,
  .seq--live .seq__beat[data-chapter="taps"].is-on {
    transform: none;
  }
  .seq--live .seq__beat[data-chapter="taps"] {
    top: 28px;
  }
  .seq--live .seq__beat[data-chapter="safety"] {
    /* Align the safety explanation with the other chapter reading columns. */
    top: 22%;
  }
  .seq--live .seq__beat[data-chapter="dual_line"],
  .seq--live .seq__beat[data-chapter="sheet"] {
    /* The previous cell remains in the upper background. Read against the
       open floor below its conveyor, beside the current working area. */
    top: 44%;
    width: 26vw;
  }
}

@media (min-width: 768px) and (max-width: 1350px) and (orientation: landscape) {
  .seq--live .seq__beat[data-chapter="taps"].is-caption-right {
    /* Narrow laptop text wraps farther down toward the closeup's case stack. */
    top: 12px;
  }
}

@media (min-width: 768px) and (orientation: landscape) {
  .seq--live .seq__beat[data-chapter="wrap"] {
    /* Keep the complete explanation left of the wrapper's upright. */
    top: 50%;
    width: min(28rem, 24vw);
    margin-top: 0;
    transform: translateY(calc(-50% + 18px));
  }
  .seq--live .seq__beat[data-chapter="wrap"].is-past {
    transform: translateY(calc(-50% - 18px));
  }
  .seq--live .seq__beat[data-chapter="wrap"].is-on {
    transform: translateY(-50%);
  }
  .seq--live .seq__beat[data-chapter="wrap"] .seq__title {
    font-size: clamp(28px, 3vw, 44px);
  }
  .seq--live .seq__beat[data-chapter="wrap"] .seq__body {
    font-size: 16px;
    text-wrap: pretty;
  }
}

@media (min-width: 600px) and (max-aspect-ratio: 1/1) {
  .seq--live {
    /* The wider tablet crop must retain the pallet feet and complete HMI.
       Keep the early tall-pallet grasp higher; reframe during its parked exit. */
    --seq-frame-workflow-y: 60%;
    --seq-frame-taps-y: 60%;
  }
  .seq--live .seq__beat[data-chapter] {
    /* Use the available width so copy stays above the wrapper's upper rail. */
    max-width: none;
  }
  .seq--live .seq__body {
    max-width: 48em;
  }
}

.seq *, .seq *::before, .seq *::after { box-sizing: border-box; }