/* Persistent signature logo: the ink never disappears; only its color reveal changes. */
.portfolio-header .studio-mark{width:146px;flex-basis:146px;height:58px;padding:7px 10px;background:transparent!important;border:0;box-shadow:none;border-radius:30px;color:var(--ink);overflow:hidden;--signature-color:#111116;--signature-base:#111116}
.portfolio-header .studio-mark .signature-logo{display:block;width:100%;height:100%;object-fit:contain;background:transparent;filter:none;pointer-events:none;opacity:1;visibility:visible;transition:none}
.portfolio-header .studio-mark::after{content:'';position:absolute;inset:7px 10px;background:var(--signature-color);-webkit-mask:url('assets/hemanth-signature-transparent.png') center/contain no-repeat;mask:url('assets/hemanth-signature-transparent.png') center/contain no-repeat;opacity:0;pointer-events:none}
.portfolio-header .studio-mark.signature-colored .signature-logo{opacity:0}
.portfolio-header .studio-mark.signature-colored::after{opacity:1;clip-path:inset(0)}
.portfolio-header .studio-mark.signature-from-menu::after{opacity:1;animation:signature-menu-reveal .42s cubic-bezier(.22,1,.36,1) both}
.portfolio-header .studio-mark.signature-from-bottom::after{opacity:1;animation:signature-bottom-reveal .48s cubic-bezier(.22,1,.36,1) both}
@keyframes signature-menu-reveal{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0)}}
@keyframes signature-bottom-reveal{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
.navigation-reveal,.portfolio-header:before{left:184px}
@media(max-width:1100px){.navigation-reveal,.portfolio-header:before{left:20px}}
@media(max-width:600px){.portfolio-header .studio-mark{width:112px;flex-basis:112px;height:50px;padding:5px 8px}.portfolio-header .studio-mark::after{inset:5px 8px}}
@media(prefers-reduced-motion:reduce){.portfolio-header .studio-mark::after{animation:none!important;clip-path:none!important}}

/* Signature click status: a live dot only — no label, pill, border, or background. */
.portfolio-header .studio-mark{overflow:visible}
.portfolio-header .studio-mark::after{display:none!important}
.portfolio-header .studio-mark.signature-colored .signature-logo{opacity:1!important}
.logo-live{position:absolute;left:50%;top:-7px;transform:translateX(-50%) scale(.8);width:8px;height:8px;padding:0;border:0;background:transparent;opacity:0;transition:opacity .2s ease,transform .2s ease;pointer-events:none}
.logo-live i{position:relative;display:block;width:8px!important;height:8px!important;margin:0!important;border-radius:50%;background:#22c55e!important}
.logo-live i::after{content:'';position:absolute;inset:0;border-radius:50%;background:#22c55e;animation:live-ring 1.55s cubic-bezier(.2,.65,.3,1) infinite}
.studio-mark.is-active .logo-live{opacity:1;transform:translateX(-50%) scale(1)}
@keyframes live-ring{0%{transform:scale(1);opacity:.65}75%,100%{transform:scale(2.7);opacity:0}}

/* Profile coach: text types first, then the hand-drawn arrow lands on the profile control's side. */
.profile-coach{position:absolute;left:0;top:0;width:240px;height:126px;z-index:8;pointer-events:none;color:var(--profile-coach-ink);transition:opacity .3s ease,transform .3s ease}
.profile-coach.dismissed{opacity:0;transform:translateY(-5px)}
.coach-text{position:absolute;left:0;top:90px;width:100%;font-family:Georgia,'Times New Roman',serif;font-size:14px;font-style:italic;white-space:normal;text-align:center;line-height:1.4}
.coach-arrow{position:absolute;inset:0 auto auto 0;width:100%;height:auto;aspect-ratio:240 / 86;overflow:visible}
.coach-line,.coach-head{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:260;stroke-dashoffset:260}
.profile-coach.draw .coach-line{animation:coach-draw .72s ease forwards}.profile-coach.draw .coach-head{animation:coach-draw .28s .6s ease forwards}
@keyframes coach-draw{to{stroke-dashoffset:0}}
@media(max-width:850px){.profile-coach{width:220px}.coach-text{font-size:13px;top:82px}}
@media(max-width:560px){.profile-coach{width:200px}.coach-text{font-size:12px;top:74px}}
@media(prefers-reduced-motion:reduce){.logo-live i::after{animation:none}.coach-line,.coach-head{stroke-dashoffset:0!important;animation:none!important}}

/* Pass 6 — live signal sits at the signature's upper-left and follows the active menu accent. */
.logo-live{left:9px!important;top:5px!important;transform:scale(.8)!important}
.logo-live i,.logo-live i::after{background:var(--active-accent,var(--accent,#6263e7))!important;transition:background-color .45s ease}
.studio-mark.is-active .logo-live{transform:scale(1)!important}
/* One continuous curve, from above the text to the switcher's left edge. */
.coach-line,.coach-head{stroke-width:1.8;vector-effect:non-scaling-stroke}


/* Pass 8 — live dot matches the single menu accent. */
.logo-live i,.logo-live i::after{background:var(--menu-live-accent,#6263e7)!important}
/* Typing is visible character-by-character; arrow begins only after it completes. */
.coach-text::after{content:'';display:inline-block;width:1px;height:1em;margin-left:2px;vertical-align:-.12em;background:currentColor;opacity:0}
.profile-coach.typing .coach-text::after{opacity:1;animation:coach-caret .7s steps(1,end) infinite}
.profile-coach.typed .coach-text::after{opacity:0}
@keyframes coach-caret{0%,48%{opacity:1}49%,100%{opacity:0}}