/* v7-flow: current that travels (research-E moves 1, 4, 6, 9).
   Every effect enhances the existing static drawing; with no support, reduced motion, the footer
   pause, data-experience=standard or data-scroll=false, the page looks exactly as before (complete,
   unlit). Scroll-driven parts use animation-timeline and sit inside @supports; no JS loops. */

/* ======================================================================
   Move 1 · Booking steps (sections/book-steps.liquid): current runs node to node
   ====================================================================== */
.v5-steps__step:nth-child(1){--v7f-i:0}
.v5-steps__step:nth-child(2){--v7f-i:1}
.v5-steps__step:nth-child(3){--v7f-i:2}
.v5-steps__step:nth-child(4){--v7f-i:3}

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    body:not(.is-motion-paused):not([data-experience=standard]):not([data-scroll=false]) .v5-steps__list{view-timeline:--v7f-steps block}

    /* the charge: an orange overlay with the same geometry as the blue ::after trace */
    body:not(.is-motion-paused):not([data-experience=standard]):not([data-scroll=false]) .v5-steps__step:not(:last-child)::before{
      content:"";position:absolute;z-index:1;pointer-events:none;
      top:calc(var(--v5-node) / 2 - .5px);left:calc(var(--v5-node) + 6px);
      width:calc(100% + var(--v5-gap) - var(--v5-node) - 12px);height:2px;border-radius:1px;
      background:var(--orange);box-shadow:0 0 8px #ff7a0080;
      transform-origin:0 50%;transform:scaleX(0);
      animation:v7f-charge-x linear both;animation-timeline:--v7f-steps;
      animation-range:cover calc(28% + var(--v7f-i) * 14%) cover calc(40% + var(--v7f-i) * 14%)
    }
    /* the node latches: outer ring + glow fade in, the number turns orange */
    body:not(.is-motion-paused):not([data-experience=standard]):not([data-scroll=false]) .v5-steps__node::after{
      content:"";position:absolute;inset:-1.5px;border-radius:50%;pointer-events:none;
      border:1.5px solid var(--orange);
      box-shadow:0 0 22px -6px #ff7a00,inset 0 0 0 3px var(--bg),inset 0 0 0 4px #ff7a0066;
      opacity:0;
      animation:v7f-latch linear both;animation-timeline:--v7f-steps;
      animation-range:cover calc(26% + var(--v7f-i) * 14%) cover calc(28% + var(--v7f-i) * 14%)
    }
    body:not(.is-motion-paused):not([data-experience=standard]):not([data-scroll=false]) .v5-steps__node{
      animation:v7f-ink linear forwards;animation-timeline:--v7f-steps;
      animation-range:cover calc(26% + var(--v7f-i) * 14%) cover calc(28% + var(--v7f-i) * 14%)
    }

    /* phones: the list is one column and the traces run downward. Each step carries its own
       timeline; the charge front follows a reading line 45% up from the bottom of the screen. */
    @media (max-width:800px){
      body:not(.is-motion-paused):not([data-experience=standard]):not([data-scroll=false]) .v5-steps__step{view-timeline:--v7f-step block}
      body:not(.is-motion-paused):not([data-experience=standard]):not([data-scroll=false]) .v5-steps__step:not(:last-child)::before{
        top:calc(var(--v5-node) + 6px);left:calc(var(--v5-node) / 2 - .5px);
        width:2px;height:calc(100% + var(--v5-gap) - var(--v5-node) - 12px);
        transform-origin:50% 0;transform:scaleY(0);
        animation:v7f-charge-y linear both;animation-timeline:--v7f-step;
        animation-range:entry-crossing calc(45svh + var(--v5-node)) entry-crossing calc(100% + 45svh + var(--v5-gap) - 6px)
      }
      body:not(.is-motion-paused):not([data-experience=standard]):not([data-scroll=false]) .v5-steps__node::after,
      body:not(.is-motion-paused):not([data-experience=standard]):not([data-scroll=false]) .v5-steps__node{
        animation-timeline:--v7f-step;
        animation-range:entry-crossing 45svh entry-crossing calc(45svh + 24px)
      }
    }
  }
}
@keyframes v7f-charge-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes v7f-charge-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes v7f-latch{from{opacity:0}to{opacity:1}}
@keyframes v7f-ink{to{color:var(--orange)}}

/* ======================================================================
   Move 4 · Kit ladder (sections/kit-ladder.liquid): power climbs the rail
   v7-flow.js inserts one <i class="v7f-charge"> per rung (same geometry as the blue ::before rail)
   and one orange copy of each jog path. Hidden unless the scroll timeline can drive them.
   ====================================================================== */
