/* Reference-led motion; typography and the supplied artwork remain separate. */
.hero{min-height:650px;height:100svh;max-height:1100px;--progress:0;--iris:0px;--motion-x:0px}
.hero-image,.hero[data-scene="city"] .hero-image{inset:-2%;width:104%;height:104%;opacity:1;transform:translate(var(--motion-x),0) scale(1.025);transition:none;filter:none!important}
.hero-image>img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero::before{background:linear-gradient(0deg,#09112575,transparent 28%),linear-gradient(90deg,#0b133320,transparent 50%)}
.hero::after{display:none}.hero-frame,.type-scene{display:none}
.hero-title{top:34%;font-size:clamp(110px,16.5vw,300px);transition:opacity .15s,transform .35s;will-change:transform}
.hero-brush{top:57%;left:28%;color:#e3ed54;transition:opacity .15s,transform .35s}
.hero[data-mode="slices"] .hero-title,.hero[data-mode="ribbon"] .hero-title,.hero[data-mode^="intro"] .hero-title{opacity:0}
.hero[data-mode="slices"] .hero-brush,.hero[data-mode="ribbon"] .hero-brush,.hero[data-mode^="intro"] .hero-brush{opacity:0}
.hero[data-mode^="intro"] .hero-meta,.hero[data-mode^="intro"] .hero-rail{opacity:0}
.hero-meta,.hero-rail{transition:opacity .25s}
.light-pass{position:absolute;inset:-2%;z-index:1;background:url('assets/user-city-night.jpg') center/cover;mix-blend-mode:screen;opacity:var(--light-opacity,.035);pointer-events:none;clip-path:polygon(23% 2%,29% 2%,29% 32%,23% 32%,23% 2%,23% 45%,33% 45%,33% 63%,23% 63%);transform:translate(var(--motion-x),0) scale(1.025)}
.motion-intro{position:absolute;inset:0;z-index:8;background:#090e21;display:grid;place-items:center;opacity:0;pointer-events:none;overflow:hidden}
.hero[data-mode="intro-square"] .motion-intro,.hero[data-mode="intro-name"] .motion-intro{opacity:1}
.intro-window{position:absolute;width:clamp(240px,28vw,430px);aspect-ratio:1;background:linear-gradient(#111a3655,#111a3655),url('assets/user-city-night.jpg') center/cover;transform:scale(var(--intro-scale,1));opacity:.6}
.intro-lettering{position:relative;border:1px solid #ddd9ed77;margin:0;padding:25px 36px;font-size:clamp(46px,5.5vw,83px);font-weight:600;line-height:.9;letter-spacing:-.04em;text-align:center}
.intro-lettering span{display:block;font-size:.6em;line-height:1.4;letter-spacing:.15em}
.hero[data-ink="outline"] .intro-lettering{color:transparent;-webkit-text-stroke:1px #ddd9ed}
.hero[data-ink="color"] .intro-lettering{color:#f398ce}
.intro-name{position:absolute;font-size:13px;letter-spacing:.2em;opacity:0;color:#edeaf0}
.hero[data-mode="intro-name"] .intro-lettering,.hero[data-mode="intro-name"] .intro-window{opacity:0}
.hero[data-mode="intro-name"] .intro-name{opacity:1;transform:translateX(var(--name-x,0px))}
.intro-stroke{position:absolute;top:48%;width:19vw;height:3px;background:#f4eff3;transform:translateX(var(--stroke-x,0px))}
.intro-stroke.a{left:-4vw}.intro-stroke.b{right:-4vw;top:55%;background:#f296cc}
.hero[data-mode="intro-name"] .intro-stroke{height:1px;opacity:.18}
.iris-cover{position:absolute;inset:0;z-index:8;background:#10152f;pointer-events:none;opacity:0;mask-image:radial-gradient(circle at 50% 48%,transparent var(--iris),#000 calc(var(--iris) + 1px));-webkit-mask-image:radial-gradient(circle at 50% 48%,transparent var(--iris),#000 calc(var(--iris) + 1px))}
.hero[data-mode="intro-iris"] .iris-cover{opacity:1}
.iris-ring{position:absolute;z-index:9;width:calc(var(--iris)*2);height:calc(var(--iris)*2);border:1px solid #e1e1ef90;border-radius:50%;left:50%;top:48%;transform:translate(-50%,-50%);opacity:0;pointer-events:none}
.hero[data-mode="intro-iris"] .iris-ring{opacity:1}
.slice-stage,.ribbon-stage{position:absolute;inset:0;z-index:7;background:#0b1021;opacity:0;pointer-events:none;overflow:hidden}
.hero[data-mode="slices"] .slice-stage,.hero[data-mode="ribbon"] .ribbon-stage{opacity:1}
.slice-windows{position:absolute;left:13%;right:13%;top:24%;bottom:23%;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(9px,1.1vw,24px)}
.slice{background-image:url('assets/user-city-night.jpg');background-size:400% auto;background-position:calc(var(--i)*100%/3) center;clip-path:inset(var(--slice-top,50%) 0 var(--slice-bottom,50%) 0);transform:translateY(var(--slice-y,0px));will-change:clip-path,transform}
.slice:nth-child(2){filter:saturate(1.22)}.slice:nth-child(3){filter:hue-rotate(-12deg)}.slice:nth-child(4){filter:saturate(.8)}
.slice-caption{position:absolute;left:16%;top:42%;margin:0;transform:rotate(-12deg) translateX(var(--caption-x,0px));font:italic 600 clamp(48px,7.8vw,145px)/1 'Bodoni Moda',Georgia,serif;letter-spacing:-.06em;color:#e3ed54;white-space:nowrap}
.slice-foot{position:absolute;bottom:18%;left:16%;font-family:var(--serif);font-size:clamp(12px,1.2vw,20px);letter-spacing:.25em;color:#e9e4ee}
.ribbon-outline{position:absolute;left:var(--outline-x,-8%);top:15%;font-size:clamp(120px,20vw,340px);font-weight:600;letter-spacing:-.09em;line-height:.8;color:transparent;-webkit-text-stroke:1px #f0e9f166;white-space:nowrap}
.ribbon-picture{position:absolute;left:0;right:0;top:36%;height:30%;background:url('assets/user-city-night.jpg') center 62%/110% auto;clip-path:inset(0 var(--ribbon-right,100%) 0 var(--ribbon-left,0%));transform:translateX(var(--ribbon-x,0px))}
.ribbon-caption{position:absolute;right:12%;top:60%;font-family:var(--serif);font-weight:600;font-size:clamp(24px,3.9vw,66px);color:#eae3ed;letter-spacing:.025em;transform:rotate(-4deg)}
.hero-bottom{z-index:12;bottom:50px}
.hero-progress{z-index:12;height:2px;background:#ffffff22}
.hero-progress span,.hero.is-playing .hero-progress span{animation:none!important;width:calc(var(--progress)*100%);background:#e3ed54}
.scene-index{font-size:13px;color:#eee8f0;min-width:50px}
.control{background:#0b112344}.control[aria-pressed="true"]{background:#e3ed54}
.hero[data-mode="city"] .hero-brush{transform:rotate(-13deg) translateX(var(--type-x,0px))}
.work-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;mask-image:linear-gradient(to right,#000 0 23%,transparent 23% 25%,#000 25% 48%,transparent 48% 50%,#000 50% 73%,transparent 73% 75%,#000 75% 100%)}
.slice-windows.has-video .work-preview{display:block}.slice-windows.has-video .slice{background:none}
.marquee{background:#e3ed54}.work-image img{filter:none;transform:scale(1.02)}
@media(max-width:760px){
.hero{min-height:640px}.hero-title{top:35%;left:24px;font-size:29vw}.hero-brush{left:10%;top:57%;font-size:12vw}
.hero-image>img{object-position:52% center}.hero-bottom{left:26px;right:22px;bottom:40px}.hero-meta{font-size:10px;left:27px}
.hero-rail{right:22px}.slice-windows{left:7%;right:7%;top:29%;bottom:29%;gap:7px}.slice{background-size:auto 125%;background-position:calc(var(--i)*100%/3) center}
.slice-caption{left:7%;top:45%;font-size:12vw}.slice-foot{left:8%;bottom:25%;font-size:11px;letter-spacing:.1em}
.ribbon-picture{height:30%;background-size:auto 125%}.ribbon-outline{top:27%;font-size:27vw}.ribbon-caption{top:62%;right:7%;font-size:6vw}
.hero-description{max-width:210px;font-size:12px}.hero-description span{font-size:9px;letter-spacing:.14em}.intro-lettering{font-size:52px;padding:26px}.intro-stroke{width:25vw}
}
@media(max-width:430px){.hero-description{max-width:180px}.hero-bottom{gap:8px}.hero-scene-control{gap:6px}.control{width:32px;height:32px}}
@media(prefers-reduced-motion:reduce){.motion-intro,.iris-cover,.iris-ring,.slice-stage,.ribbon-stage,.light-pass{display:none}.hero-title,.hero-brush{opacity:1!important}}