/* HomePage 2 round 5: All-on-X scroll scene (jaw, posts, full arch, smile). Homepage only.
   Owner (2026-09-18): as the reader scrolls, a jaw without teeth, then four implant posts screw in
   one after another, then the full arch is set onto them, then the practice's own before-and-after
   of a real patient (owner decision 2026-09-22; consent on file, note under the photographs).
   Every model layer fills one box (aspect 1.3, object-fit: contain) and rests at the transform that
   seats it, measured from the layers (HOMEPAGE2.md): each post's ring on the ridge crest, the arch
   over every abutment. The part of a post below the crest shows at 30% through a static mask, so a
   post sinks into the gum as it turns.
   The base rules are the finished scene: without JavaScript, under reduced motion, on short windows
   or with enlarged text the assembled model and the two photographs sit side by side and nothing pins.
   html.home2-motion (set before first paint) pins the stage; home2-allx.js then writes transform
   and opacity only. */

.home2-allx { --allx-top: var(--header-content-height, calc(var(--header-height) + env(safe-area-inset-top, 0px))); margin-top: var(--h2-head-gap); }
/* The band clips sideways, so a post starting its run past the edge or the portrait's scale-in never
   widens a phone's page (clip, not hidden: no scroll container, the stage still pins). */
.home2 #all-on-x { overflow-x: clip; }
.home2-allx__visual {
  display: grid;
  /* Column widths in the ratio of the two aspect ratios, so the model and the portrait match in height. */
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr);
  align-items: center;
  column-gap: clamp(24px, 4vw, 64px);
  width: var(--h2-content);
  max-width: 980px;
  margin-inline: auto;
}

/* ---------- The model: one box, every layer contained and transformed about its centre ---------- */
.home2-allx__model { position: relative; aspect-ratio: 1.3; }
.home2-allx__model img,
.home2-allx__posts,
.home2-allx__post,
.home2-allx__arch { position: absolute; inset: 0; width: 100%; height: 100%; }
.home2-allx__model img { display: block; object-fit: contain; }
/* Above the ridge crest a post is solid; below it (inside gum and bone) it shows at 30%. The polygon
   is the crest line, 20% into the gum band, in box units (130 × 100). Static: only the posts move. */
