/* Weave intro for /stores (markup at the top of index.html, behaviour in intro.js). The same film as the WeaveMS
   admin intro, without a store name. Shown only while <html> has .wi-on, which the head script sets once per visit
   and never with reduced motion. Timeline (s): threads 0–0.9 · shop 0.5–1.6 · OPEN tag 1.25 · sparkle 1.6 ·
   fold 1.85 · mark 1.98 · hexagon + shockwave 2.0–2.5 · WEAVE 2.5–3.1 · thread underline 3.0 · out 3.55. */
.wi { display: none; }
html.wi-on .wi { display: grid; }
html.wi-on body { overflow: hidden; }
/* the page's own entrance waits behind the intro and starts as it leaves */
html.wi-on main *, html.wi-on main *::before, html.wi-on main *::after { animation-play-state: paused !important; }
.wi {
  --wi-ink: #f6f1ff; --wi-orange: #F05023; --wi-violet: #1C0051; --wi-mark: clamp(104px, 13vw, 156px);
  position: fixed; inset: 0; z-index: 2147483000; place-items: center; overflow: hidden; cursor: pointer;
  background: radial-gradient(120% 90% at 50% 42%, #2b0a73 0%, var(--wi-violet) 42%, #0b0221 100%);
  color: var(--wi-ink); font-family: var(--sans, 'Instrument Sans', system-ui, sans-serif);
}
.wi--out { animation: wi-out .45s cubic-bezier(.4,0,.2,1) forwards; pointer-events: none; }
.wi--out .wi-stage { transition: transform .45s cubic-bezier(.4,0,.2,1); transform: scale(1.05); }
/* a faint woven texture, drifting */
.wi-weft { position: absolute; inset: -60px; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(45deg, rgb(255 255 255 / .035) 0 1px, transparent 1px 16px), repeating-linear-gradient(-45deg, rgb(255 255 255 / .035) 0 1px, transparent 1px 16px);
  animation: wi-drift 4s linear forwards; }
.wi::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(40% 40% at 50% 46%, rgb(240 80 35 / .32), transparent 70%); animation: wi-glow 1.1s ease-out 2.05s forwards; }
.wi-stage { position: relative; display: grid; justify-items: center; gap: clamp(12px, 2vh, 20px); }
.wi-row { display: flex; align-items: center; column-gap: calc(var(--wi-mark) * .18); }
.wi-mark { inline-size: calc(var(--wi-mark) * 1.3); block-size: auto; overflow: visible; margin: calc(var(--wi-mark) * -.12);
  transform: translateX(calc(var(--wi-mark) * .9935)); /* half of WEAVE + gap, so the mark starts centred */ animation: wi-home .7s cubic-bezier(.65,0,.25,1) 2.45s forwards; }

/* Act 1 · threads pulled in: a short dash runs along each path and disappears into its end */
.wi-thread { fill: none; stroke: var(--wi-ink); stroke-width: 4; stroke-linecap: round; opacity: .9;
  stroke-dasharray: .32 2; stroke-dashoffset: .32; animation: wi-pull .85s cubic-bezier(.55,.05,.35,1) forwards; }
