/* GWEN MOTION — "Gwen weaves the motion" (prototype). Built on the Five worlds arches (.arch rules in style.css):
   same fine stitching, embroidered symbols and shared thread weave, with five 2D-alert worlds of their own.
   Each world has its own night (::before), thread pattern and a calm signature move on hover; every symbol is
   stitched in by a travelling needle. Motion runs only while the section is on screen and stops for reduced motion. */

/* The old gallery's decorations step back: Gwen's doll stays, faint, in the corner. */
#showcase .gallery-toybox,#showcase .gallery-pattern-play,#showcase .gallery-header-hoop{display:none!important}
#showcase .gallery-doll-art{top:30px!important;left:-80px!important;width:230px!important;height:360px!important;opacity:.12!important}
#showcase.sec{isolation:isolate}
#showcase .motion-weave{z-index:0}
#showcase .motion-weave .relic-2{top:80%}
#showcase .motion-shear{left:auto;right:9%;top:6%;width:70px;opacity:.18;transition:opacity .3s,filter .3s}
#showcase[data-awake]:not([data-awake=""]) .motion-shear{opacity:.85;filter:brightness(1.8) drop-shadow(0 0 10px #8fdcff)}

/* Heading, in the Five worlds voice. */
#showcase .reveal-h{display:block!important;margin-bottom:0}
#showcase .reveal-h>div:first-child{max-width:680px}
#showcase .motion-title{white-space:nowrap;font-family:var(--serif);font-size:clamp(40px,5.6vw,76px);line-height:1.02;letter-spacing:.04em;color:#fff;text-shadow:0 0 30px rgba(93,220,255,.18)}
#showcase .motion-title em{font-style:normal;color:#8fe6ff}
#showcase .motion-sub{margin-top:16px;font-size:clamp(16px,1.5vw,19px);color:#c7cbef;max-width:52ch}

.motion-arches{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;align-items:end;margin-top:56px}

