.grain-viewport{position:relative;isolation:isolate;overflow:hidden}
.grain-carousel .carousel-track{position:relative;background:transparent;padding:24px 8% 28px;gap:18px;scroll-padding-inline:8%;cursor:grab;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.grain-carousel .carousel-slide{flex:0 0 100%;scroll-snap-align:center;background:#101317;transform:scale(var(--slide-scale,1));filter:brightness(var(--slide-brightness,1));box-shadow:0 12px 24px -16px #102c2755;transition:transform .15s ease-out,filter .15s ease-out;overflow:hidden;border-radius:3px}
.grain-viewport:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:3;background-image:var(--grain-texture);background-size:128px;opacity:.42;mask-image:linear-gradient(90deg,#000,transparent 18%,transparent 82%,#000);-webkit-mask-image:linear-gradient(90deg,#000,transparent 18%,transparent 82%,#000);animation:grain-drift .28s steps(2) infinite}
.grain-carousel .carousel-track.is-dragging{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing;user-select:none}
.grain-carousel .carousel-controls{margin-top:0;flex-wrap:wrap}
.work-card .grain-viewport:after{content:none;animation:none}
@keyframes grain-drift{0%{background-position:0 0}50%{background-position:39px -23px}100%{background-position:-19px 47px}}
@media(max-width:700px){.grain-carousel .carousel-track{gap:12px;padding-block:16px 20px}.grain-viewport:after{opacity:.28}}
@media(prefers-reduced-motion:reduce){.grain-viewport:after{animation:none}.grain-carousel .carousel-slide{transform:none;transition:none}}