:root{--bg:#0e1d15;--fg:#f1efe6;--muted:rgba(241,239,230,.6)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{background:var(--bg);color:var(--fg);font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;user-select:none;-webkit-user-drag:none}

.nav{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:28px 36px;font-size:14px;letter-spacing:.01em;mix-blend-mode:difference;color:#fff}
.nav__links{display:flex;align-items:center;gap:32px}
.nav__view{background:none;border:0;color:inherit;cursor:pointer;display:grid;place-items:center;padding:4px}

.hero{height:420vh;position:relative}
.stage{position:sticky;top:0;height:100vh;overflow:hidden}

.title{position:absolute;left:36px;top:84px;z-index:3;font-weight:500;line-height:.86;letter-spacing:-.045em;font-size:clamp(64px,10.6vw,190px);will-change:transform,opacity}
.title span{display:inline-block}
.title small{display:block;margin-top:22px;font-size:15px;font-weight:400;letter-spacing:.01em;color:var(--muted)}

.box{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;z-index:2}
.box__img{width:100%;height:100%;position:absolute;inset:0;filter:drop-shadow(0 30px 50px rgba(0,0,0,.45))}
.win{position:absolute;overflow:hidden;border-radius:2.4%/5.5%}
.win__base,.layer{position:absolute;inset:0;width:100%;height:100%;will-change:transform}
.layer{transform-origin:50% 50%}

.caption{position:absolute;left:36px;right:36px;bottom:34px;z-index:5;display:flex;align-items:baseline;gap:18px;font-size:14px;opacity:0;pointer-events:none;text-shadow:0 1px 14px rgba(0,0,0,.55)}
.caption__n{font-variant-numeric:tabular-nums}
.caption__t{font-size:clamp(28px,3.4vw,54px);font-weight:500;letter-spacing:-.03em}
.caption__c{color:var(--fg);opacity:.85}
.caption__a{margin-left:auto;pointer-events:auto;border-bottom:1px solid currentColor;padding-bottom:2px}

.hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:5;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.hint{display:none}}