/* Scroll-driven storytelling uses native scrolling and a sticky visual stage. */
.scroll-story{height:300svh;position:relative;--progress:0;--expand:0;--beat1:1;--beat2:0;--beat3:0;--canyon:0;--drift:0}
.story-stage{height:100svh;position:sticky;top:0;overflow:clip;display:flex;align-items:center;justify-content:center}
.story-canvas{position:relative;height:calc(88svh + var(--expand)*12svh);width:calc(100% - 112px + var(--expand)*112px);overflow:clip;background:#242927;isolation:isolate}
.story-image{position:absolute;width:100%;height:100%;object-fit:cover;inset:0;transform:scale(calc(1.03 + var(--progress)*.13));will-change:transform;object-position:50% calc(50% + var(--drift)*8%)}
.story-canyon{opacity:var(--canyon);transform:scale(calc(1.15 - var(--progress)*.1));object-position:50% 45%}
.story-shade{position:absolute;inset:0;background:linear-gradient(180deg,#0005,transparent 25%,#0003 55%,#0008)}
.story-corner{position:absolute;left:38px;right:38px;top:32px;display:flex;justify-content:space-between;align-items:center;gap:25px;font-size:8px;letter-spacing:1.6px;color:#eee8df}
.story-scroll-hint{display:flex;align-items:center;gap:12px}.story-scroll-hint>span{font-size:16px}
.story-beat{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:65px 24px;pointer-events:none;text-shadow:0 2px 30px #0007}
.story-beat>.eyebrow{letter-spacing:3px;font-size:9px;margin-bottom:24px;color:#f2eee3}
.story-beat h2{font:500 clamp(56px,7.4vw,122px)/1.03 'Manrope',Arial,sans-serif;letter-spacing:-5px;color:#f7f4eb}
.story-beat h2 em{font-size:1.07em}
.story-beat p{font-size:13px;color:#eee8df;margin-top:28px;line-height:1.6}
.beat-one{opacity:var(--beat1);transform:translateY(calc((1 - var(--beat1))*-40px)) scale(calc(.97 + var(--beat1)*.03))}
.beat-two{opacity:var(--beat2);transform:translateY(calc((1 - var(--beat2))*45px)) scale(calc(.97 + var(--beat2)*.03))}
.beat-three{opacity:var(--beat3);transform:translateY(calc((1 - var(--beat3))*45px)) scale(calc(.97 + var(--beat3)*.03))}
.story-bottom{position:absolute;left:38px;right:38px;bottom:32px;display:flex;align-items:center;justify-content:space-between;gap:25px}
.story-chapters{display:flex;gap:28px}.story-chapters button{background:none;color:#f2eee399;font-size:9px;letter-spacing:1px;padding:11px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}.story-chapters button span{margin-left:6px;font-size:8px}.story-chapters button.active{color:#fff;border-color:var(--orange)}.story-chapters button:hover{color:#fff}
.story-sample{font-size:7px;letter-spacing:1.5px;color:#eee8dfaa}.story-progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:#ffffff25}.story-progress span{display:block;height:100%;width:calc(var(--progress)*100%);background:var(--orange)}
.motion-ready .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1)}.motion-ready .reveal.in-view{opacity:1;transform:translateY(0)}
.project-image{transform:perspective(1000px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg));transition:transform .4s ease;will-change:transform}.project-image:after{content:'';position:absolute;inset:0;opacity:0;background:radial-gradient(circle at var(--pointer-x,50%) var(--pointer-y,50%),#ffffff16,transparent 60%);pointer-events:none;transition:opacity .3s}.project:hover .project-image:after{opacity:1}
.site-header .brand{transition:opacity .2s}.site-header .brand:hover{opacity:.7}.contact-section h2 em{background:linear-gradient(90deg,var(--orange) 0%,var(--orange) 50%,var(--ink) 50%,var(--ink) 100%);background-size:200% 100%;background-position:calc(100% - var(--contact-progress,0)*100%) 0;background-clip:text;-webkit-background-clip:text;color:transparent}
@media(max-width:1000px){.story-canvas{width:calc(100% - 64px + var(--expand)*64px)}.story-beat h2{letter-spacing:-3px}.story-corner,.story-bottom{left:25px;right:25px}}
@media(max-width:700px){.scroll-story{height:270svh}.story-canvas{width:calc(100% - 24px + var(--expand)*24px);height:calc(90svh + var(--expand)*10svh)}.story-corner{left:19px;right:19px;top:22px;font-size:6px;line-height:1.7;letter-spacing:1px}.story-corner>span:first-child{max-width:130px}.story-scroll-hint{font-size:6px;white-space:nowrap;gap:6px}.story-beat{padding-inline:15px}.story-beat h2{font-size:clamp(38px,9.6vw,67px);letter-spacing:-2px}.story-beat>.eyebrow{font-size:7px;letter-spacing:2px;margin-bottom:20px}.story-beat p{font-size:11px;margin-top:22px}.story-bottom{left:19px;right:19px;bottom:23px;align-items:flex-end}.story-chapters{gap:17px}.story-chapters button{font-size:8px}.story-chapters button span{display:none}.story-sample{font-size:5px;letter-spacing:1px;max-width:120px;text-align:right;line-height:1.8}.story-image{object-position:60% 50%}.story-canyon{object-position:45% 50%}}
@media(prefers-reduced-motion:reduce){.scroll-story{height:85svh}.story-stage{position:relative;height:85svh}.story-canvas{height:85svh;width:100%}.story-image,.story-beat{transform:none!important}.story-scroll-hint{display:none}.story-progress{display:none}.motion-ready .reveal{opacity:1;transform:none}.project-image{transform:none!important}.contact-section h2 em{background:none;color:var(--ink)}}