/* Motion options (bespoke-ui-evolved mockup, 2 Nov 2026). Each option is gated by a class on <html>
   (m1 to m6) so Jacob and Emily can switch them on and off. Reduced motion stops all of it. */

/* motion panel (prototype control, not part of the design) */
.switch .mbtn{border-left:1px solid #555;margin-left:4px;padding-left:14px}
.mpanel{position:fixed;z-index:61;left:50%;bottom:64px;transform:translateX(-50%);background:#222;color:#fff;border-radius:18px;padding:14px 16px;font:600 14px/1.3 system-ui;box-shadow:0 10px 30px rgba(0,0,0,.3);width:min(420px,100% - 24px);display:none}
.mpanel.open{display:block}
.mpanel label{display:flex;gap:10px;align-items:flex-start;padding:7px 0;cursor:pointer}
.mpanel input{width:18px;height:18px;margin-top:1px;accent-color:#6EBE96}
.mpanel small{display:block;opacity:.7;font-weight:500}
.mpanel .row{display:flex;gap:8px;margin-top:8px}
.mpanel .row button{all:unset;cursor:pointer;background:#fff;color:#222;border-radius:999px;padding:6px 12px;font-size:13px}
.clean .mpanel{display:none}

/* M1 · moving waves: wave edges roll slowly; faint wave lines drift behind the hero */
.band>.wave{-webkit-mask-size:1440px 100%;mask-size:1440px 100%;-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 36' preserveAspectRatio='none'%3E%3Cpath d='M0 18Q360 0 720 18T1440 18V36H0Z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 36' preserveAspectRatio='none'%3E%3Cpath d='M0 18Q360 0 720 18T1440 18V36H0Z'/%3E%3C/svg%3E")}
html.m1 .band>.wave{animation:waveRoll 22s linear infinite}
@keyframes waveRoll{to{-webkit-mask-position:-1440px 0;mask-position:-1440px 0}}
.lines{position:absolute;inset:auto 0 0 0;height:60%;pointer-events:none;display:none;overflow:hidden}
html.m1 .lines{display:block}
.lines svg{position:absolute;left:0;width:200%;height:100%}
.lines path{fill:none;stroke:var(--teal);stroke-width:2;opacity:.14;vector-effect:non-scaling-stroke}
html[data-v="colour"] .lines path{stroke:var(--white);opacity:.2}
html.m1 .lines svg{animation:linesDrift 40s linear infinite}
html.m1 .lines svg:nth-child(2){animation-duration:58s;animation-direction:reverse}
@keyframes linesDrift{to{transform:translateX(-50%)}}

/* M3 · the food row moves by itself, stops on hover or focus; cards tip in */
html.m3 .rail.auto{overflow:hidden;scroll-snap-type:none;padding-inline:0}
html.m3 .rail.auto .track{display:flex;gap:20px;width:max-content;animation:railRun 55s linear infinite}
html.m3 .rail.auto:hover .track,html.m3 .rail.auto:focus-within .track{animation-play-state:paused}
@keyframes railRun{to{transform:translateX(-50%)}}
html.m3 .rail .tile{animation:tipIn .6s cubic-bezier(.34,1.56,.64,1) both}
html.m3 .rail .tile:nth-child(3n+2){animation-delay:.08s} html.m3 .rail .tile:nth-child(3n){animation-delay:.16s}
@keyframes tipIn{from{opacity:0;transform:rotate(-4deg) translateY(24px)}}

/* M4 · proof strip counts up when it comes into view */
.proof b{font-variant-numeric:tabular-nums}

/* M5 · search: a route draws from you to the nearest Tuckshop; results slide in */
.route-draw{display:none;margin:8px 4px 2px;height:46px}
html.m5 .route-draw{display:block}
.route-draw svg{width:100%;height:100%;overflow:visible}
.route-draw path{fill:none;stroke:var(--purple);stroke-width:3;stroke-linecap:round;stroke-dasharray:6 8}
.route-draw .you{fill:var(--orange)} .route-draw .tuck{fill:var(--teal)}
.route-draw text{font:700 13px var(--body);fill:var(--ink)}
html.m5 .route-draw.go path{animation:routeIn 1.1s ease-out both}
@keyframes routeIn{from{stroke-dashoffset:300;opacity:0}to{stroke-dashoffset:0;opacity:1}}
html.m5 .results.go li{animation:slideIn .45s ease both}
html.m5 .results.go li:nth-child(2){animation-delay:.05s} html.m5 .results.go li:nth-child(3){animation-delay:.12s}
html.m5 .results.go li:nth-child(4){animation-delay:.19s} html.m5 .results.go li:nth-child(5){animation-delay:.26s} html.m5 .results.go li:nth-child(6){animation-delay:.33s}
@keyframes slideIn{from{opacity:0;transform:translateX(-16px)}}

/* M6 · ticker strip under the header, the always-true facts */
.ticker{display:none;overflow:hidden;background:var(--orange);color:var(--ink);font-size:16px;white-space:nowrap}
html.m6 .ticker{display:block}
html[data-v="colour"] .ticker{background:var(--pink)}
.ticker .run{display:inline-flex;gap:28px;padding:7px 0;animation:tick 30s linear infinite}
.ticker .run span::after{content:"\2022";margin-left:28px;opacity:.6}
@keyframes tick{to{transform:translateX(-50%)}}
.ticker:hover .run{animation-play-state:paused}

/* M2 · about-us journey: the story plays out as you scroll */
.journey-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
.journey-story .steps2{display:grid;gap:22vh;padding:12vh 0 22vh}
.journey-story .step{opacity:.35;transition:opacity .4s ease}
.journey-story .step.on{opacity:1}
.journey-story .step b{font:400 30px/1 var(--brush);color:var(--orange-ink);display:block;margin-bottom:6px}
.journey-story .step h3{font-size:40px;margin-bottom:8px}
.journey-story .stage2{position:sticky;top:16vh;aspect-ratio:1/1;border-radius:var(--r-lg);background:var(--tint-teal);overflow:hidden}
html[data-v="colour"] .journey-story .stage2{background:var(--teal) url(/assets/textures/teal.jpg) center/600px}
html[data-v="notes"] .journey-story .stage2{background:var(--white);border:2px solid var(--card-line)}
.stage2 .pic{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:scale(.9) rotate(-3deg);transition:opacity .5s ease,transform .6s cubic-bezier(.34,1.56,.64,1)}
.stage2 .pic.on{opacity:1;transform:none}
.stage2 .pic img{max-width:78%;max-height:78%;object-fit:contain;filter:drop-shadow(0 20px 18px rgba(51,51,51,.25))}
.stage2 .pic img.photo{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:cover;filter:none}
.stage2 .pic svg{width:46%;height:auto}
html:not(.m2) .journey-story{grid-template-columns:1fr}
html:not(.m2) .journey-story .stage2{display:none}
html:not(.m2) .journey-story .steps2{gap:24px;padding:0}
html:not(.m2) .journey-story .step{opacity:1}

@media (max-width:860px){
  .journey-story{grid-template-columns:1fr}
  .journey-story .stage2{top:84px;max-width:420px;width:100%;justify-self:center;z-index:2}
  .journey-story .steps2{gap:46vh;padding:4vh 0 30vh}
}
@media (prefers-reduced-motion:reduce){
  html .band>.wave,html .lines svg,html .rail.auto .track,html .ticker .run,html .rail .tile,html .route-draw path,html .results li{animation:none!important}
  html .rail.auto{overflow-x:auto}
  .journey-story{grid-template-columns:1fr!important}.journey-story .stage2{display:none}.journey-story .steps2{gap:24px;padding:0}.journey-story .step{opacity:1}
}

html[data-v="colour"] .pbody .locate{border-color:var(--purple)}
html[data-v="colour"] .stage2 .pic svg{stroke:var(--white)}