/* ── WORK — PROJECT REEL ───────────── */
#work{
  padding:80px 0 40px;background:var(--blk);overflow:hidden;
}
.wk-inner{max-width:var(--site-max);margin:0 auto;padding:0 var(--site-pad)}
.wk-reels{width:100%}

.reel-section{
  padding:2rem 0;position:relative;
}
#work .reel-section:first-of-type{padding-top:0}

.reel-label{
  font-family:var(--disp);
  font-size:1.5rem;
  letter-spacing:.15em;
  color:var(--dim);
  margin-bottom:1.5rem;
  padding-left:max(20px,5vw);
  display:flex;
  align-items:center;
  gap:1rem;
}
.reel-label .dot{
  width:8px;height:8px;
  background:var(--lime);
  border-radius:50%;
  box-shadow:0 0 10px var(--lime);
  flex-shrink:0;
}
.reel-label .dot--red{
  background:var(--red);
  box-shadow:0 0 10px var(--red);
}
.reel-label .count{
  font-family:var(--mono);
  font-size:.75rem;
  color:var(--lime);
  margin-left:auto;
  padding-right:max(20px,5vw);
}

.film-strip-container{
  position:relative;
  overflow:hidden;
  padding:15px 0;
  background:var(--deep);
  border-top:1px solid var(--bdr);
  border-bottom:1px solid var(--bdr);
}

.sprockets{
  position:absolute;left:0;right:0;height:10px;
  z-index:5;pointer-events:none;
}
.sprockets.top{top:2px}
.sprockets.bottom{bottom:2px}
.sprockets::before{
  content:'';position:absolute;inset:0;
  background-image:repeating-linear-gradient(
    90deg,
    var(--blk) 0px,var(--blk) 12px,
    transparent 12px,transparent 28px
  );
  border-radius:2px;
}
.sprockets::after{
  content:'';position:absolute;inset:0;
  background-image:repeating-linear-gradient(
    90deg,
    transparent 0px,transparent 14px,
    var(--bdr) 14px,var(--bdr) 26px
  );
}

.film-strip-container::before,
.film-strip-container::after{
  content:'';position:absolute;top:0;bottom:0;
  width:15vw;z-index:4;pointer-events:none;
}
.film-strip-container::before{
  left:0;
  background:linear-gradient(to right,var(--blk),transparent);
}
.film-strip-container::after{
  right:0;
  background:linear-gradient(to left,var(--blk),transparent);
}

.film-track{
  display:flex;gap:20px;
  width:max-content;padding:0 20px;
  will-change:transform;
}
.film-track.scroll-left{animation:wkScrollLeft 50s linear infinite}
.film-track.scroll-right{animation:wkScrollRight 50s linear infinite}
.film-track.scroll-right.scroll-fast{animation:wkScrollRight 35s linear infinite}

@keyframes wkScrollLeft{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
@keyframes wkScrollRight{
  0%{transform:translateX(-50%)}
  100%{transform:translateX(0)}
}

.film-frame{
  flex-shrink:0;
  width:280px;height:150px;
  background:var(--card);
  border:1px solid var(--bdr);
  border-radius:4px;
  padding:16px;
  display:flex;flex-direction:column;justify-content:space-between;
  transition:all .4s cubic-bezier(.25,.46,.45,.94);
  position:relative;overflow:hidden;
  cursor:pointer;text-decoration:none;color:inherit;
}
.film-frame::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--lime);
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s ease;
}
.film-frame:hover{
  border-color:var(--bdr2);
  box-shadow:0 8px 32px rgba(0,0,0,.5),0 0 20px var(--lime2);
  transform:translateY(-4px) scale(1.02);
  background:#0f0f1c;
}
.film-frame:hover::before{transform:scaleX(1)}

.frame-header{
  display:flex;justify-content:space-between;align-items:flex-start;
}
.frame-index{
  font-family:var(--mono);font-size:.65rem;
  color:var(--dim);letter-spacing:.1em;
}
.frame-icon{
  width:24px;height:24px;
  border:1px solid var(--bdr);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;color:var(--dim);
  transition:all .3s ease;
}
.film-frame:hover .frame-icon{
  border-color:var(--lime);color:var(--lime);
  box-shadow:0 0 8px var(--lime2);
}
.frame-title{
  font-family:var(--disp);font-size:1.4rem;
  letter-spacing:.05em;color:var(--wht);
  line-height:1;margin-top:auto;margin-bottom:8px;
  transition:color .3s ease;
}
.film-frame:hover .frame-title{color:var(--lime)}
.frame-url{
  font-family:var(--mono);font-size:.6rem;
  color:var(--dim);letter-spacing:.05em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.frame-tech{
  position:absolute;bottom:16px;right:16px;
  font-family:var(--mono);font-size:.55rem;
  color:var(--lime);opacity:.6;
  letter-spacing:.1em;text-transform:uppercase;
}

@media (max-width:768px){
  .wk-inner{padding:0 max(20px,env(safe-area-inset-left,0px)) 0 max(20px,env(safe-area-inset-right,0px))}
  .film-frame{width:240px;height:130px}
  .frame-title{font-size:1.2rem}
  .reel-label{font-size:1.2rem}
}

@media (prefers-reduced-motion:reduce){
  .film-track.scroll-left{animation-duration:120s}
  .film-track.scroll-right{animation-duration:120s}
  .film-track.scroll-right.scroll-fast{animation-duration:90s}
}

@media (hover:none),(pointer:coarse){
  .film-frame{cursor:pointer}
}