.wi-thread--orange { stroke: var(--wi-orange); stroke-width: 5; }
/* Act 2 · the shop is stitched */
.wi-line { fill: none; stroke: var(--wi-ink); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: wi-draw .5s cubic-bezier(.4,0,.2,1) forwards; }
.wi-line.wi-door { stroke: var(--wi-orange); }
.wi-awning-fill { fill: url(#wi-stripes); color: var(--wi-orange); opacity: 0; animation: wi-fade .45s ease-out 1.05s forwards; }
#wi-stripes rect { fill: var(--wi-orange); }
.wi-tag { opacity: 0; transform-box: view-box; transform-origin: 200px 250px; animation: wi-swing 1s cubic-bezier(.3,0,.3,1) 1.25s forwards; }
.wi-tag path { fill: none; stroke: var(--wi-ink); stroke-width: 2.4; stroke-linejoin: round; }
.wi-tag rect { fill: var(--wi-ink); }
.wi-tag text { fill: var(--wi-violet); font: 700 10.5px/1 var(--sans, 'Instrument Sans', system-ui, sans-serif); letter-spacing: .08em; text-anchor: middle; }
.wi-spark { fill: #fff; opacity: 0; transform-box: fill-box; transform-origin: center; animation: wi-spark .55s ease-out 1.55s forwards; }
.wi-spark--2 { animation-delay: 1.7s; }
/* Act 3 · the shop twists into the mark; the door becomes the hexagon */
.wi-store { transform-box: view-box; transform-origin: 200px 307px; animation: wi-fold .55s cubic-bezier(.6,0,.8,.2) 1.85s forwards; }
.wi-arc { fill: var(--wi-ink); opacity: 0; transform-box: view-box; transform-origin: 200px 203.7px; animation: wi-arc .8s cubic-bezier(.2,.85,.25,1.12) forwards; }
.wi-hex { fill: var(--wi-orange); opacity: 0; transform-box: view-box; transform-origin: 200px 203.7px; animation: wi-hex .75s cubic-bezier(.2,.9,.25,1.25) 2.02s forwards; }
.wi-ring { fill: none; stroke: var(--wi-orange); stroke-width: 5; opacity: 0; transform-box: view-box; transform-origin: 200px 203.7px; animation: wi-ring .8s cubic-bezier(.1,.6,.3,1) 2.3s forwards; }
.wi-ring--2 { stroke: var(--wi-ink); stroke-width: 2.5; animation-delay: 2.42s; }
/* Act 4 · WEAVE rises, letter by letter, over the store's name */
.wi-letters { block-size: calc(var(--wi-mark) * .38); inline-size: auto; overflow: hidden; display: block; }
.wi-letters path { fill: var(--wi-ink); opacity: 0; transform: translateY(150px); animation: wi-rise-letter .6s cubic-bezier(.2,.85,.25,1.05) forwards; }
.wi-underline { display: block; inline-size: calc(var(--wi-mark) * 2.75); block-size: 2px; margin-block-start: calc(var(--wi-mark) * .1); border-radius: 2px;
  background: var(--wi-orange); transform: scaleX(0); animation: wi-underline .55s cubic-bezier(.65,0,.25,1) 3s forwards; }
.wi-skip { position: absolute; inset-block-end: clamp(18px, 4vh, 36px); inset-inline: 0; margin: 0; text-align: center; font-size: 12px; letter-spacing: .08em; color: rgb(246 241 255 / .5);
  opacity: 0; animation: wi-fade .5s ease-out .8s forwards; }

@keyframes wi-out { to { opacity: 0; } }
@keyframes wi-drift { to { transform: translate(32px, 0); } }
@keyframes wi-glow { 30% { opacity: 1; } 100% { opacity: 0; } }
@keyframes wi-home { to { transform: translateX(0); } }
@keyframes wi-pull { to { stroke-dashoffset: -1; } }
@keyframes wi-draw { to { stroke-dashoffset: 0; } }
@keyframes wi-fade { to { opacity: 1; } }
@keyframes wi-swing { 0% { opacity: 0; transform: rotate(28deg); } 12% { opacity: 1; } 35% { transform: rotate(-16deg); } 58% { transform: rotate(9deg); } 78% { transform: rotate(-4deg); } 100% { opacity: 1; transform: none; } }
@keyframes wi-spark { 0% { opacity: 0; transform: scale(0) rotate(0deg); } 45% { opacity: 1; transform: scale(1.2) rotate(45deg); } 100% { opacity: 0; transform: scale(0) rotate(90deg); } }
@keyframes wi-fold { 0% { transform: none; opacity: 1; } 28% { transform: scale(1.06) rotate(-3deg); opacity: 1; } 100% { transform: scale(.32) rotate(40deg); opacity: 0; } }
@keyframes wi-arc { from { opacity: 0; transform: rotate(-150deg) scale(.25); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes wi-hex { from { opacity: 0; transform: translateY(103px) scale(.4) rotate(-90deg); } 30% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes wi-ring { 0% { opacity: .95; transform: scale(.35); } 100% { opacity: 0; transform: scale(1.75); } }
@keyframes wi-rise-letter { 60% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes wi-underline { to { transform: scaleX(1); } }

/* Reduced motion: the intro is not shown at all (the head script never sets .wi-on). */