/* ==========================================================================
   Intro — a one-screen "who I am" for recruiters, shown before the ring.
   Scrolling, swiping or pressing ↓ collapses the sheet into the full stop of
   the name; that droplet falls to the centre, where the ring is born.
   Hidden unless <html> has .lh-intro-on (set in <head> before first paint).
   ========================================================================== */

.lh-intro{display:none}
html.lh-intro-on .lh-intro{display:block}
html.lh-intro-on body{overflow:hidden}
html.lh-intro-on .portfolio-name{opacity:0;pointer-events:none}
html.lh-intro-on .portfolio-header nav{background:transparent!important;box-shadow:none!important}
html.lh-intro-on :is(.portfolio-footer,.gesture-hint){opacity:0!important;visibility:hidden}
.portfolio-name,.portfolio-footer{transition:opacity .7s cubic-bezier(.22,1,.36,1) .2s}

.lh-intro{
 --ink:#0a0a0a;--muted:#62625f;--faint:#8d8d89;--paper:#fafafa;
 --glass:rgba(255,255,255,.55);
 --rim:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(0,0,0,.04),inset 0 0 0 1px rgba(255,255,255,.55);
 --lift:0 1px 1px rgba(20,20,20,.03),0 14px 34px -16px rgba(20,20,20,.18),0 40px 80px -44px rgba(20,20,20,.25);
 --spring:cubic-bezier(.34,1.56,.64,1);--ease:cubic-bezier(.22,1,.36,1);
 position:fixed;inset:0;z-index:22;overflow:hidden;color:var(--ink);background:var(--paper);
 font-family:Satoshi,Arial,sans-serif;-webkit-font-smoothing:antialiased;
 touch-action:pan-y;
}
.lh-intro[hidden]{display:none!important}

/* ---------- atmosphere: static gradients + one slow liquid body (transform only) ---------- */
.lh-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;
 background:
  radial-gradient(70vmax 55vmax at 92% 8%,rgba(214,222,226,.55),transparent 62%),
  radial-gradient(60vmax 50vmax at 4% 96%,rgba(232,226,214,.6),transparent 62%),
  var(--paper)}
.lh-bg::before{content:"";position:absolute;width:62vmax;height:62vmax;right:-14vmax;top:-8vmax;border-radius:50%;
 background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.95),rgba(236,236,233,.5) 48%,rgba(236,236,233,0) 70%);
}
.lh-bg::after{content:"";position:absolute;inset:0;opacity:.35;mix-blend-mode:multiply;
 background-image:radial-gradient(rgba(0,0,0,.08) .6px,transparent .7px);background-size:3px 3px}

/* ---------- layout ---------- */
.lh-inner{position:relative;height:100%;max-width:none;margin:0;padding:clamp(104px,13vh,136px) 3vw clamp(110px,15vh,150px);
 display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.9fr);gap:clamp(28px,4vw,72px);align-items:center}
.lh-lead{min-width:0;display:flex;flex-direction:column;gap:clamp(16px,2.4vh,26px)}

