/*
  Key for Change — sitewide motion: hero load-in + scroll-reveal  (v2, task #1001115;
  v1 was #1000971, backup css/reveal.css.bak-1001115)

  ONE central pair drives every page:
    • THIS FILE  = what the motion looks like (distance, duration, easing, the
      stagger step, the hero load-in choreography). Edit here to restyle every
      reveal on the site at once.
    • js/reveal.js = WHICH blocks animate (the SECTION_SELECTORS list at the top
      of that file — the single edit point for coverage) and the automatic
      stagger of grid/flex/list children inside every revealed section.

  Three layers of motion, all subtle, all in the house easing:
    1. HERO LOAD-IN — the interior hero band (.kfc-band, the video band, the guide
       hero) settles in on page load: eyebrow → title → standfirst → CTAs cascade
       up 14px while the right-hand photo/thumb/card eases in a beat later.
       Keyed off `html.kfc-reveal` (added PRE-PAINT by the inline snippet in
       base.html.twig) + `html.kfc-reveal-loaded` (added by reveal.js on the
       first frame after DOM ready), so there is no flash of visible → hidden.
    2. SECTION REVEAL — every section container rises 24px and fades in as it
       enters the viewport (`data-kfc-reveal` + `.is-revealed`).
    3. ITEM STAGGER — inside a revealed section, the children of any card grid,
       flex row, step list or FAQ cascade in 80ms apart (`data-kfc-reveal-item`).
       Items that scroll in on their own later come in alone with no delay.

  How it stays safe:
    • Every hide-rule is gated on `html.kfc-reveal`. The head snippet only adds it
      when motion is wanted (no reduced-motion, IntersectionObserver present) and
      REMOVES it again if reveal.js has not reported ready within 2.5s — so a
      blocked/failed script can never leave content invisible. No JS at all =>
      the class is never added => content is 100% visible.
    • reduced-motion + print: the media queries at the foot force everything
      visible and static, no matter what classes are present.
    • Final state of every animated element is `opacity:1; transform:none` and
      no `will-change` is ever set — so sticky rails and the video page's
      fixed-position docked player keep working after the reveal.

  Namespacing: `data-kfc-reveal*` — deliberately NOT the bare `data-reveal`,
  which the HOME hero owns for its scroll-scrub choreography (hero.css /
  hero-scrub.js). The two never collide; the home hero is untouched here.

  Opt-out: put `data-noreveal` on a block (or any ancestor) — the quiz stage
  already carries it. Directional variants: data-kfc-reveal="fade|left|right|zoom".
*/

