/* Core layout and navigation. Consolidated from the tested release; original order is preserved. */


/* === main.css === */
:root{font-family:Inter,'Helvetica Neue',Arial,sans-serif;font-synthesis:none;--ease:cubic-bezier(.22,1,.36,1);--speed:.78s;--bg:#090d13;--surface:#131a24;--surface-2:#1a2430;--fg:#f2f5fa;--muted:#93a1b4;--thin:#374350;--accent:#bcd2f0;--accent-solid:#d7e5f9;--shade:rgba(4,7,11,.73);color-scheme:dark}
:root[data-theme=light]{--bg:#f0f2f4;--surface:#fff;--surface-2:#e4e9ef;--fg:#17222f;--muted:#617186;--thin:#cbd3dc;--accent:#456d98;--accent-solid:#294f7f;--shade:rgba(245,248,251,.81);color-scheme:light}
*,*:before,*:after{box-sizing:border-box}html{height:100%;scroll-behavior:auto}body{margin:0;min-height:100dvh;background:var(--bg);color:var(--fg);overflow:hidden;-webkit-font-smoothing:antialiased}button,input,a{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent-solid);outline-offset:5px}button,select{-webkit-tap-highlight-color:transparent}::selection{background:var(--accent);color:var(--bg)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;z-index:1000;left:15px;top:-50px;background:var(--fg);color:var(--bg);padding:10px 17px}.skip-link:focus{top:10px}
.theme-ready body,.theme-ready .site-shell,.theme-ready .scene-nav,.theme-ready .tool-button,.theme-ready .portrait-holder,.theme-ready .scene-arrow,.theme-ready .lang-menu,.theme-ready .case-dialog{transition:background-color .46s ease,color .36s ease,border-color .42s ease}
.site-shell{position:relative;isolation:isolate;width:100%;height:100dvh;overflow:hidden;background:var(--bg)}
.ambient{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}.ambient-grid{position:absolute;inset:0;opacity:.42;background-image:linear-gradient(to right,var(--thin) 1px,transparent 1px),linear-gradient(to bottom,var(--thin) 1px,transparent 1px);background-size:112px 112px;mask-image:radial-gradient(ellipse 80% 76% at 70% 42%,black,transparent 98%);opacity:.18}.ambient-spot{position:absolute;inset:0;background:radial-gradient(68px circle at var(--glow-x,75%) var(--glow-y,48%),color-mix(in srgb,var(--accent) 23%,transparent),transparent 75%);transition:opacity .3s}
.shell-top{height:68px;position:fixed;z-index:30;left:clamp(18px,3.4vw,64px);right:clamp(18px,3.4vw,64px);top:18px;display:flex;justify-content:space-between;align-items:center;gap:25px;border-bottom:1px solid color-mix(in srgb,var(--thin) 72%,transparent)}.brand-lockup{display:flex;gap:13px;align-items:center;font-size:17px;font-weight:670;letter-spacing:-.055em;white-space:nowrap}.brand-lockup img{width:40px;height:40px;transition:transform .6s var(--ease);filter:var(--brand-filter,none)}[data-theme=light] .brand-lockup img,[data-theme=light] .contact-signature img,[data-theme=light] .orbit-mark{filter:brightness(0) saturate(100%) invert(17%) sepia(20%) saturate(1155%) hue-rotate(170deg)}.brand-lockup:hover img{transform:rotate(24deg)}.brand-dot{color:var(--accent)}.top-caption{font-size:10px;color:var(--muted);letter-spacing:.21em;font-weight:640;white-space:nowrap}.top-actions{display:flex;align-items:center;gap:12px}.status-dot{height:6px;width:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 18px var(--accent)}.top-index{font-size:12px;font-weight:670;letter-spacing:.12em;margin-right:14px;font-variant-numeric:tabular-nums}.top-index span{color:var(--muted);font-weight:400}.tool-button{border:1px solid var(--thin);border-radius:999px;height:36px;min-width:42px;display:flex;align-items:center;justify-content:center;gap:7px;background:color-mix(in srgb,var(--surface) 75%,transparent);color:var(--fg);font-size:10px;letter-spacing:.08em;font-weight:650;padding:0 13px;transition:border-color .28s,background .28s,transform .28s}.tool-button:hover{border-color:var(--accent);transform:translateY(-2px)}.tool-button svg{height:16px;width:16px}.theme-sun{display:none}[data-theme=light] .theme-sun{display:block}[data-theme=light] .theme-moon{display:none}.lang-wrap{position:relative}.lang-menu{position:absolute;right:0;top:44px;min-width:145px;padding:7px;display:flex;flex-direction:column;border:1px solid var(--thin);border-radius:14px;background:var(--surface);box-shadow:0 24px 60px #0004}.lang-menu[hidden]{display:none}.lang-menu a{border-radius:7px;padding:12px 10px;font-size:12px}.lang-menu a:hover,.lang-menu a[aria-current=page]{background:var(--surface-2)}
.scene-container{position:absolute;inset:0}.scene{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:105px clamp(24px,7.4vw,144px) 114px;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--thin) transparent;opacity:0;visibility:hidden;pointer-events:none;transform:translate3d(0,28px,0) scale(.985);transition:opacity .58s ease,transform var(--speed) var(--ease),visibility 0s linear .8s}.scene.is-active{opacity:1;visibility:visible;pointer-events:auto;transform:translate3d(0,0,0) scale(1);transition:opacity .58s ease,transform var(--speed) var(--ease),visibility 0s}.scene:before{content:'';position:absolute;left:clamp(18px,3.4vw,64px);top:115px;bottom:122px;width:1px;background:linear-gradient(transparent,var(--thin),transparent);opacity:.4;pointer-events:none}.eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:650;margin:0;line-height:1.5}.eyebrow-line{width:20px;height:1px;background:var(--accent);display:inline-block;vertical-align:middle;margin-right:11px}.full-stop,.hero-stop{color:var(--accent)}
.home-layout{width:100%;max-width:1600px;margin:auto;display:grid;grid-template-columns:minmax(0,1.17fr) minmax(350px,.83fr);align-items:center;min-height:530px;gap:30px}.home-left{z-index:1}.hero-heading{font-size:clamp(90px,10.9vw,205px);line-height:.77;margin:31px 0 33px;font-weight:750;letter-spacing:-.102em;white-space:nowrap}.hero-heading-original>span{display:block}.hero-heading .hero-surname{letter-spacing:-.106em}.hero-role{color:var(--fg);font-size:clamp(12px,1.15vw,17px);letter-spacing:.34em;font-weight:650;display:flex;align-items:center;gap:15px}.role-tick{font-size:16px;color:var(--accent);letter-spacing:0}.hero-thought{font-size:clamp(20px,2.05vw,30px);line-height:1.31;letter-spacing:-.055em;margin:41px 0 32px;color:var(--muted);font-weight:430}.hero-thought strong{color:var(--fg);font-weight:570}.home-cta{display:flex;align-items:center;gap:25px;flex-wrap:wrap}.primary-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;background:var(--accent-solid);color:var(--bg);border:1px solid var(--accent-solid);border-radius:999px;padding:16px 21px 16px 25px;font-size:13px;font-weight:650;transition:transform .28s var(--ease),box-shadow .28s;min-height:52px}.primary-cta:hover{transform:translateY(-3px);box-shadow:0 10px 38px color-mix(in srgb,var(--accent) 20%,transparent)}.primary-cta svg{transition:transform .28s}.primary-cta:hover svg{transform:translateX(5px)}.text-cta{border:0;background:transparent;color:var(--muted);display:flex;align-items:center;gap:9px;font-size:12px;font-weight:650;padding:15px 0}.text-cta:hover{color:var(--fg)}.text-cta svg{width:16px}.home-orbit{width:min(44vw,590px);aspect-ratio:1;position:relative;justify-self:center;display:grid;place-items:center;transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .32s ease;will-change:transform}.orbit-outer,.orbit-mid,.orbit-inner{position:absolute;inset:5%;border:1px solid color-mix(in srgb,var(--accent) 16%,transparent);border-radius:50%}.orbit-outer:before,.orbit-mid:after{content:'';position:absolute;inset:-1px;border-radius:50%;border:1px solid transparent;border-top-color:color-mix(in srgb,var(--accent) 65%,transparent);animation:spin 29s linear infinite}.orbit-mid{inset:17%;border-style:dashed;opacity:.68;animation:spin 65s linear infinite reverse}.orbit-mid:after{inset:16px;animation-duration:23s}.orbit-inner{inset:27%;opacity:.45}.orbit-bloom{position:absolute;inset:20%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 13%,transparent),transparent 65%);filter:blur(24px)}.orbit-mark{width:61%;height:61%;object-fit:contain;filter:drop-shadow(0 0 36px color-mix(in srgb,var(--accent) 12%,transparent));animation:float-mark 7s ease-in-out infinite}.orbit-caption{position:absolute;color:var(--muted);font-size:9px;letter-spacing:.18em;font-weight:640}.orbit-caption-a{top:8%;right:-5%}.orbit-caption-b{bottom:9%;left:-5%}.orbit-point{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 15px var(--accent)}.orbit-point.a{top:12%;left:30%}.orbit-point.b{bottom:17%;right:16%}.scene-bottom-label{position:absolute;bottom:112px;left:clamp(24px,7.4vw,144px);display:flex;align-items:center;gap:15px;font-size:9px;font-weight:650;letter-spacing:.18em;color:var(--muted)}.bottom-divider{height:1px;width:31px;background:var(--thin)}
.scene-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;max-width:1480px;width:100%;margin:0 auto 31px}.scene-heading h2{font-size:clamp(54px,7vw,112px);line-height:.93;letter-spacing:-.085em;margin:15px 0 0;font-weight:740}.section-subtitle{color:var(--muted);font-size:clamp(12px,1.1vw,16px);margin:0 0 7px;letter-spacing:-.02em}.project-deck{display:grid;grid-template-columns:1.8fr .95fr;gap:16px;max-width:1480px;width:100%;height:clamp(350px,48vh,560px);min-height:310px;margin:0 auto;transition:grid-template-columns .75s var(--ease)}.project-deck[data-featured='1']{grid-template-columns:.95fr 1.8fr}.project-card{min-width:0;position:relative;border:1px solid var(--thin);border-radius:21px;overflow:hidden;cursor:pointer;isolation:isolate;background:var(--surface);outline-offset:6px;transition:border-color .3s,transform .5s var(--ease)}.project-card:hover{border-color:var(--accent)}.project-card:before{position:absolute;content:'';z-index:6;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:radial-gradient(118px circle at var(--px,50%) var(--py,50%),color-mix(in srgb,var(--accent) 80%,transparent),transparent 72%);opacity:0;transition:opacity .22s;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude}.project-card:hover:before,.project-card:focus-within:before{opacity:1}.project-art{position:absolute;inset:0;overflow:hidden}.atelier-art{background:#b69e88}.atelier-art img{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.12);transition:transform .95s var(--ease),filter .95s}.project-featured:hover .atelier-art img{transform:scale(1.05)}.project-hover-cursor{position:absolute;right:35px;top:40px;color:#403529;font-size:28px}.project-scrim{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(4,5,7,.34),transparent 26%,transparent 35%,rgba(5,7,11,.89) 100%);z-index:1}.project-content{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(20px,2vw,34px)}.project-upper,.project-lower{display:flex;justify-content:space-between}.project-upper{align-items:center;gap:15px}.number-chip,.live-chip,.soon-chip{color:#f4f4f7;background:rgba(9,11,17,.45);border:1px solid rgba(255,255,255,.23);backdrop-filter:blur(10px);border-radius:50px;padding:9px 13px;font-size:10px;font-weight:670;letter-spacing:.11em;white-space:nowrap}.live-chip{display:flex;align-items:center;gap:8px}.live-chip i{width:6px;height:6px;border-radius:50%;background:#c4f7c7}.soon-chip{font-size:9px}.project-lower{flex-direction:column;align-items:start;color:white}.project-lower p{margin:0 0 9px;font-size:10px;letter-spacing:.14em;font-weight:660;color:#c7d1dd}.project-lower h3{font-size:clamp(30px,3.8vw,63px);letter-spacing:-.075em;font-weight:730;line-height:1;margin:0}.project-lower h3 em{font-family:Georgia,serif;font-size:.92em;font-weight:400;letter-spacing:-.07em}.project-desc{font-size:13px;color:#ced5df;margin:14px 0 0;max-width:470px;line-height:1.5;transition:opacity .3s}.project-actions{margin-top:17px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}.project-detail,.project-web,.project-coming{font-weight:650;border:1px solid #ffffff51;color:#fff;background:#ffffff16;display:flex;align-items:center;gap:10px;border-radius:40px;padding:11px 15px;font-size:11px;white-space:nowrap;backdrop-filter:blur(15px);transition:background .25s,transform .25s}.project-detail:hover,.project-web:hover{background:#ffffff35;transform:translateY(-2px)}.project-web{background:transparent}.project-coming{border:none;background:transparent;color:#c9d8e9;padding-left:0}.project-actions svg{width:14px;height:14px}.project-upcoming{background:#0e1622}.technical-art{background:radial-gradient(circle at 56% 39%,#223449,#0c121a 65%)}.technical-art:before{content:'';position:absolute;inset:0;background-image:linear-gradient(#ffffff0d 1px,transparent 1px),linear-gradient(90deg,#ffffff0d 1px,transparent 1px);background-size:31px 31px;mask-image:radial-gradient(circle at 50% 38%,black,transparent 75%)}.technical-ring{position:absolute;width:330px;height:330px;border:1px solid #c4e0ff42;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-59%);transition:transform .85s var(--ease)}.technical-ring.one:before{content:'';position:absolute;inset:18%;border:1px dashed #b9d2ed6e;border-radius:50%}.technical-ring.two{width:240px;height:240px;border-style:dashed;animation:spin 55s linear infinite}.technical-core{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);font-size:140px;color:#c2d9f3;text-shadow:0 0 90px #a9ccf87b}.project-upcoming:hover .technical-ring.one{transform:translate(-50%,-59%) scale(1.18) rotate(20deg)}.technical-bits{position:absolute;left:32px;top:105px;color:#9bb0c6;font-size:10px;font-family:monospace;letter-spacing:.23em;line-height:2}.projects-note{max-width:1480px;width:100%;display:flex;justify-content:space-between;margin:16px auto 0;color:var(--muted);font-size:9px;letter-spacing:.2em;font-weight:650}
.about-layout,.beyond-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(370px,.8fr);align-items:center;gap:clamp(35px,6vw,120px);width:100%;max-width:1440px;margin:auto;min-height:520px}.editorial-title{font-size:clamp(53px,5.6vw,106px);line-height:.93;letter-spacing:-.087em;font-weight:750;margin:25px 0 26px}.about-lead,.beyond-lead{font-size:clamp(21px,2vw,33px);line-height:1.19;letter-spacing:-.05em;font-weight:560;max-width:620px;margin:0 0 17px}.about-paragraph,.beyond-paragraph{font-size:clamp(14px,1.05vw,17px);line-height:1.7;max-width:600px;color:var(--muted);margin:0}.about-facts{display:flex;gap:28px;flex-wrap:wrap;margin-top:34px}.about-facts>span{display:flex;flex-direction:column;font-size:12px;gap:9px;font-weight:600}.about-facts small{font-size:9px;letter-spacing:.13em;color:var(--accent);font-weight:680}.cv-placeholder{display:inline-flex;align-items:center;gap:8px;margin-top:29px;color:var(--muted);font-size:11px;letter-spacing:.025em}.cv-placeholder svg{transform:rotate(90deg);width:15px}.portrait-area{position:relative;height:min(58vh,570px);min-height:430px;display:flex;align-items:center;justify-content:center}.portrait-outline{position:absolute;width:90%;height:90%;border:1px solid var(--thin);border-radius:50%;transform:rotate(-29deg) scaleY(.81)}.portrait-outline:after{content:'';position:absolute;inset:10px;border-top:1px solid var(--accent);border-radius:50%;opacity:.58;transform:rotate(-26deg)}.portrait-graphic{width:min(77%,380px);height:89%;position:relative;transform:rotate(5deg);transition:transform .65s var(--ease)}.portrait-area:hover .portrait-graphic{transform:rotate(0deg) translateY(-7px)}.portrait-holder{height:100%;position:relative;border:1px solid color-mix(in srgb,var(--accent) 42%,transparent);background:radial-gradient(ellipse at 50% 60%,color-mix(in srgb,var(--accent) 13%,var(--surface)),var(--surface) 67%);overflow:hidden;display:flex;align-items:center;justify-content:center}.portrait-holder:before{content:'';position:absolute;inset:12px;border:1px solid var(--thin);opacity:.7}.portrait-arch{position:absolute;z-index:3;top:0;right:-30px;width:70px;height:70px;border-right:1px solid var(--accent);border-top:1px solid var(--accent)}.portrait-holder:after{content:'';position:absolute;width:210px;height:210px;border:1px solid var(--thin);border-radius:50%;transform:scaleY(1.5)}.portrait-star{position:absolute;z-index:5;right:-25px;top:44%;font-size:49px;color:var(--accent)}.portrait-diagonal{position:absolute;z-index:2;left:-67px;top:54px;transform:rotate(-45deg);font-size:10px;letter-spacing:.25em;color:var(--muted)}.portrait-label{z-index:2;font-size:10px;letter-spacing:.27em;font-weight:670;color:var(--muted);text-align:center;max-width:130px;line-height:1.9}.portrait-annotation{position:absolute;z-index:4;bottom:8px;left:17px;right:15px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.13em;color:var(--accent)}.portrait-coordinate{position:absolute;right:0;bottom:2%;font:10px monospace;color:var(--muted)}
.beyond-layout{grid-template-columns:minmax(0,.93fr) minmax(400px,1.07fr)}.beyond-copy{position:relative;z-index:4}.beyond-paragraph{max-width:500px}.beyond-active-word{display:flex;align-items:center;gap:17px;margin-top:32px;white-space:nowrap}.active-word-index{color:var(--muted);font-size:10px;letter-spacing:.12em}.beyond-active-word strong{font-size:clamp(23px,2.6vw,42px);letter-spacing:-.07em;font-weight:650}.word-rule{height:1px;flex:1;max-width:80px;background:var(--accent);opacity:.65}.photo-controls{display:flex;align-items:center;gap:10px;margin-top:20px}.photo-controls button{color:var(--fg);width:37px;height:37px;border:1px solid var(--thin);border-radius:50%;background:var(--surface);transition:background .3s,transform .3s}.photo-controls button:hover{background:var(--surface-2);transform:translateY(-2px)}.photo-controls>span{font-size:9px;letter-spacing:.13em;color:var(--muted);margin-left:6px}.judo-artboard{height:min(61vh,590px);min-height:445px;width:100%;position:relative;isolation:isolate}.judo-ring{position:absolute;inset:7%;border:1px solid var(--thin);border-radius:50%;opacity:.55;transform:scaleY(.8)}.judo-ring:before{content:'';position:absolute;inset:17%;border:1px dashed var(--thin);border-radius:50%}.photo-stack{position:absolute;inset:0}.photo-tile{--bg-photo:#748396;position:absolute;left:50%;top:47%;display:flex;flex-direction:column;justify-content:space-between;text-align:left;width:clamp(150px,13.3vw,232px);height:clamp(210px,19vw,306px);padding:11px;border:1px solid #ffffff4c;border-radius:3px;color:#f7faff;background:linear-gradient(155deg,#a1aec0,var(--bg-photo) 55%,#263746);box-shadow:0 18px 55px #0008;cursor:pointer;transform-origin:center center;transition:transform .85s var(--ease),box-shadow .5s,border .3s,filter .3s;overflow:hidden;will-change:transform}.photo-tile:focus-visible{outline:2px solid var(--accent);outline-offset:5px}.photo-tile[data-photo='0']{--bg-photo:#5a6b80;--rest-x:-124%;--rest-y:-101%;--rest-r:-20deg;z-index:5}.photo-tile[data-photo='1']{--bg-photo:#947c79;--rest-x:7%;--rest-y:-110%;--rest-r:13deg;z-index:4}.photo-tile[data-photo='2']{--bg-photo:#63747f;--rest-x:36%;--rest-y:-33%;--rest-r:20deg;z-index:3}.photo-tile[data-photo='3']{--bg-photo:#9e8c86;--rest-x:-137%;--rest-y:-18%;--rest-r:-13deg;z-index:2}.photo-tile[data-photo='4']{--bg-photo:#74817e;--rest-x:-51%;--rest-y:-29%;--rest-r:6deg;z-index:1}.photo-tile:not(.is-picked){transform:translate(var(--rest-x),var(--rest-y)) rotate(var(--rest-r)) scale(.81);filter:saturate(.72)}.photo-tile.is-picked{z-index:10;transform:translate(-50%,-51%) rotate(-4deg) scale(1.08);box-shadow:0 28px 75px #0009;border-color:#ffffffac;filter:saturate(1)}.photo-tile:hover:not(.is-picked){filter:saturate(1.1) brightness(1.12);box-shadow:0 20px 50px #0009;z-index:9}.photo-top,.photo-bottom{display:flex;align-items:center;justify-content:space-between;z-index:3;letter-spacing:.14em;font-size:9px;font-weight:710}.photo-bottom{font-size:13px;letter-spacing:-.02em}.photo-bottom span{font-size:22px}.photo-cross{font-size:17px}.photo-abstract{position:absolute;inset:0;background:radial-gradient(ellipse at 65% 29%,#ffffff40,transparent 47%),linear-gradient(120deg,transparent 39%,#ffffff1e 40%,transparent 42%);overflow:hidden;opacity:.9}.photo-horizon{position:absolute;left:-30%;top:44%;width:160%;height:2px;transform:rotate(-27deg);background:#f5f9f84d}.photo-line{position:absolute;left:50%;top:50%;border:1px solid #fff8;border-radius:50%;transform:translate(-50%,-50%) rotate(-24deg)}.photo-line.one{width:80%;height:60%}.photo-line.two{width:130%;height:90%}.photo-line.three{width:30%;height:25%}.photo-tile[data-photo='2'] .photo-line{border-radius:7px;transform:translate(-50%,-50%) rotate(45deg)}.photo-tile[data-photo='3'] .photo-line{transform:translate(-50%,-50%) scaleY(.7)}.gallery-hint{position:absolute;inset:auto 0 0;display:flex;justify-content:space-between;align-items:center;gap:15px;color:var(--muted);font-size:10px;letter-spacing:.03em}.gallery-hint span:first-child{letter-spacing:.13em;font-weight:700}
.contact-layout{width:100%;max-width:1460px;margin:auto;display:flex;flex-direction:column;justify-content:space-between;min-height:min(67vh,640px)}.contact-title{font-size:clamp(75px,10vw,165px);letter-spacing:-.09em;font-weight:730;line-height:.85;margin:24px 0 26px}.contact-description{font-size:clamp(17px,1.55vw,24px);letter-spacing:-.04em;color:var(--muted);margin:0}.contact-lower{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(250px,.65fr);gap:70px;align-items:end;margin-top:80px;padding-top:25px;border-top:1px solid var(--thin)}.contact-mini{font-size:10px;letter-spacing:.18em;color:var(--muted);font-weight:650;display:block;margin-bottom:14px}.big-email{display:inline-flex;gap:15px;align-items:center;font-size:clamp(24px,3.4vw,57px);font-weight:670;letter-spacing:-.06em;border-bottom:1px solid transparent;transition:color .25s,border-color .25s}.big-email:hover{color:var(--accent);border-color:var(--accent)}.big-email svg{width:clamp(20px,2vw,36px);height:auto}.copy-email{display:flex;align-items:center;gap:7px;color:var(--muted);background:transparent;border:0;padding:14px 0 0;font-size:11px}.copy-email:hover{color:var(--fg)}.copy-email svg{width:13px;height:13px}.social-items{display:flex;flex-direction:column}.social-items a{display:flex;align-items:center;gap:12px;padding:9px 0;font-size:13px;border-bottom:1px solid var(--thin);transition:padding-left .25s,color .25s}.social-items a:hover{color:var(--accent);padding-left:8px}.social-items a svg:last-child{margin-left:auto;width:15px}.contact-signature{margin-top:50px;display:flex;align-items:center;gap:10px;font-size:11px;color:var(--muted)}.sign-year{margin-left:auto}
.shell-bottom{position:fixed;z-index:30;bottom:20px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:16px;pointer-events:none}.scene-controller{pointer-events:auto;display:flex;align-items:center;gap:7px;padding:7px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(24px);border:1px solid var(--thin);border-radius:999px;box-shadow:0 18px 60px #0004}.scene-nav{display:flex;align-items:center;gap:2px}.nav-item{display:flex;align-items:center;gap:8px;justify-content:center;border:0;background:transparent;color:var(--muted);border-radius:999px;padding:12px 14px;font-size:12px;font-weight:620;white-space:nowrap;transition:background .28s,color .28s,transform .28s}.nav-item:hover{color:var(--fg)}.nav-item.is-active{color:var(--bg);background:var(--accent-solid)}.nav-number{font-size:9px;font-weight:700;opacity:.65}.scene-arrow{background:transparent;color:var(--fg);width:36px;height:36px;border:1px solid var(--thin);border-radius:50%;transition:background .25s,transform .25s}.scene-arrow:hover{transform:scale(1.06);background:var(--surface-2)}.scene-progress{width:180px;height:2px;background:var(--thin);overflow:hidden;border-radius:3px}.scene-progress-bar{display:block;width:20%;height:100%;background:var(--accent-solid);transform-origin:left;transition:width .65s var(--ease)}.corner-accent{position:fixed;right:clamp(20px,3.4vw,64px);bottom:36px;color:var(--muted);font-size:23px;opacity:.6;pointer-events:none}
.case-dialog{border:0;padding:0;position:fixed;width:min(670px,100vw);height:100dvh;max-height:100dvh;max-width:none;margin:0 0 0 auto;inset:0 0 0 auto;background:var(--bg);color:var(--fg);overflow-y:auto;box-shadow:-30px 0 100px #0008;transform:translateX(100%);opacity:0;transition:transform .6s var(--ease),opacity .5s,display .6s allow-discrete,overlay .6s allow-discrete}.case-dialog[open]{transform:translateX(0);opacity:1}@starting-style{.case-dialog[open]{transform:translateX(100%);opacity:0}}.case-dialog::backdrop{background:#02060aaf;backdrop-filter:blur(6px)}.dialog-frame{padding:28px clamp(22px,4vw,55px) 50px}.dialog-top{display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:.17em;color:var(--muted);margin-bottom:22px}.dialog-close{background:var(--surface);border:1px solid var(--thin);border-radius:50%;color:var(--fg);width:44px;height:44px;display:grid;place-items:center}.dialog-close:hover{background:var(--surface-2)}.dialog-poster{position:relative;height:260px;overflow:hidden;background:#ceb5a0;border-radius:9px}.dialog-poster img{width:100%;height:100%;object-fit:cover}.dialog-poster:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent,#0009)}.dialog-poster>div{position:absolute;z-index:2;bottom:20px;left:25px;color:white}.dialog-poster span{font-size:10px;letter-spacing:.16em}.dialog-poster h2{font-size:53px;line-height:.85;letter-spacing:-.06em;margin:11px 0 0}.dialog-poster em{font-family:Georgia,serif;font-weight:400}.dialog-body{padding-top:32px}.dialog-intro{font-size:25px;line-height:1.25;letter-spacing:-.04em;margin:0 0 32px}.dialog-columns{display:grid;grid-template-columns:1fr 1fr;gap:28px;border-top:1px solid var(--thin);border-bottom:1px solid var(--thin);padding:23px 0}.dialog-columns h3{font-size:17px;letter-spacing:-.025em;margin:0 0 10px}.dialog-columns p{font-size:13px;line-height:1.65;color:var(--muted);margin:0}.dialog-stack{padding:25px 0}.dialog-stack>span{font-size:10px;letter-spacing:.17em;color:var(--muted)}.dialog-stack>div{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.dialog-stack b{font-size:11px;border:1px solid var(--thin);border-radius:40px;padding:9px 13px;font-weight:600}.dialog-bottom{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.dialog-bottom>span{color:var(--muted);font-size:11px}.dialog-note{color:var(--muted);font-size:10px;margin-top:25px}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes float-mark{50%{transform:translateY(-7px)}}
@media(max-width:1250px){.scene{padding-left:6.5vw;padding-right:6.5vw}.scene:before{display:none}.home-layout{grid-template-columns:1fr .8fr}.hero-heading{font-size:clamp(75px,10vw,155px)}.project-deck{height:clamp(350px,44vh,510px)}.about-layout,.beyond-layout{gap:22px}.editorial-title{font-size:clamp(53px,5.6vw,80px)}.judo-artboard{transform:scale(.9)}}
@media(max-width:900px){.top-caption{display:none}.home-layout{grid-template-columns:1fr .7fr}.hero-heading{font-size:clamp(74px,10.5vw,115px)}.home-orbit{width:40vw}.hero-thought{margin:25px 0}.about-layout{grid-template-columns:1.04fr .8fr}.portrait-area{min-height:340px;height:46vh}.beyond-layout{grid-template-columns:.9fr 1fr}.judo-artboard{transform:scale(.8);margin-left:-30px}.scene{padding-bottom:110px}.contact-title{font-size:clamp(66px,9vw,110px)}.contact-lower{gap:25px;margin-top:42px}.big-email{font-size:clamp(25px,3.3vw,39px)}.scene-controller{gap:0}.nav-item{padding:12px 9px}}
@media(max-width:700px){.site-shell{height:100dvh}.shell-top{top:0;left:20px;right:20px;height:70px}.brand-lockup{font-size:15px;gap:7px}.brand-lockup img{width:34px;height:34px}.top-index,.status-dot{display:none}.top-actions{gap:7px}.tool-button{height:33px;min-width:36px;padding:0 10px}.scene{padding:93px 25px 98px;justify-content:flex-start}.home-layout{display:flex;flex-direction:column;align-items:stretch;gap:8px;min-height:0;margin:auto 0;position:relative}.home-left{order:2}.home-orbit{order:1;width:min(60vw,260px);height:auto;margin:-30px auto -20px;opacity:.88}.hero-heading{font-size:clamp(63px,15vw,112px);margin:21px 0 21px;line-height:.83;letter-spacing:-.11em}.hero-role{font-size:11px;letter-spacing:.2em}.hero-thought{font-size:19px;margin:21px 0 22px}.home-cta{gap:14px}.primary-cta{padding:14px 16px;font-size:12px;min-height:47px;gap:12px}.text-cta{font-size:11px}.orbit-caption{display:none}.scene-bottom-label{display:none}.scene-heading{display:block;margin-bottom:21px}.scene-heading h2{font-size:clamp(49px,12vw,83px);margin-top:10px}.section-subtitle{font-size:13px;margin:12px 0 0}.project-deck,.project-deck[data-featured='1']{height:calc(100dvh - 299px);min-height:370px;display:flex;flex-direction:column;gap:12px}.project-card{flex:1;min-height:0;transition:flex-grow .55s var(--ease)}.project-deck[data-featured='0'] .project-featured,.project-deck[data-featured='1'] .project-upcoming{flex-grow:2.4}.project-deck[data-featured='0'] .project-upcoming,.project-deck[data-featured='1'] .project-featured{flex-grow:1}.project-content{padding:17px}.project-lower h3{font-size:clamp(26px,7vw,42px)}.project-lower p{font-size:9px;margin-bottom:7px}.project-desc{font-size:12px;margin-top:9px}.project-actions{margin-top:10px}.project-detail,.project-web,.project-coming{font-size:10px;padding:9px 11px}.project-card:not(:hover) .technical-ring{width:230px;height:230px}.technical-core{font-size:70px}.project-deck[data-featured='0'] .project-upcoming .project-desc,.project-deck[data-featured='0'] .project-upcoming .project-actions,.project-deck[data-featured='1'] .project-featured .project-desc,.project-deck[data-featured='1'] .project-featured .project-actions{display:none}.project-deck[data-featured='1'] .project-featured .project-lower h3{font-size:27px}.project-deck[data-featured='0'] .project-upcoming .project-lower h3{font-size:26px}.projects-note{margin-top:11px}.about-layout,.beyond-layout{grid-template-columns:1fr;gap:6px;min-height:0;margin:auto 0}.editorial-title{font-size:clamp(53px,11vw,75px);margin:14px 0 15px}.about-lead,.beyond-lead{font-size:20px;margin-bottom:10px}.about-paragraph,.beyond-paragraph{font-size:13px;line-height:1.55}.about-facts{gap:18px;margin-top:21px}.about-facts>span{font-size:11px;gap:5px}.cv-placeholder{font-size:10px;margin-top:16px}.portrait-area{height:180px;min-height:180px;margin-top:12px}.portrait-outline{width:54%;height:90%}.portrait-graphic{height:100%;width:165px}.portrait-star{font-size:27px;right:-14px}.portrait-label{font-size:7px}.portrait-annotation{font-size:7px}.portrait-coordinate{display:none}.beyond-layout{gap:0}.beyond-copy .editorial-title{font-size:clamp(52px,10.4vw,67px)}.beyond-active-word{margin-top:18px}.beyond-active-word strong{font-size:25px}.photo-controls{margin-top:11px}.judo-artboard{height:245px;min-height:245px;transform:scale(.86);transform-origin:top center;margin:6px auto -32px;width:100%}.photo-tile{width:145px;height:193px}.photo-bottom{font-size:10px}.gallery-hint{font-size:8px;bottom:-2px}.contact-layout{min-height:0;gap:32px;margin:auto 0}.contact-title{font-size:clamp(57px,11.7vw,95px);margin:16px 0 18px}.contact-description{font-size:16px}.contact-lower{grid-template-columns:1fr;gap:25px;margin-top:5px}.big-email{font-size:clamp(23px,7vw,33px)}.contact-mini{font-size:9px}.contact-socials .social-items{flex-direction:row;flex-wrap:wrap;gap:12px}.contact-socials .social-items a{border:1px solid var(--thin);border-radius:100px;padding:9px 12px;font-size:11px;gap:7px}.social-items a svg:last-child{display:none}.contact-signature{margin-top:8px}.shell-bottom{bottom:12px;gap:8px}.scene-controller{gap:0;padding:5px;max-width:calc(100vw - 20px)}.scene-nav{gap:0}.nav-item{padding:10px 11px;font-size:11px}.nav-number{display:none}.nav-label{white-space:nowrap}.scene-arrow{width:28px;height:28px;font-size:11px}.scene-progress{height:2px;width:120px}.corner-accent{display:none}.dialog-columns{grid-template-columns:1fr;gap:20px}.dialog-poster{height:220px}}
@media(max-width:450px){.scene{padding-left:20px;padding-right:20px}.home-orbit{width:53vw;margin:-18px auto -8px}.hero-heading{font-size:clamp(55px,14.3vw,80px)}.home-cta .text-cta{display:none}.hero-thought{font-size:17px}.nav-item{padding:11px 8px;font-size:10px}.scene-arrow{width:28px}.project-deck{min-height:350px;height:calc(100dvh - 283px)}.project-art.technical-art .technical-bits{display:none}.scene-heading h2{font-size:55px}.editorial-title{font-size:clamp(46px,11vw,63px)}.about-lead,.beyond-lead{font-size:18px}.about-paragraph,.beyond-paragraph{font-size:12px}.about-facts{margin-top:13px}.portrait-area{height:146px;min-height:146px;margin-top:6px}.portrait-graphic{width:120px}.about-copy .cv-placeholder{margin-top:11px}.beyond-active-word{margin-top:11px}.judo-artboard{height:210px;min-height:210px;margin-top:0;transform:scale(.72);margin-bottom:-54px}.gallery-hint{display:none}.contact-title{font-size:clamp(53px,11.7vw,72px)}.contact-lower{margin-top:5px}.contact-socials .social-items{gap:7px}}
@media(max-height:740px) and (min-width:701px){.scene{padding-top:85px;padding-bottom:105px}.home-layout{min-height:0}.hero-heading{font-size:clamp(68px,9vw,138px);margin:17px 0 20px}.hero-thought{margin:22px 0}.project-deck{height:47vh;min-height:260px}.scene-heading h2{font-size:clamp(52px,6vw,85px)}.about-layout,.beyond-layout{min-height:0}.editorial-title{font-size:clamp(52px,5vw,77px);margin:12px 0}.portrait-area{height:58vh;min-height:300px}.judo-artboard{height:56vh;min-height:330px;transform:scale(.8)}.contact-title{font-size:clamp(74px,8.5vw,133px)}.contact-layout{min-height:0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.home-orbit{will-change:auto}}
/* Compact bottom navigation keeps all five destinations reachable on narrow devices. */
@media(max-width:450px){.scene-arrow{display:none}.scene-controller{max-width:calc(100vw - 20px);padding:4px}.scene-nav{gap:1px}.nav-item{padding:10px 8px;font-size:10px}.shell-bottom{bottom:12px}}
@media(max-width:375px){.nav-item{font-size:9px;padding:10px 6px}.hero-heading{font-size:14vw}}
/* Editorial gallery needs its own breathing room below the text on phones. */
@media(max-width:700px){.judo-artboard{margin-top:48px}}
@media(max-width:450px){.judo-artboard{margin-top:55px}}

/* V10 — two-line JOEL / CANDAL lockup, shared LEFT EDGE. */
.home-left {min-width:0;}
.hero-heading {
  position:relative;
  display:block;
  width:100%;
  height:clamp(172px,20vw,268px);
  margin:24px 0 27px;
  font-size:clamp(84px,10.6vw,169px);
  line-height:.82;
  letter-spacing:-.095em;
  white-space:nowrap;
}
.hero-heading-original {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:.03em;
  width:100%;height:100%;
  font-weight:730;
}
.hero-heading-original>span {display:block;line-height:.87;}
@media (max-width:900px) {
 .hero-heading {height:clamp(154px,23vw,215px);font-size:clamp(70px,12vw,118px);}
}
@media (max-width:700px) {
 .hero-heading {height:clamp(110px,31vw,174px);font-size:clamp(65px,15vw,108px);margin:14px 0 24px;}
}
@media (max-width:390px) {
 .hero-heading {height:clamp(104px,29vw,135px);font-size:clamp(57px,14.5vw,72px);}
}



/* === intro.css === */
/* candal.dev — interactive introduction, independent of the portfolio's theme. */
.portfolio-intro {
  position:fixed; inset:0; z-index:9999; display:none;
  background:#050608; color:#f9fafc; overflow:hidden;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  isolation:isolate;
}
html.intro-pending .portfolio-intro { display:grid; place-items:center; }
/* The rest of the portfolio is not visually or interactively available on the intro. */
html.intro-pending .site-shell { opacity:0; visibility:hidden; pointer-events:none; }
html.intro-pending .skip-link { visibility:hidden; }
.portfolio-intro::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 52% 45% at 50% 44%, #11141b 0%, #080a0e 58%, transparent 100%);
  opacity:.72;
}
.intro-inner {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:100%; padding:clamp(18px,3vw,36px); position:relative; isolation:isolate;
}
.intro-stage {
  width:min(1100px,94vw); aspect-ratio:1100/520;
  display:grid; place-items:center;
  position:relative; overflow:visible;
}
.intro-mark {display:block;width:100%;height:100%;overflow:visible;}
.intro-mark .first-name,.intro-mark .last-name {fill:#f9fafc;will-change:transform;}
.intro-mark .first-name {font-family:Inter,'Helvetica Neue',Arial,sans-serif;font-weight:710;font-size:151px;letter-spacing:-.044em;transform:translateY(154px);}
.intro-mark .last-name {font-family:Inter,'Helvetica Neue',Arial,sans-serif;font-weight:700;font-size:154px;letter-spacing:-.056em;transform:translateX(-435px);}
.intro-mark .emblem {
  --intro-x:275px;--intro-y:-5px;--intro-scale:.44;
  transform:translate(var(--intro-x),var(--intro-y)) scale(var(--intro-scale));
  transform-box:view-box; transform-origin:0 0;will-change:transform;
}
.intro-mark .outer-ring {opacity:1;transform-box:fill-box;transform-origin:center;will-change:opacity;}
.intro-mark .spark {transform-box:fill-box;transform-origin:center;}
.intro-entry {
  appearance:none;cursor:pointer;position:relative;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  margin-top:clamp(10px,2vh,20px);
  width:min(320px,85vw); height:55px; padding:0 21px;
  border:1px solid rgba(237,241,246,.26);border-radius:100px;
  color:#f2f5f9;background:rgba(255,255,255,.055);
  font:500 14px/1.2 Inter,ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.02em;
  transition:border-color .28s ease,background-color .28s ease,transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s ease;
}
.intro-entry:hover {background:rgba(255,255,255,.11);border-color:rgba(245,247,250,.75);transform:translateY(-2px);box-shadow:0 12px 38px rgba(0,0,0,.27);}
.intro-entry:focus-visible {outline:2px solid #f6f8fc;outline-offset:5px;}
.intro-entry-text {min-width:0;white-space:nowrap;text-align:center;}
.intro-caret {display:inline-block;flex:none;width:1.4px;height:1.1em;background:#ced6e4;animation:intro-cursor 900ms steps(1) infinite;}
.intro-entry-arrow {width:16px;height:16px;flex:none;position:absolute;right:15px;opacity:.72;transition:transform .26s ease;}
.intro-entry:hover .intro-entry-arrow {transform:translateX(3px);}
@keyframes intro-cursor {50%{opacity:0;}}
/* Exactly the four transformations from the provided animation, now triggered by entering. */
.intro-stage.is-playing .intro-mark .emblem {animation:intro-logo-move 2.1s cubic-bezier(.22,.88,.28,1) .16s both;}
.intro-stage.is-playing .intro-mark .outer-ring {animation:intro-ring-fade .85s cubic-bezier(.32,0,.2,1) .6s both;}
.intro-stage.is-playing .intro-mark .last-name {animation:intro-name-slide 2.4s cubic-bezier(.25,.69,.2,1) 1.02s both;}
.intro-stage.is-playing .intro-mark .first-name {animation:intro-first-rise 2s cubic-bezier(.2,.77,.2,1) 2.12s both;}
@keyframes intro-logo-move {
 from {transform:translate(var(--intro-x),var(--intro-y)) scale(var(--intro-scale));}
 to {transform:translate(258px,190px) scale(.18);}
}
@keyframes intro-ring-fade {from{opacity:1}to{opacity:0}}
@keyframes intro-name-slide {from{transform:translateX(-435px)}to{transform:translateX(0)}}
@keyframes intro-first-rise {from{transform:translateY(154px)}to{transform:translateY(0)}}
/* FINAL STATE IS PERMANENT. Crucial: neither reparenting the SVG nor
   changing its layout can replay the logo, ring, or letter reveal. */
.intro-stage.is-complete .intro-mark .emblem {
  animation:none!important;transform:translate(258px,190px) scale(.18)!important;
}
.intro-stage.is-complete .intro-mark .outer-ring {
  animation:none!important;opacity:0!important;
}
.intro-stage.is-complete .intro-mark .first-name,
.intro-stage.is-complete .intro-mark .last-name {
  animation:none!important;transform:translate(0,0)!important;
}

.portfolio-intro.is-playing .intro-entry {opacity:0;pointer-events:none;transform:translateY(13px);transition:opacity .35s ease,transform .35s ease;}
/* Joel is drawn at its FINAL left alignment from the start.
   The full two-line SVG travels as ONE immutable lockup. */
/* The drawn signature survives the exit. It becomes the REAL visible Hero H1. */
.hero-heading {position:relative;}
.hero-heading-original {display:block;}
.hero-brand-slot {position:absolute;inset:0;display:block;pointer-events:none;overflow:visible;}
html.intro-brand-moving .hero-heading-original,
html.intro-brand-docked .hero-heading-original {opacity:0;}
.intro-stage.is-floating {position:fixed;z-index:10002;margin:0;pointer-events:none;transform-origin:top left;}
.intro-stage.is-docked {position:absolute;display:block;margin:0;z-index:2;pointer-events:none;transform:none;}
.intro-stage.is-floating .first-name,
.intro-stage.is-floating .last-name,
.intro-stage.is-floating .emblem-c,
.intro-stage.is-floating .spark,
.intro-stage.is-docked .first-name,
.intro-stage.is-docked .last-name,
.intro-stage.is-docked .emblem-c,
.intro-stage.is-docked .spark {fill:var(--fg);transition:fill .4s ease;}
/* Keep the original Hero typography available for direct visits / changed locale. */
html.intro-revealing .site-shell {visibility:visible;pointer-events:auto;opacity:1;}
html.intro-revealing .shell-top {animation:intro-item-appear 1.05s cubic-bezier(.2,.8,.2,1) .24s both;}
html.intro-revealing .scene.is-active .home-left > .eyebrow {animation:intro-item-appear .85s cubic-bezier(.2,.8,.2,1) .42s both;}
html.intro-revealing .scene.is-active .hero-role {animation:intro-item-appear .9s cubic-bezier(.22,1,.36,1) .60s both;}
html.intro-revealing .scene.is-active .hero-thought {animation:intro-item-appear .95s cubic-bezier(.22,1,.36,1) .82s both;}
html.intro-revealing .scene.is-active .home-cta {animation:intro-item-appear 1s cubic-bezier(.22,1,.36,1) 1.04s both;}
html.intro-revealing .scene.is-active .home-orbit {animation:intro-item-appear 1.2s cubic-bezier(.22,1,.36,1) .78s both;}
html.intro-revealing .scene.is-active .scene-bottom-label,
html.intro-revealing .shell-bottom {animation:intro-item-appear .9s cubic-bezier(.22,1,.36,1) 1.23s both;}
@keyframes intro-item-appear {from{opacity:0;filter:blur(7px);transform:translateY(22px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}
.portfolio-intro.is-exiting {opacity:0;pointer-events:none;transition:opacity 1.35s cubic-bezier(.32,0,.2,1);}
@media(max-width:700px){
 .intro-mark .emblem{--intro-x:113px;--intro-y:-165px;--intro-scale:.7;}
 .intro-inner{padding:15px;}
 .intro-stage{width:94vw;}
 .intro-entry{margin-top:46px;width:min(305px,85vw);height:52px;font-size:13px;}
}
@media(prefers-reduced-motion:reduce){
 .intro-caret{animation:none}
 .intro-stage.is-playing .intro-mark .emblem {animation:none!important;transform:translate(258px,190px) scale(.18)!important;}
 .intro-stage.is-playing .intro-mark .outer-ring {animation:none!important;opacity:0!important;}
 .intro-stage.is-playing .intro-mark .first-name,
 .intro-stage.is-playing .intro-mark .last-name {animation:none!important;transform:none!important;}
 .portfolio-intro.is-exiting,.intro-entry {transition:none!important;}
 html.intro-revealing .shell-top,
 html.intro-revealing .scene.is-active .home-left > .eyebrow,
 html.intro-revealing .scene.is-active .hero-role,
 html.intro-revealing .scene.is-active .hero-thought,
 html.intro-revealing .scene.is-active .home-cta,
 html.intro-revealing .scene.is-active .home-orbit,
 html.intro-revealing .scene.is-active .scene-bottom-label,
 html.intro-revealing .shell-bottom {animation:none!important;}
}

/* V11: the interactive path appears after the permanent JOEL / CANDAL lockup docks. */
html.intro-revealing .path-menu {animation:intro-path-reveal 1.2s cubic-bezier(.22,1,.36,1) .85s both;}
html.intro-revealing .path-option {animation:intro-path-item .8s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(1.05s + var(--stagger) * 120ms);}
@keyframes intro-path-reveal {from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes intro-path-item{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){html.intro-revealing .path-menu,html.intro-revealing .path-option{animation:none!important}}

/* V15 — Intro decoration is not a hover target. SVG <title> has also been
   removed: the accessible name remains via role="img" + aria-label. */
.intro-stage,.intro-stage .intro-mark,.intro-stage .intro-mark * {pointer-events:none !important;}

/* V22: keep the introductory name hidden until the SVG ascent begins.
   The mask alone is not reliable across some mobile SVG engines. */
.intro-stage.is-playing .first-name-reveal {
  animation:v22-intro-name-opacity .3s ease 2.09s both;
}
@keyframes v22-intro-name-opacity {from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce) {
  .intro-stage.is-playing .first-name-reveal{animation:none!important;opacity:1;}
}



/* === navigation.css === */
/* candal.dev — kinetic path navigation, built around type rather than badges. */
.shell-top{border-bottom-color:color-mix(in srgb,var(--thin) 39%,transparent)}
.scene{padding-bottom:65px}
.home-layout{grid-template-columns:minmax(0,1fr) minmax(395px,.97fr);gap:clamp(35px,5.2vw,100px);max-width:1580px}
.home-left{align-self:center}
.hero-heading{margin-top:4px;margin-bottom:26px}
.hero-role{letter-spacing:.23em}
.hero-thought{margin:35px 0 0}
.home-scene .home-layout{min-height:min(690px,78vh)}
/* Permanent orbit path: one navigator shared by ALL scenes. No hover overlay rectangle. */
:root { --path-width: clamp(338px, 29vw, 428px); }
.path-menu {
  position: fixed;
  right: clamp(16px, 3.7vw, 65px);
  top: 112px;
  bottom: 50px;
  width: var(--path-width);
  height: auto;
  min-height: 0;
  max-height: 760px;
  z-index: 26;
  isolation: isolate;
  background: none;
  border: 0;
  overflow: visible;
}
.path-menu::before, .path-halo, .path-glimmer { display: none !important; }
.path-trail { position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;opacity:.8; }
.trail-base{fill:none;stroke:color-mix(in srgb,var(--accent) 25%,transparent);stroke-width:1.3;stroke-linecap:round;stroke-dasharray:1 10;}
.trail-lit{fill:none;stroke:color-mix(in srgb,var(--accent) 48%,transparent);stroke-width:1.4;stroke-linecap:round;stroke-dasharray:120 1250;stroke-dashoffset:-110;animation:trail-drift 18s linear infinite;}
.path-options{position:absolute;inset:0;}
.path-option{
  --float-x:0px;
  position:absolute;
  display:flex;
  align-items:center;
  gap:17px;
  width:max-content;
  min-width:0;
  max-width:100%;
  padding:12px 0;
  margin:0;
  border:0;
  border-radius:0;
  outline:0;
  box-shadow:none;
  background:none !important;
  appearance:none;
  color:var(--muted);
  text-align:left;
  transform:translate3d(var(--float-x),0,0);
  transition:transform .55s var(--ease),color .32s ease,opacity .32s;
}
.path-option:nth-child(1){top:4%;left:27%}
.path-option:nth-child(2){top:23%;left:8%}
.path-option:nth-child(3){top:42%;left:24%}
.path-option:nth-child(4){top:62%;left:5%}
.path-option:nth-child(5){top:82%;left:20%}
.path-node{
  position:relative;flex:none;width:13px;height:13px;border:1px solid color-mix(in srgb,var(--accent) 67%,transparent);
  border-radius:50%;background:var(--bg);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 6%,transparent);
  transition:background .28s,box-shadow .28s,transform .35s;
}
.path-node::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform .3s;}
.path-label{position:relative;font-size:clamp(24px,2.25vw,36px);font-weight:560;line-height:1.12;letter-spacing:-.065em;white-space:nowrap;}
.path-label::after{content:'';position:absolute;bottom:-5px;left:0;width:100%;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);}
.path-arrow{opacity:0; font-size:18px;color:var(--accent);transform:translate(-7px,6px);transition:opacity .3s,transform .35s var(--ease);}
.path-option:hover,.path-option:focus-visible{--float-x:-8px;color:var(--fg);}
.path-option:hover .path-label::after,.path-option:focus-visible .path-label::after{transform:scaleX(1);}
.path-option:hover .path-arrow,.path-option:focus-visible .path-arrow{opacity:1;transform:translate(0,0);}
.path-option:hover .path-node,.path-option:focus-visible .path-node{transform:scale(1.15);box-shadow:0 0 0 9px color-mix(in srgb,var(--accent) 11%,transparent);}
.path-option:focus-visible{outline:none !important;}
.path-option:focus-visible .path-label{text-decoration:underline;text-underline-offset:8px;}
.path-option.is-active{color:var(--fg);}
.path-option.is-active .path-node{border-color:var(--accent);background:var(--accent);box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 13%,transparent),0 0 24px color-mix(in srgb,var(--accent) 22%,transparent);}
.path-option.is-active .path-node::after{transform:scale(1);background:var(--bg);}
.path-option.is-active .path-label::after{transform:scaleX(.24);}
.path-current-mobile{display:none;}
@keyframes trail-drift{to{stroke-dashoffset:-1480;}}

/* Content gives the persistent navigator room. */
@media(min-width:901px) {
 .scene{padding:108px calc(var(--path-width) + clamp(55px,8vw,136px)) 74px clamp(32px,6vw,100px);}
 .home-layout{display:block;min-height:0!important;max-width:900px;margin:auto 0;}
 .home-left{max-width:720px;}
 .hero-heading{height:clamp(156px,18vw,238px);font-size:clamp(75px,9vw,150px);}
 .scene-heading{display:block;}
 .section-subtitle{margin-top:18px;}
 .project-deck{min-height:280px;height:clamp(320px,49vh,550px);}
 .project-content{padding:clamp(16px,2.2vw,30px);}
 .editorial-title{font-size:clamp(65px,6vw,104px);}
 .contact-title{font-size:clamp(66px,6.8vw,118px);}
 .menu-trigger{display:none;}
}
/* Title travelling between the permanent menu and the selected scene. */
.scene-title-flight{position:fixed;z-index:85;pointer-events:none;white-space:nowrap;margin:0;padding:0;color:var(--accent-solid);font-family:Inter,'Helvetica Neue',Arial,sans-serif;font-weight:580;line-height:1.05;letter-spacing:-.06em;will-change:transform,opacity;transform-origin:top left;}
.scene.is-heading-arriving h2,.scene.is-heading-arriving .hero-heading{opacity:0 !important;}
.scene :is(.project-deck,.section-subtitle,.about-lead,.about-paragraph,.about-facts,.cv-placeholder,.portrait-area,.beyond-lead,.beyond-paragraph,.beyond-active-word,.photo-controls,.judo-artboard,.contact-description,.contact-lower,.contact-signature,.hero-role,.hero-thought){transition:opacity .8s var(--ease),translate .8s var(--ease);}
.scene.is-content-pending :is(.project-deck,.section-subtitle,.about-lead,.about-paragraph,.about-facts,.cv-placeholder,.portrait-area,.beyond-lead,.beyond-paragraph,.beyond-active-word,.photo-controls,.judo-artboard,.contact-description,.contact-lower,.contact-signature,.hero-role,.hero-thought){opacity:0;translate:0 22px;}

/* Menu access stays reachable from every section; no bottom navbar. */
.menu-trigger{display:flex;align-items:center;gap:15px;height:38px;margin-left:8px;padding:0 13px 0 16px;border:1px solid var(--thin);border-radius:100px;color:var(--fg);background:var(--surface);font-size:13px;font-weight:540;letter-spacing:-.02em;transition:background-color .25s,border-color .25s,transform .25s}
.menu-trigger:hover{background:var(--surface-2);border-color:var(--accent);transform:translateY(-2px)}
.menu-icon{width:20px;height:19px;display:grid;align-content:center;gap:5px}
.menu-icon i{display:block;height:1px;background:currentColor;transition:width .3s var(--ease),transform .3s;justify-self:end}
.menu-icon i:first-child{width:20px}.menu-icon i:last-child{width:12px}.menu-trigger:hover .menu-icon i:last-child{width:20px}
/* The same typographic language expands into a full-screen scene navigator. */
.atlas-dialog{position:fixed;inset:0 0 0 auto;width:min(570px,100vw);height:100dvh;max-height:100dvh;max-width:none;margin:0;border:0;padding:0;color:var(--fg);background:var(--bg);box-shadow:-35px 0 100px #0007;opacity:0;transform:translateX(45px);transition:opacity .28s,transform .4s var(--ease);overflow:hidden}
.atlas-dialog.is-visible{opacity:1;transform:translateX(0)}
.atlas-dialog::backdrop{background:#01050aa8;backdrop-filter:blur(8px)}
.atlas-surface{height:100%;display:flex;flex-direction:column;padding:clamp(27px,4vw,54px);background:radial-gradient(ellipse 70% 55% at 90% 50%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 100%)}
.atlas-heading{display:flex;align-items:center;justify-content:space-between;font-size:17px;font-weight:630;letter-spacing:-.06em}
.atlas-close{width:47px;height:47px;display:grid;place-items:center;border:1px solid var(--thin);background:var(--surface);color:var(--fg);border-radius:50%;transition:transform .3s,background-color .3s}
.atlas-close:hover{transform:rotate(90deg);background:var(--surface-2)}
.atlas-links{display:flex;flex-direction:column;justify-content:center;flex:1;gap:clamp(4px,2vh,23px)}
.atlas-link{display:flex;align-items:center;justify-content:space-between;width:100%;border:0;border-bottom:1px solid color-mix(in srgb,var(--thin) 70%,transparent);border-radius:0;padding:clamp(12px,2.1vh,22px) 0;color:var(--muted);background:transparent;text-align:left;transition:color .3s,padding-left .42s var(--ease)}
.atlas-link-label{font-size:clamp(33px,4vw,61px);font-weight:560;letter-spacing:-.075em;line-height:1.06}
.atlas-link-arrow{font-size:24px;opacity:0;transform:translate(-12px,8px);transition:opacity .3s,transform .3s}
.atlas-link:hover,.atlas-link:focus-visible,.atlas-link.is-active{padding-left:12px;color:var(--fg)}
.atlas-link:hover .atlas-link-arrow,.atlas-link:focus-visible .atlas-link-arrow{opacity:1;transform:translate(0,0)}
.atlas-link.is-active{border-radius:0;background:transparent!important;color:var(--fg)}
.atlas-link.is-active .atlas-link-label::after{content:'·';padding-left:12px;color:var(--accent)}
.atlas-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;color:var(--muted);font-size:13px;letter-spacing:-.02em}
.atlas-foot span:last-child{font-size:25px;color:var(--accent)}
/* Remove formerly decorative captions and reclaim the space they occupied. */
.projects-note,.top-index,.top-caption,.status-dot,.corner-accent,.shell-bottom{display:none!important}
.scene-heading h2{margin-top:0}
.scene-heading{margin-bottom:30px}
.about-facts span{font-size:14px;line-height:1.4}
.photo-top{justify-content:end}
.photo-controls>span{font-size:12px;letter-spacing:normal;margin-left:8px}
.gallery-hint{font-size:12px;letter-spacing:normal;justify-content:center}
.dialog-poster span{display:none}
/* Narrow screens use an elegant compact active rail on the RIGHT, with the full menu in the header. */
@media(min-width:901px) and (max-width:1230px){
 :root{--path-width:330px;}
 .path-menu{right:18px;}
 .path-label{font-size:clamp(23px,2.25vw,29px);}
 .scene{padding-right:385px;padding-left:44px;}
 .hero-heading{font-size:clamp(70px,8.2vw,115px);}
 .project-lower h3{font-size:clamp(25px,3vw,42px);}
 .about-layout,.beyond-layout{gap:18px;}
}
@media(max-width:900px){
 .scene{padding:96px 85px 42px 30px;}
 .home-layout{display:block;min-height:0!important;margin:auto 0;}
 .home-left{max-width:100%;}
 .path-menu{top:50%;bottom:auto;transform:translateY(-50%);right:8px;width:52px;height:310px;min-height:0;max-height:none;}
 .path-trail{display:none;}
 .path-option,.path-option:nth-child(n){left:12px;top:auto;width:32px;height:40px;min-width:0;padding:8px 7px;justify-content:center;}
 .path-option:nth-child(1){top:4%;}
 .path-option:nth-child(2){top:24%;}
 .path-option:nth-child(3){top:44%;}
 .path-option:nth-child(4){top:64%;}
 .path-option:nth-child(5){top:84%;}
 .path-label,.path-arrow{display:none;}
 .path-node{width:11px;height:11px;}
 .path-option.is-active .path-node{box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 12%,transparent);}
 .path-current-mobile{display:block;position:absolute;top:-22px;right:0;font-size:11px;white-space:nowrap;color:var(--accent);font-weight:630;letter-spacing:-.015em;}
 .menu-trigger{display:flex;}
 .scene-heading h2{font-size:clamp(47px,7vw,86px);}
 .project-deck,.project-deck[data-featured='1']{max-width:100%;}
 .atlas-dialog{width:min(550px,100vw);}
}
@media(max-width:700px){
 .shell-top{z-index:60;}
 .scene{padding:92px 61px 32px 20px;justify-content:center;}
 .home-layout{margin:auto 0;}
 .home-left{min-width:0;}
 .hero-heading{height:clamp(105px,30vw,160px);font-size:clamp(59px,14vw,108px);margin:14px 0 25px;}
 .hero-thought{font-size:clamp(17px,4vw,20px);}
 .project-deck,.project-deck[data-featured='1']{height:calc(100dvh - 270px);min-height:320px;}
 .project-card{border-radius:14px;}
 .about-layout,.beyond-layout{gap:0;}
 .editorial-title{font-size:clamp(44px,10.7vw,68px);}
 .atlas-dialog{width:100vw;}
 .atlas-surface{padding:30px 25px 35px;}
 .atlas-link-label{font-size:clamp(37px,9.3vw,60px);}
 .contact-layout{padding-bottom:10px;}
}
@media(max-width:390px){
 .scene{padding-left:17px;padding-right:59px;}
 .hero-heading{font-size:clamp(51px,13.5vw,68px);}
 .project-deck{min-height:280px;}
 .menu-trigger{gap:8px;height:34px;padding:0 9px;font-size:12px;margin-left:0;}
 .menu-icon{width:15px;}
}
@media(prefers-reduced-motion:reduce){.trail-lit{animation:none}.scene-title-flight{display:none}.scene :is(.hero-role,.hero-thought,.project-deck,.portrait-area,.judo-artboard){transition:none;}}

/* Visible controls must not inherit the former bottom-pill navigation colors. */
.atlas-dialog .nav-item:hover,.atlas-dialog .nav-item:focus-visible{background:transparent;color:var(--fg);border-radius:0}
/* On desktop the orbit IS the menu; don't duplicate it in the header. */
@media(min-width:901px){.shell-top .menu-trigger{display:none;}}

/* V13 — a single typographic system across the right navigation and page headings. */
.path-label {font-size:clamp(22px,2.05vw,32px);font-weight:620;letter-spacing:-.055em;line-height:1.03;}
.path-label .shared-title-line {display:block;}
.path-label.is-flying {visibility:hidden !important;}
.path-option:nth-child(4) {top:59%;}
.path-option:nth-child(5) {top:83%;}
/* Long names deliberately occupy two clean lines instead of overflowing. */
.path-option:nth-child(4) .path-label {font-size:clamp(20px,1.9vw,30px);}
.section-motion-title {
 display:block;
 width:max-content;
 max-width:100%;
 margin:0 0 25px;
 font-family:Inter,'Helvetica Neue',Arial,sans-serif;
 font-size:clamp(54px,5.85vw,99px);
 font-weight:620;
 line-height:1.03;
 letter-spacing:-.055em;
 color:var(--fg);
 text-transform:none;
 white-space:nowrap;
}
.section-motion-title .shared-title-line{display:block;}
.beyond-copy .section-motion-title {font-size:clamp(47px,5.1vw,82px);white-space:normal;}
.about-copy .section-motion-title{margin-bottom:34px;}
.contact-upper .section-motion-title {font-size:clamp(62px,6.9vw,112px);margin-bottom:32px;}
.project-scene .scene-heading{align-items:end;margin-bottom:34px;}
.project-scene .section-motion-title{margin-bottom:0;}
.scene.is-heading-arriving {transform:none!important;transition:opacity .58s ease,visibility 0s!important;}
.scene.is-heading-arriving .section-motion-title,
.scene.is-heading-arriving .hero-heading {visibility:hidden!important;opacity:0!important;}
.scene-title-flight {
 position:fixed;z-index:85;display:block;width:max-content;max-width:none;
 pointer-events:none;white-space:nowrap;margin:0;padding:0;
 color:var(--fg);font-family:Inter,'Helvetica Neue',Arial,sans-serif;
 font-weight:620;line-height:1.03;letter-spacing:-.055em;
 transform-origin:top left;will-change:transform,font-size;
}
.scene-title-flight .shared-title-line{display:block;}
/* Prevent unrelated elements jumping ahead of the travelling title. */
.scene.is-content-pending .section-subtitle,
.scene.is-content-pending :is(.project-deck,.about-lead,.about-paragraph,.about-facts,.cv-placeholder,.portrait-area,.beyond-lead,.beyond-paragraph,.beyond-active-word,.photo-controls,.judo-artboard,.contact-description,.contact-lower,.contact-signature,.hero-role,.hero-thought){opacity:0;translate:0 14px;}
@media (min-width:901px) and (max-width:1240px) {
 .section-motion-title{font-size:clamp(47px,5.5vw,73px);}
 .beyond-copy .section-motion-title{font-size:clamp(43px,4.75vw,66px);}
 .contact-upper .section-motion-title{font-size:clamp(57px,6vw,83px);}
 .path-label{font-size:clamp(22px,2.1vw,27px);}
 .path-option:nth-child(4) .path-label{font-size:clamp(20px,1.9vw,25px);}
}
@media (max-width:900px) {
 .section-motion-title{font-size:clamp(47px,8vw,74px);}
 .beyond-copy .section-motion-title{font-size:clamp(43px,7vw,68px);}
 .contact-upper .section-motion-title{font-size:clamp(55px,9vw,88px);}
}
@media (max-width:700px) {
 .section-motion-title{font-size:clamp(43px,10vw,62px);white-space:normal;}
 .beyond-copy .section-motion-title{font-size:clamp(38px,8.4vw,57px);}
 .contact-upper .section-motion-title{font-size:clamp(45px,10vw,74px);}
 .project-scene .scene-heading{display:block;}
 .project-scene .section-subtitle{margin:8px 0 0;}
}
@media (prefers-reduced-motion:reduce) {
 .scene.is-heading-arriving .section-motion-title,.scene.is-heading-arriving .hero-heading{visibility:visible!important;opacity:1!important;}
}
/* Final sizing pass: all headings share the exact menu type weight and breaks. */
.scene .section-motion-title,
.project-scene .scene-heading h2.section-motion-title {
 font-family:Inter,'Helvetica Neue',Arial,sans-serif;
 font-size:clamp(54px,5.45vw,86px);
 font-weight:620;
 line-height:1.03;
 letter-spacing:-.055em;
 color:var(--fg);
 text-transform:none;
}
.beyond-scene .section-motion-title {font-size:clamp(43px,3.85vw,60px);max-width:100%;}
.contact-scene .section-motion-title{font-size:clamp(60px,6.2vw,100px);}
@media (min-width:901px) and (max-width:1230px){
 :root{--path-width:258px;}
 .path-menu{width:258px;right:10px;}
 .scene{padding-right:285px;padding-left:44px;}
 .path-label{font-size:clamp(19px,2vw,26px);}
 .path-option:nth-child(4) .path-label{font-size:clamp(18px,1.85vw,23px);}
 .scene .section-motion-title,.project-scene .scene-heading h2.section-motion-title{font-size:clamp(47px,5.1vw,68px);}
 .beyond-scene .section-motion-title{font-size:clamp(39px,4.0vw,49px);}
 .contact-scene .section-motion-title{font-size:clamp(55px,5.7vw,77px);}
}
@media (max-width:900px){
 .scene .section-motion-title,.project-scene .scene-heading h2.section-motion-title{font-size:clamp(44px,7.1vw,67px);}
 .beyond-scene .section-motion-title{font-size:clamp(41px,6.4vw,60px);}
 .contact-scene .section-motion-title{font-size:clamp(49px,8.2vw,78px);}
}
@media (max-width:700px){
 .scene .section-motion-title,.project-scene .scene-heading h2.section-motion-title{font-size:clamp(42px,10.2vw,60px);}
 .beyond-scene .section-motion-title{font-size:clamp(35px,9vw,55px);}
 .contact-scene .section-motion-title{font-size:clamp(45px,10vw,66px);}
}


/* V14 — choreography of real content, not a whole-page crossfade.
   Animations are limited to opacity and transform for smooth compositing. */
.scene.is-transition-out {
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:none !important;
  transform:none !important;
  z-index:3;
  transition:none !important;
}
.scene.is-active {z-index:2;}
.scene.is-entering {
  pointer-events:none !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  transition:none !important;
}
.scene.is-entering .scene-piece {
  opacity:0 !important;
  visibility:hidden !important;
  transition:none !important;
}
.scene.is-transition-out .scene-piece {
  animation:scene-piece-leave var(--scene-exit-duration,610ms) cubic-bezier(.4,0,.6,1) var(--piece-out,0ms) both !important;
}
.scene.is-revealing .scene-piece:not(.section-motion-title):not(.hero-heading) {
  animation:scene-piece-arrive var(--scene-enter-duration,710ms) cubic-bezier(.18,.8,.24,1) var(--piece-in,0ms) both !important;
}
.scene.is-revealing .section-motion-title,
.scene.is-revealing .hero-heading {visibility:visible !important;opacity:1 !important;}
@keyframes scene-piece-leave {
  from {opacity:1;transform:translate3d(0,0,0)}
  to {opacity:0;transform:translate3d(-15px,-9px,0)}
}
@keyframes scene-piece-arrive {
  from {opacity:0;transform:translate3d(0,19px,0)}
  to {opacity:1;transform:translate3d(0,0,0)}
}
/* The heading is hidden behind its flying menu twin until arrival. */
.scene.is-heading-arriving .section-motion-title,
.scene.is-heading-arriving .hero-heading {visibility:hidden !important;opacity:0 !important;}
/* The travelling title itself never catches mouse input. */
.scene-title-flight {z-index:110;transform-origin:top left;will-change:transform,opacity;}
/* In touch navigation the dot becomes an abbreviated flying title. */
@media(max-width:900px){
 .scene-title-flight {white-space:normal;max-width:none;}
}
@media(prefers-reduced-motion:reduce){
 .scene.is-transition-out .scene-piece,
 .scene.is-revealing .scene-piece {animation:none !important;}
 .scene.is-entering .scene-piece {visibility:visible!important;opacity:1!important;}
}


/* V15 — exclusive scenes: no cross-section text can show behind the
   incoming content. We retain staggered EXIT and title flight, then reveal. */
.scene:not(.is-active):not(.is-transition-out) {
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
  transition:none !important;
}
/* As soon as the last old piece has faded, hide the entire old layer.
   This happens before the new moving title reaches its destination. */
.scene.is-transition-out.is-exit-complete {
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transition:none !important;
}
/* Hide the FULL incoming composition while its title is still in flight.
   It is insufficient to hide the selected child pieces only: decorative
   wrappers and other headings could otherwise bleed through. */
.scene.is-entering > * {
  visibility:hidden !important;
  opacity:0 !important;
}
/* Once landed, piece animations own the appearance. */
.scene.is-revealing > * {visibility:visible;}
/* Also avoid the page title being visible while it is represented by the
   travelling clone, including a keyboard-initiated navigation. */
.scene.is-heading-arriving .section-motion-title,
.scene.is-heading-arriving .hero-heading {visibility:hidden!important;opacity:0!important;}
@media (prefers-reduced-motion:reduce) {
  .scene.is-entering > * {visibility:visible!important;opacity:1!important;}
}

/* V16 — mobile: a genuinely useful 5-destination dock, not a clipped side rail.
   The visible labels are also the start positions for the flying headings. */
@media (max-width:900px) {
  .path-menu {
    position:fixed;left:50%;right:auto;top:auto;bottom:max(10px,env(safe-area-inset-bottom));
    transform:translateX(-50%);width:min(630px,calc(100vw - 20px));
    height:72px;min-height:0;max-height:none;z-index:45;
    padding:6px;border:1px solid var(--thin);border-radius:19px;
    background:color-mix(in srgb,var(--bg) 92%,var(--surface));
    box-shadow:0 9px 28px rgba(0,0,0,.16);
    overflow:visible;
  }
  .path-menu .path-options {position:relative;inset:auto;width:100%;height:100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;}
  .path-option,.path-option:nth-child(n) {
    position:relative;top:auto;left:auto;right:auto;bottom:auto;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    width:100%;min-width:0;max-width:none;height:100%;min-height:0;
    padding:7px 2px;gap:2px;border:0;border-radius:13px;
    transform:none;background:transparent!important;
    transition:color .25s ease,background-color .25s ease;
  }
  .path-option:hover,.path-option:focus-visible{--float-x:0px;transform:none;}
  .path-option.is-active {background:var(--surface-2)!important;}
  .path-option .path-node {width:5px;height:5px;border:0;background:var(--muted);box-shadow:none;transform:none;}
  .path-option.is-active .path-node {background:var(--accent);box-shadow:none;}
  .path-option .path-node::after{display:none;}
  .path-option .path-label,.path-option:nth-child(4) .path-label {
    display:block;width:100%;max-width:100%;min-width:0;
    font-size:clamp(9px,1.2vw,12px);font-weight:570;letter-spacing:-.035em;line-height:1.15;
    white-space:normal;overflow-wrap:normal;text-align:center;
    color:inherit;
  }
  .path-label .shared-title-line {display:inline;}
  .path-label .shared-title-line + .shared-title-line::before{content:' ';}
  .path-label::after,.path-arrow,.path-current-mobile,.path-trail{display:none!important;}
  .scene {
    padding:93px clamp(18px,4.6vw,42px) calc(116px + env(safe-area-inset-bottom)) !important;
    overflow-x:hidden;overflow-y:auto;
  }
  .scene-heading{max-width:100%;}
  .section-subtitle{max-width:100%;}
  .project-deck,.project-deck[data-featured='1']{
    width:100%;height:clamp(320px,53dvh,570px);min-height:300px;
  }
  .hero-heading{max-width:100%;}
  .big-email{font-size:clamp(21px,4.5vw,42px);overflow-wrap:anywhere;}
  .contact-layout,.contact-lower,.contact-mail-box{min-width:0;}
  .contact-signature{margin-bottom:12px;}
  .judo-artboard{max-width:100%;}
}
@media (max-width:600px){
  .path-menu{height:69px;border-radius:17px;}
  .path-option .path-label,.path-option:nth-child(4) .path-label{font-size:clamp(9px,2.4vw,11px);}
  .scene{padding-top:84px!important;padding-bottom:calc(106px + env(safe-area-inset-bottom))!important;}
  .scene .section-motion-title,.project-scene .scene-heading h2.section-motion-title{
    font-size:clamp(43px,11vw,65px);white-space:normal;max-width:100%;
  }
  .beyond-scene .section-motion-title{font-size:clamp(39px,9.5vw,56px);}
  .contact-scene .section-motion-title{font-size:clamp(45px,11.6vw,70px);}
  .about-layout,.beyond-layout {width:100%;gap:8px;}
  .portrait-area{max-width:100%;}
  .contact-lower{gap:22px;}
  .contact-description{max-width:100%;}
  .project-deck,.project-deck[data-featured='1']{height:clamp(300px,52dvh,495px);min-height:300px;}
}
@media (max-width:370px){
  .path-menu{width:calc(100vw - 12px);padding:4px;}
  .path-option .path-label,.path-option:nth-child(4) .path-label{font-size:9px;letter-spacing:-.05em;}
  .scene{padding-left:16px!important;padding-right:16px!important;}
  .project-deck{min-height:290px;}
}

@media(max-width:900px){.shell-top .menu-trigger{display:none!important}}

/* ─────────────────────────────────────────────────────
   V17 / CONSTELLATION — one visual language, two layouts.
   Desktop: freeform orbital index. Mobile: top-anchored
   section selector, so no titles cross an entire screen.
   ───────────────────────────────────────────────────── */
.mobile-nav-row{display:none}
.path-orbit-art{
  position:absolute;inset:16% -8% 3% 0;
  pointer-events:none;opacity:.85;isolation:isolate;
  filter:drop-shadow(0 0 24px color-mix(in srgb,var(--accent) 6%,transparent));
}
.path-orbit-outer,.path-orbit-inner{position:absolute;display:block;border-radius:50%;aspect-ratio:1;}
.path-orbit-outer{
  width:87%;left:7%;top:17%;border:1px solid color-mix(in srgb,var(--accent) 24%,transparent);
  box-shadow:inset 0 0 55px color-mix(in srgb,var(--accent) 3%,transparent),0 0 65px color-mix(in srgb,var(--accent) 4%,transparent);
  mask-image:conic-gradient(from 32deg,transparent 0 22deg,#000 44deg 172deg,transparent 200deg 215deg,#000 255deg 343deg,transparent 358deg);
  transform:rotate(-15deg);transition:transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.path-orbit-inner{
  width:53%;left:24%;top:32%;border:1px dashed color-mix(in srgb,var(--accent) 28%,transparent);
  mask-image:conic-gradient(from 170deg,#000,transparent 68deg,#000 100deg,transparent 230deg,#000 330deg);
  transform:rotate(24deg);transition:transform 1.45s cubic-bezier(.2,.7,.2,1);
}
.path-orbit-star{position:absolute;left:49%;top:55%;font-size:25px;line-height:1; color:color-mix(in srgb,var(--accent) 37%,transparent);transform:translate(-50%,-50%);}
.path-menu[data-active="1"] .path-orbit-outer{transform:rotate(14deg)}
.path-menu[data-active="2"] .path-orbit-outer{transform:rotate(41deg)}
.path-menu[data-active="3"] .path-orbit-outer{transform:rotate(71deg)}
.path-menu[data-active="4"] .path-orbit-outer{transform:rotate(101deg)}
.path-menu[data-active="1"] .path-orbit-inner{transform:rotate(-35deg)}
.path-menu[data-active="2"] .path-orbit-inner{transform:rotate(-75deg)}
.path-menu[data-active="3"] .path-orbit-inner{transform:rotate(-120deg)}
.path-menu[data-active="4"] .path-orbit-inner{transform:rotate(-170deg)}
.path-menu .path-trail{opacity:.85}
.path-menu .trail-base{stroke-dasharray:2 9;stroke-width:1.2}
.path-menu .trail-lit{stroke-dasharray:125 1000;stroke-width:1.6}
.path-option.path-home{
  top:3%;left:52%;width:80px;height:80px;
  justify-content:center;gap:0;padding:6px;
}
.path-home .path-node,.path-home .path-arrow,.path-home .path-label::after{display:none!important}
.path-home .path-label{display:grid;place-items:center;width:66px;height:66px;
  border:1px solid color-mix(in srgb,var(--accent) 29%,transparent);
  border-radius:50%;background:color-mix(in srgb,var(--surface) 60%,transparent);
  transition:border-color .35s,box-shadow .42s,transform .5s cubic-bezier(.22,1,.36,1);
}
.path-home .path-label::before{content:'';position:absolute;inset:-8px;border-radius:50%;border:1px dashed color-mix(in srgb,var(--accent) 35%,transparent);opacity:.75;}
.path-home-mark{display:block;width:46px;height:46px;object-fit:contain;transition:transform .75s cubic-bezier(.22,1,.36,1);}
.path-home:hover .path-label,.path-home:focus-visible .path-label,.path-home.is-active .path-label{
  border-color:color-mix(in srgb,var(--accent) 70%,transparent);
  box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 5%,transparent),0 0 26px color-mix(in srgb,var(--accent) 9%,transparent);
}
.path-home:hover .path-home-mark,.path-home:focus-visible .path-home-mark{transform:rotate(-35deg) scale(1.1)}
[data-theme="light"] .path-home-mark,[data-theme="light"] .mobile-home-link img {filter:brightness(.18)}
@media(min-width:901px){
  .path-menu{top:104px;bottom:34px;max-height:785px;}
  .path-option:not(.path-home){gap:14px;}
  .path-option:nth-child(2){top:24%;left:5%;}
  .path-option:nth-child(3){top:43%;left:30%;}
  .path-option:nth-child(4){top:63%;left:2%;}
  .path-option:nth-child(5){top:84%;left:30%;}
  .path-option:not(.path-home) .path-label{font-size:clamp(23px,2.1vw,32px);font-weight:580;}
  .path-option:nth-child(4) .path-label{font-size:clamp(21px,1.83vw,28px);}
  .path-option:not(.path-home) .path-node{width:9px;height:9px;background:var(--bg);}
  .path-option:not(.path-home).is-active .path-node{background:var(--accent);}
  .path-option:not(.path-home).is-active .path-node::after{display:none}
  .path-option.is-active .path-label{color:var(--fg)}
}
@media (min-width:901px) and (max-width:1230px){
  .path-option.path-home{left:47%;}
  .path-option:nth-child(3){left:23%;}
  .path-option:nth-child(5){left:24%;}
  .path-option:not(.path-home) .path-label{font-size:clamp(19px,2.05vw,26px)}
  .path-option:nth-child(4) .path-label{font-size:clamp(18px,1.82vw,24px)}
}
@media(max-width:900px){
  .path-menu{
    position:fixed;top:78px;bottom:auto;left:clamp(12px,3vw,27px);right:clamp(12px,3vw,27px);
    transform:none;width:auto;height:62px;max-height:none;min-height:0;
    padding:6px;border:1px solid color-mix(in srgb,var(--thin) 85%,transparent);
    border-radius:18px;background:color-mix(in srgb,var(--bg) 93%,var(--surface));
    box-shadow:0 17px 50px rgba(0,0,0,.14);z-index:48;
  }
  .path-menu .path-orbit-art,.path-menu .path-trail,.path-current-mobile{display:none!important}
  .mobile-nav-row{display:flex;align-items:center;width:100%;height:100%;gap:6px}
  .mobile-home-link,.mobile-nav-toggle,.mobile-nav-step{
    display:flex;align-items:center;justify-content:center;appearance:none;
    min-height:42px;min-width:42px;border-radius:12px;color:var(--fg);
    background:transparent;border:0;transition:background-color .25s ease,color .25s ease;
  }
  .mobile-home-link img{width:27px;height:27px;display:block}
  .mobile-home-link:hover,.mobile-home-link.is-active{background:var(--surface-2)}
  .mobile-nav-toggle{flex:1;min-width:0;justify-content:space-between;padding:0 12px;
    border-left:1px solid var(--thin);border-radius:4px;
    text-align:left;gap:12px;font:580 clamp(15px,3.6vw,18px)/1.12 Inter,system-ui,sans-serif;
    letter-spacing:-.04em;
  }
  .mobile-nav-current{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .mobile-chevron{font-size:22px;color:var(--muted);transition:transform .28s}
  .is-mobile-open .mobile-chevron{transform:rotate(180deg)}
  .mobile-nav-step{font-size:22px;border:1px solid var(--thin);min-width:41px;}
  .mobile-nav-step:active,.mobile-nav-step:hover{background:var(--surface-2)}
  .path-menu .path-options{
    position:absolute;top:calc(100% + 9px);left:0;right:0;bottom:auto;
    display:grid;grid-template-columns:1fr;grid-template-rows:repeat(5,auto);gap:0;
    padding:8px;border:1px solid var(--thin);border-radius:18px;
    background:color-mix(in srgb,var(--bg) 95%,var(--surface));
    box-shadow:0 25px 65px rgba(0,0,0,.30);
    opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);
    transition:opacity .23s ease,transform .25s ease,visibility 0s linear .25s;
  }
  .path-menu.is-mobile-open .path-options{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition:opacity .23s ease,transform .25s ease;}
  .path-option,.path-option:nth-child(n),.path-option.path-home{
    position:relative;top:auto;left:auto;right:auto;bottom:auto;transform:none;
    width:100%;min-width:0;max-width:100%;height:auto;min-height:49px;
    padding:9px 14px;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:13px;
    color:var(--muted);border:0;border-bottom:1px solid var(--thin);border-radius:0;
    background:transparent!important;
  }
  .path-option:last-child{border-bottom:0;}
  .path-option:hover,.path-option:focus-visible{transform:none;color:var(--fg)}
  .path-option .path-label,.path-option:nth-child(4) .path-label{
    display:block;font-size:clamp(18px,4.7vw,23px);line-height:1.1;font-weight:580;
    color:inherit;text-align:left;white-space:normal;overflow:visible;max-width:100%;letter-spacing:-.04em;
  }
  .path-label .shared-title-line{display:inline;}
  .path-label .shared-title-line+.shared-title-line::before{content:' '}
  .path-option .path-node{width:7px;height:7px;box-shadow:none;border:1px solid var(--accent);background:transparent;}
  .path-option.is-active .path-node{background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 9%,transparent)}
  .path-node::after,.path-arrow,.path-label::after{display:none!important}
  .path-option.path-home .path-label{display:grid;width:42px;height:42px;place-items:center;background:transparent;border:0;box-shadow:none;}
  .path-home .path-label::before{display:none;}
  .path-home .path-home-mark{width:30px;height:30px;}
  .path-option.path-home{min-height:50px;justify-content:flex-start;padding:5px 14px;}
  .path-option.path-home .path-node{display:block;}
  .path-option.path-home::after{content:attr(aria-label);color:var(--muted);font-size:19px;letter-spacing:-.04em;font-weight:580;}
  .scene{
    padding:166px clamp(19px,4.8vw,40px) 30px !important;
    overflow-x:hidden;overflow-y:auto;justify-content:flex-start;
  }
  .home-scene{justify-content:center!important;}
  .scene-heading{max-width:100%;}
  .path-home:hover .path-home-mark{transform:rotate(-20deg)}
}
@media(max-width:600px){
  .path-menu{top:72px;left:12px;right:12px;height:60px;border-radius:15px;}
  .mobile-nav-toggle{font-size:16px;padding:0 8px;}
  .mobile-nav-step{min-width:36px;min-height:39px;}
  .mobile-home-link{min-width:37px;min-height:39px;}
  .scene{padding:155px 18px 24px!important;}
  .path-menu .path-options{max-height:calc(100dvh - 165px);overflow-y:auto;}
  .project-deck,.project-deck[data-featured='1']{height:clamp(310px,52dvh,490px);}
  .scene .section-motion-title,.project-scene .scene-heading h2.section-motion-title{
    font-size:clamp(42px,10.7vw,59px);
  }
  .beyond-scene .section-motion-title{font-size:clamp(38px,9.5vw,55px);}
  .contact-scene .section-motion-title{font-size:clamp(45px,10vw,65px);}
}
/* After returning to Inicio, replay the emblem unfolding where the signature
   lives. Overrides only the frozen SVG pose, never the original intro code. */
.scene.is-replaying-home>.home-layout {visibility:visible!important;opacity:1!important;}
.scene.is-replaying-home .hero-heading {visibility:visible!important;opacity:1!important;}
.scene.is-replaying-home .hero-role,.scene.is-replaying-home .hero-thought{visibility:hidden!important;opacity:0!important;}
.intro-stage.is-docked.is-replaying .intro-mark .emblem{
  animation:intro-logo-move 2.1s cubic-bezier(.22,.88,.28,1) .16s both!important;
}
.intro-stage.is-docked.is-replaying .intro-mark .outer-ring{
  animation:intro-ring-fade .85s cubic-bezier(.32,0,.2,1) .6s both!important;
}
.intro-stage.is-docked.is-replaying .intro-mark .last-name{
  animation:intro-name-slide 2.4s cubic-bezier(.25,.69,.2,1) 1.02s both!important;
}
.intro-stage.is-docked.is-replaying .intro-mark .first-name{
  animation:intro-first-rise 2s cubic-bezier(.2,.77,.2,1) 2.12s both!important;
}
@media(prefers-reduced-motion:reduce){
  .intro-stage.is-docked.is-replaying .intro-mark :is(.emblem,.outer-ring,.last-name,.first-name){animation:none!important;}
  .path-orbit-art *{transition:none!important;}
}
/* Dropdown rows must size to their content, not inherit the V16 dock grid. */
@media(max-width:900px){
 .path-menu .path-options{
   width:100%;height:auto;min-height:0;
   display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:none;
   grid-auto-rows:minmax(49px,auto);gap:0;
 }
}
@media(max-width:600px){
  .shell-top .brand-lockup img{display:none}
  .shell-top .brand-lockup{gap:0}
  /* Inicio is the brand symbol itself, not a second text link. */
  .path-option.path-home::after{content:none}
}

/* ───────────────────────────────────────────────────────────────────────
   V18 — centered orbital tree on touch screens.
   Closed: slim centered navigator below the scene.
   Open: a large interactive constellation occupying the middle of viewport.
   Vertical swipes on the page update the highlighted branch and animate the
   chosen heading from the tree into the page without jumping across 100vh.
   ─────────────────────────────────────────────────────────────────────── */
.mobile-tree-backdrop{display:none;}
@media(max-width:900px){
  .scene{padding:95px clamp(20px,5vw,44px) 104px!important;}
  .home-scene{justify-content:center!important;}
  .path-menu{
    top:auto!important;bottom:calc(14px + env(safe-area-inset-bottom,0px))!important;
    left:50%!important;right:auto!important;
    transform:translateX(-50%)!important;
    width:min(270px,calc(100vw - 44px))!important;height:57px!important;
    padding:5px 9px!important;border-radius:100px!important;
    z-index:115!important;
    background:color-mix(in srgb,var(--bg) 92%,var(--surface))!important;
    box-shadow:0 10px 50px rgba(0,0,0,.3);
  }
  .mobile-nav-row{display:flex!important;position:relative;z-index:3;gap:0!important;}
  .mobile-home-link{display:none!important;}
  .mobile-nav-toggle{flex:1;justify-content:space-between;border:0!important;padding:0 13px!important;background:transparent!important;}
  .mobile-nav-toggle::before{content:'✳';font-size:16px;color:var(--accent);margin-right:8px;}
  .mobile-nav-current{flex:1;font-size:15px;}
  .mobile-chevron{font-size:19px;transform:none!important;}
  .mobile-nav-step{min-width:37px!important;width:37px;border:0!important;background:none!important;font-size:20px;}
  .mobile-tree-backdrop{
    display:block;position:fixed;inset:0;z-index:-1;pointer-events:none;
    opacity:0;transition:opacity .3s ease;
    background:color-mix(in srgb,var(--bg) 84%,transparent);
    backdrop-filter:blur(11px);
  }
  .path-menu.is-mobile-open{box-shadow:0 12px 56px rgba(0,0,0,.45);}
  .path-menu.is-mobile-open .mobile-tree-backdrop{opacity:1;pointer-events:auto;}
  .path-menu .path-options {
    position:fixed!important;
    inset:auto!important;top:50%!important;left:50%!important;right:auto!important;
    bottom:auto!important;width:min(350px,92vw)!important;
    height:min(540px,68dvh)!important;max-height:none!important;
    padding:0!important;margin:0!important;display:block!important;
    border:0!important;border-radius:0!important;background:transparent!important;
    box-shadow:none!important;overflow:visible!important;
    opacity:0;visibility:hidden;pointer-events:none;
    transform:translate(-50%,-46%) scale(.97)!important;
    transition:opacity .26s ease,transform .32s cubic-bezier(.22,1,.36,1),visibility 0s linear .3s!important;
    z-index:2;
  }
  .path-menu.is-mobile-open .path-options{
    opacity:1;visibility:visible;pointer-events:auto;
    transform:translate(-50%,-50%) scale(1)!important;
    transition:opacity .26s ease,transform .32s cubic-bezier(.22,1,.36,1)!important;
  }
  .path-menu .path-orbit-art{display:block!important;position:fixed;top:50%;left:50%;inset:auto!important;
    width:min(340px,92vw);height:min(540px,68dvh);pointer-events:none;
    transform:translate(-50%,-50%);opacity:0!important;transition:opacity .3s ease;}
  .path-menu.is-mobile-open .path-orbit-art{opacity:.36!important;}
  .path-menu .path-trail{
    display:block!important;position:fixed;top:50%;left:50%;inset:auto!important;
    transform:translate(-50%,-50%);width:min(350px,92vw);height:min(540px,68dvh);
    opacity:0!important;pointer-events:none;transition:opacity .3s ease;
  }
  .path-menu.is-mobile-open .path-trail{opacity:.83!important;}
  .path-option,.path-option:nth-child(n),.path-option.path-home{
    position:absolute!important;left:var(--tree-x)!important;top:var(--tree-y)!important;
    display:flex!important;align-items:center!important;justify-content:flex-start!important;
    height:auto!important;min-height:52px!important;width:max-content!important;
    max-width:min(300px,89vw)!important;right:auto!important;bottom:auto!important;
    padding:6px 8px!important;margin:0!important;border:0!important;background:transparent!important;
    color:var(--muted);border-radius:10px!important;gap:13px!important;
    transition:color .26s ease,transform .36s ease!important;
  }
  .path-option:nth-child(1){--tree-x:28%;--tree-y:0%;}
  .path-option:nth-child(2){--tree-x:38%;--tree-y:23%;}
  .path-option:nth-child(3){--tree-x:12%;--tree-y:43%;}
  .path-option:nth-child(4){--tree-x:31%;--tree-y:62%;}
  .path-option:nth-child(5){--tree-x:20%;--tree-y:84%;}
  .path-option .path-label,.path-option:nth-child(4) .path-label{
    display:block!important;font-size:clamp(19px,4.9vw,25px)!important;
    font-weight:600!important;letter-spacing:-.055em!important;
    line-height:1.12!important;white-space:normal!important;
    max-width:min(265px,75vw)!important;
  }
  .path-option:nth-child(4) .path-label{font-size:clamp(18px,4.65vw,24px)!important;}
  .path-option .path-node{display:block!important;width:10px!important;height:10px!important;flex:none;}
  .path-option.path-home{min-height:65px!important;}
  .path-option.path-home .path-label{display:grid!important;place-items:center!important;width:56px!important;height:56px!important;max-width:none!important;}
  .path-option.path-home .path-home-mark{width:46px;height:46px;}
  .path-option.path-home .path-node{display:none!important;}
  .path-option.path-home::after{content:none!important;}
  .path-option.is-active{color:var(--fg)!important;transform:translateX(-4px)!important;}
  .path-option.is-active .path-node{background:var(--accent)!important;box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 15%,transparent)!important;}
  .path-option .shared-title-line{display:block!important;}
  .path-option .shared-title-line+.shared-title-line::before{content:none!important;}
  .path-option .path-arrow{display:none!important;}
  .path-option .path-label::after{display:none!important;}
  .shell-top{z-index:40;}
}
@media(max-width:420px){
 .path-menu .path-options,.path-menu .path-trail{width:min(318px,94vw)!important;}
 .path-option:nth-child(2){--tree-x:33%;}
 .path-option:nth-child(4){--tree-x:25%;}
 .path-option:nth-child(5){--tree-x:20%;}
 .scene{padding-left:18px!important;padding-right:18px!important;}
}
@media(prefers-reduced-motion:reduce){
 .path-menu .path-options,.path-menu .path-trail,.mobile-tree-backdrop{transition:none!important;}
}
/* Keep fixed overlay geometry relative to viewport, not the floating pill. */
@media(max-width:900px){
 .path-menu{transform:none!important;margin-left:calc(-.5 * min(270px, 100vw - 44px))!important;}
 .mobile-tree-backdrop{z-index:0!important;}
 .path-menu .path-trail,.path-menu .path-orbit-art{z-index:1;}
 .path-menu .path-options{z-index:2;}
 .path-menu .mobile-nav-row{z-index:3;}
}

@media(max-width:900px){
 .path-menu .path-orbit-art{display:none!important;}
 .path-menu.is-mobile-open .path-trail .trail-base{stroke:color-mix(in srgb,var(--accent) 53%,transparent);stroke-width:1.65;stroke-dasharray:2 8;}
 .path-menu.is-mobile-open .path-trail .trail-lit{stroke:var(--accent);stroke-width:2;stroke-dasharray:160 1000;animation:none;transition:stroke-dashoffset .7s cubic-bezier(.2,.8,.2,1);}
 .path-menu[data-active="0"] .trail-lit{stroke-dashoffset:-4;}
 .path-menu[data-active="1"] .trail-lit{stroke-dashoffset:-125;}
 .path-menu[data-active="2"] .trail-lit{stroke-dashoffset:-250;}
 .path-menu[data-active="3"] .trail-lit{stroke-dashoffset:-390;}
 .path-menu[data-active="4"] .trail-lit{stroke-dashoffset:-530;}
}

.mobile-tree-path{display:none}
@media(max-width:900px){
 .path-menu .path-trail{display:none!important;}
 .mobile-tree-path{
   display:block;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
   width:min(350px,92vw);height:min(540px,68dvh);
   z-index:1;opacity:0;pointer-events:none;transition:opacity .32s ease;
 }
 .path-menu.is-mobile-open .mobile-tree-path{opacity:.9;}
 .mobile-tree-path .trail-base{fill:none;stroke:color-mix(in srgb,var(--accent) 44%,transparent);stroke-width:1.45;stroke-dasharray:2 8;stroke-linecap:round;}
 .mobile-tree-path .trail-lit{fill:none;stroke:var(--accent);stroke-width:1.9;stroke-dasharray:135 1000;stroke-linecap:round;transition:stroke-dashoffset .52s ease;}
 .path-menu[data-active="0"] .mobile-tree-path .trail-lit{stroke-dashoffset:0;}
 .path-menu[data-active="1"] .mobile-tree-path .trail-lit{stroke-dashoffset:-115;}
 .path-menu[data-active="2"] .mobile-tree-path .trail-lit{stroke-dashoffset:-236;}
 .path-menu[data-active="3"] .mobile-tree-path .trail-lit{stroke-dashoffset:-346;}
 .path-menu[data-active="4"] .mobile-tree-path .trail-lit{stroke-dashoffset:-453;}
}
@media(max-width:420px){.mobile-tree-path{width:min(318px,94vw)}}
@media(prefers-reduced-motion:reduce){.mobile-tree-path,.mobile-tree-path .trail-lit{transition:none!important}}

/* V19: stable return-to-home replay. Prevent full-size intro emblem overlapping Joel. */
@keyframes docked-emblem-open{
 from{transform:translate(258px,190px) scale(.20)}
 to{transform:translate(258px,190px) scale(.18)}
}
.intro-stage.is-docked.is-replaying .intro-mark .emblem{
 animation:docked-emblem-open 2.1s cubic-bezier(.22,.88,.28,1) .16s both!important;
}

/* V19 desktop: every navigation dot sits exactly on the SVG trail. */
@media(min-width:901px){
 .path-menu .path-option,.path-menu .path-option:nth-child(n){
   left:var(--nav-x)!important;top:var(--nav-y)!important;
   right:auto!important;bottom:auto!important;
   width:max-content!important;max-width:380px!important;
   flex-direction:row;align-items:center;justify-content:flex-start;
   gap:13px;min-height:44px;padding:4px 0;
   transform:translate(-6.5px,-50%);
   background:transparent!important;
 }
 .path-menu .path-option.path-to-left{
   flex-direction:row-reverse;
   transform:translate(calc(-100% + 6.5px),-50%);
 }
 .path-menu .path-option.path-to-left .path-label{text-align:right;}
 .path-menu .path-option:hover{filter:brightness(1.18);}
 .path-menu .path-option.path-home .path-node{display:none!important;}
 .path-menu .path-option.path-home.path-to-left{transform:translate(calc(-100% + 28px),-50%);}
 .path-menu .path-option.path-home:not(.path-to-left){transform:translate(-26px,-50%);}
 .path-menu .path-option.path-home .path-label{display:block;line-height:0;}
 .path-menu .path-option.path-home .path-home-mark{width:52px;height:52px;}
 .path-menu .path-label{font-size:clamp(21px,1.8vw,29px);}
 .path-menu .path-option:nth-child(4) .path-label{font-size:clamp(19px,1.68vw,27px);}
}
/* V19 MOBILE ORBITAL DIAL — compact floating control, with a small unfolding
   constellation on demand. No huge menu laid over the entire page. */
@media(max-width:900px){
 .scene{padding:88px clamp(18px,4.5vw,38px) calc(107px + env(safe-area-inset-bottom,0px))!important;}
 .path-menu{
   position:fixed!important;left:50%!important;top:auto!important;
   bottom:calc(13px + env(safe-area-inset-bottom,0px))!important;
   right:auto!important;width:min(332px,calc(100vw - 28px))!important;
   height:66px!important;min-height:0!important;max-height:none!important;
   padding:6px!important;transform:translateX(-50%)!important;
   border:1px solid color-mix(in srgb,var(--accent) 28%,var(--thin))!important;
   border-radius:999px!important;background:color-mix(in srgb,var(--bg) 92%,var(--surface))!important;
   box-shadow:0 8px 36px #0005!important;z-index:115!important;
 }
 .path-menu .mobile-nav-row{display:flex!important;position:relative;z-index:5;align-items:center;width:100%;height:100%;gap:3px!important;}
 .mobile-home-link{display:none!important;}
 .path-menu .mobile-nav-toggle{
   display:flex!important;align-items:center;flex:1;gap:11px;justify-content:flex-start;
   height:100%;min-width:0;border:0!important;border-radius:999px!important;
   background:transparent!important;color:var(--fg);padding:0 13px!important;
 }
 .mobile-nav-toggle::before{content:'✳';color:var(--accent);font-size:24px;line-height:1;}
 .mobile-nav-current{font-size:15px;font-weight:620;flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
 .mobile-chevron{font-size:16px;transform:rotate(0deg)!important;color:var(--accent);}
 .path-menu.is-mobile-open .mobile-chevron{transform:rotate(180deg)!important;}
 .mobile-nav-step{min-width:36px!important;width:36px;height:42px;display:grid;place-items:center;
   border:1px solid var(--thin)!important;border-radius:50%!important;background:var(--surface)!important;
   color:var(--fg);font-size:18px;}
 .mobile-tree-backdrop{display:block;position:fixed;inset:-100vh -100vw;z-index:-1;
   background:rgba(2,5,10,.37);backdrop-filter:blur(4px);opacity:0;pointer-events:none;
   transition:opacity .28s ease;}
 .path-menu.is-mobile-open .mobile-tree-backdrop{opacity:1;pointer-events:auto;}
 .path-menu .path-orbit-art{display:none!important;}
 .path-menu .path-trail{display:none!important;}
 .path-menu .mobile-tree-path{
    position:fixed!important;inset:auto!important;
    bottom:calc(90px + env(safe-area-inset-bottom,0px))!important;
    left:50%!important;width:min(340px,calc(100vw - 32px))!important;
    height:340px!important;max-width:340px;
    transform:translateX(-50%)!important;display:block!important;
    z-index:2;opacity:0!important;pointer-events:none!important;
    transition:opacity .28s ease;
 }
 .path-menu.is-mobile-open .mobile-tree-path{opacity:.8!important;}
 .path-menu .path-options{
    position:fixed!important;inset:auto!important;
    bottom:calc(90px + env(safe-area-inset-bottom,0px))!important;
    left:50%!important;right:auto!important;top:auto!important;
    transform:translateX(-50%) translateY(10px) scale(.97)!important;
    width:min(340px,calc(100vw - 32px))!important;height:340px!important;
    min-height:340px!important;max-height:340px!important;
    margin:0!important;padding:0!important;display:block!important;overflow:visible!important;
    border:1px solid color-mix(in srgb,var(--accent) 20%,var(--thin))!important;
    border-radius:29px!important;
    background:radial-gradient(ellipse at 48% 42%,color-mix(in srgb,var(--surface) 89%,var(--bg)),var(--bg))!important;
    box-shadow:0 22px 80px #0007!important;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .28s ease,transform .35s cubic-bezier(.22,1,.36,1),visibility 0s linear .3s!important;
    z-index:1;
 }
 .path-menu.is-mobile-open .path-options{
    opacity:1;visibility:visible;pointer-events:auto;
    transform:translateX(-50%) translateY(0) scale(1)!important;
    transition:opacity .28s ease,transform .35s cubic-bezier(.22,1,.36,1)!important;
 }
 .path-menu .path-option,.path-menu .path-option:nth-child(n){
    position:absolute!important;left:var(--nav-x)!important;top:var(--nav-y)!important;
    right:auto!important;bottom:auto!important;
    height:auto!important;min-height:38px!important;width:max-content!important;
    max-width:290px!important;display:flex!important;flex-direction:row!important;
    align-items:center!important;justify-content:flex-start!important;gap:10px!important;
    padding:4px 0!important;margin:0!important;background:transparent!important;
    border:0!important;border-radius:0!important;transform:translate(-6px,-50%)!important;
    color:var(--muted);transition:color .28s ease!important;
 }
 .path-menu .path-option.path-to-left{flex-direction:row-reverse!important;transform:translate(calc(-100% + 6px),-50%)!important;}
 .path-menu .path-option.path-to-left .path-label{text-align:right!important;}
 .path-menu .path-label,.path-menu .path-option:nth-child(4) .path-label{
    display:block!important;font-size:clamp(15px,4.2vw,18px)!important;font-weight:640!important;
    line-height:1.08!important;white-space:normal!important;max-width:173px!important;
    letter-spacing:-.05em!important;text-align:left;
 }
 .path-label .shared-title-line{display:block!important;}
 .path-label .shared-title-line+.shared-title-line::before{display:none!important;}
 .path-menu .path-label::after,.path-menu .path-arrow{display:none!important;}
 .path-menu .path-node{display:block!important;width:12px!important;height:12px!important;
    border:1px solid var(--muted)!important;box-shadow:none!important;background:var(--bg)!important;flex:none;}
 .path-menu .path-option.is-active{color:var(--fg)!important;}
 .path-menu .path-option.is-active .path-node{background:var(--accent)!important;border-color:var(--accent)!important;
    box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 15%,transparent)!important;}
 .path-menu .path-option.path-home .path-node{display:none!important;}
 .path-menu .path-option.path-home{transform:translate(-26px,-50%)!important;}
 .path-menu .path-option.path-home.path-to-left{transform:translate(calc(-100% + 26px),-50%)!important;}
 .path-menu .path-option.path-home .path-label{width:52px!important;height:52px!important;max-width:none!important;display:grid!important;place-items:center!important;}
 .path-menu .path-option.path-home .path-home-mark{width:48px!important;height:48px!important;}
 .path-menu .path-current-mobile{display:none!important;}
}
@media(max-width:380px){
 .path-menu .path-label,.path-menu .path-option:nth-child(4) .path-label{font-size:15px!important;max-width:153px!important;}
 .path-menu .path-options,.path-menu .mobile-tree-path{width:calc(100vw - 30px)!important;}
}
@media(max-height:600px) and (max-width:900px){
 .path-menu .path-options,.path-menu .mobile-tree-path{height:265px!important;min-height:265px!important;max-height:265px!important;}
 .path-menu .path-options{bottom:78px!important;}
 .path-menu .mobile-tree-path{bottom:78px!important;}
}
@media(prefers-reduced-motion:reduce){
 .path-menu .path-options,.mobile-tree-backdrop,.path-menu .mobile-tree-path{transition:none!important;}
}
/* Final polish: docked replay hides the first name until the circle has opened. */
@keyframes docked-joel-opacity {from{opacity:0}to{opacity:1}}
.intro-stage.is-docked.is-replaying .first-name-reveal{
  animation:docked-joel-opacity .62s ease 2.42s both!important;
}
@media(max-width:900px){
  /* A transformed nav is a containing block for position:fixed descendants;
     anchor both the rail and its points to the nav itself instead. */
  .path-menu .path-options,.path-menu .mobile-tree-path{
    position:absolute!important;left:50%!important;
    bottom:calc(100% + 17px)!important;top:auto!important;right:auto!important;
  }
  .path-menu .mobile-tree-backdrop{display:none!important;}
}
@media(max-width:900px){
 .path-menu{margin:0!important;}
}
/* Keep the curved line visually behind the words without introducing card backgrounds. */
@media(max-width:900px){
 .path-menu .path-option .path-label{
   background:var(--bg);
   box-decoration-break:clone;
   border-radius:2px;
   padding:2px 3px;
 }
 .path-menu .path-option.path-home .path-label{background:transparent;padding:0;}
}

/* V20 — Geometry polish: home node and all its rings share an exact center. */
@media (min-width:901px){
  .path-menu .path-option.path-home,
  .path-menu .path-option.path-home.path-to-left,
  .path-menu .path-option.path-home:not(.path-to-left){
    width:74px!important;height:74px!important;max-width:none!important;
    padding:0!important;display:grid!important;place-items:center!important;
    flex-direction:row!important;transform:translate(-50%,-50%)!important;
  }
  .path-menu .path-option.path-home .path-label{
    position:relative;width:66px!important;height:66px!important;display:grid!important;
    place-items:center!important;border-radius:50%;line-height:0!important;
  }
  .path-menu .path-option.path-home .path-home-mark{display:block;width:52px!important;height:52px!important;margin:0 auto;}
  /* Orbit geometry follows the home anchor, rather than occupying the center
     of an unrelated decorative circle. */
  .path-menu .path-orbit-art{
    inset:auto!important;left:calc(var(--home-x,70%) - 77px)!important;
    top:calc(var(--home-y,8%) - 77px)!important;
    width:154px!important;height:154px!important;opacity:.55;
    transform:none!important;filter:none!important;
  }
  .path-menu .path-orbit-outer{inset:0!important;width:100%!important;height:100%!important;}
  .path-menu .path-orbit-inner{left:14%!important;top:14%!important;width:72%!important;height:72%!important;}
  .path-menu .path-orbit-star{display:none!important;}
}
/* The curve itself is masked out under the labels; they need no backgrounds. */
@media (max-width:900px){
  .path-menu .path-option.path-home,
  .path-menu .path-option.path-home.path-to-left{
    transform:translate(-50%,-50%)!important;
    width:66px!important;height:66px!important;min-height:66px!important;
    padding:0!important;display:grid!important;place-items:center!important;
  }
  .path-menu .path-option.path-home .path-label{
    width:58px!important;height:58px!important;border-radius:50%!important;
    padding:0!important;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
    background:color-mix(in srgb,var(--bg) 92%,var(--surface))!important;
    display:grid!important;place-items:center!important;
  }
  .path-menu .path-option.path-home .path-label::before{
    inset:-6px!important;border-radius:50%!important;
  }
  .path-menu .path-option.path-home .path-home-mark{width:46px!important;height:46px!important;}
  .path-menu .path-option:not(.path-home) .path-label{
    background:transparent!important;box-shadow:none!important;
  }
}

/* Center the HOME label inside its anchored hit area regardless of flex/gap
   rules inherited from the rest of the branch. */
.path-menu .path-option.path-home .path-label{
  position:absolute!important;left:50%!important;top:50%!important;
  transform:translate(-50%,-50%)!important;
}
@media(max-width:900px){
  /* SVG and nodes must share the exact same coordinate system while opening. */
  .path-menu .path-options,
  .path-menu.is-mobile-open .path-options{
    transform:translateX(-50%)!important;
  }
}

/* V21 — Stable geometry. Do not translate the menu when it reveals: this
   previously overrode the point transforms and produced a second position. */
html.intro-revealing .path-menu,
html.intro-revealing .path-option {animation-name: v21-only-opacity !important;}
@keyframes v21-only-opacity { from{opacity:0} to{opacity:1} }
/* The real signature remains finished at all times. The animation happens
   in a disposable twin directly on top of it, sharing the same box. */
.intro-stage.is-docked.is-replay-clone{position:absolute;visibility:visible;pointer-events:none;}
.is-replay-clone .intro-mark .emblem{
  animation:v21-replay-symbol 2.1s cubic-bezier(.22,.88,.28,1) .16s both!important;
}
.is-replay-clone .intro-mark .outer-ring{
  animation:intro-ring-fade .85s cubic-bezier(.32,0,.2,1) .6s both!important;
}
.is-replay-clone .intro-mark .last-name{
  animation:intro-name-slide 2.4s cubic-bezier(.25,.69,.2,1) 1.02s both!important;
}
.is-replay-clone .intro-mark .first-name{
  animation:intro-first-rise 2s cubic-bezier(.2,.77,.2,1) 2.12s both!important;
}
@keyframes v21-replay-symbol{
  from{transform:translate(258px,190px) scale(.30)}
  to{transform:translate(258px,190px) scale(.18)}
}
@media(prefers-reduced-motion:reduce){
 .is-replay-clone .intro-mark :is(.emblem,.outer-ring,.last-name,.first-name){animation:none!important;}
}

/* Mobile: orbital compass instead of a tree over the entire viewport.
   No runtime coordinates and no moving coordinate system. */
@media(max-width:900px){
  .path-menu,.path-menu.is-mobile-open{
    position:fixed!important;left:50%!important;right:auto!important;
    top:auto!important;bottom:calc(14px + env(safe-area-inset-bottom,0px))!important;
    width:min(350px,calc(100vw - 30px))!important;height:64px!important;
    min-height:0!important;max-height:none!important;
    margin:0!important;transform:translateX(-50%)!important;
    border:1px solid color-mix(in srgb,var(--thin) 78%,transparent)!important;
    background:color-mix(in srgb,var(--bg) 94%,var(--surface))!important;
    border-radius:24px!important;isolation:isolate;
    box-shadow:0 12px 36px rgba(0,0,0,.24)!important;
    backdrop-filter:blur(12px);
  }
  .path-menu .mobile-nav-row{height:100%!important;display:flex!important;align-items:center!important;padding:7px 8px!important;gap:4px!important;}
  .path-menu .mobile-home-link{width:46px!important;height:46px!important;flex:0 0 46px!important;border-radius:17px!important;
    background:transparent!important;display:grid!important;place-items:center!important;border:0!important;}
  .mobile-home-link img{width:31px!important;height:31px!important;}
  .path-menu .mobile-nav-toggle{display:flex!important;align-items:center!important;flex:1!important;
    min-width:0!important;height:48px!important;width:auto!important;gap:8px!important;
    padding:0 7px!important;background:transparent!important;border:0!important;
    color:var(--fg)!important;border-radius:12px!important;}
  .mobile-nav-toggle::before{content:none!important;}
  .mobile-dial{width:38px;height:38px;flex:none;display:block;transform:rotate(var(--dial-turn,0deg));
    transition:transform .85s cubic-bezier(.2,.8,.2,1);}
  .mobile-dial svg{width:100%;height:100%;overflow:visible;}
  .dial-track{fill:none;stroke:var(--thin);stroke-width:1.4;stroke-dasharray:3 4;}
  .dial-progress{fill:none;stroke:var(--accent);stroke-width:2.8;stroke-linecap:round;
    stroke-dasharray:15 113;transform-origin:center;transform:rotate(-90deg);}
  .dial-center{fill:var(--accent);}
  .path-menu .mobile-nav-current{font-size:15px!important;letter-spacing:-.03em!important;
    font-weight:640!important;white-space:nowrap!important;text-overflow:ellipsis;overflow:hidden;}
  .path-menu .mobile-chevron{display:block!important;font-size:16px!important;line-height:1!important;
    transform:rotate(180deg);transition:transform .3s ease;}
  .path-menu.is-mobile-open .mobile-chevron{transform:rotate(0)!important;}
  .path-menu .mobile-nav-step{width:34px!important;height:40px!important;min-width:34px!important;
    border:0!important;border-radius:12px!important;background:transparent!important;color:var(--muted)!important;font-size:17px;}
  .path-menu .mobile-nav-step:hover,.path-menu .mobile-nav-step:focus-visible{background:var(--surface-2)!important;color:var(--fg)!important;}
  .path-menu .path-trail,.path-menu .mobile-tree-path,.path-menu .path-orbit-art,.path-menu .mobile-tree-backdrop{display:none!important;}
  .path-menu .path-options,
  .path-menu.is-mobile-open .path-options{
    position:absolute!important;left:0!important;right:0!important;top:auto!important;
    bottom:calc(100% + 12px)!important;width:100%!important;height:auto!important;
    min-height:0!important;max-height:none!important;margin:0!important;padding:9px!important;
    display:flex!important;flex-direction:column!important;gap:2px!important;
    transform:translateY(8px) scale(.98)!important;
    border:1px solid var(--thin)!important;border-radius:21px!important;
    background:color-mix(in srgb,var(--bg) 96%,var(--surface))!important;
    box-shadow:0 22px 70px rgba(0,0,0,.35)!important;
    opacity:0!important;visibility:hidden!important;pointer-events:none!important;
    transition:opacity .25s ease,transform .32s cubic-bezier(.22,1,.36,1),visibility 0s linear .3s!important;
  }
  .path-menu.is-mobile-open .path-options{
    transform:translateY(0) scale(1)!important;opacity:1!important;visibility:visible!important;
    pointer-events:auto!important;transition:opacity .25s ease,transform .32s cubic-bezier(.22,1,.36,1)!important;
  }
  .path-menu .path-option,.path-menu .path-option:nth-child(n),
  .path-menu .path-option.path-to-left,
  .path-menu .path-option.path-home,
  .path-menu .path-option.path-home.path-to-left{
    position:relative!important;inset:auto!important;left:auto!important;right:auto!important;
    top:auto!important;bottom:auto!important;transform:none!important;
    width:100%!important;max-width:none!important;min-height:44px!important;height:auto!important;
    padding:8px 12px!important;margin:0!important;display:flex!important;align-items:center!important;
    justify-content:flex-start!important;flex-direction:row!important;gap:13px!important;
    text-align:left!important;border:0!important;border-radius:13px!important;
    color:var(--muted)!important;background:transparent!important;
    transition:background-color .22s ease,color .22s ease!important;
  }
  .path-menu .path-option:hover,.path-menu .path-option:focus-visible,
  .path-menu .path-option.is-active{background:var(--surface-2)!important;color:var(--fg)!important;}
  .path-menu .path-option .path-node{display:block!important;width:9px!important;height:9px!important;
    border:1px solid var(--accent)!important;flex:0 0 9px!important;box-shadow:none!important;background:transparent!important;}
  .path-menu .path-option.is-active .path-node{background:var(--accent)!important;box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 14%,transparent)!important;}
  .path-menu .path-option.path-home .path-node{display:none!important;}
  .path-menu .path-label,.path-menu .path-option:nth-child(4) .path-label,
  .path-menu .path-option.path-to-left .path-label{
    position:static!important;left:auto!important;top:auto!important;transform:none!important;
    width:auto!important;height:auto!important;max-width:100%!important;min-width:0!important;
    display:block!important;line-height:1.2!important;font-size:17px!important;font-weight:590!important;
    white-space:normal!important;text-align:left!important;background:none!important;
    padding:0!important;border:0!important;border-radius:0!important;
  }
  .path-menu .path-option.path-home .path-label{display:flex!important;align-items:center!important;}
  .path-menu .path-option.path-home .path-label::before{content:none!important;}
  .path-menu .path-option.path-home .path-home-mark{width:31px!important;height:31px!important;margin:0!important;}
  .path-menu .path-label::after,.path-menu .path-arrow{display:none!important;}
  .path-menu .path-option:nth-child(4) .path-label .shared-title-line{display:inline!important;}
  .path-menu .path-option:nth-child(4) .path-label .shared-title-line:first-child::after{content:' ';}
  .path-menu .path-current-mobile{display:none!important;}
  .scene{padding-bottom:calc(105px + env(safe-area-inset-bottom,0px))!important;}
}
@media(max-width:370px){
  .path-menu .mobile-nav-row{padding:6px 5px!important;gap:0!important;}
  .path-menu .mobile-nav-step{width:30px!important;min-width:30px!important;}
  .path-menu .mobile-nav-toggle{gap:4px!important;padding:0 3px!important;}
  .path-menu .mobile-nav-current{font-size:13px!important;}
}

/* V22: touch navigation never reveals a new scene before the previous one
   has faded. Faster, staggered exits fit entirely inside the 1120ms title
   flight; the destination fades in only AFTER its heading lands. */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .scene.is-transition-out .scene-piece {
    animation-duration:360ms !important;
    animation-delay:calc(var(--piece-index, 0) * 90ms) !important;
  }
  /* No intermediate scene can bleed through during an interrupted swipe. */
  .scene:not(.is-active):not(.is-transition-out) {
    display:none !important;
  }
}
/* Replay only: the name must not be drawn over the circular symbol. */
.is-replay-clone .first-name-reveal {
  animation:v22-replay-name-mask .46s ease 2.23s both !important;
}
@keyframes v22-replay-name-mask {
  from {opacity:0;}
  to {opacity:1;}
}
@media (prefers-reduced-motion: reduce) {
  .is-replay-clone .first-name-reveal {animation:none!important;opacity:1;}
}

/* V23 · Desktop: selected label travels into the page and is absent from the
   menu until another section takes its place. The route node remains. */
@media(min-width:901px){
  .path-menu .path-option .path-label{transition:opacity .44s ease,transform .7s cubic-bezier(.2,.7,.2,1),color .3s ease!important;}
  .path-menu .path-option:not(.path-home).is-active .path-label{
    opacity:0!important;transform:translate3d(-24px,0,0) scale(.91)!important;
    pointer-events:none!important;
  }
  .path-menu .path-option:not(.path-home).is-active .path-arrow{opacity:0!important;}
  .path-menu .path-option:not(.path-home).is-active .path-node{
    background:var(--accent)!important;box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 12%,transparent)!important;
  }
}

/* V23 · Mobile: a quiet, single-row navigation rail.
   No tree overlay, flight paths or section crossfades. Native vertical scroll
   works inside each scene, and the rail scrolls horizontally. */
@media(max-width:900px){
  .path-menu,.path-menu.is-mobile-open{
    position:fixed!important;left:12px!important;right:12px!important;top:auto!important;
    bottom:max(10px,env(safe-area-inset-bottom,0px))!important;
    transform:none!important;margin:0!important;
    width:calc(100% - 24px)!important;height:66px!important;min-height:66px!important;max-height:66px!important;
    display:block!important;padding:6px!important;border:1px solid var(--thin)!important;
    border-radius:20px!important;overflow:hidden!important;
    background:color-mix(in srgb,var(--bg) 91%,var(--surface))!important;
    box-shadow:0 14px 45px rgba(0,0,0,.22)!important;
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    z-index:65!important;
  }
  .path-menu .path-orbit-art,.path-menu .path-trail,.path-menu .mobile-tree-path,
  .path-menu .mobile-tree-backdrop,.path-menu .mobile-nav-row,
  .path-menu .path-current-mobile{display:none!important;}
  .path-menu .path-options,.path-menu.is-mobile-open .path-options{
    position:relative!important;inset:auto!important;bottom:auto!important;top:auto!important;left:auto!important;right:auto!important;
    display:flex!important;flex-flow:row nowrap!important;align-items:stretch!important;
    gap:4px!important;box-sizing:border-box!important;
    transform:none!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;
    width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;
    overflow-x:auto!important;overflow-y:hidden!important;
    scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain;
    padding:0!important;margin:0!important;background:transparent!important;
  }
  .path-menu .path-options::-webkit-scrollbar{display:none;}
  .path-menu .path-option,.path-menu .path-option:nth-child(n),
  .path-menu .path-option.path-home,.path-menu .path-option.path-home.path-to-left,
  .path-menu .path-option.path-home:not(.path-to-left),
  .path-menu .path-option.path-to-left{
    position:relative!important;left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;
    transform:none!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;
    flex:0 0 auto!important;width:auto!important;min-width:0!important;max-width:none!important;
    height:100%!important;min-height:0!important;
    display:flex!important;align-items:center!important;justify-content:center!important;flex-direction:row!important;
    padding:0 15px!important;margin:0!important;gap:0!important;
    border:1px solid transparent!important;border-radius:14px!important;
    box-shadow:none!important;background:transparent!important;
    color:var(--muted)!important;scroll-snap-align:center;
    transition:background-color .2s ease,color .2s ease!important;
  }
  .path-menu .path-option.is-active,.path-menu .path-option.is-active:nth-child(n){
    color:var(--fg)!important;background:var(--surface-2)!important;
    border-color:var(--thin)!important;
  }
  .path-menu .path-option .path-node,.path-menu .path-option .path-arrow{display:none!important;}
  .path-menu .path-option .path-label,.path-menu .path-option:nth-child(4) .path-label,
  .path-menu .path-option.path-home .path-label{
    position:static!important;left:auto!important;top:auto!important;
    display:block!important;width:auto!important;height:auto!important;max-width:none!important;
    padding:0!important;margin:0!important;border:0!important;border-radius:0!important;
    transform:none!important;opacity:1!important;background:transparent!important;
    font:600 13px/1.2 Inter,system-ui,sans-serif!important;letter-spacing:-.025em!important;
    white-space:nowrap!important;text-align:center!important;
  }
  .path-menu .path-option.path-home{padding:0 10px!important;min-width:52px!important;}
  .path-menu .path-option.path-home .path-label{display:grid!important;place-items:center!important;min-width:30px!important;}
  .path-menu .path-option.path-home .path-home-mark{width:30px!important;height:30px!important;margin:0!important;}
  .path-menu .path-label .shared-title-line{display:inline!important;}
  .path-menu .path-label .shared-title-line+.shared-title-line::before{display:none!important;}
  .path-menu .path-option:nth-child(4) .path-label .shared-title-line:first-child::after{content:' '!important;}
  .path-menu .path-option .path-label::after,.path-menu .path-option.path-home .path-label::before{display:none!important;}

  /* One scene only. A switch is atomic, without ghosts or staggered fades. */
  .scene,.scene.is-active,.scene.is-entering,.scene.is-transition-out{
    opacity:1!important;transform:none!important;transition:none!important;animation:none!important;
  }
  .scene:not(.is-active){display:none!important;visibility:hidden!important;pointer-events:none!important;}
  .scene.is-active{display:block!important;visibility:visible!important;pointer-events:auto!important;}
  .scene.is-active > *,.scene.is-active .scene-piece,.scene.is-active .section-motion-title{
    visibility:visible!important;opacity:1!important;transform:none!important;
    transition:none!important;animation:none!important;
  }
  .scene.is-active .scene-piece{translate:none!important;}
  .scene-title-flight{display:none!important;}
  .scene{padding-bottom:calc(105px + env(safe-area-inset-bottom,0px))!important;}
}

/* V23 responsive refinements: all five destinations visible at once on a
   normal phone. Long labels may wrap inside their own pill, never overlap. */
@media(max-width:900px){
  .path-menu .path-options,.path-menu.is-mobile-open .path-options{
    display:grid!important;grid-template-columns:.62fr 1fr 1.15fr 1.3fr .95fr!important;
    gap:2px!important;overflow-x:hidden!important;scroll-snap-type:none!important;
  }
  .path-menu .path-option,.path-menu .path-option:nth-child(n),.path-menu .path-option.path-home,
  .path-menu .path-option.path-home.path-to-left,.path-menu .path-option.path-home:not(.path-to-left){
    min-width:0!important;width:100%!important;flex:none!important;
    padding:0 3px!important;white-space:normal!important;
  }
  .path-menu .path-option .path-label,.path-menu .path-option:nth-child(4) .path-label{
    font-size:clamp(10px,2.72vw,13px)!important;line-height:1.12!important;
    white-space:normal!important;text-wrap:balance!important;
  }
  .path-menu .path-option:nth-child(4) .path-label .shared-title-line{display:block!important;}
  .path-menu .path-option:nth-child(4) .path-label .shared-title-line:first-child::after{content:none!important;}
  .path-menu .path-option.path-home .path-home-mark{width:clamp(24px,7vw,30px)!important;height:clamp(24px,7vw,30px)!important;}
}



/* === mobile-scroll.css === */
/* CANDAL — MOBILE SCENE CHOREOGRAPHY (MATCHING PC MOTION).
   Titles fly smoothly into position, outgoing pieces fade sequentially,
   incoming pieces reveal one by one in reading order. */
@media (max-width: 900px) {
  html, body, html body { height: 100% !important; overflow: hidden !important; overscroll-behavior-y: none !important; }
  .site-shell { height: 100dvh !important; width: 100%; overflow: hidden !important; }
  .ambient { position: fixed !important; inset: 0 !important; }
  .ambient-grid { opacity: .1; background-size: 74px 74px; }
  
  /* Title flight is active and visible on mobile */
  .scene-title-flight { display: block !important; position: fixed !important; z-index: 110 !important; }
  
  .shell-top { height:55px; top:6px; left:18px;right:18px;z-index:65; border-bottom:1px solid color-mix(in srgb,var(--thin) 50%,transparent);background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(17px);-webkit-backdrop-filter:blur(17px); }
  .shell-top .brand-lockup { font-size:15px; gap:8px; }
  .shell-top .brand-lockup img { height:29px;width:29px; }
  .top-actions {gap:6px;}
  .tool-button {height:34px;min-width:36px;padding:0 9px;}
  
  /* Mobile scenes: separate viewports with full PC-style choreography */
  .scene-container { position: absolute !important; inset: 0 !important; overflow: hidden !important; display: block !important; }
  
  .scene {
    position: absolute !important; inset: 0 !important; box-sizing: border-box;
    display: flex !important; flex-direction: column !important; justify-content: center !important;
    width: 100% !important; min-width: 0 !important; max-width: 100% !important;
    height: 100dvh !important; min-height: 100dvh !important; max-height: 100dvh !important;
    padding: clamp(80px, 11svh, 110px) clamp(20px, 5.7vw, 48px) clamp(85px, 12svh, 120px) !important;
    overflow-x: hidden !important; overflow-y: auto !important;
    scrollbar-width: thin;
    opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;
    transform: translate3d(0, 26px, 0) scale(0.985);
    transition: opacity 0.58s ease, transform var(--speed) var(--ease), visibility 0s linear 0.6s !important;
    isolation: isolate;
  }
  
  .scene.is-active {
    opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
    transition: opacity 0.58s ease, transform var(--speed) var(--ease), visibility 0s !important;
  }
  
  .scene.is-transition-out {
    opacity: 0 !important;
    transform: translate3d(0, -22px, 0) scale(0.985) !important;
  }
  
  .scene.is-heading-arriving {
    opacity: 1 !important; visibility: visible !important;
  }
  
  /* Sequential piece-by-piece motion matching PC */
  .scene.is-transition-out .scene-piece {
    opacity: 0 !important;
    transform: translate3d(0, -18px, 0) !important;
    transition: opacity 0.45s ease var(--piece-out, 0ms), transform 0.55s var(--ease) var(--piece-out, 0ms) !important;
  }
  .scene.is-heading-arriving:not(.is-revealing) .scene-piece:not(.section-motion-title):not(.hero-heading) {
    opacity: 0 !important;
    transform: translate3d(0, 22px, 0) !important;
  }
  .scene.is-revealing .scene-piece {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
    transition: opacity 0.55s ease var(--piece-in, 0ms), transform 0.65s var(--ease) var(--piece-in, 0ms) !important;
  }
  
  .scene::before { content:none!important; }
  .scene .section-motion-title, .project-scene .scene-heading h2.section-motion-title {
    width:auto!important; max-width:100%!important;white-space:normal!important;
    font-size:clamp(43px,11vw,74px)!important;
    line-height:.99!important;letter-spacing:-.069em!important;
    margin-bottom:clamp(25px,7vw,48px)!important;
    text-wrap:balance;
  }
  .beyond-scene .section-motion-title {font-size:clamp(41px,10.4vw,69px)!important;}
  .contact-scene .section-motion-title {font-size:clamp(47px,12vw,76px)!important;}
  .scene-heading {display:block!important;margin:0 0 27px!important;}
  .project-scene .scene-heading h2.section-motion-title {margin-bottom:14px!important;}
  .section-subtitle {font-size:15px!important;line-height:1.55!important;max-width:310px;}
  .home-scene{min-height:100svh!important;justify-content:center!important;}
  .home-layout {display:block!important;min-height:0!important;width:100%;margin:0!important;}
  .home-left {min-width:0!important;max-width:100%;}
  .hero-heading {width:100%;height:clamp(132px,38vw,245px)!important;max-width:100%;margin:0 0 29px!important;font-size:clamp(66px,17.6vw,126px)!important;line-height:.8;letter-spacing:-.085em;white-space:normal;}
  .hero-role {font-size:clamp(10px,3vw,14px)!important;letter-spacing:.19em;gap:8px;}
  .hero-thought {margin:31px 0 0!important;font-size:clamp(24px,6.6vw,37px)!important;line-height:1.22!important;}
  .home-left .hero-brand-slot{pointer-events:none;}
  .about-layout,.beyond-layout {grid-template-columns:minmax(0,1fr)!important;max-width:650px!important;min-height:0!important;gap:52px!important;margin:0!important;align-items:stretch;}
  .about-lead,.beyond-lead{font-size:clamp(23px,5.7vw,31px)!important;line-height:1.2!important;margin:0 0 18px!important;}
  .about-paragraph,.beyond-paragraph{font-size:15px!important;line-height:1.65!important;}
  .about-facts{gap:16px;margin-top:26px;}
  .about-facts>span{font-size:12px;}
  .cv-placeholder{margin-top:26px;font-size:12px;}
  .portrait-area {height:clamp(300px,94vw,480px)!important;min-height:0!important;margin:0 auto!important;width:100%;max-width:380px;}
  .portrait-outline{width:86%!important;height:85%!important;}
  .portrait-graphic{width:69%!important;height:91%!important;}
  .portrait-label{font-size:9px;}
  .project-deck,.project-deck[data-featured='0'],.project-deck[data-featured='1'] {
    display:flex!important; flex-direction:column!important;
    height:auto!important;min-height:0!important;max-width:650px!important;
    gap:16px!important; margin:0!important;
    grid-template-columns:none!important;
  }
  .project-card {flex:none!important;display:block!important;height:clamp(350px,106vw,480px)!important;min-height:0!important;max-width:100%;width:100%;border-radius:18px;}
  .project-upcoming {height:clamp(270px,75vw,390px)!important;}
  .project-deck .project-desc,.project-deck .project-actions {display:flex!important;opacity:1!important;visibility:visible!important;}
  .project-deck .project-lower h3 {font-size:clamp(35px,9vw,53px)!important;}
  .project-deck .project-upcoming .project-lower h3 {font-size:clamp(28px,7.8vw,43px)!important;}
  .project-content{padding:clamp(20px,6vw,30px)!important;}
  .project-lower{max-width:100%;}
  .project-desc{font-size:13px!important;}
  .project-actions{flex-wrap:wrap;gap:8px;}
  .project-detail,.project-web{padding:10px 12px;font-size:11px;}
  .judo-artboard {width:100%!important;height:clamp(345px,105vw,525px)!important;min-height:0!important;max-width:520px!important;margin:10px auto 0!important;transform:none!important;position:relative!important;touch-action:pan-y!important;}
  .judo-ring{inset:4%;pointer-events:none!important;}
  .photo-stack{inset:0!important;pointer-events:auto!important;}
  .photo-tile{width:clamp(150px,43vw,212px)!important;height:clamp(190px,57vw,280px)!important;pointer-events:auto!important;touch-action:manipulation!important;cursor:pointer!important;-webkit-tap-highlight-color:transparent;}
  .photo-controls{margin-top:25px;}
  .gallery-hint{display:block!important;pointer-events:none!important;}
  .contact-layout {min-height:0!important;display:flex!important;flex-direction:column!important;gap:40px!important;margin:0!important;padding:0!important;max-width:700px;}
  .contact-lower{grid-template-columns:1fr!important;gap:44px!important;margin:0!important;}
  .contact-upper,.contact-mail-box,.contact-socials{min-width:0;}
  .contact-description{font-size:clamp(18px,5.3vw,26px)!important;line-height:1.38;max-width:490px;}
  .big-email{display:inline-flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:clamp(24px,6.45vw,39px)!important;overflow-wrap:anywhere;letter-spacing:-.05em;}
  .contact-socials .social-items{display:flex;flex-direction:column!important;gap:5px!important;}
  .contact-socials .social-items a{border:none!important;border-bottom:1px solid var(--thin)!important;border-radius:0!important;padding:15px 0!important;font-size:15px!important;}
  .contact-socials .social-items a svg:last-child{display:block!important;}
  .contact-signature{margin-top:30px!important;}
  .case-dialog{max-width:100vw;max-height:100dvh;}
  html.intro-pending body,html.intro-entering body,html.intro-revealing body {overflow-y:hidden!important;}
  /* The intro still owns its entire viewport until the signature docks. */
  html.intro-pending .site-shell {height:100svh!important;overflow:hidden!important;}
}
@media(max-width:370px) {
  .scene,.scene.is-active {padding-left:17px!important;padding-right:17px!important;}
  .hero-heading{font-size:clamp(59px,17vw,67px)!important;}
  .photo-tile{width:146px!important;height:187px!important;}
}
@media(max-width:900px) and (prefers-reduced-motion:reduce) {
 html{scroll-behavior:auto!important;}
}

/* V25: visible logo geometry projects outside its 1100/520 SVG viewport.
   Keep an explicit optical gap between the outer ring and the entry CTA. */
@media (max-width:700px) {
  .portfolio-intro .intro-stage {
    width: min(94vw, calc((100svh - 230px) * 1.25));
    flex-shrink: 0;
  }
  .portfolio-intro .intro-entry {
    margin-top: clamp(78px, 17vw, 96px);
    flex-shrink: 0;
  }
  .portfolio-intro .intro-inner { max-height: 100svh; }
}
@media (max-width:700px) and (max-height:540px) {
  .portfolio-intro .intro-stage {width:min(85vw,calc((100svh - 210px) * 1.14));}
  .portfolio-intro .intro-entry { margin-top:60px; }
}



/* === mobile-reveal.css === */
/* CANDAL — CREATIVE MOBILE CHAPTER TRANSITIONS & STAGGERED ELEVATION
   Strictly scoped to mobile devices (max-width: 900px).
   Desktop remains 100% untouched. */

@media (max-width: 900px) {
  /* 1. Base transition setup for all revealed elements */
  html.mobile-reveal-ready .scene:not(.home-scene) [data-mobile-reveal] {
    transition:
      opacity 1150ms cubic-bezier(.22,1,.36,1),
      transform 1200ms cubic-bezier(.22,1,.36,1) !important;
    transition-delay: var(--mobile-reveal-delay, 0ms) !important;
    will-change: opacity, transform;
  }

  /* 2. Initial state before scroll entrance */
  html.mobile-reveal-ready .scene:not(.home-scene) [data-mobile-reveal]:not(.is-mobile-visible) {
    opacity: 0 !important;
    transform: translate3d(0, 22px, 0) !important;
    filter: none !important;
  }

  /* 3. Section Motion Titles: Cinematic 3D perspective entrance */
  html.mobile-reveal-ready .scene:not(.home-scene) .section-motion-title[data-mobile-reveal]:not(.is-mobile-visible) {
    opacity: 0 !important;
    transform: translate3d(0, 30px, 0) !important;
    filter: none !important;
    letter-spacing: -0.04em !important;
  }

  /* 4. Revealed visible state */
  html.mobile-reveal-ready .scene:not(.home-scene) [data-mobile-reveal].is-mobile-visible {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
    filter: blur(0px) !important;
  }

  /* 5. Special title enhancement when active */
  html.mobile-reveal-ready .scene:not(.home-scene) .section-motion-title[data-mobile-reveal].is-mobile-visible {
    letter-spacing: -0.069em !important;
    text-shadow: 0 0 28px rgba(188, 210, 240, 0.25);
  }

  /* 6. Section dividing accent line with dynamic expansion */
  .scene:not(.home-scene)::after {
    content: '' !important;
    position: absolute !important;
    left: clamp(20px, 5.7vw, 48px) !important;
    right: clamp(20px, 5.7vw, 48px) !important;
    top: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 45%, transparent), transparent) !important;
    border: none !important;
    opacity: 0.8 !important;
    pointer-events: none !important;
  }

  /* 7. Project cards: 3D perspective elevation on mobile */
  .project-card {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.3s !important;
    touch-action: manipulation !important;
  }
  .project-card:active {
    transform: scale(0.985) !important;
  }

  /* 8. Judo photo stack: smooth depth layers on mobile */
  .photo-stack {
    perspective: 1000px !important;
  }
  .photo-tile {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }
  .photo-tile.is-picked {
    box-shadow: 0 22px 65px rgba(0, 0, 0, 0.55), 0 0 25px rgba(188, 210, 240, 0.18) !important;
  }
  .photo-tile:active {
    transform: translate(-50%, -51%) scale(1.04) !important;
  }

  /* 9. Skills sphere interactive halo on mobile */
  #skill-sphere {
    touch-action: none !important;
    position: relative !important;
    cursor: grab !important;
  }
  #skill-sphere:active {
    cursor: grabbing !important;
  }
  #skill-sphere::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(144, 184, 239, 0.12), transparent 70%);
    pointer-events: none;
    z-index: -1;
    animation: mobile-sphere-pulse 4s ease-in-out infinite alternate;
  }
  @keyframes mobile-sphere-pulse {
    0% { transform: scale(0.95); opacity: 0.5; }
    100% { transform: scale(1.06); opacity: 0.9; }
  }

  /* 10. Floating subtle scroll progress pill at top right */
  .mobile-scroll-indicator {
    position: fixed;
    right: 20px;
    top: 72px;
    z-index: 60;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--accent);
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid color-mix(in srgb, var(--thin) 60%, transparent);
    border-radius: 999px;
    padding: 5px 12px;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
  }
  html.mobile-reveal-ready .mobile-scroll-indicator.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  html.mobile-reveal-ready .scene [data-mobile-reveal],
  html.mobile-reveal-ready .scene [data-mobile-reveal]:not(.is-mobile-visible) {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  #skill-sphere::before {
    animation: none !important;
  }
}