/* Project-column hero: only transform and opacity are animated. */
.project-column-hero{padding:22px 0 0;--column-width:clamp(260px,27vw,440px);--column-height:clamp(430px,59vh,740px);--column-gap:16px}
.project-column-hero .hero-title{padding:0 5vw;margin-bottom:22px;grid-template-columns:1.4fr 1fr;gap:8vw}
.project-column-hero .hero-title h1{font-size:clamp(38px,4.6vw,70px)}
.project-column-hero .hero-title>div{max-width:390px}
.hero-controls{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:0 5vw 12px;font-size:13px;color:var(--muted)}
.hero-motion-toggle{display:none;align-items:center;min-height:44px;border:1px solid var(--line);background:white;padding:8px 15px;cursor:pointer;font-size:14px}
.hero-window{overflow:auto;padding:16px 0 20px;scrollbar-width:thin}
.hero-rail{display:flex;width:max-content}
.hero-group{display:flex;gap:var(--column-gap);padding-right:var(--column-gap)}
.hero-column{display:block;position:relative;flex:0 0 var(--column-width);width:var(--column-width);height:var(--column-height);overflow:hidden;background:var(--ink);isolation:isolate;transition:transform 240ms cubic-bezier(.22,1,.36,1)}
.hero-column>img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;transition:transform 260ms cubic-bezier(.22,1,.36,1)}
.column-shade{position:absolute;inset:0;background:linear-gradient(transparent 48%,rgba(12,23,31,.76));pointer-events:none}
.column-label{position:absolute;bottom:25px;left:24px;right:24px;color:white;transition:opacity 160ms cubic-bezier(.22,1,.36,1)}
.column-label h2{font-size:clamp(24px,2vw,33px);line-height:1.18;letter-spacing:-.02em}
.column-label p{font-size:14px;margin-top:10px;color:#e4eaf0}
.column-glass{position:absolute;bottom:18px;left:18px;right:18px;padding:23px;color:#fff;background:rgba(21,38,49,.92);border:1px solid rgba(255,255,255,.34);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.2);opacity:0;transform:translateY(12px) scale(.97);transform-origin:bottom center;transition:opacity 180ms cubic-bezier(.22,1,.36,1),transform 240ms cubic-bezier(.22,1,.36,1)}
@supports(backdrop-filter:blur(16px)){.column-glass{background:rgba(15,30,42,.67);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}}
.column-glass>p{font-size:13px;color:#edf3f7;margin-bottom:15px}
.column-glass h2{font-size:clamp(26px,2.25vw,35px);line-height:1.17;margin-bottom:24px}
.column-glass>span{display:flex;justify-content:space-between;align-items:center;font-size:15px}
.column-glass>span>span{font-size:25px}
.column-glass small{display:block;font-size:11px;line-height:1.5;margin-top:17px;color:#e2ebf2}
.hero-column:focus-visible{outline-offset:-5px;outline-color:#fff}
.hero-column:focus-visible .column-glass{opacity:1;transform:none;transition:none}
.hero-column:focus-visible .column-label{opacity:0;transition:none}
.hero-duplicate{display:none}
.hero-window{cursor:grab}
.hero-window.is-dragging{cursor:grabbing;user-select:none;scroll-snap-type:none}
.hero-window.is-dragging .hero-column{pointer-events:none}
.project-column-hero.manual-browsing .hero-rail{animation:none;transform:none}
.project-column-hero.manual-browsing .hero-window{overflow-x:auto}
@keyframes project-drift{to{transform:translateX(-50%)}}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .js .hero-window{overflow:hidden}
 .js .hero-duplicate{display:flex}
 .js .hero-rail{animation:project-drift 75s linear infinite}
 .js .hero-motion-toggle{display:inline-flex}
 .hero-column:hover{transform:translateY(-10px)}
 .hero-column:hover>img{transform:scale(1.045)}
 .hero-column:hover .column-glass{opacity:1;transform:none}
 .hero-column:hover .column-label{opacity:0}
 .project-column-hero:has(.hero-column:hover) .hero-rail,.project-column-hero:has(.hero-column:focus) .hero-rail,.project-column-hero.motion-paused .hero-rail,.project-column-hero.document-hidden .hero-rail{animation-play-state:paused}
 .project-column-hero.keyboard-navigation .hero-rail{animation:none;transform:none}
 .project-column-hero.keyboard-navigation .hero-window{overflow:auto}
 .project-column-hero.keyboard-navigation .hero-duplicate{display:none}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:reduce){
 .hero-column:hover .column-glass{opacity:1;transform:none}
 .hero-column:hover .column-label{opacity:0}
}
@media(max-width:700px){
 .project-column-hero{--column-width:78vw;--column-height:500px;--column-gap:12px;padding-top:20px}
 .project-column-hero .hero-title{padding:0 6vw;grid-template-columns:1fr;gap:17px;margin-bottom:17px}
 .project-column-hero .hero-title h1{font-size:43px}
 .project-column-hero .hero-title p{font-size:16px;margin-bottom:8px}
 .hero-controls{padding:0 6vw 5px}
 .hero-window{scroll-snap-type:x proximity;padding-left:6vw;padding-right:6vw}
 .hero-column{scroll-snap-align:start}
 .column-label{bottom:20px;left:20px;right:20px}
 .column-glass{padding:20px}
}
/* Touch devices keep the same resting captions; the whole image links directly to the project. */
@media(prefers-reduced-motion:reduce){.hero-rail{animation:none!important}.hero-column,.hero-column>img,.column-glass{transform:none!important;transition:none!important}.hero-duplicate{display:none!important}.hero-motion-toggle{display:none!important}.hero-window{overflow:auto!important}}
@media print{.hero-duplicate,.hero-controls{display:none!important}.hero-window{overflow:visible}.hero-rail{width:100%;animation:none!important;display:block}.hero-group{flex-wrap:wrap}.hero-column{width:45%;flex-basis:45%;height:360px}.column-glass{opacity:1;transform:none}}
@media (prefers-reduced-motion: no-preference) {
 @view-transition { navigation: auto; }
 .hero-group:not(.hero-duplicate) .hero-column[href="project-nha-anh-luong.html"] > img { view-transition-name: luong-cover; }
}

@media(any-hover:hover) and (any-pointer:fine){
 .hero-column:hover .column-glass{opacity:1;transform:none}
 .hero-column:hover .column-label{opacity:0}
}
.hero-column.is-touch-pressed .column-glass{opacity:1;transform:none}
.hero-column.is-touch-pressed .column-label{opacity:0}
@media(prefers-reduced-motion:no-preference){.hero-column.is-touch-pressed>img{transform:scale(1.045)}}