.lh-eyebrow{display:flex;align-items:center;gap:10px;margin:0;font-family:Geist,Arial,sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.lh-eyebrow b{font-weight:400;color:var(--ink)}
.lh-eyebrow .lh-sep{width:22px;height:1px;background:currentColor;opacity:.4}

/* ---------- the name: liquid letters with a lens under the cursor ---------- */
.lh-name{margin:0 0 .07em;font-weight:400;font-size:clamp(64px,10.6vw,172px);line-height:.86;letter-spacing:-.065em;color:var(--ink);user-select:none;cursor:default}
.lh-line{display:block;white-space:nowrap}
.lh-char{display:inline-block;transform-origin:50% 85%;will-change:transform}
.lh-intro:not(.is-ready) .lh-name{opacity:0}

.lh-name.is-forming .lh-char{animation:lh-form 1.25s var(--ease) both;animation-delay:calc(var(--i) * 45ms + .15s)}
@keyframes lh-form{
 0%{opacity:0;filter:blur(12px);transform:translate3d(0,42%,0) scale(.6,1.35)}
 45%{opacity:1;filter:blur(3px);transform:translate3d(0,-4%,0) scale(1.06,.94)}
 70%{filter:blur(0);transform:translate3d(0,1%,0) scale(.98,1.02)}
 100%{opacity:1;filter:none;transform:none}}
@media (max-width:900px),(hover:none){
 @keyframes lh-form{0%{opacity:0;transform:translate3d(0,40%,0) scale(.7,1.2)}100%{opacity:1;transform:none}}}
/* the full stop is a droplet — and the vessel the whole page later collapses into */
.lh-drop{display:inline-block;width:.17em;height:.17em;margin-left:.04em;border-radius:50%;vertical-align:baseline;
 background:radial-gradient(circle at 34% 30%,#5a5a58 0 10%,#0a0a0a 55%);box-shadow:inset -.02em -.03em .04em rgba(255,255,255,.25);
 transform-origin:50% 100%;animation:lh-wobble 3.6s ease-in-out 1.8s infinite}
.lh-name.is-forming .lh-drop{animation:lh-fall .9s var(--spring) 1s both}
@keyframes lh-fall{0%{opacity:0;transform:translateY(-1.2em) scale(.4,1.6)}60%{opacity:1;transform:translateY(.02em) scale(1.25,.72)}100%{transform:none}}
@keyframes lh-wobble{0%,100%{transform:none}45%{transform:scale(1.06,.94)}55%{transform:scale(.95,1.06)}}

.lh-pitch{margin:0;max-width:34ch;font-size:clamp(17px,1.45vw,22px);line-height:1.5;color:#3a3a37}
.lh-pitch em{font-style:normal;color:var(--ink);background:linear-gradient(transparent 62%,rgba(10,10,10,.08) 62%)}

/* ---------- actions ---------- */
.lh-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.lh-btn{--mx:50%;--my:0%;position:relative;display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:999px;font-size:14px;line-height:1;color:var(--ink);text-decoration:none;
 background:radial-gradient(160px circle at var(--mx) var(--my),rgba(255,255,255,.9),rgba(255,255,255,0) 70%),var(--glass);
 box-shadow:var(--rim),0 8px 20px -12px rgba(0,0,0,.25);transition:transform .5s var(--spring),box-shadow .4s;will-change:transform}
.lh-btn svg{width:15px;height:15px;transition:transform .5s var(--spring)}
.lh-btn:hover svg{transform:translate(2px,-2px)}
.lh-btn:active{transform:scale(.96)}
.lh-btn--ink{color:#fff;background:radial-gradient(160px circle at var(--mx) var(--my),rgba(255,255,255,.22),rgba(255,255,255,0) 70%),#111;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 26px -12px rgba(0,0,0,.55)}
.lh-btn:focus-visible,.lh-enter:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ---------- capabilities ---------- */
.lh-skills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px);margin-top:clamp(6px,2vh,22px);padding-top:clamp(14px,2vh,22px);border-top:1px solid rgba(10,10,10,.1)}
.lh-skill h3{margin:0 0 6px;font-size:13px;font-weight:500;display:flex;gap:8px;align-items:baseline}
.lh-skill h3 span{font-family:Geist,Arial,sans-serif;font-size:10px;color:var(--faint);font-weight:400}
.lh-skill p{margin:0;font-size:12.5px;line-height:1.55;color:var(--muted)}

/* ---------- portrait + facts ---------- */
.lh-side{position:relative;min-width:0;justify-self:end;width:min(100%,500px);display:grid;justify-items:end}
.lh-portrait{position:relative;margin:0;width:min(78%,370px,41vh);aspect-ratio:4/5;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .9s var(--ease);will-change:transform}
.lh-blob{position:absolute;inset:0;overflow:hidden;border-radius:46% 54% 48% 52% / 44% 46% 54% 56%;box-shadow:var(--lift);background:#e9eaea;transition:border-radius 1.6s var(--ease)}
.lh-portrait:hover .lh-blob{border-radius:56% 44% 58% 42% / 52% 40% 60% 48%}
.lh-blob img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.08) translate3d(var(--px,0px),var(--py,0px),0);transition:transform .9s var(--ease)}
.lh-blob::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
 background:radial-gradient(260px circle at var(--gx,30%) var(--gy,20%),rgba(255,255,255,.35),rgba(255,255,255,0) 60%);
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),inset 0 24px 50px -30px rgba(255,255,255,.7)}

