/* SecondKoat scroll-driven motion layer. Everything here is progressive: without JS (no .sm-on) nothing is hidden. */
.sm-progress{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#823c53,#dcf09d);z-index:10000;pointer-events:none}

/* Reveal on scroll */
.sm-on .sm-r{opacity:0;transform:translate3d(0,42px,0);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 90ms)}
.sm-on .sm-r.sm-left{transform:translate3d(-48px,0,0)}
.sm-on .sm-r.sm-right{transform:translate3d(48px,0,0)}
.sm-on .sm-r.sm-zoom{transform:scale(.92)}
.sm-on .sm-r.is-in{opacity:1;transform:none}

/* Hero: copy lifts away, video drifts slower */
.sm-on .hero-copy{will-change:transform,opacity;transform:translate3d(0,calc(var(--hp,0) * -90px),0);opacity:calc(1 - var(--hp,0) * 1.1)}
.sm-on .hero-video{transform:scale(calc(1.04 + var(--hp,0) * .12)) translate3d(0,calc(var(--hp,0) * 60px),0)}
.sm-on .hero h1 .sm-w{display:inline-block;opacity:0;transform:translate3d(0,.6em,0) rotate(2deg);animation:smWord .9s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i) * 110ms + 150ms)}
@keyframes smWord{to{opacity:1;transform:none}}

/* Manifesto ribbon slides with scroll */
.sm-on .manifesto{overflow:hidden}
.sm-on .manifesto>*{transform:translate3d(calc(var(--mx,0) * 1px),0,0);transition:transform .1s linear}

/* Pinned film story */
.sm-story{position:relative;height:340vh;background:#1f1519;color:#fbf9f5}
.sm-story-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.sm-story canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.sm-story-pin::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#1f1519e6 0%,#1f151933 42%,#1f151900 70%),linear-gradient(90deg,#1f1519b3 0%,#1f151900 55%);pointer-events:none}
.sm-story-copy{position:absolute;z-index:2;display:grid;align-items:end;left:clamp(22px,7vw,110px);bottom:clamp(60px,12vh,130px);max-width:min(560px,86vw)}
.sm-cap{grid-area:1/1;opacity:0;pointer-events:none;transform:translate3d(0,30px,0);transition:opacity .25s ease,transform .25s ease}
.sm-cap.is-on{opacity:1;transform:none;pointer-events:auto;transition:opacity .6s ease .2s,transform .6s ease .2s}
.sm-cap .eyebrow{color:#dcf09d;margin-bottom:14px}
.sm-cap h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:clamp(40px,6vw,84px);line-height:.98;letter-spacing:-.02em;margin:0 0 16px}
.sm-cap h2 em{color:#f1c9d4}
.sm-cap p{font-size:16px;line-height:1.6;color:#efe3e3;margin:0 0 22px}
.sm-cap .btn.primary{background:#dcf09d;border-color:#dcf09d;color:#252b1c}
.sm-cap .btn.outline{color:#fff;border-color:#fff}
.sm-dots{position:absolute;z-index:2;right:clamp(16px,3vw,40px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px}
.sm-dots i{width:8px;height:8px;border-radius:50%;background:#ffffff55;transition:background .3s,transform .3s}
.sm-dots i.is-on{background:#dcf09d;transform:scale(1.4)}
.sm-hint{position:absolute;z-index:2;left:50%;top:22px;transform:translateX(-50%);font:700 10px 'DM Sans',sans-serif;letter-spacing:.2em;color:#ffffffb0;text-transform:uppercase;transition:opacity .4s}

/* Steps: number counts in, cards rise in sequence */
.sm-on .sk-step-grid>*.sm-r{transform:translate3d(0,60px,0) rotate(-1.5deg)}
.sm-on .sk-step-grid>*.sm-r.is-in{transform:none}

/* Lookbook / gallery images: subtle parallax */
.sm-par{will-change:transform;transform:translate3d(0,calc(var(--py,0) * 1px),0)}

@media(max-width:760px){
  .sm-story{height:300vh}
  .sm-story-copy{bottom:56px}
  .sm-dots{display:none}
  .sm-story-pin::after{background:linear-gradient(0deg,#1f1519f2 0%,#1f1519b3 45%,#1f151920 75%)}
}
@media(prefers-reduced-motion:reduce){
  .sm-progress{display:none}
  .sm-on .sm-r,.sm-on .hero-copy,.sm-on .hero-video,.sm-on .manifesto>*,.sm-par{opacity:1!important;transform:none!important;transition:none!important}
  .sm-on .hero h1 .sm-w{animation:none;opacity:1;transform:none}
  .sm-story{height:auto}
  .sm-story-pin{position:relative;height:auto;min-height:80vh}
  .sm-cap{grid-area:auto;opacity:1;transform:none;pointer-events:auto;margin-bottom:40px}
  .sm-story-copy{position:relative;left:auto;bottom:auto;padding:90px clamp(22px,7vw,110px) 40px}
  .sm-dots,.sm-hint{display:none}
}