/* Exact original Figma marks remain upright within each portrait card. */
.hero-journey .curious-copy h1{font-size:clamp(56px,10.6vw,154px)}
.hero-journey .curious-copy em.pen-design{width:5.1em;font-size:.66em;top:-.37em}
.hero-journey .curious-description,.hero-journey .hero-contours{display:none}
.hero-journey .hero-person{width:min(40vw,calc(57svh * .77));height:57%;top:34%;mask-image:linear-gradient(90deg,transparent,#000 17%,#000 83%,transparent),linear-gradient(transparent,#000 12%,#000 75%,transparent);mask-composite:intersect}
.hero-journey .career-signature{top:79%;width:min(35vw,490px)}
.hero-journey .about-skills{top:auto;bottom:3%;font-size:9px}
.computer-interaction:before{content:'•••';display:none;position:absolute;top:-38px;left:50%;transform:translateX(-50%);color:#f7c4ce;font-size:23px;letter-spacing:8px;animation:loading-dots 1.2s ease-in-out infinite;z-index:10}
.is-loading .computer-interaction:before{display:block}
@keyframes loading-dots{0%,100%{opacity:.25;translate:0 0}50%{opacity:1;translate:0 -4px}}
.lyra-kinetic,.lyra-purpose,.lyra-memory,.lyra-ui{background:#e5e5e2}
.lyra-kinetic-stage{min-height:100svh;padding-bottom:80px}
.lyra-original-title{text-align:center;padding-top:40px;position:relative;z-index:2}
.lyra-original-title>img{width:70px;height:81px;object-fit:contain}
.lyra-kinetic .lyra-original-title h2{font-size:clamp(28px,3.5vw,52px);letter-spacing:-.04em;line-height:1.12;margin:30px 0 8px;font-weight:800}
.lyra-original-title>p{font-size:clamp(16px,1.7vw,25px);margin:0}
.lyra-original-device{position:absolute;left:8%;top:49%;width:36%;margin:0;z-index:1}
.lyra-original-device img{width:100%;object-fit:contain;mix-blend-mode:multiply}
.lyra-kinetic .lyra-intro-copy{margin:70px 0 0 52%;width:40%;position:relative;z-index:2}
.lyra-kinetic .lyra-intro-copy h3{font-size:28px;line-height:1.2}
.lyra-kinetic .lyra-intro-copy p{font-size:16px;line-height:2}
.lyra-kinetic .lyra-meta{margin:25px 0 0 52%;width:40%;position:relative;z-index:2}
@media(max-width:760px){.hero-journey .curious-copy h1{font-size:10.7vw}.hero-journey .hero-person{width:74vw;height:46%;top:36%}.hero-journey .career-signature{top:84%;width:64vw}.hero-journey .about-skills{bottom:2%;font-size:7px}.lyra-original-title{padding-top:40px}.lyra-original-device{position:relative;top:auto;left:auto;width:65%;margin:35px auto}.lyra-kinetic .lyra-intro-copy,.lyra-kinetic .lyra-meta{margin:24px 0 0;width:100%}.lyra-kinetic .lyra-intro-copy p{font-size:14px}}
@media(prefers-reduced-motion:reduce){.computer-interaction:before{animation:none}}

/* Glyphs retain their full outline throughout the roll. */
.hero-journey .portfolio-roll{overflow:visible;line-height:1.12}
.hero-journey .portfolio-roll>span[aria-hidden]{overflow:visible!important}
.hero-journey .curious-title-line,.hero-journey .curious-copy,.hero-journey .curious-copy h1{overflow:visible}
.hero-journey .curious-copy{z-index:6}
.hero-journey .curious-copy h1{max-width:none;letter-spacing:-.055em;font-size:clamp(48px,9.9vw,146px)}
@media(max-width:760px){.hero-journey .curious-copy h1{font-size:10.1vw}}

/* Reserve a quiet title area above the orbit, including scattered cards. */
.hero-journey .curious-copy{top:13%;width:88%;padding:0}
.hero-journey .curious-copy h1{font-size:clamp(44px,7.5vw,132px);line-height:1.12}
.hero-journey .curious-copy em.pen-design{font-size:.68em;top:-.55em}
@media(max-width:760px){.hero-journey .curious-copy{top:19%;width:92%}.hero-journey .curious-copy h1{font-size:10vw}.hero-journey .curious-copy em.pen-design{top:-.62em}}

/* Signature sits over the upper half of the headline. */
.hero-journey .curious-copy em.pen-design{top:.02em;z-index:8}
@media(max-width:760px){.hero-journey .curious-copy em.pen-design{top:.02em}}

/* The autograph remains solid ink, with staggered lines and overlapping descenders. */
.hero-journey .career-signature.pen-signature{top:74%;width:min(39vw,550px);z-index:9;filter:none!important;mask:none!important;-webkit-mask:none!important;overflow:visible;color:#ff398c;transform:translateX(-50%) rotate(-4deg)}
.hero-journey .career-signature .signature-drawing{filter:none!important;mask:none!important;-webkit-mask:none!important;overflow:visible}
.hero-journey .hero-story:after{display:none}
.hero-journey .about-skills{bottom:1.5%}
@media(max-width:760px){.hero-journey .career-signature.pen-signature{top:76%;width:74vw}}

/* Both aligned portrait layers move together; large paper fragments settle onto the face. */
.hero-journey .hero-person{top:27%}
.hero-journey .collage-piece{transform-origin:50% 40%;transform:translate(var(--scatter-x),var(--scatter-y)) rotate(var(--turn)) scale(2.7);transition:transform 1.65s cubic-bezier(.2,.85,.25,1.08),opacity .45s;transition-delay:var(--delay)}
.hero-journey .is-collaged .collage-piece{transform:translate(0,0) rotate(0) scale(1)}
.liquid-rim{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:visible}
.hero-journey .career-signature.pen-signature{width:min(47vw,670px);top:73%}
@media(max-width:760px){.hero-journey .hero-person{top:29%}.hero-journey .career-signature.pen-signature{top:76%;width:86vw}}
@media(prefers-reduced-motion:reduce){.hero-journey .collage-piece{transform:none;transition:none}}

.portrait-liquid{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}.liquid-rim{display:none}

/* New 1440 × 1490 Figma opening and the film share one dark surface. */
.lyra-figma-opening,.lyra-film{background:#181818;color:#dfdfdf}
.lyra-figma-opening{position:relative;overflow:hidden}
.lyra-film video{background:#181818}
.lyra-film-caption,.lyra-film>.lyra-eyeline{color:#aaa6a4}
.project-header-logo{position:absolute;left:50%;top:50%;width:31px;height:36px;display:block;opacity:0;pointer-events:none;transform:translate(-50%,-20%) scale(2.1);transform-origin:center;transition:transform .75s cubic-bezier(.16,1,.3,1),opacity .35s;z-index:2}
.project-header-logo img{display:block;width:100%;height:100%;object-fit:contain}
.project-header-logo.is-visible{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.react-morph-field .figma-design img{filter:none}
@media(prefers-reduced-motion:reduce){.project-header-logo{transition:none}}

/* Keep the introduction close to the portrait, aligned toward its center. */
.hero-journey .about-identity{text-align:right}
.hero-journey .about-identity .about-kicker{left:0;right:0;width:100%;text-align:right}
@media(min-width:761px){
 .hero-journey .about-identity{left:auto;right:calc(50% + min(20vw,21.945svh) + 22px);width:25%}
 .hero-journey .about-copy{left:calc(50% + min(20vw,21.945svh) + 22px);right:auto;width:26%;max-width:390px}
}
@media(max-width:760px){
 .hero-journey .about-identity{left:9%;width:30%}
 .hero-journey .about-copy{left:53%;right:auto;width:41%}
}