/* Portrait and moving name. */
#top.portrait-story{position:relative;background:var(--bg);color:var(--fg)}
#top .portrait-stage{position:relative;isolation:isolate;overflow:hidden;min-height:100svh}
#top .portrait-backdrop{position:absolute;inset:0;background:var(--bg);opacity:0;z-index:0;pointer-events:none}
#top .portrait-name{position:absolute;left:0;top:33%;display:flex;gap:.14em;width:max-content;margin:0;white-space:nowrap;font:400 25vw/.85 var(--dsp);letter-spacing:-.025em;text-transform:uppercase;color:var(--red);z-index:1;pointer-events:none}
#top .portrait-name>span{display:block;animation:hero-name-drift 32s linear infinite}
@keyframes hero-name-drift{to{transform:translateX(calc(-100% - .14em))}}
#top .portrait-intro{position:absolute;inset:0;z-index:6;height:100%;padding:0;pointer-events:none}
#top .portrait-actions{position:absolute;right:var(--pad);bottom:26px;pointer-events:auto}
#top .portrait-actions a{display:inline-flex;align-items:center;gap:24px;min-height:44px;font:500 16px/1 var(--sans);text-decoration:none}
#top .portrait-actions a span{font-size:22px;color:var(--red);transition:transform 180ms cubic-bezier(.23,1,.32,1)}
#top .portrait-actions a:hover span{transform:translate(3px,-3px)}
#top .portrait-person{position:relative;z-index:3;height:calc(100svh - 96px);width:max-content;margin:0 auto;transform-origin:50% 100%;pointer-events:none}
#top .portrait-person img{display:block;height:100%;width:auto;max-width:none}
#top .portrait-caption{position:relative;z-index:6;padding:64px var(--pad) 32px;text-align:center;font:400 clamp(36px,4.4vw,68px)/.95 var(--dsp);text-transform:uppercase}
#top .portrait-handoff{position:relative;z-index:6;padding:90px var(--pad);text-align:center;background:var(--bg)}
#top .portrait-handoff h2{font:400 clamp(32px,4.4vw,68px)/.95 var(--dsp);text-transform:uppercase}
#top .portrait-scroll{display:none}
/* Pinning starts only after the controller initializes; the default remains readable. */
#top.is-scrubbing{height:100svh}
#top.is-scrubbing .portrait-stage{position:relative;height:100svh;min-height:0}
#top.is-scrubbing .portrait-person{position:absolute;left:50%;top:auto;bottom:-1px;height:calc(100svh - 96px);max-height:none;margin:0;will-change:transform,opacity;transform:translateX(-50%)}
#top.is-scrubbing .portrait-design{display:none}
#top.is-scrubbing .portrait-handoff{position:absolute;inset:auto 0 80px;padding:0 var(--pad);background:none;opacity:0}
#top.is-scrubbing .portrait-scroll{display:flex;position:absolute;z-index:6;left:var(--pad);bottom:42px;gap:24px;margin:0;font:500 13px/1 var(--sans)}
@media(max-width:600px){
 #top .portrait-name{top:39%;font-size:49vw}
 #top.is-scrubbing .portrait-person{top:auto;bottom:-1px;height:calc(100svh - 96px);max-height:none;z-index:3}
 #top .portrait-actions{bottom:24px}
 #top .portrait-actions a{font-size:14px;gap:14px}
 #top.is-scrubbing .portrait-scroll{display:flex;font-size:12px;bottom:40px;gap:12px}
 #top .portrait-handoff h2{font-size:30px}
}
@media(prefers-reduced-motion:reduce){
 #top .portrait-name>span{animation:none}
 #top .portrait-name>span+span{display:none}
 #top .portrait-name{font-size:18.3vw;left:50%;transform:translateX(-50%)}
 #top .portrait-intro{height:100svh}
}

/* Original photograph; the extracted alpha is a mask only, so facial detail stays original. */
#top .portrait-person img[src$="habib-phone-real.webp"]{mask-image:url(/assets/img/habib-phone-real-mask.svg);-webkit-mask-image:url(/assets/img/habib-phone-real-mask.svg);mask-mode:alpha;mask-size:100% 100%;-webkit-mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat}