/* Live layout study. The original page remains the baseline; selecting the
   alternate option changes only the opening hardware composition. */

/* This second copy is present only so the desktop Scroll to reveal study can
   move the same message below the hardware without disturbing the established
   stacked/mobile DOM flow. */
.scroll-reveal-heading,
.scroll-reveal-cta {
  display: none;
}

@media (min-width: 840px) {
  /* Scroll to reveal uses the board-reveal stage, but swaps the original hero
     for one left-ranged message block in the board column. Every rule is
     inside the desktop query so the existing mobile breakpoint is untouched. */
  body[data-site-concept="scroll-reveal"] .story-copy-hero {
    display: none;
  }

  body[data-site-concept="scroll-reveal"] .story-copy-after {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  body[data-site-concept="scroll-reveal"] .scroll-reveal-heading {
    display: block;
    width: 100%;
    margin: 0;
    text-align: left;
  }

  body[data-site-concept="scroll-reveal"][data-feature-list-intro]
    .story-copy-after .intro-feature-list {
    margin: var(--component-feature-intro-gap) 0 0;
  }

  body[data-site-concept="scroll-reveal"][data-feature-list-intro]
    .story-copy-after .intro-feature-footnote {
    margin: 0;
  }

  body[data-site-concept="scroll-reveal"] .scroll-reveal-cta {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    margin-top: 32px;
  }

  body:is([data-site-concept="board-reveal"], [data-site-concept="scroll-reveal"]) .story-sticky {
    /* The carrier follows the full-size board. Individual board art may be
       smaller, but it no longer changes the column or paragraph measure. */
    --board-carrier-width: calc(
      (var(--device-height) - 6px) * 0.5654704171
    );
    display: grid;
    grid-template-columns: var(--ipod-footprint) var(--board-carrier-width);
    grid-template-rows: auto var(--device-height);
    justify-content: center;
    align-items: start;
    column-gap: var(--hardware-gap);
    /* Put the hero-to-hardware space between the grid rows. A margin on the
       hardware alone made the iPod overflow its row while the feature copy
       stayed centred on the unshifted row and the next section rose into the
       overflow. */
    row-gap: var(--component-hero-hardware-gap);
  }

  /* .ipod-stage is the fixed full-size carrier. Reset the artwork's old
     bottom margin so flex centring can place every model on the same centre. */
  body:is([data-site-concept="board-reveal"], [data-site-concept="scroll-reveal"]) .ipod-stage {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  body:is([data-site-concept="board-reveal"], [data-site-concept="scroll-reveal"]) .ipod-stage > .ipod {
    margin: 0;
  }

  body:is([data-site-concept="board-reveal"], [data-site-concept="scroll-reveal"]) .ipod-unit {
    --connection-active-transform: rotate(-1deg);
  }

  body:is([data-site-concept="board-reveal"], [data-site-concept="scroll-reveal"]) .motherboard-unit {
    --connection-active-transform: translateX(
      calc(
        (-1 * var(--hardware-gap))
        - (var(--ipod-footprint) / 2)
        - (var(--board-carrier-width) / 2)
      )
    ) rotate(0deg);
  }

  body[data-site-concept="board-reveal"] .story-copy-hero {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  body:is([data-site-concept="board-reveal"], [data-site-concept="scroll-reveal"]) .hardware-pair {
    grid-column: 1 / -1;
    grid-row: 2;
    z-index: 1;
    justify-self: start;
    width: calc(
      var(--ipod-footprint) + var(--hardware-gap) + var(--board-carrier-width)
    );
    margin-top: 0;
  }

  /* The board unit is another fixed carrier. The full-size and Mini boards
     retain their own measured heights, centred in the same box. */
  body:is([data-site-concept="board-reveal"], [data-site-concept="scroll-reveal"]) .motherboard-unit {
    width: var(--board-carrier-width);
  }

  body:is([data-site-concept="board-reveal"], [data-site-concept="scroll-reveal"]) .motherboard {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* The reveal copy occupies the board's resting column underneath the
     hardware layer and stays hidden until the board is fully collapsed. */
  body:is([data-site-concept="board-reveal"], [data-site-concept="scroll-reveal"]) .story-copy-after {
    grid-column: 2;
    grid-row: 2;
    z-index: 0;
    align-self: center;
    justify-self: stretch;
    width: 100%;
    max-width: none;
    margin: var(--component-feature-intro-gap) 0 0;
    box-sizing: border-box;
    padding: 0 0 0 var(--model-intro-extra-gap);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: rotate(-1deg);
    transform-origin: center;
  }

  body:is([data-site-concept="board-reveal"], [data-site-concept="scroll-reveal"])
    .story-sticky:has(.ipod.is-at-overlap) .story-copy-after {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Reveal each text row only after the connection completion marker lands.
     Removing that marker resets the rows immediately, including any delayed
     rows, so reconnecting always starts a fresh top-to-bottom reveal. */
  body:is([data-site-concept="board-reveal"], [data-site-concept="scroll-reveal"])
    .story-copy-after :is(.intro-prose, .scroll-reveal-heading,
      .intro-feature-list > li, .gel-feature-cloud > li,
      .intro-feature-footnote, .scroll-reveal-cta) {
    opacity: 0;
    filter: blur(10px);
    transition: none;
  }

  body:is([data-site-concept="board-reveal"], [data-site-concept="scroll-reveal"])
    .story-sticky:has(.ipod.is-at-overlap) .story-copy-after
      :is(.intro-prose, .scroll-reveal-heading,
        .intro-feature-list > li, .gel-feature-cloud > li,
        .intro-feature-footnote, .scroll-reveal-cta) {
    opacity: 1;
    filter: blur(0px);
    transition:
      opacity 700ms var(--theme-ease),
      filter 700ms var(--theme-ease),
      color var(--theme-duration) var(--theme-ease);
    transition-delay:
      calc((var(--board-copy-order, 0) + var(--board-copy-lead, 0)) * 30ms),
      calc((var(--board-copy-order, 0) + var(--board-copy-lead, 0)) * 30ms),
      0ms;
  }

  .story-copy-after :is(.intro-feature-list, .gel-feature-cloud) > :nth-child(1) { --board-copy-order: 0; }
  .story-copy-after :is(.intro-feature-list, .gel-feature-cloud) > :nth-child(2) { --board-copy-order: 1; }
  .story-copy-after :is(.intro-feature-list, .gel-feature-cloud) > :nth-child(3) { --board-copy-order: 2; }
  .story-copy-after :is(.intro-feature-list, .gel-feature-cloud) > :nth-child(4) { --board-copy-order: 3; }
  .story-copy-after :is(.intro-feature-list, .gel-feature-cloud) > :nth-child(5) { --board-copy-order: 4; }
  .story-copy-after :is(.intro-feature-list, .gel-feature-cloud) > :nth-child(6) { --board-copy-order: 5; }
  .story-copy-after :is(.intro-feature-list, .gel-feature-cloud) > :nth-child(7) { --board-copy-order: 6; }
  .story-copy-after :is(.intro-feature-list, .gel-feature-cloud) > :nth-child(8),
  .story-copy-after .intro-feature-footnote { --board-copy-order: 7; }
  .story-copy-after .intro-prose:nth-of-type(2) { --board-copy-order: 1; }
  .story-copy-after .scroll-reveal-cta { --board-copy-order: 8; }

  /* The alternate reveal composition has a heading ahead of the rows. */
  body[data-site-concept="scroll-reveal"] .story-copy-after { --board-copy-lead: 1; }
  .story-copy-after .scroll-reveal-heading { --board-copy-lead: 0; }

  /* The tall full-size board has a small top connector outside the iPod's
     silhouette. Once the collapse is complete it otherwise peeks out below
     the CTA as a black sliver. Visibility removes that finished board paint
     without creating the opacity/filter surface that produced Safari's old
     black rectangles. */
  body:is([data-site-concept="board-reveal"], [data-site-concept="scroll-reveal"])
    .story-sticky:has(.ipod.is-at-overlap) .motherboard {
    visibility: hidden;
  }

  body:is([data-site-concept="board-reveal"], [data-site-concept="scroll-reveal"])
    .story-copy-after .story-lede {
    max-width: none;
    margin-inline: 0;
    text-align: left;
  }

  /* Only the board travels. Its centre finishes on the iPod's centre while
     the iPod preserves its original position and one-degree resting angle. */
  body:is([data-site-concept="board-reveal"], [data-site-concept="scroll-reveal"])
    .story.is-connecting .ipod-unit {
    transform: var(--connection-active-transform);
  }

  body:is([data-site-concept="board-reveal"], [data-site-concept="scroll-reveal"])
    .story.is-connecting .motherboard-unit {
    transform: var(--connection-active-transform);
  }
}

@media (min-width: 840px) and (prefers-reduced-motion: reduce) {
  body:is([data-site-concept="board-reveal"], [data-site-concept="scroll-reveal"])
    .story-sticky:has(.ipod.is-at-overlap) .story-copy-after
      :is(.intro-prose, .scroll-reveal-heading,
        .intro-feature-list > li, .gel-feature-cloud > li,
        .intro-feature-footnote, .scroll-reveal-cta) {
    opacity: 1;
    filter: none;
    transition: none;
  }

  body:is([data-site-concept="board-reveal"], [data-site-concept="scroll-reveal"]) .ipod-unit {
    transform: rotate(-1deg);
  }

  body:is([data-site-concept="board-reveal"], [data-site-concept="scroll-reveal"]) .motherboard-unit {
    transform: translateX(
      calc(
        (-1 * var(--hardware-gap))
        - (var(--ipod-footprint) / 2)
        - (var(--board-carrier-width) / 2)
      )
    );
  }
}