/* React Bits AccordionGallery / DriftWall native adaptation. See THIRD_PARTY_NOTICES.md. */
.accordion-viewport { overflow-x: auto; padding: 5px 2px 16px; scrollbar-width: thin; scrollbar-color: #7974b6 transparent; }
.accordion-gallery { display: flex; flex-wrap: nowrap; gap: 10px; height: 460px; width: 100%; perspective: 1400px; }
.ag-panel { position: relative; display: block; flex: 1 1 0; min-width: 0; padding: 0; overflow: hidden; border: 1px solid #8b9eff30; border-radius: 16px; background: #080c18; color: white; text-align: left; cursor: pointer; transform: rotateY(var(--ag-turn,0deg)); transition: flex-grow .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1), border-color .4s; }
.ag-panel.is-active { flex-grow: 6.5; border-color: #a698ff88; }
.ag-panel > img { position: absolute; left: 50%; top: 0; height: 100%; width: var(--ag-media,650px); max-width: none; object-fit: cover; transform: translateX(-50%); filter: grayscale(1) brightness(.65); transition: filter .6s; }
.ag-panel.is-active > img { filter: grayscale(0) brightness(1); }
.ag-shade { position: absolute; inset: 0; background: linear-gradient(0deg,#060916ed,transparent 65%); }
.ag-number { position: absolute; top: 18px; left: 14px; font: 500 11px/1 monospace; color: #dfdcff; }
.ag-label { position: absolute; bottom: 27px; left: 24px; right: 24px; opacity: 0; transform: translateX(-14px); transition: opacity .25s, transform .6s; pointer-events: none; }
.ag-panel.is-active .ag-label { opacity: 1; transform: none; transition-delay: .12s; }
.ag-label small { display: block; font-size: 10px; color: #c1c9eb; margin-bottom: 10px; }
.ag-label strong { display: block; font-size: clamp(20px,2vw,29px); line-height: 1.45; font-weight: 600; }
.ag-label > span { display: block; color: #b3a7ff; margin-top: 17px; font-size: 11px; }
.ag-panel:focus-visible { outline: 2px solid #b5abff; outline-offset: -3px; }
.gallery-hint { display: flex; justify-content: space-between; gap: 20px; margin-top: 12px; color: #8793b8; font-size: 11px; }
.wall-pause { flex: 0 0 auto; border: 1px solid #a3aaff44; border-radius: 999px; background: #8199ff0d; padding: 9px 16px; color: #c7cdef; cursor: pointer; font-size: 11px; }
.work-toolbar .filter-bar { margin-left: auto; }
.wall-pause:focus-visible { outline: 2px solid #a6adff; outline-offset: 3px; }
.drift-wall { position: relative; width: 100%; height: clamp(660px, 47vw, 860px); overflow: hidden; perspective: 1200px; --tile-w: clamp(200px, calc((100vw - 2 * var(--page-gutter)) / 6), 390px); --tile-h: calc(var(--tile-w) * .66); --gap: 18px; --plane-scale: 1.18; mask-image: linear-gradient(transparent,#000 8%,#000 92%,transparent),radial-gradient(ellipse 120% 100% at 50% 50%,#000 56%,transparent 100%); mask-composite: intersect; }
.drift-plane { position: absolute; top: 50%; left: 50%; display: flex; height: 1000px; transform-style: preserve-3d; transform: translate(-50%,-50%) scale(var(--plane-scale)) rotateX(16deg) rotateY(-14deg) translateZ(-120px); will-change: transform; }
.drift-column { position: relative; width: calc(var(--tile-w) + var(--gap)); flex-shrink: 0; height: 1000px; transform-style: preserve-3d; }
.drift-track { display: flex; flex-direction: column; transform-style: preserve-3d; will-change: transform; }
.drift-tile { position: relative; display: block; flex: 0 0 auto; width: 100%; height: calc(var(--tile-h) + var(--gap)); border: 0; padding: 0; background: none; color: #fff; cursor: pointer; transform-style: preserve-3d; }
.drift-inner { position: absolute; inset: 5px; overflow: hidden; border-radius: 12px; border: 1px solid #788ad848; background: #101326; opacity: .72; transform: translateZ(0); transition: transform .42s cubic-bezier(.22,1,.36,1), opacity .42s, box-shadow .42s; pointer-events: none; }
.drift-inner img { width: 100%; height: 100%; display: block; object-fit: cover; }
.drift-title { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px 10px 8px; background: linear-gradient(transparent,#060010e6); color: white; font-size: 9px; opacity: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .3s; }
.drift-tile:hover .drift-inner,.drift-tile:focus-visible .drift-inner { opacity: 1; transform: translateZ(64px); box-shadow: 0 20px 45px #020411aa; border-color: #aaa3ff; }
.drift-tile:hover .drift-title,.drift-tile:focus-visible .drift-title { opacity: 1; }
.drift-tile:focus-visible { outline: none; }
@media(min-width:1800px) { .drift-wall { --plane-scale: 1.3; } .drift-plane { left: calc(50% - 5vw); } }
@media(max-width:920px) { .accordion-gallery { height: 400px; } .ag-label { left: 17px; right: 17px; } .work-toolbar { flex-wrap: wrap; } .drift-wall { height: 600px; --tile-w: clamp(150px, 20vw, 200px); --plane-scale: 1.08; } }
@media(max-width:640px) {
  .accordion-gallery { width: 850px; height: 340px; }
  .ag-label strong { font-size: 21px; }
  .gallery-hint { display: block; line-height: 1.8; }
  .gallery-hint span { display: block; }
  .work-toolbar { display: flex; gap: 12px; }
  .work-toolbar > span { width: 100%; margin: 0; }
  .work-toolbar .filter-bar { width: 100%; margin: 0; }
  .section-shell .filter-bar button { min-width: 53px; padding-left: 10px; padding-right: 10px; }
  .drift-wall { height: 540px; --tile-w: calc((100vw - 94px) / 3); --plane-scale: 1.08; }
}
@media(prefers-reduced-motion:reduce) {
  .ag-panel,.ag-panel > img,.ag-label,.drift-inner { transition: none; }
  .drift-wall { height: 600px; overflow: auto; mask-image: none; perspective: none; }
  .drift-plane { position: static; height: auto; width: 100%; transform: none !important; gap: 8px; }
  .drift-column { flex: 1; width: 0; height: auto; }
  .drift-track { transform: none !important; }
  .drift-tile[data-copy]:not([data-copy="0"]) { display: none; }
  .drift-inner { opacity: 1; transform: none !important; }
}