/* ---------- One world (extends .arch) ---------- */
.motion-arch{overflow:hidden}
.motion-arch::before{content:"";position:absolute;inset:0;z-index:-2;opacity:.95;pointer-events:none;transition:transform 1.2s}
.motion-arch[data-world=rhythm]::before{background:repeating-radial-gradient(circle at 50% 30%,rgba(93,220,255,.09) 0 1px,transparent 1.5px 15px),radial-gradient(55% 32% at 50% 30%,rgba(93,220,255,.26),transparent 72%),radial-gradient(40% 30% at 70% 52%,rgba(195,184,255,.16),transparent)}
.motion-arch[data-world=impact]::before{background:repeating-conic-gradient(from 8deg at 50% 32%,rgba(169,139,255,.14) 0 4deg,transparent 4deg 17deg),radial-gradient(22% 16% at 50% 32%,rgba(255,231,180,.38),transparent 70%),radial-gradient(60% 40% at 50% 34%,rgba(169,139,255,.24),transparent)}
.motion-arch[data-world=story]::before{background:radial-gradient(55% 34% at 30% 34%,rgba(216,180,255,.24),transparent),radial-gradient(50% 30% at 74% 48%,rgba(255,196,222,.16),transparent),radial-gradient(70% 26% at 50% 88%,rgba(216,180,255,.18),transparent);filter:blur(4px)}
.motion-arch[data-world=pride]::before{background:linear-gradient(158deg,transparent 34%,rgba(79,224,166,.2) 40%,transparent 50%,rgba(232,199,127,.14) 56%,transparent 63%),radial-gradient(55% 34% at 50% 30%,rgba(79,224,166,.22),transparent 72%),radial-gradient(1.6px 1.6px at 30% 22%,#fff,transparent),radial-gradient(1.4px 1.4px at 72% 16%,#fff,transparent)}
.motion-arch[data-world=matchday]::before{background:radial-gradient(48% 40% at 14% 0,rgba(233,246,255,.22),transparent 72%),radial-gradient(48% 40% at 86% 0,rgba(233,246,255,.18),transparent 72%),radial-gradient(60% 30% at 50% 36%,rgba(118,170,255,.22),transparent),radial-gradient(70% 18% at 50% 100%,rgba(79,224,166,.14),transparent)}
@media(hover:hover){.motion-arch:hover::before{transform:scale(1.06)}}

/* RHYTHM's own sky: faint equaliser bars that breathe with the beat. */
.mw-sky{position:absolute;left:12%;right:12%;top:24%;height:26%;z-index:-1;pointer-events:none;opacity:0}
.motion-arch[data-world=rhythm] .mw-sky{opacity:.55;background:repeating-linear-gradient(90deg,rgba(93,220,255,.5) 0 2px,transparent 2px 9px);
 -webkit-mask:radial-gradient(50% 50% at 50% 50%,#000,transparent 75%),linear-gradient(#000,#000);-webkit-mask-composite:source-in;mask:radial-gradient(50% 50% at 50% 50%,#000,transparent 75%);transform-origin:50% 60%}

/* Top half: kicker, embroidered symbol, preview screen, play. Same geometry as the Five worlds trigger. */
.mw-top{position:absolute;inset:0 0 auto;height:50%}
.motion-arch svg.ae{top:58%;width:40%;overflow:visible}
/* Selectors carry .motion-arch svg.ae so they win over the shared `.arch svg.ae *` stitch rule. */
.motion-arch svg.ae .mw-stitch{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:5 3.6}
.motion-arch svg.ae .mw-draw{fill:none;stroke:#fff;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:0}
.motion-arch svg.ae .mw-needle{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-dasharray:2.5 97.5;opacity:0;filter:drop-shadow(0 0 4px var(--b))}
.motion-live .is-stitching .mw-draw{animation:mw-sew 1.5s cubic-bezier(.45,.1,.3,1) both;animation-delay:calc(var(--o) * .42s)}
.motion-live .is-stitching .mw-needle{animation:mw-needle 1.5s cubic-bezier(.45,.1,.3,1) both}
@keyframes mw-sew{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes mw-needle{0%{opacity:1;stroke-dasharray:2.5 97.5;stroke-dashoffset:0}92%{opacity:1}100%{opacity:0;stroke-dasharray:2.5 97.5;stroke-dashoffset:-97.5}}
.motion-arch .arch-kicker{top:17%;letter-spacing:.24em}
.motion-arch.is-empty svg.ae{opacity:.7}

.mw-screen{position:absolute;top:24%;left:9%;right:9%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;opacity:0;transform:translateY(6px) scale(.98);
 transition:opacity .35s,transform .35s;border:1px solid color-mix(in srgb,var(--a) 42%,transparent);box-shadow:0 10px 30px rgba(0,0,0,.45);background:#05061a;pointer-events:none}
.mw-screen video{width:100%;height:100%;object-fit:cover;display:block}
.is-playing .mw-screen{opacity:1;transform:none;pointer-events:auto}
.is-playing svg.ae,.is-playing .arch-scissors{opacity:0}
.is-playing .arch-threadwork{opacity:.16}
.mw-sound{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;padding:0;cursor:pointer;color:#fff;
 background:rgba(5,6,26,.72);border:1px solid color-mix(in srgb,var(--a) 50%,transparent)}
.mw-sound svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mw-sound svg path:first-child{fill:currentColor;stroke:none}
.mw-sound .w{display:none}.mw-sound[aria-pressed="true"] .w{display:block}.mw-sound[aria-pressed="true"] .x{display:none}
.mw-sound[aria-pressed="true"]{border-color:var(--a);box-shadow:0 0 10px -2px var(--a)}
[dir="rtl"] .mw-sound{right:auto;left:6px}
.mw-play{border:0;background:none;padding:6px 0;width:100%;cursor:pointer;color:#e3e8ff}
.mw-play:hover span,.mw-play:focus-visible span{color:#fff;text-shadow:0 0 10px var(--a)}
.mw-play:focus-visible{outline:2px solid var(--b);outline-offset:-2px;border-radius:999px}
.is-playing .arch-play-icon{display:none}.is-playing .arch-pause-icon{display:block}
.mw-soon span{padding:3px 10px;border:1px dashed color-mix(in srgb,var(--a) 55%,transparent);border-radius:999px;letter-spacing:.14em;text-transform:uppercase;font-size:10px;color:#e3e8ff}
.motion-arch.is-empty .ct{border-style:dashed;letter-spacing:.06em}
.motion-arch .arch-open .mw-open-label{font-size:inherit;color:inherit}
.motion-arch .arch-open:disabled{cursor:not-allowed;opacity:.5;border-style:dashed}
.motion-arch .arch-open:disabled:hover{background:color-mix(in srgb,var(--a) 9%,#090818);border-color:color-mix(in srgb,var(--a) 35%,transparent)}
.motion-arch .arch-threadwork path{stroke-dasharray:4 5}

/* ---------- Signature moves, calm, on hover or focus ---------- */
.motion-live .motion-arch:is(:hover,:focus-within) .arch-threadwork{opacity:.7}
.motion-live .motion-arch:is(:hover,:focus-within) .arch-threadwork path{animation:mw-flow 4s linear infinite}
@keyframes mw-flow{to{stroke-dashoffset:-90}}
/* RHYTHM: the wave keeps time, the notes lift off it, the bars breathe. */
.motion-live .motion-arch[data-world=rhythm]:is(:hover,:focus-within,.is-playing) .mw-sky{animation:mw-breathe .9s ease-in-out infinite alternate}
@keyframes mw-breathe{from{transform:scaleY(.72);opacity:.4}to{transform:scaleY(1.08);opacity:.65}}
.motion-live .motion-arch[data-world=rhythm]:is(:hover,:focus-within) .mw-stitch:nth-of-type(n+2){animation:mw-note 2.6s ease-in-out infinite;animation-delay:calc(var(--o) * -.5s)}
@keyframes mw-note{50%{transform:translateY(-3.5px)}}
.motion-live .motion-arch[data-world=rhythm]:is(:hover,:focus-within) .mw-stitch:first-of-type{animation:mw-run 1.6s linear infinite}
@keyframes mw-run{to{stroke-dashoffset:-17.2}}
.motion-live .motion-arch[data-world=rhythm]:is(:hover,:focus-within) .arch-threadwork path{animation-duration:2.2s}
/* IMPACT: the stitch blooms into the spark, once, then holds. */
.motion-live .motion-arch[data-world=impact]:is(:hover,:focus-within) svg.ae{animation:mw-bloom .9s cubic-bezier(.2,1.4,.4,1)}
@keyframes mw-bloom{0%{transform:translate(-50%,-50%) scale(.82) rotate(-8deg)}100%{transform:translate(-50%,-50%) scale(1) rotate(0)}}
/* STORY: the bubble breathes like a pause before a line. */
.motion-live .motion-arch[data-world=story]:is(:hover,:focus-within) .mw-stitch:nth-of-type(3){animation:mw-type 1.4s steps(3,end) infinite}
@keyframes mw-type{0%{opacity:.2}100%{opacity:1}}
.motion-live .motion-arch[data-world=story]:is(:hover,:focus-within) svg.ae{animation:mw-float 3.8s ease-in-out infinite}
@keyframes mw-float{50%{transform:translate(-50%,calc(-50% - 4px))}}
/* PRIDE: the banner ripples on its pole. */
.mw-stitch{transform-box:view-box;transform-origin:22px 30px}
.motion-live .motion-arch[data-world=pride]:is(:hover,:focus-within) .mw-stitch:nth-of-type(2),.motion-live .motion-arch[data-world=pride]:is(:hover,:focus-within) .mw-stitch:nth-of-type(3){animation:mw-ripple 2.4s ease-in-out infinite}
@keyframes mw-ripple{50%{transform:skewY(-3deg) scaleX(.97)}}
/* MATCHDAY: the ball turns along its path. */
.motion-arch[data-world=matchday] .mw-stitch:nth-of-type(-n+3){transform-origin:60px 60px}
.motion-live .motion-arch[data-world=matchday]:is(:hover,:focus-within) .mw-stitch:nth-of-type(-n+3){animation:mw-turn 6s linear infinite}
@keyframes mw-turn{to{transform:rotate(360deg)}}

/* ---------- Explore dialog ---------- */
.motion-dialog{--mc-hue:#5ddcff;width:min(980px,calc(100vw - 32px));max-height:calc(100dvh - 40px);padding:0;border:0;border-radius:24px;color:#eef;
 background:linear-gradient(170deg,#141a4e,#07061c);box-shadow:0 0 0 1px rgba(150,170,255,.2),0 30px 90px rgba(0,0,0,.6),0 0 60px -20px var(--mc-hue)}
.motion-dialog::backdrop{background:rgba(3,3,16,.78)}
.motion-dialog::before{content:"";position:absolute;inset:8px;border-radius:18px;border:1px dashed color-mix(in srgb,var(--mc-hue) 45%,transparent);pointer-events:none}
.md-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:30px 30px 10px}
.md-eyebrow{font:600 11px/1 var(--sans);letter-spacing:.3em;color:var(--cyan)}
.md-head h3{font-family:var(--serif);font-size:clamp(28px,4vw,40px);letter-spacing:.1em;margin-top:10px}
.md-head p{color:color-mix(in srgb,var(--mc-hue) 50%,#d8d4ff);margin-top:6px}
.md-close{flex:none;width:42px;height:42px;border-radius:50%;border:1px solid rgba(189,184,255,.35);background:rgba(6,6,26,.6);color:#fff;font-size:16px;cursor:pointer}
.md-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;padding:16px 30px}
.md-item{margin:0}
.md-frame{aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#0d1236;box-shadow:inset 0 0 0 1px rgba(189,184,255,.18)}
.md-frame video{width:100%;height:100%;display:block;object-fit:cover}
.md-item figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:12px 4px 0}
.md-item b{font-family:var(--serif);letter-spacing:.08em;font-size:18px;flex-basis:100%}
.md-item span{font-size:13px;color:var(--muted)}
.md-item em{font-style:normal;font:600 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#0b0d2a;background:var(--mc-hue);padding:5px 9px;border-radius:999px}
.md-note{padding:6px 30px 28px;font-size:13px;color:var(--muted)}

/* ---------- Tablet: three over two. Phone: two by two with the fifth centred. All five always in view. ---------- */
@media (max-width:1100px){
 .motion-arches{grid-template-columns:repeat(6,minmax(0,1fr));gap:22px 18px;align-items:start}
 .motion-arch{grid-column:span 2;margin-bottom:0!important}
 .motion-arch:nth-child(4){grid-column:2/4}.motion-arch:nth-child(5){grid-column:4/6}
}
@media (max-width:640px){
 .motion-arches{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 12px;margin-top:36px}
 .motion-arch{min-height:300px}
 .motion-arch:nth-child(4){grid-column:auto/span 2}.motion-arch:nth-child(5){grid-column:2/4}
 .motion-arch .arch-copy{bottom:56px;gap:7px}
 .motion-arch .nm{font-size:15px}
 .motion-arch .ds{font-size:11.5px;min-height:2.9em}
 .motion-arch .arch-open{font-size:10.5px;left:7%;right:7%;bottom:12px;min-height:32px}
 .motion-arch .arch-kicker{font-size:8px;top:16%}
 .md-head{padding:24px 20px 6px}.md-grid{padding:14px 20px;grid-template-columns:1fr}.md-note{padding:6px 20px 24px}
}

@media (prefers-reduced-motion:reduce){
 .motion-arch *,.motion-arch::before{animation:none!important;transition:none!important}
 .motion-arch .mw-draw{stroke-dashoffset:0!important}
 .motion-arch .mw-needle{opacity:0!important}
}