/* Option 1: a soft glass introduction among the existing glossy toys. */
.portfolio-introduction{position:absolute;z-index:6;left:50%;top:34%;width:46%;max-width:850px;transform:translateX(-50%);text-align:center;pointer-events:none}
.intro-name{width:46%;max-width:370px;margin:0 auto 8px;line-height:0;filter:drop-shadow(0 7px 12px #0007);pointer-events:auto;touch-action:auto;cursor:default}
.intro-name img{display:block;width:100%;height:auto;transform-origin:50% 50%;pointer-events:none;user-select:none;-webkit-user-drag:none}
.wordmark-note{display:block;width:100%;padding:0;border:0;background:transparent;color:inherit;font:inherit;line-height:0;border-radius:30%;touch-action:auto;cursor:pointer}
.wordmark-note:focus-visible{outline:2px solid #efc0fa;outline-offset:6px}
.wordmark-note.note-hit img{filter:brightness(1.08)}
.intro-glass{position:relative;isolation:isolate;min-height:180px;display:grid;place-items:center;padding:40px 39px 46px}
.intro-glass-art{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:-1}
.intro-glass p{margin:0;color:#f5f2f6;font-size:clamp(16px,1.72vw,28px);line-height:1.36;letter-spacing:-.025em;font-weight:500;text-wrap:pretty;text-shadow:0 1px 4px #0008;pointer-events:auto}
.intro-glass a{text-decoration-line:underline;text-decoration-color:#e4c2eb73;text-decoration-thickness:1px;text-underline-offset:4px;transition:color .18s,text-decoration-color .18s}
.intro-glass a:hover,.intro-glass a:focus-visible,.intro-glass a.note-hit{color:#f2c8f8;text-decoration-color:currentColor}
.intro-glass a:focus-visible{outline-offset:3px;border-radius:3px}
.experience-intro .portfolio-introduction{opacity:0;visibility:hidden}
.experience-revealing .portfolio-introduction{animation:intro-arrive .65s .65s both}
@keyframes intro-arrive{from{opacity:0;translate:0 15px;filter:blur(5px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@media(min-width:761px) and (max-aspect-ratio:6/5){.stage{height:85vw;min-height:680px;max-height:1100px}.portfolio-introduction{top:33%}}
@media(max-width:760px){
 .stage[data-collection=selected]{height:calc(77vw + 1040px);min-height:0;max-height:none}
 .portfolio-introduction{top:77vw;width:calc(100% - 28px);max-width:640px}
 .intro-name{width:48%;max-width:285px;margin-bottom:6px}
 .intro-glass{min-height:210px;padding:35px 30px 42px}
 .intro-glass p{font-size:clamp(17px,3.15vw,23px);line-height:1.4;letter-spacing:-.025em}
 .stage[data-collection=selected] .float-anchor:nth-child(1){--x:-1%!important;--y:12px!important;--w:51%!important}
 .stage[data-collection=selected] .float-anchor:nth-child(2){--x:51%!important;--y:12vw!important;--w:49%!important}
 .stage[data-collection=selected] .float-anchor:nth-child(3){--x:25%!important;--y:37vw!important;--w:50%!important}
 .stage[data-collection=selected] .float-anchor:nth-child(4){--x:-2%!important;--y:calc(77vw + 330px)!important;--w:54%!important}
 .stage[data-collection=selected] .float-anchor:nth-child(5){--x:49%!important;--y:calc(77vw + 420px)!important;--w:52%!important}
 .stage[data-collection=selected] .float-anchor:nth-child(6){--x:-1%!important;--y:calc(77vw + 610px)!important;--w:55%!important}
 .stage[data-collection=selected] .float-anchor:nth-child(7){--x:47%!important;--y:calc(77vw + 700px)!important;--w:53%!important}
 .instrument-shape[data-instrument='0']{--sx:73%!important;--sy:51vw!important;--sw:14%!important}
 .instrument-shape[data-instrument='1']{--sx:10%!important;--sy:61vw!important;--sw:10%!important}
 .instrument-shape[data-instrument='2']{--sx:12%!important;--sy:calc(77vw + 520px)!important;--sw:16%!important}
 .instrument-shape[data-instrument='3']{--sx:77%!important;--sy:calc(77vw + 320px)!important;--sw:12%!important}
 .instrument-shape[data-instrument='4']{--sx:65%!important;--sy:calc(77vw + 640px)!important;--sw:11%!important}
}
@media(prefers-reduced-motion:reduce){.experience-revealing .portfolio-introduction{animation:none}.intro-glass a{transition:none}.intro-name.wordmark-engaged img{filter:brightness(1.08)}}

/* A taller composition gives the projects room and invites natural scrolling. */
@media(min-width:761px){
 .stage[data-collection=selected]{height:max(1500px,155svh);min-height:1500px;max-height:none;overflow:visible}
 .portfolio-introduction{top:33%}
}
@media(max-width:760px){
 .stage[data-collection=selected]{height:calc(77vw + 1280px)}
 .stage[data-collection=selected] .float-anchor:nth-child(5){--y:calc(77vw + 490px)!important}
 .stage[data-collection=selected] .float-anchor:nth-child(6){--y:calc(77vw + 760px)!important}
 .stage[data-collection=selected] .float-anchor:nth-child(7){--y:calc(77vw + 920px)!important}
 .instrument-shape[data-instrument='2']{--sy:calc(77vw + 620px)!important}
 .instrument-shape[data-instrument='4']{--sy:calc(77vw + 870px)!important}
}

/* Reserve a quiet pocket around every screen before it is hovered. */
@media(min-width:761px){
 .stage[data-collection=selected] .float-anchor:nth-child(1){--x:3%!important;--w:25%!important}
 .stage[data-collection=selected] .float-anchor:nth-child(2){--x:74%!important;--w:22%!important}
 .stage[data-collection=selected] .float-anchor:nth-child(3){--x:39%!important;--w:22%!important}
 .stage[data-collection=selected] .float-anchor:nth-child(4){--x:2%!important;--w:21%!important}
 .stage[data-collection=selected] .float-anchor:nth-child(5){--x:79%!important;--w:19%!important}
 .stage[data-collection=selected] .float-anchor:nth-child(6){--x:4%!important;--w:23%!important}
 .stage[data-collection=selected] .float-anchor:nth-child(7){--x:74%!important;--w:22%!important}
}
@media(max-width:760px){
 .stage[data-collection=selected] .float-anchor:nth-child(1){--x:2%!important;--w:43%!important}
 .stage[data-collection=selected] .float-anchor:nth-child(2){--x:55%!important;--w:43%!important}
 .stage[data-collection=selected] .float-anchor:nth-child(3){--x:28%!important;--w:43%!important}
 .stage[data-collection=selected] .float-anchor:nth-child(4){--x:2%!important;--w:44%!important}
 .stage[data-collection=selected] .float-anchor:nth-child(5){--x:54%!important;--w:43%!important}
 .stage[data-collection=selected] .float-anchor:nth-child(6){--x:2%!important;--w:45%!important}
 .stage[data-collection=selected] .float-anchor:nth-child(7){--x:52%!important;--w:45%!important}
}

/* Each original glossy letter has its own fixed hit area and musical note. */
.intro-name{display:flex;position:relative;width:64%;max-width:390px;aspect-ratio:2172/724;line-height:0;margin-bottom:14px;isolation:isolate;overflow:visible}
.wordmark-letter{position:relative;flex:0 0 var(--letter-width);height:100%;min-height:44px;padding:0;border:0;background:transparent;overflow:visible;touch-action:pan-y pinch-zoom;cursor:pointer;border-radius:30%}
.intro-name .letter-art{display:block;width:100%;height:100%;pointer-events:none;user-select:none;overflow:hidden}
.wordmark-letter:focus-visible{outline:2px solid #efc0fa;outline-offset:3px}
@media(max-width:760px){.intro-name{width:92%;max-width:350px;margin-bottom:16px}}
/* Reserve mobile breathing room for the persistent project labels. */
@media(max-width:760px){
 .stage[data-collection=selected]{height:calc(77vw + 1460px)}
 .stage[data-collection=selected] .float-anchor:nth-child(3){--y:calc(37vw + 70px)!important}
 .portfolio-introduction{top:calc(77vw + 80px)}
 .stage[data-collection=selected] .float-anchor:nth-child(4){--y:calc(77vw + 470px)!important}
 .stage[data-collection=selected] .float-anchor:nth-child(5){--y:calc(77vw + 650px)!important}
 .stage[data-collection=selected] .float-anchor:nth-child(6){--y:calc(77vw + 920px)!important}
 .stage[data-collection=selected] .float-anchor:nth-child(7){--y:calc(77vw + 1100px)!important}
 .instrument-shape[data-instrument='0']{--sy:calc(51vw + 80px)!important}
 .instrument-shape[data-instrument='1']{--sy:calc(61vw + 80px)!important}
}
/* Soft Jelly: transform the complete letter wrapper, not a cut from overlapping artwork. */
.intro-name .wordmark-letter {transform-origin:50% 57%;transition:transform 320ms cubic-bezier(.2,.8,.3,1);}
.intro-name .wordmark-letter:is(:focus-visible,.letter-tapped) {transform:translateY(-4px) scale(1.22);animation:letter-soft-jelly 520ms both;z-index:5;}
.intro-name .wordmark-letter:is(:focus-visible,.letter-tapped) .letter-art {filter:brightness(1.06);}
@keyframes letter-soft-jelly {0%{transform:translateY(0) scale(1)}28%{transform:translateY(-3px) scale(1.28,1.13)}58%{transform:translateY(-5px) scale(1.17,1.27)}80%{transform:translateY(-4px) scale(1.24,1.2)}100%{transform:translateY(-4px) scale(1.22)}}
@media(hover:hover) and (pointer:fine){.intro-name .wordmark-letter:hover{z-index:5;transform:translateY(-4px) scale(1.22);animation:letter-soft-jelly 520ms both}.intro-name .wordmark-letter:hover .letter-art{filter:brightness(1.06)}}
.motion-paused .intro-name .wordmark-letter,.experience-intro .intro-name .wordmark-letter,.experience-revealing .intro-name .wordmark-letter {animation:none!important;transform:none!important;}
@media(prefers-reduced-motion:reduce){.intro-name .wordmark-letter{animation:none!important;transition:none!important;transform:none!important}}
/* Restore the source wordmark's tight overlap and rising/falling baseline. */
.intro-name .wordmark-letter {position:absolute;left:var(--glyph-x);top:var(--glyph-y);width:var(--glyph-w);height:var(--glyph-h);min-height:0;z-index:var(--glyph-layer);}
.intro-name .wordmark-letter:is(:focus-visible,.letter-tapped){z-index:20;}
@media(hover:hover) and (pointer:fine){.intro-name .wordmark-letter:hover{z-index:20;}}
/* Lift the introduction without moving the project constellation or mobile stack. */
@media(min-width:761px){html:not(.mobile-portfolio) .portfolio-introduction{top:calc(33% - 80px)}}