/* GWEN MOTION collection pages (/motion/<world>). Each page is the home page in "collection mode" (body.mc-mode): the
   store's own header, cart, product window, consent and checkout stay, every home section is hidden and the collection
   view (#motionCollection) shows instead. The world's colours come from gwen-motion-data.js as --a (thread), --b (second
   silk), --bg1/--bg2 (its night), set on <body>. Same language as the home arches: fine dashed stitching, an embroidered
   symbol sewn in a loop, Gwen's scissors. Motion stops for reduced motion (and for the site's "motion off" switch). */
body.mc-mode main>section:not(#motionCollection){display:none!important}
body.mc-mode{background:radial-gradient(120% 70% at 85% -10%,color-mix(in srgb,var(--bg1) 85%,transparent),transparent 60%),
 radial-gradient(90% 60% at -10% 110%,color-mix(in srgb,var(--a) 10%,transparent),transparent 65%),var(--void)}
.mc-view{position:relative;isolation:isolate;padding:118px 0 70px;min-height:100vh;overflow:hidden}

/* ---------- backdrop: glows, the world's thread with a running light, auroras, drifting relics, flying scissors ---------- */
.mc-backdrop{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.mc-backdrop>i{position:absolute;width:70%;height:60%;border-radius:50%;filter:blur(50px);background:radial-gradient(ellipse,color-mix(in srgb,var(--a) 16%,transparent),transparent 65%)}
.mc-backdrop>i:first-child{inset-inline-end:-25%;top:8%}
.mc-backdrop>i:nth-child(2){inset-inline-start:-30%;top:55%;background:radial-gradient(ellipse,color-mix(in srgb,var(--b) 12%,transparent),transparent 65%)}
.mc-backdrop>svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--a);stroke-width:1;stroke-dasharray:3 14;opacity:.22}
.mc-backdrop .mc-run{stroke:#fff;stroke-width:1.6;stroke-dasharray:70 930;stroke-dashoffset:1000;opacity:.9;filter:drop-shadow(0 0 6px var(--a));animation:mc-run 6.4s linear var(--d) infinite}
@keyframes mc-run{to{stroke-dashoffset:0}}
.mc-aurora{position:absolute;width:60vmax;height:60vmax;left:-15vmax;top:-20vmax;border-radius:50%;filter:blur(60px);opacity:.5;
 background:radial-gradient(circle,color-mix(in srgb,var(--a) 30%,transparent),transparent 62%);animation:mc-aurora 18s ease-in-out infinite alternate}
.mc-aurora.a2{left:auto;right:-20vmax;top:30%;background:radial-gradient(circle,color-mix(in srgb,var(--b) 24%,transparent),transparent 62%);animation-duration:23s;animation-direction:alternate-reverse}
@keyframes mc-aurora{from{transform:translate(0,0) scale(1)}to{transform:translate(12vmax,8vmax) scale(1.18)}}
.mc-relic{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);opacity:.42;animation:mc-drift var(--t) ease-in-out var(--d) infinite alternate}
.mc-relic svg{width:100%;height:100%;overflow:visible;fill:none;stroke:var(--a);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:4 3;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--a) 60%,transparent))}
.mc-relic.mc-star{opacity:.7}
.mc-relic.mc-star svg{fill:color-mix(in srgb,var(--b) 70%,#fff);stroke:none;animation:mc-twinkle calc(var(--t) / 3) ease-in-out var(--d) infinite alternate}
.mc-relic.mc-spool svg,.mc-relic.mc-button svg{stroke:var(--b);stroke-dasharray:none;stroke-width:1.6}
.mc-relic.mc-needle svg{stroke:#e9f3ff;stroke-dasharray:none;stroke-width:1.6}
.mc-relic.mc-needle svg .t{stroke:var(--a);stroke-dasharray:3 3}
@keyframes mc-drift{from{transform:translate(0,0) rotate(var(--r))}to{transform:translate(18px,-34px) rotate(calc(var(--r) * -1))}}
@keyframes mc-twinkle{from{transform:scale(.55);opacity:.35}to{transform:scale(1.1);opacity:1}}
.mc-flyer{position:absolute;top:18%;left:0;width:40px;height:56px;opacity:0;animation:mc-fly 16s linear 2s infinite}
.mc-bob{display:block;width:100%;height:100%;animation:mc-bob 2.2s ease-in-out infinite alternate}
.mc-bob svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--a) 75%,transparent))}
.mc-bob .blade{transform-box:view-box;transform-origin:50% 50%}
.mc-bob .blade-a{animation:mc-snip-a .42s ease-in-out infinite alternate}
.mc-bob .blade-b{animation:mc-snip-b .42s ease-in-out infinite alternate}
@keyframes mc-snip-a{from{transform:rotate(-14deg)}to{transform:rotate(2deg)}}
@keyframes mc-snip-b{from{transform:rotate(14deg)}to{transform:rotate(-2deg)}}
@keyframes mc-fly{0%{transform:translate(-8vw,0);opacity:0}4%{opacity:.9}46%{transform:translate(108vw,46vh);opacity:.9}50%,100%{transform:translate(108vw,46vh);opacity:0}}
@keyframes mc-bob{from{transform:rotate(80deg) translateY(-8px)}to{transform:rotate(100deg) translateY(8px)}}
:root[dir=rtl] .mc-flyer{animation-name:mc-fly-rtl}
@keyframes mc-fly-rtl{0%{transform:translate(100vw,0);opacity:0}4%{opacity:.9}46%{transform:translate(-12vw,46vh);opacity:.9}50%,100%{transform:translate(-12vw,46vh);opacity:0}}

