/* v5.css — site-wide "engineering brand" layer.
   Every effect enhances an already-visible default: with no JS, no support or reduced motion,
   all content shows in its final state. Motion is gated by prefers-reduced-motion, body.is-motion-paused
   and body[data-experience=standard] (same gates as v4-motion.css). */

:root{
  --v5-ease:cubic-bezier(.16,1,.3,1);
  --v5-trace:#0a7cff8c;
}

/* ---------- 1. Cross-document page transitions ----------
   v4-motion.css already opts in; this tightens it to a plain, short crossfade (no slide) and keeps the
   header out of the fade. Browsers without cross-document view transitions simply navigate. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .site-header{view-transition-name:site-header}
  ::view-transition-group(site-header),
  ::view-transition-old(site-header),
  ::view-transition-new(site-header){animation:none}
  ::view-transition-old(root){animation:v5-vt-out 120ms cubic-bezier(.4,0,1,1) both}
  ::view-transition-new(root){animation:v5-vt-in 200ms var(--v5-ease) 40ms both}
  html:has(>body[data-experience=standard])::view-transition-old(root),
  html:has(>body[data-experience=standard])::view-transition-new(root){animation:none}
}
@keyframes v5-vt-out{to{opacity:0}}
@keyframes v5-vt-in{from{opacity:0}}

/* ---------- 2. Footer wordmark "power-on" ----------
   The logo is a traced, filled SVG img element, so it is revealed with a left-to-right mask wipe and a brief
   orange glow as it scrolls in. Default (no support / reduced motion / paused): fully visible, no mask. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()) and (overflow:clip){
    /* overflow:hidden makes the footer a scroll container, which would give view() a dead timeline;
       clip crops identically without being a scroller. */
    body:not(.is-motion-paused):not([data-experience=standard]):not([data-scroll=false]) .site-footer{overflow:clip}
    body:not(.is-motion-paused):not([data-experience=standard]):not([data-scroll=false]) .site-footer .brand--footer :is(.brand__logo,.brand__image){
      -webkit-mask-image:linear-gradient(90deg,#000 46%,transparent 54%);
      mask-image:linear-gradient(90deg,#000 46%,transparent 54%);
      -webkit-mask-size:220% 100%;mask-size:220% 100%;
      -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
      -webkit-mask-position:0 0;mask-position:0 0;
      animation:v5-power linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 100%;
      animation-play-state:running!important
    }
  }
}
@keyframes v5-power{
  0%{-webkit-mask-position:100% 0;mask-position:100% 0;filter:drop-shadow(0 0 0 #ff7a0000)}
  72%{-webkit-mask-position:0 0;mask-position:0 0;filter:drop-shadow(0 0 16px #ff7a00a6)}
  100%{-webkit-mask-position:0 0;mask-position:0 0;filter:drop-shadow(0 0 0 #ff7a0000)}
}

/* ---------- 3. Circuit-trace dividers (home page) ----------
   A hairline trace with a 45° jog and a ring node, laid on the seam where the surface changes.
   Net layout height is zero (negative margins). It draws left-to-right as it scrolls through. */
.template-index :is(#shopify-section-template--index__programs,#shopify-section-template--index__toy,#shopify-section-template--index__resources)::after{
  content:"";display:block;position:relative;z-index:2;pointer-events:none;
  width:min(calc(100% - 96px),var(--page-width,1440px));height:28px;margin:-20px auto -8px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='28' fill='none'%3E%3Cpath d='M0 20.5h44l12-12h60' stroke='%230A7CFF' stroke-opacity='.55'/%3E%3Ccircle cx='122' cy='8.5' r='5' fill='%230B0D11' stroke='%230A7CFF' stroke-width='1.5'/%3E%3C/svg%3E") right top/132px 28px no-repeat,
    linear-gradient(var(--v5-trace),var(--v5-trace)) left 20px/calc(100% - 131px) 1px no-repeat
}
@media(max-width:1150px){.template-index :is(#shopify-section-template--index__programs,#shopify-section-template--index__toy,#shopify-section-template--index__resources)::after{width:calc(100% - 64px)}}
@media(max-width:800px){.template-index :is(#shopify-section-template--index__programs,#shopify-section-template--index__toy,#shopify-section-template--index__resources)::after{width:calc(100% - 44px)}}
@media(max-width:600px){.template-index :is(#shopify-section-template--index__programs,#shopify-section-template--index__toy,#shopify-section-template--index__resources)::after{width:calc(100% - 36px)}}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    body:not(.is-motion-paused):not([data-experience=standard]):not([data-scroll=false]).template-index :is(#shopify-section-template--index__programs,#shopify-section-template--index__toy,#shopify-section-template--index__resources)::after{
      animation:v5-draw linear both;
      animation-timeline:view();
      animation-range:cover 4% cover 46%;
      animation-play-state:running!important
    }
  }
}
@keyframes v5-draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* ---------- 4. Engineering-paper detailing on media frames ----------
   Figure numbers come from CSS counters (section.figure); the caption text is the existing label.
   "+" registration marks sit inside the corner brackets, in the frame's accent colour. */
main{counter-reset:v5-sec}
main>.shopify-section{counter-increment:v5-sec;counter-reset:v5-fig}
.media-frame{counter-increment:v5-fig}
.media-frame:before{
  content:"";position:absolute;z-index:3;inset:24px;pointer-events:none;background:currentColor;opacity:.55;
  --v5-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cpath d='M5.5 0v11M0 5.5h11' stroke='%23000'/%3E%3C/svg%3E");
  -webkit-mask:var(--v5-plus) left top/11px 11px no-repeat,var(--v5-plus) right top/11px 11px no-repeat,var(--v5-plus) left bottom/11px 11px no-repeat,var(--v5-plus) right bottom/11px 11px no-repeat;
  mask:var(--v5-plus) left top/11px 11px no-repeat,var(--v5-plus) right top/11px 11px no-repeat,var(--v5-plus) left bottom/11px 11px no-repeat,var(--v5-plus) right bottom/11px 11px no-repeat
}
.media-frame--has-image:before{color:#fff}
.media-frame .media-placeholder__caption{left:46px;bottom:21px;z-index:2}
.media-frame .media-placeholder__caption>span:first-child:before{
  content:"FIG " counter(v5-sec) "." counter(v5-fig) "\00a0\2014\00a0";
  content:"FIG " counter(v5-sec) "." counter(v5-fig) "\00a0\2014\00a0" / "";
  font:500 max(9px,.7em)/1 var(--font-mono);letter-spacing:.08em;opacity:.8;vertical-align:.08em
}
@media(max-width:600px){.media-frame:before{inset:20px}.media-frame .media-placeholder__caption{left:40px;bottom:18px}}

/* ---------- 5. How booking works (sections/book-steps.liquid) ---------- */
.v5-steps{--v5-node:48px;--v5-gap:clamp(24px,3vw,48px)}
.v5-steps__head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 48px;margin-bottom:clamp(36px,5vw,64px)}
.v5-steps__head .cks-lead{margin:0}
.v5-steps__list{display:grid;grid-template-columns:repeat(var(--v5-steps,3),minmax(0,1fr));gap:var(--v5-gap);margin:0;padding:0;list-style:none}
.v5-steps__step{position:relative;display:grid;gap:22px;align-content:start}
/* the trace from this node to the next */
.v5-steps__step:not(:last-child):after{
  content:"";position:absolute;top:calc(var(--v5-node) / 2);left:calc(var(--v5-node) + 6px);
  width:calc(100% + var(--v5-gap) - var(--v5-node) - 12px);height:1px;background:var(--v5-trace);pointer-events:none
}
.v5-steps__node{
  position:relative;z-index:1;display:grid;place-items:center;width:var(--v5-node);height:var(--v5-node);border-radius:50%;
  border:1.5px solid var(--blue);background:var(--bg);color:var(--ink-2);
  font:500 .8rem/1 var(--font-mono);letter-spacing:.04em;
  transition:border-color .2s var(--v5-ease),color .2s var(--v5-ease),box-shadow .25s var(--v5-ease)
}
.v5-steps__step:is(:hover,:focus-within) .v5-steps__node{border-color:var(--orange);color:var(--orange);box-shadow:0 0 24px -6px #ff7a0099,inset 0 0 0 3px var(--bg),inset 0 0 0 4px #ff7a0066}
.v5-steps__name{margin:0;color:var(--ink);font-size:clamp(1.3rem,1.8vw,1.6rem);line-height:1.15;font-weight:720;font-variation-settings:"opsz" 48;letter-spacing:-.02em;text-wrap:balance}
.v5-steps__text{margin:12px 0 0;max-width:38ch;color:var(--ink-2);line-height:1.6}
.v5-steps__link{margin-top:10px}
@media(max-width:800px){
  .v5-steps{--v5-node:44px;--v5-gap:36px}
  .v5-steps__list{grid-template-columns:1fr}
  .v5-steps__step{grid-template-columns:var(--v5-node) minmax(0,1fr);gap:18px}
  .v5-steps__name{padding-top:9px}
  .v5-steps__step:not(:last-child):after{top:calc(var(--v5-node) + 6px);left:calc(var(--v5-node) / 2);width:1px;height:calc(100% + var(--v5-gap) - var(--v5-node) - 12px)}
}

/* ---------- 6. "Next workshop" bar (inserted by v5.js only when an upcoming event exists) ---------- */
.v5-next{background:var(--bg-sunk,#08090c);border-bottom:1px solid var(--line)}
.v5-next__link{display:flex;align-items:center;gap:10px;min-height:44px;padding-block:6px;color:var(--ink-2);font:500 .75rem/1.3 var(--font-mono);letter-spacing:.05em;text-decoration:none}
.v5-next__tag{display:inline-flex;align-items:center;gap:8px;color:var(--orange);text-transform:uppercase;letter-spacing:.1em}
.v5-next__tag:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);box-shadow:0 0 8px #ff7a00b3}
.v5-next__sep{color:var(--ink-3)}
.v5-next__date{color:var(--ink);white-space:nowrap}
.v5-next__title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-family:var(--font-body,inherit);font-size:.9rem;font-weight:650;letter-spacing:0}
.v5-next__where{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v5-next__arrow{margin-left:auto;color:var(--orange);transition:transform .2s var(--v5-ease)}
.v5-next__link:hover .v5-next__title{text-decoration:underline;text-underline-offset:3px}
.v5-next__link:hover .v5-next__arrow{transform:translateX(3px)}
.v5-next__link:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
@media(max-width:600px){.v5-next__where,.v5-next__sep--where{display:none}.v5-next__link{gap:8px;font-size:.75rem}.v5-next__title{font-size:.84rem}}

/* ---------- 7. Switch press feedback + LED on primary buttons ---------- */
.button--yellow{position:relative}
.button--yellow:after{
  content:"";position:absolute;top:6px;right:6px;width:5px;height:5px;border-radius:50%;pointer-events:none;
  background:#0b0d1140;box-shadow:inset 0 0 0 1px #0b0d1166;
  transition:background-color .18s var(--v5-ease),box-shadow .18s var(--v5-ease)
}
.button--yellow:is(:hover,:focus-visible):after{background:#fff3e2;box-shadow:0 0 0 1px #0b0d11b3,0 0 7px 2px #fff1dc}
@media (prefers-reduced-motion:no-preference){
  .button:active{transform:translate(var(--mx,0px),var(--my,0px)) scale(.97);box-shadow:none;transition-duration:.08s}
}

/* ---------- Paused / standard: everything static ---------- */
body.is-motion-paused .v5-next__arrow,body.is-motion-paused .v5-steps__node{transition:none}

/* ---------- Placeholder captions read as label plates, never over the line drawing (orchestrator fix) ---------- */
.media-placeholder__caption>span:first-child{background:var(--bg,#0B0D11);padding:6px 9px 7px;border:1px solid var(--line,#232A36);border-radius:4px;max-width:min(75%,30ch)}
@media(max-width:650px){
  .media-placeholder__caption,.media-frame--partner .media-placeholder__caption{font-size:13px}
}
.media-placeholder__caption>span:only-child{font-size:inherit;font-weight:600}

/* ---------- Review fixes (orchestrator) ---------- */
/* Pause motion: a real, findable control (was 10px footer text) */
.motion-toggle{font-size:12px;min-height:44px;padding-inline:4px;letter-spacing:.02em}
/* Minimum label size 11px for instrument labels that were 8–10px */
.lab-scope>div,.v2-patch-panel__label,.lab-readout{font-size:max(11px,.68rem)}
/* "More ways to connect": fit 3 or 4 actions on one row instead of orphaning the 4th */
@media(min-width:900px){.v2-patch-panel__links{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}