.v7f-charge{display:none}
.kl__jog .v7f-jog{display:none}

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    body:not(.is-motion-paused):not([data-experience=standard]):not([data-scroll=false]) .v7f-charge{
      display:block;position:absolute;z-index:0;pointer-events:none;
      left:calc(var(--rail) / 2 - 1px);top:0;bottom:0;width:2px;
      background:var(--orange);box-shadow:0 0 8px #ff7a0080;
      transform-origin:50% 0;transform:scaleY(0);
      animation:v7f-charge-y linear both;animation-timeline:view();
      animation-range:entry-crossing 45svh entry-crossing calc(100% + 45svh)
    }
    body:not(.is-motion-paused):not([data-experience=standard]):not([data-scroll=false]) .kl__rung--first .v7f-charge{top:var(--node-y)}
    body:not(.is-motion-paused):not([data-experience=standard]):not([data-scroll=false]) .kl__rung--last .v7f-charge{bottom:calc(var(--pb) - 28px)}

    body:not(.is-motion-paused):not([data-experience=standard]):not([data-scroll=false]) .kl__jog .v7f-jog{
      display:inline;fill:none;stroke:var(--orange);stroke-width:2;
      clip-path:inset(0 0 100% 0);
      animation:v7f-draw linear both;animation-timeline:--v7f-jog;
      animation-range:entry-crossing 45svh entry-crossing calc(100% + 45svh)
    }
    body:not(.is-motion-paused):not([data-experience=standard]):not([data-scroll=false]) .kl__jog{view-timeline:--v7f-jog block}

    /* the node latches when the charge front reaches it; it stays powered once passed.
       Only a "to" keyframe, so hover/focus/.is-current styling still works before it arrives. */
    body:not(.is-motion-paused):not([data-experience=standard]):not([data-scroll=false]) .kl__node{
      animation:v7f-node linear forwards;animation-timeline:view();
      animation-range:entry-crossing 45svh entry-crossing calc(100% + 45svh)
    }
    body:not(.is-motion-paused):not([data-experience=standard]):not([data-scroll=false]) .kl__node::after{
      animation:v7f-node-core linear forwards;animation-timeline:--v7f-node;
      animation-range:entry-crossing 45svh entry-crossing calc(100% + 45svh)
    }
    body:not(.is-motion-paused):not([data-experience=standard]):not([data-scroll=false]) .kl__node{view-timeline:--v7f-node block}
  }
}
@keyframes v7f-draw{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes v7f-node{to{border-color:var(--orange)}}
@keyframes v7f-node-core{to{background-color:var(--orange)}}

/* ======================================================================
   Move 9 · Events (sections/live-events.liquid, rows built by live-data.js)
   v7-flow.js adds an LED to each date badge, marks the soonest upcoming row .v7f-next
   and plays its standby pulse (three slow pulses, then solid) once it is in view.
   ====================================================================== */
.live-event__date{position:relative}
.v7f-led{position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;pointer-events:none;
  background:color-mix(in oklab,var(--orange) 26%,#0b0d11);box-shadow:0 0 0 2px #0b0d11b3}
.v7f-next .v7f-led{background:var(--orange);box-shadow:0 0 0 2px #0b0d11,0 0 10px 2px #ff7a00cc}
/* past events: unpowered. The LED is dark grey and the badge loses its blue. */
.live-event--past .v7f-led{background:#3a4150;box-shadow:0 0 0 2px #0b0d11}
.live-event--past .live-event__date{background:var(--bg-sunk,#08090c);border:1px solid var(--line-2,#2a3140);color:var(--ink-2)}
.live-event--past .live-event__date *{color:inherit}
.live-event--past .live-event__title{color:var(--ink-2)}
@media (max-width:800px){.v7f-led{top:6px;right:6px;width:7px;height:7px}}

@media (prefers-reduced-motion:no-preference){
  body:not(.is-motion-paused):not([data-experience=standard]) .v7f-next.v7f-play .v7f-led{animation:v7f-standby 1.2s ease-in-out 3}
}
@keyframes v7f-standby{0%,100%{opacity:1}50%{opacity:.3;box-shadow:0 0 0 2px #0b0d11}}

/* ======================================================================
   Move 6 · The footer "Pause motion" control is a real rocker
   v7-flow.js wraps the button text (still set by theme.js) beside the shared .rocker
   and a small ON/OFF readout. role=switch, aria-checked=true means motion is on.
   ====================================================================== */
.motion-toggle.v7f-switch{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0;text-decoration:none;color:var(--ink-2)}
.motion-toggle.v7f-switch .rocker{flex:none;width:40px;height:22px;padding:2px;box-sizing:border-box;border-radius:4px;background:#1a2130;border:1px solid var(--line-2,#2a3140);box-shadow:inset 0 2px 4px #00000044}
.motion-toggle.v7f-switch .rocker>span{width:17px;height:16px;box-sizing:border-box;background:#0b0d11;border:1px solid #8190a7;border-radius:2px}
.motion-toggle.v7f-switch .rocker>span::after{width:2px;height:6px;margin:4px auto;background:#8190a7}
.motion-toggle.v7f-switch[aria-checked=true] .rocker>span{transform:translateX(17px);background:var(--orange);border-color:var(--orange)}
.motion-toggle.v7f-switch[aria-checked=true] .rocker>span::after{background:#0b0d11}
.v7f-switch__label{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:text-decoration-color .15s}
.motion-toggle.v7f-switch:hover .v7f-switch__label{text-decoration-color:currentColor;color:var(--ink)}
.v7f-switch__state{display:inline-flex;align-items:center;gap:6px;padding:3px 7px 2px;border:1px solid var(--line-2,#2a3140);border-radius:4px;
  font-family:var(--font-heading,inherit);font-size:12px;line-height:1.2;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.v7f-switch__state::before{content:"";width:6px;height:6px;border-radius:50%;background:#3a4150}
.motion-toggle.v7f-switch[aria-checked=true] .v7f-switch__state::before{background:var(--orange);box-shadow:0 0 6px #ff7a00b3}
.motion-toggle.v7f-switch:focus-visible{outline:2px solid var(--orange);outline-offset:4px;border-radius:4px}
@media (prefers-reduced-motion:no-preference){
  .motion-toggle.v7f-switch .rocker>span{transition:transform .14s var(--m7-quint,ease-out),background-color .14s,border-color .14s}
}