/* ---------- hero: the world's name beside its arch ---------- */
.mc-back{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:1px dashed color-mix(in srgb,var(--a) 45%,transparent);border-radius:999px;
 color:var(--b);text-decoration:none;font:600 12px/1 var(--sans);letter-spacing:.08em;background:color-mix(in srgb,var(--bg2) 70%,transparent)}
.mc-back:hover,.mc-back:focus-visible{color:#fff;border-style:solid;border-color:var(--a);background:color-mix(in srgb,var(--a) 14%,var(--bg2))}
.mc-back b{font-weight:400;font-size:15px}
:root[dir=rtl] .mc-back b{transform:scaleX(-1)}
.mc-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(220px,.75fr);gap:48px;align-items:center;margin-block:34px 56px}
.mc-eyebrow{display:block;font:700 10px/1.6 var(--sans);letter-spacing:.26em;color:var(--a)}
.mc-hero h1{font-size:clamp(52px,8vw,112px);line-height:1.04;margin-top:14px;letter-spacing:.06em;color:#f1f5ff;
 background:linear-gradient(110deg,#f3f6ff 0 16%,var(--a) 34%,#fff 48%,var(--b) 62%,#f3f6ff 80% 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
 filter:drop-shadow(0 0 22px color-mix(in srgb,var(--a) 40%,transparent));animation:mc-title-sheen 2.4s ease-in-out infinite alternate}
@keyframes mc-title-sheen{from{background-position:100% 0}to{background-position:0 0}}
.mc-cut{position:relative;display:block;height:44px;margin-top:10px;max-width:420px}
.mc-cut::before{content:"";position:absolute;inset-inline:0;top:50%;border-top:2px dashed color-mix(in srgb,var(--a) 70%,transparent)}
.mc-cut .mc-shear{position:absolute;top:50%;inset-inline-start:0;width:30px;height:42px;margin-top:-21px;transform:rotate(90deg);
 filter:drop-shadow(0 0 6px color-mix(in srgb,var(--a) 70%,transparent));animation:mc-cut 7s ease-in-out infinite}
:root[dir=rtl] .mc-cut .mc-shear{transform:rotate(-90deg)}
.mc-cut .mc-shear svg,.mc-arch .mc-arch-shear svg{width:100%;height:100%}
@keyframes mc-cut{0%,8%{inset-inline-start:0;opacity:1}55%{inset-inline-start:calc(100% - 30px);opacity:1}62%,100%{inset-inline-start:calc(100% - 30px);opacity:0}}
.mc-tag{margin-top:22px;font-size:clamp(17px,2vw,21px);color:color-mix(in srgb,var(--b) 75%,#dfe6ff)}
.mc-count{display:inline-flex;margin-top:16px;padding:6px 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--a) 45%,transparent);
 font:700 11px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--a)}

