/* Progressive enhancement: server HTML and no-JS/reduced-motion stay visible.
   Individual transform properties leave the components' interaction transforms intact. */
.page-index #main [data-scroll-story="reveal"] {
  opacity:1!important;
  translate:0 var(--story-y,0px);
  scale:var(--story-scale,1);
  transform-origin:50% 0;
  transition:none!important;
}
.page-index #main .rise[data-scroll-story="reveal"] { transform:none!important; }
.page-index #main [data-scroll-story][data-scroll-active] { will-change:translate,scale; }
.page-index #main [data-scroll-hero="copy"] {
  translate:0 var(--story-y,0px);
  opacity:1!important;
}
.page-index #main [data-scroll-hero="image"] {
  translate:0 var(--story-y,0px);
  scale:var(--story-scale,1);
  transform-origin:50% 50%;
}
/* Focus freezes the current presentation value in JS, without moving controls. */
@media (prefers-reduced-motion:reduce) {
  .page-index #main [data-scroll-story],.page-index #main [data-scroll-hero] { translate:none!important; scale:1!important; opacity:1!important; will-change:auto; }
}
@media print {
  .page-index #main [data-scroll-story],.page-index #main [data-scroll-hero] { translate:none!important; scale:1!important; opacity:1!important; will-change:auto; }
}

/* The older one-shot reveal must not compete with the scroll-linked story.
   Full opacity is the fallback even if the module fails or JS is disabled. */
.page-index .reveal { opacity:1!important; transform:none!important; transition:none!important; }
.page-index .g-tile, .page-index .pair-tile {
  transition: border-color 180ms ease, box-shadow 220ms ease;
}
.page-index .pill:active, .page-index .flow-step:active { transform:scale(.98); transition:transform 80ms ease-out; }
@media (hover:hover) and (pointer:fine) {
  .page-index .g-tile:hover, .page-index .pair-tile:hover {
    border-color:var(--hair-2); box-shadow:0 14px 36px -24px var(--glow);
  }
}
@media (prefers-reduced-motion:reduce) {
  .page-index .pill:active,.page-index .flow-step:active {transform:none;}
  .page-index .g-tile,.page-index .pair-tile {transition:none;}
}
/* Keep the chapter/appearance menu inside the viewport when the consent bar
   offsets the navigation. Its top already includes --bar-off. */
.page-index .index {
  max-height:calc(100svh - var(--nav-h) - var(--band-h) - var(--bar-off,0px) - 24px - env(safe-area-inset-top));
}
/* Grid children may shrink and wrap with large accessibility text sizes. */
.page-index .chap-head > *, .page-index .cta2-in > *, .page-index .foot-brand > div {min-width:0;max-width:100%;}
.page-index .big,.page-index .foot-brand .brand-name {overflow-wrap:anywhere;}
.page-index .cta2 .pill {white-space:normal;overflow-wrap:anywhere;min-width:0;}