/* ==========================================================================
   Scroll animations — index2.html only.
   Additive: loads after styles.css and changes nothing in index.html.

   Everything here is gated on `.js-reveal`, which the inline script in
   index2.html's <head> sets before first paint. If the visitor prefers reduced
   motion the class is never added, so none of this applies and the page is the
   plain static one.

   The hidden-state selector list below must stay in step with the GROUPS
   table in reveal.js — same elements, same order.
   ========================================================================== */

:root {
  --reveal-shift: 22px;
  --reveal-dur: 620ms;
}

/* `:where()` keeps the structural selectors at zero specificity, so the plain
   `.js-reveal .is-in` rule below can win without !important. */
.js-reveal :where(
  .hero__copy,
  .friction__intro,
  .compare__tabs,
  .consultation__copy,
  .form-card,
  .services .section-head,
  .difference .section-head,
  .testimonials .section-head,
  .stats__inner > .stat,
  .friction__list > *,
  .services__grid > .service,
  .compare__grid > .compare__cell,
  .testimonials__grid > .quote,
  /* Was .site-footer__inner, renamed out of existence by the footer rebuild.
     reveal.js was updated at the time and this file was not, so the new footer
     rows were never given a hidden start state and quietly stopped animating.
     Keep these two lists in step with the GROUPS table in reveal.js. */
  .site-footer__local > *,
  .site-footer__nav > *,

  /* our-team.html and service-areas.html, added 12 Oct. Both pages loaded
     reveal.css, set the js-reveal flag and loaded reveal.js correctly - they
     were simply never named in either list, so the machinery ran and found
     nothing. PK noticed the missing fade-ups immediately. Keep in step with
     the GROUPS table in reveal.js. */
  .tm-hero__copy,
  .tm__copy,
  .tm__people > *,
  .tm-group .section-head,
  .tm-group__fig,
  .sa-hero__inner,
  .sa-map__copy,
  .sa-map__figure,
  .sa-list__inner > *,

  /* .faq has never had a hidden state on ANY page - it is on eight of them.
     Its items now stagger in like every other list on the site. */
  .faq .section-head,
  .faq__list > .faq__item
) {
  opacity: 0;
  transform: translateY(var(--reveal-shift));
  transition:
    opacity var(--reveal-dur) var(--ease),
    transform var(--reveal-dur) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.js-reveal .is-in {
  opacity: 1;
  transform: none;
}

/* The hero's own load animation would fight the observer — the observer takes
   over, so the hero still animates, just through one mechanism. */
.js-reveal .rise { animation: none; }

/* The 64px gold rules draw in from the left, just behind their block. */
.js-reveal :where(.rule) {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 560ms var(--ease);
}
.js-reveal .is-in .rule {
  transform: scaleX(1);
  transition-delay: calc(var(--reveal-delay, 0ms) + 200ms);
}

/* Cards lift a little further than text blocks and scale up a hair — enough to
   read as "arriving" rather than just fading. */
.js-reveal :where(
  .services__grid > .service,
  .testimonials__grid > .quote
) {
  transform: translateY(calc(var(--reveal-shift) + 8px)) scale(.985);
}

/* Sticky header earns a shadow once the page has moved off the top. */
.site-header { transition: box-shadow 240ms var(--ease); }
.js-reveal .site-header.is-stuck { box-shadow: 0 8px 26px rgba(0, 0, 0, .14); }

/* Hero art is oversized so it can drift without exposing an edge. */
.js-reveal .hero__art {
  top: -45px;
  height: calc(100% + 90px);
  will-change: transform;
}

/* Belt and braces: if the class somehow survives a reduced-motion switch,
   nothing moves and nothing stays hidden. */
@media (prefers-reduced-motion: reduce) {
  .js-reveal :where(
    .hero__copy, .friction__intro, .compare__tabs, .consultation__copy,
    .form-card, .services .section-head, .difference .section-head,
    .testimonials .section-head, .stats__inner > .stat, .friction__list > *,
    .services__grid > .service, .compare__grid > .compare__cell,
    .testimonials__grid > .quote,
    .site-footer__local > *, .site-footer__nav > *
  ) {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .js-reveal :where(.rule) { transform: none; transition: none; }
  .js-reveal .hero__art { top: 0; height: 100%; transform: none; }
}