.home2-allx__posts {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 100' preserveAspectRatio='none'%3E%3Crect width='130' height='100' fill-opacity='.3'/%3E%3Cpath d='M0 0H130V46.2L100.6 46.2L97 47.8L93.4 51.4L89.9 56.4L86.3 59.5L82.7 62.2L79.2 64.2L75.6 65.2L72 66.2L68.5 66.8L64.9 66.9L61.3 66.8L57.8 66.4L54.2 65.7L50.6 64.8L47.1 63.2L43.5 60.8L40 57.8L36.4 53.1L32.8 49.3L29.3 47.1L25.7 48.1L0 48.1Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 100' preserveAspectRatio='none'%3E%3Crect width='130' height='100' fill-opacity='.3'/%3E%3Cpath d='M0 0H130V46.2L100.6 46.2L97 47.8L93.4 51.4L89.9 56.4L86.3 59.5L82.7 62.2L79.2 64.2L75.6 65.2L72 66.2L68.5 66.8L64.9 66.9L61.3 66.8L57.8 66.4L54.2 65.7L50.6 64.8L47.1 63.2L43.5 60.8L40 57.8L36.4 53.1L32.8 49.3L29.3 47.1L25.7 48.1L0 48.1Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
/* Rest positions: the posts keep their shared scale (they were split from one layer) and sit with
   each ring on the crest; the two distal posts move in 2.4% of the box so the molars cover them. */
.home2-allx__post--1 img { transform: translate(1.846%, 9.06%) scale(.94); }
.home2-allx__post--2 img { transform: translate(0, 7.92%) scale(.94); }
.home2-allx__post--3 img { transform: translate(0, 7%) scale(.94); }
.home2-allx__post--4 img { transform: translate(-1.846%, 7.69%) scale(.94); }
/* Each post turns about its own ring as it screws in (the ring's rest point, in % of the box). */
.home2-allx__post--1 { transform-origin: 25.61% 49.39%; }
.home2-allx__post--2 { transform-origin: 36.51% 63.17%; }
.home2-allx__post--3 { transform-origin: 63.32% 62.17%; }
.home2-allx__post--4 { transform-origin: 74.27% 48.02%; }
.home2-allx__arch img { transform: translateY(2%) scale(.9); }

/* ---------- The result: the practice's own before-and-after, with its consent note ---------- */
/* Static (no JS, reduced motion, short windows): the two frames sit one above the other, as the
   practice publishes them. With the scene live they share one box and the after crosses over the
   before on the last beat of the scroll. Real photographs: crop and nothing else (see media.json). */
.home2-allx__result { display: grid; gap: 10px; margin: 0; }
.home2-allx__frame { display: block; width: 100%; height: auto; border-radius: var(--h2-radius-media); }
.home2-motion .home2-allx.is-live .home2-allx__result { gap: 0; }
.home2-motion .home2-allx.is-live .home2-allx__frame { grid-area: 1 / 1; }

.home2-allx__note { margin: 12px 0 0; color: var(--h2-night-text-2); font-size: var(--h2-fs-small); line-height: var(--h2-lh-text); letter-spacing: var(--h2-ls-body); text-align: center; }

/* ---------- Two more of the practice's results, under the scene ---------- */
/* Same contract as the scene's own result: the frames stand one above the other until the script
   is live, and then each card crosses from before to after as it travels up the viewport. */
/* The two photographs have their own aspect ratios, so each card keeps its own height: a stretched
   card would hang its handle below the picture. */
.home2-allx__more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: clamp(16px, 2.5vw, 32px); max-width: 980px; margin-top: clamp(32px, 5vh, 56px); }
.home2-allx__pair { display: grid; gap: 10px; margin: 0; }
.home2-allx__more .home2-allx__note { grid-column: 1 / -1; }
/* With home2-compare.js the card becomes one photograph with a handle across it: the after frame is
   clipped to the right of --reveal, and the reader drags the handle to see more or less of it. The
   input covers the card (transparent) so a press anywhere on the picture takes hold of the handle;
   touch-action keeps a vertical swipe scrolling the page. */
.home2-allx__pair.is-compare { --reveal: 50%; position: relative; gap: 0; }
.home2-allx__pair.is-compare .home2-allx__frame { grid-area: 1 / 1; }
.home2-allx__pair.is-compare [data-allx-pair-after] { clip-path: inset(0 0 0 var(--reveal)); }
.home2-allx__pair.is-compare::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--reveal);
  width: 2px;
  translate: -1px 0;
  background: rgb(255 255 255 / .92);
  box-shadow: 0 0 0 1px rgb(20 18 16 / .28);
  pointer-events: none;
}
.home2-allx__pair.is-compare::before {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--reveal);
  z-index: 1;
  width: 44px;
  height: 44px;
  translate: -50% -50%;
  border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141210' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 7.5 5 12l4.5 4.5M14.5 7.5 19 12l-4.5 4.5'/%3E%3C/svg%3E") center / 24px no-repeat;
  box-shadow: 0 2px 8px rgb(20 18 16 / .28);
  pointer-events: none;
}
.home2-allx__reveal { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; appearance: none; background: none; cursor: ew-resize; touch-action: pan-y; }
/* The grip carries the focus ring, because the input itself is invisible. */
.home2-allx__pair.is-compare:focus-within::before { outline: 3px solid var(--h2-focus); outline-offset: 3px; }
@media (max-width: 734px) {
  .home2-allx__more { grid-template-columns: minmax(0, 1fr); }
}

/* The steps keep the band's tiles under the scene (the list is no longer a direct child of the band). */
.home2-allx__steps { max-width: 980px; }