:root {
  --kfc-reveal-dist:      24px;    /* section travel */
  --kfc-reveal-item-dist: 18px;    /* item travel */
  --kfc-reveal-dur:       760ms;   /* section duration */
  --kfc-reveal-item-dur:  640ms;   /* item duration */
  --kfc-reveal-step:      80ms;    /* stagger step between siblings */
  --kfc-reveal-ease:      var(--k4c-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

/* ═══════════════════════════════════════════════════════════════════════════
   1. HERO LOAD-IN — interior hero bands
   Three groups, each a :is() list so a new template's band is one selector
   away. reveal.js sets --kfc-hero-i on each copy child (its index) before it
   adds html.kfc-reveal-loaded, so the cascade order is DOM order.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Copy column children cascade up: eyebrow → title → standfirst → CTAs. */
html.kfc-reveal :is(
  .kfc-band .copy,                                /* page_hero macro + shop/events/event bands */
  .kfc-band .abt-copy, .kfc-band .prg-copy, .kfc-band .bc-copy,   /* about · programme · coaching */
  .lib-hero > .lib-container > div:first-child,   /* library */
  .ss-hero > .ss-container > div:first-child,     /* success stories */
  .k4c-vid__band .k4c-vid__copy,                  /* video post */
  .k4c-guide .hero .copy, .k4c-guide .hero .meta  /* guides / pillars */
) > * {
  transition: opacity 640ms var(--kfc-reveal-ease),
              transform 640ms var(--kfc-reveal-ease);
  transition-delay: calc(40ms + var(--kfc-hero-i, 0) * 70ms);
}
html.kfc-reveal:not(.kfc-reveal-loaded) :is(
  .kfc-band .copy,
  .kfc-band .abt-copy, .kfc-band .prg-copy, .kfc-band .bc-copy,
  .lib-hero > .lib-container > div:first-child,
  .ss-hero > .ss-container > div:first-child,
  .k4c-vid__band .k4c-vid__copy,
  .k4c-guide .hero .copy, .k4c-guide .hero .meta
) > * {
  opacity: 0;
  transform: translateY(14px);
}

/* Right-hand column (photo / video thumb / listing count / aside / event card)
   settles in a beat after the copy with a whisper of scale. Transform ends at
   none, so nothing inside is left with a transformed containing block. */
html.kfc-reveal :is(
  .kfc-band .photo-col, .kfc-band .thumb, .kfc-band .count, .kfc-band .aside, .kfc-band .ev-card,
  .kfc-band .abt-photo-col, .kfc-band .prg-photo-col, .kfc-band .lib-aside, .kfc-band .ss-count
) {
  transition: opacity 760ms var(--kfc-reveal-ease) 180ms,
              transform 760ms var(--kfc-reveal-ease) 180ms;
}
html.kfc-reveal:not(.kfc-reveal-loaded) :is(
  .kfc-band .photo-col, .kfc-band .thumb, .kfc-band .count, .kfc-band .aside, .kfc-band .ev-card,
  .kfc-band .abt-photo-col, .kfc-band .prg-photo-col, .kfc-band .lib-aside, .kfc-band .ss-count
) {
  opacity: 0;
  transform: translateY(12px) scale(0.985);
}
/* The live video player slot: OPACITY ONLY — its docked mini-player is
   position:fixed and must never sit under a transformed ancestor. */
html.kfc-reveal .k4c-vid__band .k4c-vid__slot { transition: opacity 760ms var(--kfc-reveal-ease) 180ms; }
html.kfc-reveal:not(.kfc-reveal-loaded) .k4c-vid__band .k4c-vid__slot { opacity: 0; }

/* Trailing strips (facts / press bar / filters / chips) fade up last. */
html.kfc-reveal :is(
  .kfc-band .facts, .kfc-band .ev-facts, .kfc-band .filters, .kfc-band .chips,
  .kfc-band .abt-pressbar, .kfc-band .prg-facts, .kfc-band .lib-filters, .kfc-band .ss-filters,
  .k4c-vid__chips, .k4c-guide .chips
) {
  transition: opacity 640ms var(--kfc-reveal-ease) 360ms,
              transform 640ms var(--kfc-reveal-ease) 360ms;
}
html.kfc-reveal:not(.kfc-reveal-loaded) :is(
  .kfc-band .facts, .kfc-band .ev-facts, .kfc-band .filters, .kfc-band .chips,
  .kfc-band .abt-pressbar, .kfc-band .prg-facts, .kfc-band .lib-filters, .kfc-band .ss-filters,
  .k4c-vid__chips, .k4c-guide .chips
) {
  opacity: 0;
  transform: translateY(10px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. SECTION REVEAL
   ═══════════════════════════════════════════════════════════════════════════ */
html.kfc-reveal [data-kfc-reveal] {
  opacity: 0;
  transform: translateY(var(--kfc-reveal-dist));
  transition: opacity   var(--kfc-reveal-dur) var(--kfc-reveal-ease),
              transform var(--kfc-reveal-dur) var(--kfc-reveal-ease);
  transition-delay: var(--kfc-reveal-delay, 0ms);
}
html.kfc-reveal [data-kfc-reveal="fade"]  { transform: none; }
html.kfc-reveal [data-kfc-reveal="left"]  { transform: translateX(calc(var(--kfc-reveal-dist) * -1)); }
html.kfc-reveal [data-kfc-reveal="right"] { transform: translateX(var(--kfc-reveal-dist)); }
html.kfc-reveal [data-kfc-reveal="zoom"]  { transform: scale(0.965); }

html.kfc-reveal [data-kfc-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. ITEM STAGGER — children of grids / flex rows / lists inside a section.
      reveal.js sets --kfc-reveal-delay per item from its place in the batch
      that entered the viewport together (capped at 6 steps).
   ═══════════════════════════════════════════════════════════════════════════ */
html.kfc-reveal [data-kfc-reveal-item] {
  opacity: 0;
  transform: translateY(var(--kfc-reveal-item-dist));
  transition: opacity   var(--kfc-reveal-item-dur) var(--kfc-reveal-ease),
              transform var(--kfc-reveal-item-dur) var(--kfc-reveal-ease);
  transition-delay: var(--kfc-reveal-delay, 0ms);
}
html.kfc-reveal [data-kfc-reveal-item].is-revealed {
  opacity: 1;
  transform: none;
}

/* Media inside a revealing card settles from a whisper of zoom — only the
   media card, whose frame clips overflow, so nothing pokes past a rounded
   corner mid-motion. */
html.kfc-reveal [data-kfc-reveal-item].k4c-card--media .k4c-card__img {
  transform: scale(1.04);
  transition: transform 1100ms var(--kfc-reveal-ease);
  transition-delay: var(--kfc-reveal-delay, 0ms);
}
html.kfc-reveal [data-kfc-reveal-item].is-revealed.k4c-card--media .k4c-card__img {
  transform: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Accessibility + print: never hide, never move.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce), print {
  html.kfc-reveal [data-kfc-reveal],
  html.kfc-reveal [data-kfc-reveal-item],
  html.kfc-reveal [data-kfc-reveal-item].k4c-card--media .k4c-card__img,
  html.kfc-reveal .kfc-band *,
  html.kfc-reveal .k4c-vid__band *,
  html.kfc-reveal .k4c-vid__chips,
  html.kfc-reveal .k4c-guide .hero *,
  html.kfc-reveal .k4c-guide .chips {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}