.project-reel { margin: 0 0 42px; min-width: 0; }
.project-reel__header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; }
.project-reel h3 { font-size:clamp(22px,3vw,30px); font-weight:500; letter-spacing:-.035em; margin:5px 0 0; }
.project-reel__actions { display:flex; align-items:center; gap:10px; }
.project-reel__all { color:var(--text); background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.12); border-radius:9px; text-decoration:none; font-family:var(--font, inherit); transition:background .25s,border-color .25s,box-shadow .25s; }
.project-reel__all { display:flex; gap:18px; align-items:center; min-height:40px; padding:8px 14px; font-family:inherit; font-size:12px; font-weight:500; box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }
.project-reel__all:hover { border-color:rgba(0,224,208,.5); background:rgba(0,224,208,.06); }
.project-reel__viewport { overflow-x:auto; scrollbar-width:none; padding:18px 0 26px; overscroll-behavior-x:contain; -webkit-mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent); mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent); }
.project-reel__viewport::-webkit-scrollbar { display:none; }
.project-reel__track,.project-reel__group { display:flex; width:max-content; }
.project-reel__group { gap:20px; padding-right:20px; }
.reel-card { position:relative; display:block; flex:0 0 224px; width:224px; color:var(--text); text-decoration:none; border:1px solid rgba(255,255,255,.1); border-radius:12px; background:#11131b; overflow:hidden; isolation:isolate; transform:perspective(850px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .4s,box-shadow .4s; }
.reel-card::after { content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(450px circle at var(--shine-x,50%) var(--shine-y,20%),rgba(128,255,239,.16),transparent 65%); opacity:0; transition:opacity .4s; }
.reel-card__image { overflow:hidden; aspect-ratio:16/9; background:#080d12; }
.reel-card img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .6s; }
.reel-card__caption { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:54px; padding:9px 13px; background:linear-gradient(130deg,rgba(255,255,255,.025),transparent); }
.reel-card h4 { margin:0; font-size:13px; font-weight:500; line-height:1.35; letter-spacing:-.015em; }
@media(hover:hover) and (pointer:fine) {
  .reel-card:hover { border-color:rgba(100,255,230,.5); box-shadow:0 14px 30px -16px rgba(0,224,208,.28); }
  .reel-card:hover::after { opacity:1; }
  .reel-card:hover img { transform:scale(1.065); filter:brightness(1.12); }
}
.reel-card:focus-visible,.project-reel__all:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }
@media(max-width:600px) {
  .reel-card { width:208px; flex-basis:208px; }
  .project-reel__group { gap:14px; padding-right:14px; }
  .project-reel__all { padding:9px 12px; gap:8px; font-size:11px; }
  .project-reel__actions { gap:6px; }
  .project-reel { margin-bottom:28px; }
}
@media(prefers-reduced-motion:reduce) {
  .reel-card,.reel-card img,.reel-card::after { transition:none; transform:none!important; }
}

.project-reel__viewport { touch-action:pan-y pinch-zoom; }
.reel-card { cursor:grab; user-select:none; -webkit-user-select:none; }
.reel-card img { -webkit-user-drag:none; }
.project-reel__viewport.is-dragging,.project-reel__viewport.is-dragging .reel-card { cursor:grabbing; }
.project-reel__viewport.is-dragging .reel-card { transform:none; transition:none; }