/* A user-triggered motion collection, using the portfolio's existing palette. */
.motion-gallery-toggle { display: block; width: 100%; border: 0; padding: .12em .2em; background: transparent; color: var(--yellow); font: inherit; line-height: 1.05; letter-spacing: -.065em; cursor: pointer; }
.motion-feature .motion-feature__title { width: 100%; margin: 0; }
.motion-morph { display: grid; isolation: isolate; filter: none; }
.motion-morph > span { grid-area: 1 / 1; }
.motion-morph__next { opacity: 0; }
.motion-gallery-toggle:focus-visible, .motion-gallery button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 8px; border-radius: 8px; }
.motion-gallery-hint { color: var(--paper); margin: 0; font-size: .9rem; }
.motion-gallery-hint span { display: block; margin-top: 8px; font-family: var(--utility); font-size: .72rem; }
.motion-filter { position: absolute; pointer-events: none; }
.motion-gallery { width: 100%; padding-top: 40px; text-align: left; }
.motion-gallery[hidden] { display: none; }
.motion-gallery-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.motion-gallery-heading h3 { font: 600 clamp(1.5rem,3vw,2.5rem)/1.2 var(--display); }
.motion-gallery button { padding: 12px 18px; min-height: 44px; border: 1px solid var(--paper); border-radius: 999px; color: var(--paper); background: transparent; cursor: pointer; }
.motion-gallery-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px; }
.motion-gallery-card { min-width: 0; padding: 18px; border: 1px solid #fffdf84d; border-radius: 20px; }
.motion-gallery-card figure { margin: 0 0 20px; }
.motion-gallery-card video { display: block; width: 100%; height: clamp(230px,32vw,420px); object-fit: contain; background: #20213d; border-radius: 12px; }
.motion-gallery-card figcaption { display: none; }
.motion-gallery-card h3 { font: 600 1.35rem/1.3 var(--display); margin: 0 0 8px; }
.motion-gallery-card p { margin: 0; color: var(--paper); line-height: 1.7; }
@media(max-width:640px) { .motion-gallery-grid { grid-template-columns: 1fr; } .motion-gallery-heading { align-items: flex-start; flex-direction: column; } .motion-gallery-toggle { font-size: clamp(2.2rem,10vw,4rem); } }
@media(prefers-reduced-motion:reduce) { .motion-morph { filter: none; } }

.motion-morph.is-morphing { filter: url(#motion-threshold) blur(.3px); }