.lh-status{position:absolute;left:-22px;top:12%;display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;font-size:12px;white-space:nowrap;
 background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);box-shadow:var(--rim),0 10px 24px -12px rgba(0,0,0,.3)}
.lh-live{position:relative;width:7px;height:7px;border-radius:50%;background:#1a1a1a}
.lh-live::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(10,10,10,.28);animation:lh-ping 2.4s ease-out infinite}
@keyframes lh-ping{0%{transform:scale(1);opacity:1}80%,100%{transform:scale(3.4);opacity:0}}

.lh-facts{position:relative;margin:-26% 0 0;justify-self:start;width:min(100%,400px);padding:8px;border-radius:26px;
 background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7);box-shadow:var(--rim),var(--lift)}
.lh-facts>p{margin:8px 12px 6px;font-family:Geist,Arial,sans-serif;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.lh-fact{--mx:50%;--my:50%;display:grid;grid-template-columns:86px minmax(0,1fr);gap:12px;align-items:baseline;padding:11px 12px;border-radius:18px;color:inherit;text-decoration:none;transition:background .35s}
.lh-fact:hover{background:radial-gradient(220px circle at var(--mx) var(--my),rgba(255,255,255,.95),rgba(255,255,255,.4) 70%)}
.lh-fact dt{font-family:Geist,Arial,sans-serif;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.lh-fact dd{margin:0;font-size:13.5px;line-height:1.45}
.lh-fact dd small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.lh-fact+.lh-fact{border-top:1px solid rgba(10,10,10,.06)}

/* ---------- the way in ---------- */
.lh-enter{position:absolute;left:50%;bottom:clamp(22px,4vh,40px);transform:translateX(-50%);display:flex;align-items:center;gap:14px;padding:10px 20px 10px 10px;border:0;border-radius:999px;cursor:pointer;color:var(--ink);font:inherit;
 background:rgba(255,255,255,.66);-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);box-shadow:var(--rim),0 14px 30px -16px rgba(0,0,0,.35);transition:transform .5s var(--spring),box-shadow .4s,opacity .8s var(--ease)}
.lh-intro:not(.is-in):not(.is-leaving) .lh-enter{opacity:0}
.lh-intro.is-in .lh-enter{transition-delay:0s,0s,1.4s}
.lh-enter:hover{transform:translateX(-50%) translateY(-2px);box-shadow:var(--rim),0 20px 36px -16px rgba(0,0,0,.4)}
.lh-enter__tube{position:relative;width:26px;height:42px;border-radius:14px;background:rgba(10,10,10,.07);box-shadow:inset 0 1px 2px rgba(0,0,0,.14),inset 0 -1px 0 rgba(255,255,255,.9);overflow:hidden}
.lh-enter__goo{position:absolute;inset:0;filter:url(#lh-goo-small)}
.lh-enter__goo i,.lh-enter__goo b{position:absolute;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#111}
.lh-enter__goo b{top:5px;width:13px;height:13px;margin-left:-6.5px}
.lh-enter__goo i{top:8px;animation:lh-drip 1.9s cubic-bezier(.55,0,.35,1) infinite}
@keyframes lh-drip{0%{transform:translateY(0) scale(.6);opacity:1}55%{transform:translateY(16px) scale(.9,1.15)}85%{transform:translateY(26px) scale(1);opacity:1}100%{transform:translateY(32px) scale(.4);opacity:0}}
.lh-enter__copy{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left}
.lh-enter__copy span{font-size:14px}
.lh-enter__copy small{font-family:Geist,Arial,sans-serif;font-size:10.5px;letter-spacing:.06em;color:var(--faint)}
.lh-enter__touch{display:none}
@media (hover:none){.lh-enter__mouse{display:none}.lh-enter__touch{display:inline}}

/* ---------- arrival ---------- */
.lh-intro .lh-reveal{opacity:0;transform:translate3d(0,26px,0)}
.lh-intro.is-in .lh-reveal{opacity:1;transform:none;transition:opacity .9s var(--ease),transform 1.1s var(--ease);transition-delay:calc(var(--d,0) * 1ms)}

/* ---------- departure ---------- */
.lh-intro.is-leaving .lh-reveal,.lh-intro.is-leaving .lh-enter{opacity:0;transform:translate3d(0,-34px,0) scale(.98);transition:opacity .42s cubic-bezier(.4,0,1,1),transform .5s cubic-bezier(.4,0,1,1);transition-delay:calc(var(--o,0) * 1ms)}
.lh-intro.is-leaving .lh-enter{transform:translateX(-50%) translateY(20px)}

.lh-intro.is-leaving .lh-char{transition:transform .55s cubic-bezier(.55,0,.85,.35),filter .5s ease-in,opacity .5s ease-in;transform:translate3d(var(--tx,0),var(--ty,0),0) scale(.2);filter:blur(10px);opacity:0;transition-delay:calc(var(--i) * 18ms)}
.lh-intro.is-leaving .lh-drop{animation:none}
.lh-aperture-rim{position:fixed;inset:0;width:100%;height:100%;z-index:23;pointer-events:none;overflow:visible}
.lh-droplet{position:fixed;left:0;top:0;z-index:23;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;pointer-events:none;
 background:radial-gradient(circle at 34% 30%,#6a6a67 0 9%,#0a0a0a 55%);box-shadow:0 10px 22px -8px rgba(0,0,0,.45);will-change:transform,opacity}

/* ---------- small screens: same story, stacked and scrollable ---------- */
@media (max-width:900px){
 .lh-intro{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
 .lh-inner{height:auto;min-height:100%;display:flex;flex-direction:column;align-items:stretch;gap:22px;padding:84px 20px 132px}
 .lh-lead,.lh-side{display:contents}
 .lh-portrait{order:1;display:flex;align-items:center;gap:12px;width:auto;aspect-ratio:auto;transform:none!important}
 .lh-blob{position:relative;inset:auto;flex:none;width:64px;height:64px;border-radius:46% 54% 48% 52% / 44% 46% 54% 56%;box-shadow:0 8px 18px -10px rgba(0,0,0,.4)}
 .lh-blob img{transform:none}
 .lh-status{position:static;padding:8px 12px;font-size:12px}
 .lh-eyebrow{order:2;font-size:10px;letter-spacing:.12em;flex-wrap:wrap;gap:6px 8px;margin-bottom:-8px}
 .lh-eyebrow .lh-sep{width:12px}
 .lh-name{order:3;font-size:clamp(56px,17vw,96px)}
 .lh-pitch{order:4;font-size:17px}
 .lh-actions{order:5}
 .lh-facts{order:6;margin:0;width:100%}
 .lh-skills{order:7;grid-template-columns:1fr;gap:12px;margin-top:0}
 .lh-enter{position:fixed;bottom:16px;padding:8px 18px 8px 8px;gap:12px;white-space:nowrap}
 .lh-enter__tube{width:22px;height:36px}
 .lh-enter__copy span{font-size:13px}
 .lh-enter__copy small{font-size:9.5px}
}
@media (max-width:900px) and (min-width:600px){.lh-skills{grid-template-columns:repeat(3,1fr)}}
@media (max-height:760px) and (min-width:901px){
 .lh-name{font-size:clamp(60px,8.6vw,132px)}
 .lh-skills{display:none}
 .lh-inner{padding-bottom:96px}
 .lh-facts .lh-fact{padding:8px 12px}
 .lh-enter{bottom:14px}
}
@media (prefers-reduced-motion:reduce){
 .lh-drop,.lh-enter__goo i,.lh-live::after{animation:none!important}
 .lh-name.is-forming .lh-char{animation:none}
 .lh-intro .lh-reveal{opacity:1;transform:none}
}
@media (max-width:900px){
 .lh-intro::after{content:"";position:fixed;left:0;right:0;top:0;height:78px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(250,250,250,.96) 0,rgba(250,250,250,.85) 60%,rgba(250,250,250,0))}
}
/* phones: same look, without blend/backdrop work while the intro scrolls */
@media (max-width:900px),(hover:none) and (pointer:coarse){
 .lh-bg::after{mix-blend-mode:normal;opacity:.3}
 .lh-facts{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.68)}
}