:root{--about-intro:0;--about-skills:0;--holo-opacity:0;--hero-exit:0;--about-exit:0}
.music-player{position:relative}.music-panel{position:absolute;top:54px;right:0;width:195px;border:1px solid #d6dcd2;border-radius:13px;background:#f8faf5ef;box-shadow:0 8px 30px #1f242016;backdrop-filter:blur(12px);padding:16px;color:var(--ink)}.music-panel>span{display:block;font:11px monospace;margin-bottom:13px;color:#5f6a5e}.music-panel label{font-size:10px;margin:0}.music-panel input[type=range]{padding:0;border:0;width:100%;height:22px;accent-color:var(--orange);cursor:pointer;background:transparent;resize:none}.music-panel output{display:block;font:10px monospace;text-align:right;color:#8b9488}.round[aria-pressed=true]{background:#ffc3ab}
#world-3d{position:fixed;inset:0;z-index:1;pointer-events:none}#world-3d canvas{display:block;width:100%;height:100%}.hero-copy,.hero-side,.scroll-hint,.scene-controls{position:relative;z-index:4}.hero-side,.scroll-hint{position:absolute}.real-3d .scene-wrap{visibility:hidden}.holo-panel,.scan-counter,.stage-hint{display:none}.projects{position:relative;z-index:3;background:var(--paper)}.real-3d .about{height:270svh;padding:0;border:0;z-index:3;position:relative}.real-3d .about-sticky{position:sticky;top:0;height:100svh;padding:125px 8.3% 65px;pointer-events:none;overflow:hidden}.real-3d .about-sticky>.section-label,.real-3d .about-grid{display:none}.real-3d .holo-panel{display:block;position:fixed;top:var(--py);left:var(--px);color:#e3e8ff;border:1px solid #8fa6ffbd;background:linear-gradient(155deg,#1f2f8aee,#3150e699);border-radius:12px;box-shadow:0 0 24px #3150e629,inset 0 0 0 1px #8fa6ff28;backdrop-filter:blur(8px);padding:20px 22px;font-family:monospace;opacity:var(--holo-opacity);transition:background .2s}.holo-panel::after{content:'';position:absolute;top:50%;height:1px;width:35px;background:#8fa6ff;right:-35px}.holo-panel::before{content:'';position:absolute;top:calc(50% - 4px);width:8px;height:8px;border-radius:50%;background:#8fa6ff;right:-39px;box-shadow:0 0 8px #8fa6ff}.real-3d .holo-name{min-width:180px;transform:translate(-100%,-50%);padding:16px 20px;clip-path:inset(0 calc((1 - var(--about-intro))*100%) 0 0)}.holo-name strong{display:block;font-size:24px;letter-spacing:-1px;line-height:1.3}.holo-name span{display:block;font-size:10px;margin-top:8px;color:#b9c6ff;letter-spacing:1px}.real-3d .holo-intro{width:260px;transform:translate(-100%,-50%);clip-path:inset(0 calc((1 - var(--about-intro))*100%) 0 0)}.holo-intro p{font-family:Arial,'PingFang SC',sans-serif;font-size:13px;line-height:1.85;margin:0;color:#dfe5ff}.real-3d .holo-skills{transform:translate(0,-50%);min-width:200px;clip-path:inset(0 0 0 calc((1 - var(--about-skills))*100%))}.holo-skills strong{font-size:13px;display:block;margin-bottom:19px;letter-spacing:1.2px}.holo-skills span{font-size:12px;display:block;margin-top:13px}.holo-skills::after{left:-35px;right:auto}.holo-skills::before{left:-39px;right:auto}.real-3d .scan-counter{display:block;position:fixed;left:var(--px);top:var(--py);transform:translate(-50%,-50%);color:#3150e6;font-family:monospace;text-align:center;opacity:var(--holo-opacity)}.scan-counter>span{font-size:46px;font-weight:700;letter-spacing:-4px}.scan-counter>small{font-size:18px;margin-left:5px}.scan-counter p{font-size:8px;letter-spacing:1.4px;color:#6f86d9}.real-3d .stage-hint{display:block;position:absolute;left:50%;bottom:32px;transform:translateX(-50%);font:9px monospace;letter-spacing:1px;color:#5f74c9;white-space:nowrap;opacity:calc(var(--holo-opacity)*(1 - var(--about-exit)))}.real-3d[data-scene=about] nav{background:#1f2f8a}.real-3d[data-scene=about] nav a{color:#dfe5ff}.real-3d[data-scene=about] nav a.active{background:#3150e6}.real-3d[data-scene=about] .round{color:#e3e8ff;background:#1f2f8a}.real-3d[data-scene=about] .logo{color:#3150e6}.real-3d nav a.active{background:var(--orange);color:var(--ink)}.real-3d .hero-copy{transition:opacity .1s linear;transform:translate3d(calc(var(--hero-exit)*15vw),calc(var(--hero-exit)*8vh),0) rotate(calc(var(--hero-exit)*4deg))}.scene-controls{position:absolute;right:10%;bottom:100px;display:flex;justify-content:center;flex-wrap:wrap;gap:8px;max-width:390px}.scene-controls button{font:10px monospace;padding:9px 14px;border-radius:20px;background:#f8faf5ad;border:1px solid #d2d9cc;backdrop-filter:blur(8px);transition:background .2s}.scene-controls button:hover{background:#ffc3ab}.scene-controls span{width:100%;font-size:10px;text-align:center;color:#7b8577;min-height:12px}.real-3d .contact{z-index:3;position:relative;background:transparent;min-height:100svh}.real-3d .contact h2{max-width:700px;font-size:clamp(72px,8vw,116px)}.real-3d .contact-doodle{display:none}.real-3d .contact-content,.real-3d .contact .section-label{z-index:4;position:relative}.wake-button{font:11px monospace;color:#6d756c;background:#f8faf5b0;border:1px solid #d2d9cc;padding:11px 17px;border-radius:24px;margin-top:18px}.wake-button:hover{background:#ffd6c6}footer{position:relative;z-index:4;background:var(--paper)}#reading-progress{position:fixed;left:0;top:0;height:2px;width:100%;background:var(--orange);z-index:80;transform-origin:left;transform:scaleX(0)}#motion-cursor{position:fixed;top:0;left:0;z-index:99;pointer-events:none;opacity:0;mix-blend-mode:normal}#motion-cursor::before{content:'';position:absolute;left:-10px;top:-10px;width:20px;height:20px;border:1.5px solid #4f5a52;border-radius:50%;transition:width .2s,height .2s,left .2s,top .2s,background .2s}#motion-cursor.shown{opacity:.6}#motion-cursor.over-link::before{width:42px;height:42px;left:-21px;top:-21px;border-color:var(--orange);background:#ff6a3d1a}#motion-cursor span{opacity:0;position:absolute;left:-10px;top:-14px;font-size:26px;color:var(--orange);transition:opacity .2s}#motion-cursor.over-card span{opacity:1}#motion-cursor.over-card::before{border-color:transparent;background:transparent}.real-3d .about .reveal{opacity:1;transform:none}.real-3d .about-sticky{transition:opacity .15s}body:has(dialog[open]) #motion-cursor{opacity:0}
@media(max-width:1100px){.real-3d .holo-intro{width:210px;padding:15px}.holo-intro p{font-size:11px}.real-3d .holo-skills{min-width:165px;padding:18px}.holo-skills span{font-size:11px}.real-3d .holo-name{min-width:165px}.real-3d .contact h2{font-size:80px}}
@media(max-width:760px){.real-3d .hero{height:100svh;min-height:790px;padding:132px 8% 95px}.real-3d h1{font-size:78px}.real-3d .hero-description{max-width:265px;font-size:12px}.real-3d .hero .text-link{font-size:10px}.scene-controls{left:8%;right:8%;bottom:81px;max-width:none;gap:7px}.scene-controls button{font-size:9px;padding:8px 11px}.real-3d .about{height:280svh}.real-3d .about-sticky{padding:100px 8% 50px}.real-3d .holo-name{position:absolute;top:14%;left:8%;transform:none;padding:13px 16px;min-width:150px}.holo-name strong{font-size:21px}.holo-panel::before,.holo-panel::after{display:none}.real-3d .holo-intro{position:absolute;top:28%;left:8%;width:84%;transform:none;padding:16px;opacity:calc(var(--holo-opacity)*(1 - var(--about-skills)))}.holo-intro p{font-size:12px}.real-3d .holo-skills{position:absolute;top:25%;left:53%;width:40%;min-width:0;transform:none;padding:15px;opacity:calc(var(--holo-opacity)*var(--about-skills))}.holo-skills strong{font-size:10px;margin-bottom:12px}.holo-skills span{font-size:10px;margin-top:10px}.real-3d .scan-counter{position:absolute;left:50%;top:auto;bottom:75px;transform:translateX(-50%)}.scan-counter>span{font-size:34px}.real-3d .contact{min-height:1050px;padding-top:95px}.real-3d .contact h2{font-size:66px;line-height:1.02;letter-spacing:-4px}.real-3d .contact .contact-content>p:first-child{font-size:11px}.real-3d .contact .contact-links{gap:18px}.wake-button{margin-top:13px}.real-3d[data-scene=contact] #world-3d{clip-path:inset(40% 0 0 0)}.real-3d .hero-copy{transform:none}.real-3d .hero-copy .role{margin-left:36px}}
@media(prefers-reduced-motion:reduce){#motion-cursor{display:none!important}.real-3d .hero-copy{transform:none;transition:none}.scene-controls{display:none}.real-3d .holo-panel{transition:none}}

body.over-pet{cursor:pointer}

/* About: proof panel under FOCUS, appears after the skills */
.real-3d .holo-proof{transform:translate(0,-50%);width:255px;clip-path:inset(0 0 0 calc((1 - var(--about-proof,0))*100%))}
.holo-proof strong{display:block;font-family:Arial,'PingFang SC',sans-serif;font-size:15px;color:#fff;margin-bottom:4px}
.holo-proof p{margin:13px 0 0}
.holo-proof b{display:block;font-size:17px;color:#fff;letter-spacing:-.3px}
.holo-proof span{display:block;font-family:Arial,'PingFang SC',sans-serif;font-size:11.5px;line-height:1.5;color:#cbd5ff;margin-top:3px}
.holo-proof::after{left:-35px;right:auto}.holo-proof::before{left:-39px;right:auto}
/* holograms and the counter are gone before the projects slide in */
.real-3d .holo-panel,.real-3d .scan-counter{opacity:calc(var(--holo-opacity) - var(--about-exit)*2.5)}
.real-3d .scan-counter{background:#1f2f8ae6;color:#f3f5ff;padding:6px 18px 9px;border-radius:14px;box-shadow:0 6px 24px #1f2f8a33}
.real-3d .scan-counter p{color:#c3ceff;margin:2px 0 0}
/* hero extras fade as soon as the stage starts rising */
.real-3d .scroll-hint,.real-3d .scene-controls,.real-3d .hero-side{opacity:calc(1 - var(--hero-exit)*3)}
.real-3d[data-scene=about] .scene-controls,.real-3d[data-scene=contact] .scene-controls{visibility:hidden}
@media(max-width:1100px){.real-3d .holo-proof{width:215px;padding:16px}.holo-proof b{font-size:15px}.holo-proof span{font-size:10.5px}}
@media(max-width:760px){
  /* hero: the floating Agent button already covers chat, so keep only the wave button, bottom-left */
  .real-3d .hero .scroll-hint,#penguin-character{display:none}
  .scene-controls{left:8%;right:auto;bottom:24px;justify-content:flex-start}
  /* about: name top-left, skills top-right, intro then proof share a slot over the platform so her face stays clear */
  .real-3d .holo-intro{top:auto;bottom:132px;opacity:calc(var(--holo-opacity)*(1 - var(--about-proof,0)*2) - var(--about-exit)*2.5)}
  .real-3d .holo-skills{opacity:calc(var(--holo-opacity)*var(--about-skills) - var(--about-exit)*2.5)}
  .real-3d .holo-proof{position:absolute;top:auto;bottom:132px;left:8%;width:84%;transform:none;padding:15px 16px;clip-path:none;opacity:calc(var(--holo-opacity)*(var(--about-proof,0)*2 - 1) - var(--about-exit)*2.5)}
  .holo-proof strong{font-size:14px}
  .holo-proof p{display:flex;align-items:baseline;gap:10px;margin-top:8px}
  .holo-proof b{font-size:14px;flex:none}
  .holo-proof span{margin:0;font-size:11px}
  .real-3d .scan-counter{bottom:60px;padding:4px 14px 7px}
}
@media(max-width:760px){
  /* hero: the about scan repeats the intro, so phones show the proof points instead and keep text off the studio */
  .real-3d .hero-description{display:none}
  .real-3d h1{font-size:70px}
  .real-3d .hero-copy .role{margin-bottom:22px}
  .real-3d .contact{min-height:960px}
}
.real-3d .stage-hint{font-size:11px;color:#3f55b8}
/* phones: the scan used to take ~2.8 screens of swiping; keep it to about one so projects come sooner */
@media(max-width:760px){.real-3d .about{height:170svh}}