/* Independent native implementation inspired by the Album Rail interaction.
   Visuloma work data, image assets and case links remain the source of truth. */
#works.album-portfolio { --album-width:min(42vw,580px); }
#works.album-portfolio .works-grid {
  position:relative; gap:0;
  padding:64px calc((100% - var(--album-width)) / 2) 42px;
  perspective:1600px; perspective-origin:50% 45%;
  scroll-snap-type:none !important;
}
#works.album-portfolio .work-card,
#works.album-portfolio .work-card:first-child {
  flex:0 0 var(--album-width); aspect-ratio:16/9;
  margin-right:calc(var(--album-width) * -.42);
  background:transparent; outline-offset:6px;
}
#works.album-portfolio .work-card:last-child { margin-right:0; }
#works.album-portfolio .work-media { border-radius:14px; box-shadow:0 24px 45px -20px #35281f55,0 3px 12px #35281f1a; }
#works.album-portfolio .work-overlay,
#works.album-portfolio .work-badges,
#works.album-portfolio .play-icon { display:none; }
#works.album-portfolio .work-card:not(.is-active) { filter:saturate(.82); }
#works.album-portfolio .work-card:not(.is-active):hover { filter:none; }
#works.album-portfolio .work-card:hover .work-media img,
#works.album-portfolio .work-card:hover .work-media video { transform:none; }
#works.album-portfolio .work-card.is-active:hover .work-media img { transform:scale(1.025); }
#works.album-portfolio .work-card:focus-visible,
#works.album-portfolio .works-grid:focus-visible { outline:2px solid var(--oak); }
#works.album-portfolio .works-swipe-hint { margin:0 auto; border:0; background:none; font-size:10px; letter-spacing:.15em; padding:0; }
#works.album-portfolio .works-swipe-hint svg { width:22px; }
.album-caption { min-height:0; text-align:center; margin:10px auto 0; max-width:640px; }
.album-title { display:inline-block; font:500 clamp(20px,2.2vw,30px)/1.5 var(--display-zh); color:var(--accent-ink); text-decoration:none; }
.album-title::after { content:' ↗'; font:400 15px var(--sans); color:var(--muted); }
.album-subtitle { margin:9px 0 0; color:var(--muted); font-size:12px; line-height:1.8; letter-spacing:.12em; }
#works.album-portfolio .works-controls { justify-content:center; gap:18px; margin:12px auto 0; }
#works.album-portfolio .works-progress { display:none; }
.album-ruler { display:flex; align-items:center; justify-content:center; gap:0; max-width:60%; flex-wrap:wrap; }
.album-tick { border:0; background:none; width:24px; min-height:44px; cursor:pointer; padding:0; display:grid; place-items:center; }
.album-tick::before { content:''; width:1px; height:12px; background:#a08b7260; transition:height .4s,background .4s; }
.album-tick.is-active::before { height:28px; width:2px; background:var(--accent-ink); }
.album-tick:hover::before { background:var(--accent-ink); }
.album-autoplay { background:none; border:1px solid var(--line); border-radius:50%; width:44px; height:44px; font:400 18px var(--sans); color:var(--accent-ink); cursor:pointer; flex-shrink:0; }
#works.album-portfolio .track-arrow { width:44px; height:44px; color:var(--accent-ink); }
.album-tick:focus-visible,.album-autoplay:focus-visible,.album-title:focus-visible { outline:2px solid var(--oak); outline-offset:3px; }
@media(max-width:760px) {
  #works.album-portfolio { --album-width:70vw; }
  #works.album-portfolio .works-grid { padding-top:40px; padding-bottom:30px; }
  #works.album-portfolio .work-card { aspect-ratio:16/9; }
  #works.album-portfolio .work-media { border-radius:10px; }
  .album-caption { min-height:0; margin-top:10px; padding:0 12px; }
  .album-subtitle { font-size:11px; letter-spacing:.06em; }
  #works.album-portfolio .works-controls { gap:10px; flex-wrap:wrap; }
  .album-ruler { max-width:100%; flex-basis:100%; }
  .album-tick { width:22px; }
}
@media(prefers-reduced-motion:reduce) {
  #works.album-portfolio *,#works.album-portfolio *::before { transition:none !important; animation:none !important; }
}

/* Fade distant sleeves toward the page without making overlapping photos transparent. */
#works.album-portfolio .work-media::after { content:''; position:absolute; inset:0; background:#ece6d9; opacity:var(--album-dim,0); pointer-events:none; }

/* Keep only the case title and service caption beneath the image rail. */
#works.album-portfolio .works-controls,
#works.album-portfolio .works-swipe-hint { display:none; }

/* Keep the rail composited; no filter tween or layout work during a gesture. */
#works.album-portfolio .work-card { will-change:transform; transition:none; }
#works.album-portfolio .work-card:not(.is-active),
#works.album-portfolio .work-card:not(.is-active):hover { filter:none; }
#works.album-portfolio .work-media::after { will-change:opacity; }

/* Each sleeve is one composited surface; descendants cannot cross a neighbor. */
#works.album-portfolio .works-grid { isolation:isolate; }
#works.album-portfolio .work-card {
  transform-style:flat;
  isolation:isolate;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
#works.album-portfolio .work-media {
  isolation:isolate;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/* Bring the case caption 24px closer to the following section. */
#works.album-portfolio{padding-bottom:clamp(40px,calc(9vh - 24px),86px)}
@media(max-width:760px){
  #works.album-portfolio{padding-bottom:max(68px,calc(50px + env(safe-area-inset-bottom,0px)))}
}