/* Dev option 4: clean scene cuts and cloth responding to the hidden hand. */
.hero{height:100svh;min-height:880px;max-height:1180px}
.portrait{width:min(98vw,94svh,960px);height:min(98vw,94svh,960px);top:-110px;mask-image:linear-gradient(#000 0%,#000 64%,transparent 88%);-webkit-mask-image:linear-gradient(#000 0%,#000 64%,transparent 88%)}
.hero-copy{bottom:68px}
.hero-copy h1{font-size:70px}
.hero-description{font-size:19px}
.interaction{margin-top:22px}
.mode-controls{flex-direction:row;justify-content:center;gap:24px}
.camera-note{margin-top:13px}
.interaction-status{margin-top:7px;min-height:18px}
.camera-button,.text-button,.change-button{min-height:40px}
.change-button{padding:4px 14px}
.scroll-link{bottom:24px}
.costume-world{background:#030303}
.story-scroll{height:300svh;min-height:2220px;position:relative}
.scene-anchor{position:absolute;left:0;width:1px;height:1px;pointer-events:none}
.story-stage{position:sticky;top:0;height:100svh;min-height:700px;overflow:hidden;isolation:isolate;perspective:1500px}
.robe-space{position:absolute;inset:0;z-index:-2}
.robe-layer{position:absolute;width:min(100vw,1180px);height:auto;max-width:none;left:50%;top:50%;transform:translate(-50%,-45%);will-change:transform;pointer-events:none;user-select:none;filter:brightness(.82)}
.robe-left{clip-path:inset(0 50% 0 0)}
.robe-right{clip-path:inset(0 0 0 50%)}
.scene-vignette{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(#030303 0%,transparent 14%,transparent 82%,#030303 100%),linear-gradient(90deg,#030303 0%,transparent 12%,transparent 30%,#03030366 42%,#03030366 58%,transparent 70%,transparent 88%,#030303 100%)}
.scene-copy{position:absolute;z-index:10;left:50%;transform:translateX(-50%);width:min(440px,44vw);text-align:center;opacity:0;visibility:hidden;will-change:transform,opacity}
.scene-copy h2,.closing-copy h2{font-size:clamp(35px,3.6vw,53px);line-height:1.07;letter-spacing:-.045em;font-weight:400;text-wrap:balance;margin:0 0 26px}
.scene-copy p,.closing-copy p{font-size:18px;line-height:1.75;color:#ccc3b5;margin:0 0 22px;text-wrap:pretty}
.faces-copy{top:12%}
.embroidery-copy{top:24%;left:28%;width:350px;text-align:left}
.reveal-copy{top:10%;width:min(480px,50vw)}
.reveal-copy p{font-size:17px}
.face-fan{position:absolute;inset:0;perspective:1000px;pointer-events:none}
.study-face,.closing-face{position:absolute;width:250px;height:250px;overflow:visible;filter:drop-shadow(0 12px 20px #000);backface-visibility:hidden;will-change:transform,opacity}
.face-surface{width:100%;height:100%;background-image:url('assets/specimens.png');background-size:300% 100%;background-position:0% 0%;background-repeat:no-repeat}
.study-face{top:50%;left:50%;transform-origin:50% 90%}
.study-red .face-surface{background-position:0% 0%}
.study-blue .face-surface{background-position:50% 0%}
.study-gold .face-surface,.closing-face .face-surface{background-position:100% 0%}
.embroidery-study{position:absolute;inset:0;opacity:0;pointer-events:none;overflow:hidden;mask-image:linear-gradient(90deg,transparent 28%,#000 66%);-webkit-mask-image:linear-gradient(90deg,transparent 28%,#000 66%)}
.embroidery-surface{height:100%;width:100%;background-image:url('assets/embroidery-macro.png');background-size:cover;background-repeat:no-repeat;background-position:100% 50%;transform-origin:75% 50%;filter:brightness(.83)}
.inside-action{position:absolute;inset:0;pointer-events:none;z-index:3;perspective:1000px}
.inside-shadow{position:absolute;width:170px;height:310px;left:64%;top:34%;border-radius:50%;background:#000;filter:blur(30px);opacity:0;transform:rotate(-9deg)}
.reveal-pair{position:absolute;width:440px;height:440px;left:50%;top:50%;transform-origin:68% 38%;will-change:transform,opacity;opacity:0}
.inside-hand{position:absolute;inset:0;width:100%;height:100%;filter:grayscale(1);opacity:.28;mask-image:linear-gradient(35deg,transparent 3%,#000 42%);-webkit-mask-image:linear-gradient(35deg,transparent 3%,#000 42%)}
.held-mask{position:absolute;inset:0;opacity:0;mask-image:linear-gradient(35deg,transparent 8%,#000 42%);-webkit-mask-image:linear-gradient(35deg,transparent 8%,#000 42%)}
.held-mask img{position:absolute;inset:0;width:100%;height:100%}
.held-ghost{opacity:.25}
.held-face{clip-path:polygon(57% 1%,70% 3%,78% 10%,82% 20%,82% 32%,79% 42%,76% 47%,71% 47%,67% 53%,62% 58%,55% 62%,49% 61%,44% 57%,39% 47%,34% 34%,33% 22%,38% 12%,46% 5%)}
.lapel-foreground{position:absolute;inset:0;pointer-events:none;z-index:6;opacity:0}
.lapel-foreground .robe-layer{clip-path:polygon(68% 0,100% 0,100% 100%,59% 100%,64% 85%,68% 67%,70% 50%,67% 34%,68% 18%)}
.scene-controls{position:absolute;left:50%;bottom:37px;transform:translateX(-50%);z-index:12;display:flex;flex-direction:column;align-items:center;gap:5px}
.scene-controls nav{display:flex;gap:26px;align-items:center}
.scene-controls nav button{background:none;border:0;border-bottom:1px solid transparent;padding:10px 0;font-size:14px;color:#a79c89;min-height:42px}
.scene-controls nav button[aria-pressed="true"]{color:#eee9de;border-bottom-color:#b09a6e}
.scene-controls #replay-button{position:static;transform:none;visibility:hidden;min-height:34px;font-size:13px}
.interpretation-note{bottom:122px;opacity:0;visibility:hidden;font-size:12px;color:#9d917c}
.closing-scene{position:relative;min-height:72svh;max-width:1080px;margin:auto;display:grid;grid-template-columns:1fr 1.1fr;gap:9%;align-items:center;padding:80px 55px;background:#030303}
.closing-copy h2{font-size:43px;margin-bottom:27px}
.closing-copy{text-align:left;position:relative;z-index:2}
.closing-copy p{font-size:18px}
.closing-faces{height:430px;position:relative;perspective:900px}
.closing-face{left:50%;top:50%;width:325px;height:325px;transform:translate(-50%,-50%) rotateY(20deg) rotate(-5deg)}
.closing-copy .back-to-mask{margin-top:36px}
.site-footer{min-height:130px;padding-top:25px}
@media(min-width:1600px){.hero-copy{bottom:70px}.portrait{top:-105px}.robe-layer{width:1250px}}
@media(max-height:820px) and (min-width:761px){.hero{min-height:790px}.portrait{width:790px;height:790px;top:-128px}.hero-copy{bottom:50px}.hero-copy h1{font-size:58px}.hero-description{font-size:17px}.gesture-instruction{margin-bottom:12px}.interaction{margin-top:16px}.scroll-link{bottom:15px}.story-stage{min-height:650px}.faces-copy{top:10%}.scene-copy h2{font-size:42px}.study-face{width:215px;height:215px}.scene-copy p{font-size:16px}.reveal-pair{width:400px;height:400px}}
@media(max-width:760px){
 .hero{min-height:805px;height:100svh}.portrait{width:680px;height:680px;top:-24px;mask-image:linear-gradient(#000 0%,#000 61%,transparent 82%);-webkit-mask-image:linear-gradient(#000 0%,#000 61%,transparent 82%)}
 .site-header{padding-top:20px;background:linear-gradient(#030303a8,transparent)}.site-header nav{gap:18px}.hero-copy{bottom:61px}.hero-copy h1{font-size:60px}.hero-description{font-size:17px}.mode-controls{gap:18px}.camera-button{min-width:160px;padding:11px 20px}.text-button{font-size:14px}.interaction{margin-top:24px}.gesture-instruction{font-size:14px;max-width:290px;margin-left:auto;margin-right:auto}.camera-note{font-size:12px}.scroll-link{bottom:18px}
 .story-scroll{height:300svh;min-height:2100px}.story-stage{min-height:650px}.robe-layer{width:max(100vw,620px);height:auto;top:50%;transform:translate(-50%,-48%)}
 .scene-vignette{background:linear-gradient(#030303 0%,transparent 18%,transparent 80%,#030303 100%),linear-gradient(90deg,#03030322,#03030399 24%,#03030366 50%,#03030399 76%,#03030322)}
 .scene-copy{width:76vw}.scene-copy h2{font-size:36px;margin-bottom:22px}.scene-copy p{font-size:16px;line-height:1.7}.faces-copy{top:11%}.study-face{width:158px;height:158px;top:49%}
 .embroidery-copy{width:76vw;left:50%;top:10%;text-align:left}.embroidery-copy h2{max-width:230px}.embroidery-copy p{max-width:310px}.embroidery-study{inset:0;width:100%;height:100%;mask-image:linear-gradient(transparent 45%,#000 64%,#000 82%,transparent);-webkit-mask-image:linear-gradient(transparent 45%,#000 64%,#000 82%,transparent)}.embroidery-surface{background-size:auto 72%;filter:brightness(.86)}
 .reveal-copy{top:11%;width:76vw}.reveal-copy p{font-size:15px}.reveal-pair{width:340px;height:340px}.scene-controls{bottom:31px}.scene-controls nav{gap:25px}.scene-controls nav button{font-size:14px}.interpretation-note{bottom:116px;width:70%;font-size:12px}.closing-scene{display:flex;flex-direction:column;gap:10px;padding:40px 12vw 60px;min-height:0}.closing-faces{height:280px;width:100%}.closing-face{width:240px;height:240px}.closing-copy{text-align:center}.closing-copy h2{font-size:35px}.closing-copy p{font-size:16px}.closing-copy .source-link{font-size:14px}.site-footer{padding-bottom:75px}
}

.interaction-meta{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:7px}.interaction-meta .camera-note{margin:0}.interaction-meta .change-button{padding-left:0;padding-right:0}.interaction-status:empty{display:none}
@media(max-width:760px){.interaction-meta{gap:18px}.interaction-meta .camera-note{font-size:11px}.interaction-meta .change-button{font-size:12px}}

.interaction-meta{flex-wrap:wrap}.interaction-meta .change-button{font-size:14px;min-height:44px;color:#ded5c6;text-decoration:underline;text-underline-offset:4px}