@media (max-width: 734px) {
  .home2-allx__visual { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
}

@media (forced-colors: active) {
  .home2-allx__posts { -webkit-mask: none; mask: none; }
}

/* ---------- Motion: the stage pins and home2-allx.js scrubs it (transform and opacity only) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Every width, on windows at least 32em tall (em, so enlarged text keeps the finished scene): the
     stage pins below the header while the track scrolls, and the model and the portrait share one
     cell. Until the script moves them the stage shows the scene's last frame, the portrait. */
  @media (min-height: 32em) {
    .home2-motion .home2-allx__track { min-height: 230svh; }
    .home2-motion .home2-allx__stage {
      position: sticky;
      top: var(--allx-top);
      display: grid;
      place-items: center;
      height: calc(100svh - var(--allx-top));
      padding-bottom: 2.5rem;
    }
    .home2-motion .home2-allx__visual {
      grid-template-columns: minmax(0, 1fr);
      width: min(100vw, calc((100svh - var(--allx-top) - 7.5rem) * .8));
      max-width: none;
    }
    .home2-motion .home2-allx__model,
    .home2-motion .home2-allx__portrait { grid-area: 1 / 1; }
    .home2-motion .home2-allx__model { opacity: 0; }
    /* Only the pinned result's own caption is lifted out of the stage box; the notes under the
       extra results stay in flow with their photographs (owner report, Jacob 2026-09-22: the
       line was showing away from any before-and-after). */
    .home2-motion .home2-allx__result > .home2-allx__note { position: absolute; top: 100%; right: 0; left: 0; }
    .home2-motion .home2-allx.is-live :is(.home2-allx__model, .home2-allx__post, .home2-allx__arch, .home2-allx__portrait) { will-change: transform, opacity; }
  }

  /* Tablets: a squarer cell, so the portrait is taller than the model without filling the window. */
  @media (min-width: 735px) and (min-height: 32em) {
    .home2-motion .home2-allx__track { min-height: 250svh; }
    .home2-motion .home2-allx__visual { width: min(var(--h2-content), calc((100svh - var(--allx-top) - 7.5rem) * 1.1)); }
    /* The result is a wide photograph, so it takes the column instead of the old portrait's 73%. */
    .home2-motion .home2-allx__portrait { justify-self: center; width: 100%; }
  }

  /* Desktop: the scene is 300vh; the stage pins on the left and the three steps pin beside it as
     chapters, the current one brightened with a brass rail that fills as its part plays. Both pin
     for the same range (the track is the grid row). 1069 × 640 at default text, in em. */
  @media (min-width: 66.8125em) and (min-height: 40em) {
    .home2-motion .home2-allx {
      display: grid;
      grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
      column-gap: clamp(40px, 5vw, 88px);
      width: var(--h2-content);
      margin-inline: auto;
    }
    .home2-motion .home2-allx__track { min-height: 300vh; }
    .home2-motion .home2-allx__visual { width: min(100%, calc((100svh - var(--allx-top) - 7.5rem) * 1.1)); }
    .home2-motion .home2-allx__steps {
      position: sticky;
      top: var(--allx-top);
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0;
      width: auto;
      max-width: 30rem;
      height: calc(100svh - var(--allx-top));
      margin: 0;
      padding-bottom: 2.5rem;
    }
    .home2-motion .home2-allx__steps li { position: relative; padding: 20px 0 20px 32px; border-radius: 0; background: none; }
    .home2-motion .home2-allx__steps li::before,
    .home2-motion .home2-allx__steps li::after { content: ""; position: absolute; top: 20px; bottom: 20px; left: 0; width: 2px; border-radius: 1px; background: rgb(245 243 239 / .16); }
    .home2-motion .home2-allx__steps li::after { background: var(--h2-brass-night); transform: scaleY(var(--allx-fill, 0)); transform-origin: 50% 0; }
    .home2-motion .home2-allx__steps span { margin-bottom: 12px; }
    .home2-motion .home2-allx__steps h3 { color: var(--h2-night-text-2); transition: color var(--h2-dur-fade) var(--h2-ease-standard); }
    .home2-motion .home2-allx__steps li.is-current h3 { color: var(--h2-night-text); }
  }
}