/* A browsable collection of motion previews, separate from the client portfolio. */
.gallery-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .25rem 1.5rem; }
.gallery-filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.gallery-filters button, .gallery-auto-toggle { min-block-size: 48px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); padding: .625rem 1rem; border-radius: 24px; font: inherit; font-size: .8125rem; line-height: 1.5; cursor: pointer; }
.gallery-filters button[aria-pressed=true] { color: #fff; background: #4e2f82; border-color: #4e2f82; }
.gallery-filters button > span { display: inline-block; margin-inline-start: .4rem; font-size: .75rem; opacity: .8; }
.gallery-filters button:hover { border-color: var(--violet-text); }
.gallery-auto-toggle { display: flex; align-items: center; gap: .5rem; border-color: transparent; padding-inline: .5rem; }
.gallery-auto-toggle svg { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.video-gallery .gallery-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2rem 1.5rem; }
.video-gallery.gallery-enhanced .gallery-grid { position: relative; max-block-size: 520px; overflow-y: auto; padding: 4px 8px 12px 4px; scrollbar-width: thin; scrollbar-color: var(--violet-text) var(--art-peach); scroll-padding-block: 4px; }
.gallery-scroll-controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block: -.5rem 1rem; }
.gallery-scroll-controls > p { margin: 0; color: var(--muted); font-size: .8125rem; line-height: 1.6; }
.gallery-scroll-controls > div { display: flex; gap: .5rem; }
.gallery-scroll-controls button { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer; }
.gallery-scroll-controls svg { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.gallery-grid:focus-visible { outline: 2px solid var(--violet-text); outline-offset: 4px; }
.video-gallery .gallery-card, .video-gallery .gallery-card:last-child { display: block; grid-column: auto; min-inline-size: 0; }
.video-gallery .gallery-picture, .video-gallery .gallery-card:last-child .gallery-picture { aspect-ratio: 4 / 3; border-radius: 16px; background: #16131d; }
.gallery-picture video { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; object-fit: contain; opacity: 0; pointer-events: none; }
.gallery-card[data-video-state=playing] video, .gallery-card[data-video-state=paused] video { opacity: 1; }
.video-gallery .gallery-picture > img { object-fit: contain; transform: none; }
.gallery-video-toggle { position: absolute; z-index: 2; inset: auto auto 10px 10px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-block-size: 44px; padding: .5rem .75rem; border: 1px solid #e8ddf5; border-radius: 24px; background: #251b37; color: #fff; font: inherit; font-size: .75rem; line-height: 1.5; cursor: pointer; }
.gallery-video-toggle svg { inline-size: 19px; block-size: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.gallery-pause-icon, .gallery-auto-toggle .gallery-play-icon { display: none; }
.gallery-auto-toggle .gallery-pause-icon { display: block; }
.gallery-card[data-video-state=playing] .gallery-play-icon, .gallery-auto-toggle[aria-pressed=true] .gallery-pause-icon { display: none; }
.gallery-card[data-video-state=playing] .gallery-pause-icon, .gallery-auto-toggle[aria-pressed=true] .gallery-play-icon { display: block; }
.video-gallery .gallery-picture > .gallery-video-message { z-index: 1; inset: 10px 10px auto; padding: .5rem .75rem; font-size: .75rem; background: #251b37; color: #fff; }
.video-gallery .inspiration-caption { padding-block-start: .875rem; }
.video-gallery .inspiration-caption h3 { font-size: 1.125rem; line-height: 1.5; }
.gallery-source { display: grid; place-items: center; flex-shrink: 0; inline-size: 44px; block-size: 44px; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 50%; }
.gallery-source svg { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.gallery-source:hover { color: var(--violet-text); border-color: var(--violet-text); }
.gallery-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-block-start: 2rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--line-strong); }
.gallery-count { margin: 0; color: var(--muted); font-size: .875rem; line-height: 1.65; }
.gallery-more { gap: 1rem; min-block-size: 48px; font-size: .875rem; }
.video-gallery .inspiration-credit { margin-block-start: 1.5rem; }
.video-gallery [hidden] { display: none !important; }
.video-gallery :is(button,a):focus-visible { outline: 2px solid var(--violet-text); outline-offset: 4px; }
.video-gallery .gallery-video-toggle:focus-visible { outline-color: #fff; }
@media (max-width:1000px) {
  .video-gallery .gallery-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.75rem 1rem; }
}
@media (max-width:600px) {
  .video-gallery .gallery-grid { grid-template-columns: minmax(0,1fr); gap: 1.75rem; }
  .video-gallery.gallery-enhanced .gallery-grid { max-block-size: 450px; }
  .gallery-toolbar { gap: .75rem; }
  .gallery-filters { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); inline-size: 100%; }
  .gallery-filters button { padding-inline: .625rem; font-size: .75rem; }
  .gallery-auto-toggle { margin-inline-start: auto; }
  .gallery-bottom { align-items: stretch; flex-direction: column; gap: 1rem; }
  .gallery-more { inline-size: 100%; justify-content: space-between; }
}
@media (forced-colors:active) {
  .gallery-video-toggle, .gallery-source, .gallery-filters button[aria-pressed=true] { border: 1px solid ButtonText; }
}

/* Tilted Grid Hero: moving video textures wrap around a shared curved row. */
.video-gallery.reel-enhanced .inspiration-heading { align-items: center; justify-content: center; text-align: center; flex-direction: column; gap: 1rem; margin-block-end: 1.5rem; }
.reel-enhanced .inspiration-heading h2 { margin-block-end: 1rem; }
.reel-enhanced .inspiration-heading p { max-inline-size: 54ch; margin-inline: auto; }
.reel-enhanced .inspiration-heading > a { display: inline-flex; align-items: center; gap: 1.25rem; padding: .75rem 1.5rem; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: .875rem; text-decoration: none; }
.reel-enhanced .inspiration-heading > a svg { inline-size: 18px; block-size: 18px; stroke: currentColor; }
.reel-enhanced .gallery-toolbar { align-items: center; padding-block-end: 0; gap: 1rem; }
.reel-enhanced .gallery-auto-toggle { border: 1px solid var(--line-strong); padding-inline: 1rem; font-size: .75rem; }
.reel-enhanced .gallery-auto-toggle:disabled { color: var(--muted); cursor: default; }
.reel-stage { position: relative; inline-size: 100%; block-size: clamp(320px, 36vw, 460px); overflow: hidden; touch-action: pan-y; cursor: grab; border-radius: 20px; }
.reel-stage:active { cursor: grabbing; }
.reel-stage canvas { display: block; inline-size: 100%; block-size: 100%; pointer-events: none; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.reel-stage:focus-visible { outline: 3px solid var(--violet-text); outline-offset: 2px; }
.reel-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; margin-block-start: .25rem; padding-block: .75rem 1rem; border-block-end: 1px solid var(--line-strong); }
.reel-current { min-inline-size: 0; }
.reel-current > span { display: block; color: var(--muted); font-size: .75rem; line-height: 1.6; }
.reel-current h3 { min-block-size: 1.5em; margin: .25rem 0 0; color: var(--ink); font-size: clamp(1.25rem, 1rem + .5vw, 1.5rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.5; }
.reel-controls { display: flex; align-items: center; gap: .5rem; }
.reel-controls button { display: flex; align-items: center; justify-content: center; inline-size: 48px; min-block-size: 48px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--paper); color: var(--ink); cursor: pointer; }
.reel-controls button svg { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.reel-controls .reel-play { inline-size: auto; min-inline-size: 140px; gap: .5rem; padding-inline: 1rem; font: inherit; font-size: .75rem; }
.reel-play[aria-pressed="true"] .gallery-play-icon { display: none; }
.reel-play[aria-pressed="true"] .gallery-pause-icon { display: block; }
.reel-original { display: inline-flex; align-items: center; justify-self: end; gap: .75rem; min-block-size: 48px; color: var(--ink); font-size: .8125rem; text-decoration: underline; text-underline-offset: 4px; }
.reel-original svg { inline-size: 18px; block-size: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.reel-browse { display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem; padding-block-start: 1.5rem; }
.reel-browse p { flex: 1 1 auto; margin: 0; color: var(--muted); font-size: .8125rem; line-height: 1.65; }
.reel-picker { flex: 0 1 320px; min-inline-size: 0; max-inline-size: 100%; }
.reel-picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block-end: .625rem; }
.reel-picker-heading label { color: var(--ink); font-size: .8125rem; font-weight: 500; cursor: pointer; }
.reel-counter { padding: .25rem .5rem; border-radius: 6px; background: var(--surface-accent); color: var(--ink); font-size: .6875rem; line-height: 1.4; font-variant-numeric: tabular-nums; white-space: nowrap; }
.reel-picker-control { position: relative; }
.reel-picker-control svg { position: absolute; inset-block-start: 50%; transform: translateY(-50%); inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; pointer-events: none; }
.reel-picker-symbol { inset-inline-start: 1rem; color: var(--violet-text); }
.reel-picker-chevron { inset-inline-end: 1rem; color: var(--ink); }
.reel-picker select { appearance: none; display: block; inline-size: 100%; max-inline-size: 100%; min-block-size: 56px; padding: .875rem 3rem; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--paper); color: var(--ink); font: inherit; font-size: 1rem; font-weight: 500; line-height: 1.5; cursor: pointer; text-overflow: ellipsis; }
.reel-picker select:hover { border-color: var(--violet-text); }
.reel-status { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.reel-message { margin-block: 1rem 0; color: var(--muted); font-size: .8125rem; line-height: 1.65; }
.reel-enhanced .gallery-bottom { display: none; }
.reel-enhanced .inspiration-credit { max-inline-size: 100ch; margin-block-start: 2rem; }
.reel-enhanced :is(.reel-controls button,.gallery-auto-toggle):hover { border-color: var(--violet-text); }
.reel-enhanced select:focus-visible { outline: 3px solid var(--violet-text); outline-offset: 3px; }
@media (max-width: 700px) {
  .reel-stage { block-size: 300px; margin-block-start: .5rem; }
  .reel-footer { grid-template-columns: 1fr auto; gap: .75rem; padding-block-start: 0; }
  .reel-current { grid-column: 1; }
  .reel-original { grid-column: 2; grid-row: 1; font-size: .75rem; gap: .375rem; }
  .reel-controls { grid-column: 1 / -1; justify-content: center; }
  .reel-current h3 { font-size: 1.25rem; }
  .reel-browse { display: flex; flex-direction: column; align-items: stretch; gap: 1rem; }
  .reel-browse p { flex: none; }
  .reel-picker { flex: none; inline-size: 100%; }
  .video-gallery.reel-enhanced .inspiration-heading { gap: 1rem; }
}