.mc-arch{position:relative;justify-self:center;width:min(100%,280px);aspect-ratio:240/360;border-radius:140px 140px 22px 22px;isolation:isolate;
 background:radial-gradient(85% 60% at 50% 30%,color-mix(in srgb,var(--bg1) 95%,#fff 4%),var(--bg2));
 box-shadow:0 0 0 1px color-mix(in srgb,var(--a) 30%,transparent),0 30px 80px -30px color-mix(in srgb,var(--a) 55%,transparent)}
.mc-arch>svg{position:absolute;inset:0;width:100%;height:100%;fill:none;pointer-events:none}
.mc-arch .mc-stitches path{stroke:color-mix(in srgb,var(--a) 70%,transparent);stroke-width:1.3;stroke-dasharray:5 6}
.mc-arch .mc-threadwork path{stroke:var(--b);stroke-width:1.2;stroke-dasharray:2 5;opacity:.5}
.mc-arch .mc-kicker{position:absolute;inset-inline:0;top:13%;text-align:center;font:700 9px/1 var(--sans);letter-spacing:.3em;color:color-mix(in srgb,var(--a) 85%,#fff)}
.mc-arch .mc-arch-shear{position:absolute;left:50%;bottom:13%;width:38px;height:52px;margin-left:-19px;opacity:.85;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--a) 60%,transparent));animation:mc-snip 3.2s ease-in-out infinite}
.mc-arch .mc-arch-line{position:absolute;left:14%;right:14%;bottom:calc(13% + 26px);border-top:1px dashed color-mix(in srgb,var(--b) 55%,transparent)}
@keyframes mc-snip{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-6px) rotate(8deg)}}
.mc-arch .mc-symbol{position:absolute;left:18%;right:18%;top:24%;width:64%;height:auto;aspect-ratio:1;overflow:visible;animation:mc-glow 7s ease-in-out .3s infinite}
.mc-symbol .mc-stitch{fill:none;stroke:var(--a);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:4 3;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--a) 70%,transparent))}
/* The symbol stitches itself in a calm loop: sew in, hold, unpick forward, again (all parts share one period). */
.mc-symbol .mc-draw{fill:none;stroke:#fff;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100;animation:mc-sew-loop 7s cubic-bezier(.45,.1,.3,1) infinite backwards;animation-delay:calc(.3s + var(--o)*.32s)}
.mc-symbol .mc-needle{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:6 94;stroke-dashoffset:100;opacity:0;animation:mc-needle-loop 7s ease-in-out .2s infinite}
@keyframes mc-sew-loop{0%{stroke-dashoffset:100}26%{stroke-dashoffset:0}78%{stroke-dashoffset:0}94%,100%{stroke-dashoffset:-100}}
@keyframes mc-needle-loop{0%{opacity:0;stroke-dashoffset:100}3%{opacity:1}24%{opacity:1;stroke-dashoffset:0}28%,100%{opacity:0;stroke-dashoffset:0}}
@keyframes mc-glow{0%,20%{filter:none}40%{filter:drop-shadow(0 0 14px color-mix(in srgb,var(--a) 75%,transparent)) brightness(1.25)}62%,100%{filter:none}}

/* ---------- the grid: the store's own cards (.grid / .card styles) ---------- */
.mc-view .mc-grid{margin-top:8px}
.mc-view .mc-grid .card{animation:mc-rise .7s cubic-bezier(.2,.7,.2,1) backwards}
.mc-view .mc-grid .card:nth-child(2){animation-delay:.08s}.mc-view .mc-grid .card:nth-child(3){animation-delay:.16s}
@keyframes mc-rise{from{opacity:0;transform:translateY(26px)}}
.mc-empty{padding:40px;border-radius:24px;border:1px dashed color-mix(in srgb,var(--a) 40%,transparent);text-align:center;color:var(--muted)}
.mc-note{margin-top:30px;font-size:13px;color:var(--muted)}

/* ---------- tablet and phone ---------- */
@media (max-width:860px){
 .mc-view{padding-top:96px}
 .mc-hero{grid-template-columns:1fr;gap:30px;margin-block:28px 40px}
 .mc-arch{order:-1;width:min(62vw,220px)}
 .mc-hero .mc-copy{text-align:center}
 .mc-cut,.mc-count{margin-inline:auto}
 .mc-cut{max-width:300px}
}

/* ---------- reduced motion (system setting or the site's motion switch) ---------- */
@media (prefers-reduced-motion:reduce){
 .mc-cut .mc-shear{animation:none;inset-inline-start:calc(100% - 30px)}
 .mc-symbol .mc-draw{animation:none;stroke-dashoffset:0}
 .mc-symbol .mc-needle{animation:none;opacity:0}
 .mc-hero h1,.mc-arch .mc-symbol,.mc-arch .mc-arch-shear,.mc-relic,.mc-relic svg,.mc-aurora,.mc-view .mc-grid .card{animation:none!important}
 .mc-flyer,.mc-backdrop .mc-run{display:none}
}