/* ============================================================
   CWG Consulting — Scroll interactions (progressive enhancement)

   Safe by design:
   - Nothing here changes the page until interactions.js adds the
     `rf-ready` / `stg-ready` classes. If the script never runs, the
     site renders exactly as before.
   - All motion is disabled under prefers-reduced-motion; the calm
     static layout shows instead.
   - To disable everything: remove the two <link>/<script> lines
     for interactions.css / interactions.js from the pages.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

  /* ---- 1. Reading-focus text (scroll-pinned) ----
     Text and its cards pin together as one group near the top of the
     viewport. Scroll highlights the sentence word by word; the cards sit
     directly beneath it, dimmed like the un-lit words, and take on full
     colour once the sentence is read. The padding-bottom on the track
     supplies the scroll distance the pin runs for. */
  .rf-ready .rf-track { position: relative; }
  .rf-ready .rf-stage .section-head { margin-bottom: 22px; }
  .rf-ready .rf-word { color: rgba(11, 29, 56, 0.16); transition: color .2s ease; }
  .rf-ready .rf-word.lit { color: inherit; }
  /* Cards sit right under the sentence, dimmed until it is fully read */
  .rf-ready .rf-gated { margin-top: 40px; opacity: .3; filter: saturate(.3); transition: opacity .6s ease, filter .6s ease; }
  .rf-ready .rf-gated.revealed { opacity: 1; filter: none; }

  /* Desktop: the whole group fits on screen, so pin and centre it —
     the sentence highlights while held still, cards directly beneath. */
  @media (min-width: 641px) {
    .rf-ready .rf-track { height: calc(100svh + var(--pin, 700px)); }
    .rf-ready .rf-stage {
      position: sticky; top: 0; min-height: 100svh; padding: 28px 0;
      display: flex; flex-direction: column; justify-content: center;
    }
  }
  /* Mobile: the stacked cards make the group taller than the screen (a
     sticky element taller than the viewport can't pin), so we don't pin.
     The sentence highlights word by word from its own scroll position and
     the cards flow directly beneath it, dim until the sentence is read. */
  @media (max-width: 640px) {
    .rf-ready .rf-gated { margin-top: 30px; }
  }

  /* ---- 1b. Inline reading highlight (word by word, not pinned) ----
     For text that lives in split / multi-column layouts where a pin
     isn't appropriate: words light as the block scrolls up the page. */
  .rf-inline-ready .rf-word { color: rgba(11, 29, 56, 0.16); transition: color .3s ease; }
  .rf-inline-ready .rf-word.lit { color: inherit; }

  /* ---- 1c. Line-by-line highlight ----
     Each direct child (e.g. a list point) lights in turn while scrolling. */
  .rf-lines-ready > * { opacity: .26; transition: opacity .4s ease; }
  .rf-lines-ready > *.lit { opacity: 1; }

  /* ---- 1d. Inline gate: content held dim until its heading is fully lit ---- */
  .rf-gate-ready { opacity: .28; filter: saturate(.3); transition: opacity .6s ease, filter .6s ease; }
  .rf-gate-ready.revealed { opacity: 1; filter: none; }

  /* ---- 2a. Journey timelines — pin, then focus one stage at a time ----
     Sequence per stage: grey outline + grey text (waiting) → blue outline +
     full text (in focus) → blue fill + check + grey text (done). Desktop pins
     the whole group in the viewport centre and scroll steps through all four
     before releasing; mobile isn't pinned (a stacked row is taller than the
     screen), so the step nearest the reading line is the one in focus. */

  /* Desktop: pin the group and let scroll drive the sequence. */
  @media (min-width: 641px) {
    .tl-track { position: relative; height: calc(100svh + var(--pin, 720px)); }
    .tl-track .tl-stage {
      position: sticky; top: 0; min-height: 100svh; padding: 24px 0;
      display: flex; flex-direction: column; justify-content: center;
    }
  }

  /* Text: the stage in focus is at full strength and a touch larger; every
     other stage (waiting or already read) sits quietly greyed. */
  .stg-ready .tl-num, .stg-ready .tl-step b, .stg-ready .tl-step small { transition: opacity .45s ease, font-size .3s ease; }
  .stg-ready .tl-step:not(.stg-cur) .tl-num,
  .stg-ready .tl-step:not(.stg-cur) b,
  .stg-ready .tl-step:not(.stg-cur) small { opacity: .3; }
  .stg-ready .tl-step.stg-cur b { font-size: 1.32rem; }

  /* Box, in sequence: grey outline (waiting) → blue outline (in focus) →
     blue fill + check, held (ticked) → greyed once focus moves on. */
  .stg-ready .tl-step::before {
    border-color: rgba(11, 29, 56, 0.20);
    transition: background-color .4s ease, border-color .4s ease, opacity .4s ease;
  }
  .stg-ready .tl-step.stg-cur::before { border-color: var(--blue); }
  /* Ticked + done both carry a solid, opaque check box (so the timeline line
     never shows through). Ticked is blue and held; done is a muted grey. */
  .stg-ready .tl-step.stg-tick::before,
  .stg-ready .tl-step.stg-done::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    background-size: 9px 9px; background-position: center; background-repeat: no-repeat;
  }
  .stg-ready .tl-step.stg-tick::before { border-color: var(--blue); background-color: var(--blue); }
  .stg-ready .tl-step.stg-done::before { border-color: #99a0ac; background-color: #99a0ac; }

  /* Finale: journey complete — bring every stage back to full strength at
     standard size (no single stage enlarged), all blue-checked. */
  .stg-ready.stg-finale .tl-step .tl-num,
  .stg-ready.stg-finale .tl-step b,
  .stg-ready.stg-finale .tl-step small { opacity: 1; }

  /* ---- 2b. Approach system — same sequence, one row at a time ----
     Rows are tall, so this isn't pinned: the row being read is in full
     colour, rows already read carry a check on their number and grey out,
     upcoming rows wait dimmed. */
  .system-stack.stg-ready .system-row { transition: opacity .45s ease; }
  .system-stack.stg-ready .system-row:not(.stg-cur) { opacity: .34; }
  .system-stack.stg-ready .system-row .sys-num {
    background-color: #9aa2af; transition: background-color .4s ease;
  }
  .system-stack.stg-ready .system-row.stg-cur .sys-num,
  .system-stack.stg-ready .system-row.stg-done .sys-num { background-color: var(--blue); }
  .system-stack.stg-ready .system-row.stg-done .sys-num {
    color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    background-size: 22px 22px; background-position: center; background-repeat: no-repeat;
  }

  /* ---- 3. Testimonial swipe deck (phones only) ----
     interactions.js turns the testimonial grid into a stack of cards and
     drives the transforms; swiping the top card either way brings up the
     next one. Without JS the cards simply stack down the page as before. */
  @media (max-width: 640px) {
    .t-grid.t-deck { position: relative; display: block; }
    .t-grid.t-deck .t-card {
      position: absolute; top: 0; left: 0; right: 0;
      transform-origin: 50% 100%;
      touch-action: pan-y;           /* horizontal swipes are ours; the page still scrolls */
      box-shadow: 0 10px 24px rgba(11, 29, 56, 0.10);
      will-change: transform;
    }
    /* The "see more" link under the home grid duplicates the deck's prompt card */
    .t-deck-aside-hidden { display: none; }
    /* Swipe hint under the deck; fades away after the first swipe */
    .t-deck-hint {
      margin-top: 26px; text-align: center;
      font-size: 0.78rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
      color: var(--muted);
      transition: opacity .5s ease;
    }
    .t-deck-hint span { display: inline-block; margin: 0 6px; animation: deck-nudge-r 1.4s ease-in-out infinite alternate; }
    .t-deck-hint span:first-child { animation-name: deck-nudge-l; }
    .t-deck-hint.t-deck-hint-off { opacity: 0; }
  }
  @keyframes deck-nudge-r { from { transform: translateX(0); } to { transform: translateX(4px); } }
  @keyframes deck-nudge-l { from { transform: translateX(0); } to { transform: translateX(-4px); } }
}