/* preloader */
html.pl2-on{overflow:hidden}
.pl2{position:fixed;inset:0;z-index:200;pointer-events:none}
.pl2-a,.pl2-b{position:absolute;left:0;right:0;height:50.5%;background:#121212;transition:transform 1.1s cubic-bezier(.8,0,.15,1)}
.pl2-a{top:0}.pl2-b{bottom:0}
.pl2-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;color:#8f8f88;font:700 13px 'Schibsted Grotesk';letter-spacing:.04em;transition:opacity .35s}
.pl2-in .f{--cw:clamp(54px,9vw,120px)}
.pl2.go .pl2-a{transform:translateY(-101%)}.pl2.go .pl2-b{transform:translateY(101%)}.pl2.go .pl2-in{opacity:0}
/* flight-path progress */
.prog2{position:fixed;left:0;right:0;top:0;height:3px;z-index:70;pointer-events:none}
.prog2 i{position:absolute;left:0;top:0;height:3px;width:calc(var(--p,0)*100%);background:var(--yellow,#FFC300)}
.prog2 b{position:absolute;top:-7px;left:calc(var(--p,0)*100% - 8px);font-size:15px;color:#121212;line-height:1;transform:rotate(0deg)}
/* tilt */
[data-tilt]{transition:transform .5s cubic-bezier(.2,1,.3,1);transform-style:preserve-3d;will-change:transform}
[data-tilt]:hover{transition:transform .12s linear}
.glare2{position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:3;mix-blend-mode:screen}
/* velocity skew */
[data-img],.case .pic,.hcard .shot{will-change:transform}
/* link roll */
.roll2{display:inline-grid;overflow:hidden;vertical-align:top;line-height:1.2}
.roll2>span{grid-area:1/1;transition:transform .5s cubic-bezier(.7,0,.2,1)}
.roll2>span+span{transform:translateY(105%)}
a:hover>.roll2>span:first-child,button:hover>.roll2>span:first-child{transform:translateY(-105%)}
a:hover>.roll2>span+span,button:hover>.roll2>span+span{transform:translateY(0)}
/* grain */
.grain2{position:fixed;inset:-50%;z-index:150;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain2 1s steps(6) infinite}
@keyframes grain2{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}
/* horizontal gallery */
.hgal{position:relative;margin-top:120px}
.hstick{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;background:#121212;color:#F2F0E6}
.hhead{display:flex;justify-content:space-between;align-items:flex-end;padding:0 var(--pad,24px) 34px;gap:20px}
.hhead h2{font-weight:900;font-size:clamp(40px,6vw,104px);letter-spacing:-.05em;line-height:.9}
.hcount{position:relative;width:220px;height:4px;background:#333}
.hcount:after{content:'';position:absolute;left:0;top:0;bottom:0;width:calc(var(--p,0)*100%);background:var(--yellow,#FFC300)}
.htrack{display:flex;gap:28px;padding:0 var(--pad,24px);will-change:transform;width:max-content}
.hcard{width:min(62vw,880px);flex:none;display:flex;flex-direction:column;gap:16px}
.hcard .shot{position:relative;aspect-ratio:16/10;overflow:hidden;border:3px solid #F2F0E6;background:#000}
.hcard .shot img{width:100%;height:100%;object-fit:cover;object-position:top;transform:scale(1.15);transition:filter .5s}
.hcard:hover .shot img{filter:saturate(1.25)}
.hcard .cap{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.hcard .cap b{font-family:'Big Shoulders Display';font-weight:900;font-size:30px;color:var(--yellow,#FFC300)}
.hcard .cap h3{font-weight:900;font-size:clamp(28px,3vw,48px);letter-spacing:-.04em;flex:1}
.hcard .cap span{font-weight:600;color:#9a9a92}
.hcard.you .shot{display:grid;place-items:center;background:var(--yellow,#FFC300);border-color:var(--yellow,#FFC300)}
.hcard.you .shot strong{font-weight:900;font-size:clamp(40px,5vw,90px);letter-spacing:-.05em;color:#121212;text-align:center;line-height:.95}
@media (max-width:859px){.hgal{margin-top:80px}.hstick{position:relative;height:auto;padding:60px 0}.hhead{padding:0 14px 24px}.hcount{display:none}
 .htrack{overflow-x:auto;scroll-snap-type:x mandatory;width:auto;padding:0 14px 10px;gap:14px;-webkit-overflow-scrolling:touch}.hcard{width:84vw;scroll-snap-align:center}.hcard .cap h3{font-size:26px}}
@media (prefers-reduced-motion:reduce){.grain2,.prog2 b{display:none}}
