/* Y0n's research folio: architectural ink, measured motion, a single live instrument. */
:root{--ink:#f1e9dc;--muted:#b8b3b5;--gold:#d8b989;--line:#e8d6b847;--black:#05070f}
html,body{background:var(--black)}
.experience{background:#05070f}
.grain{opacity:.035}
.topbar{height:82px;background:linear-gradient(#05070fe8,#05070f00);gap:1.45rem}
.topbar::after{content:'';position:absolute;right:clamp(24px,4.5vw,76px);left:clamp(24px,4.5vw,76px);bottom:0;height:1px;background:#e8d6b82a}
.brand{font-weight:400;letter-spacing:-.105em}
.brand span:first-child,.brand__point{color:var(--ink)}
.topbar__tagline{color:#cbbda8;font-size:.7rem;letter-spacing:.03em}
.language-control,.audio-toggle{border:0;border-bottom:1px solid #e8d6b86e;background:transparent;backdrop-filter:none;color:#e8ddca;padding:.48rem .12rem;box-shadow:none}
.language-control:hover,.language-control:focus-within,.audio-toggle:hover{background:transparent;border-color:#f5e7ce}
.language-control>span{font-size:1rem;color:#d8bd94}
.language-control select option{background:#101522}
.audio-toggle__bars i{background:#e4c895}
.scene{background:radial-gradient(ellipse at 52% 68%,#192031 0,#0b1120 35%,#05070f 73%)}
.scene__image{inset:0;background-size:cover}
.scene__image--gate{background-image:url('assets/gate-study.svg');background-position:center;transform:translate3d(var(--look-x,0px),var(--look-y,0px),0) scale(var(--depth-scale,1.035))}
.scene__image--lab{background-image:url('assets/lab-study.svg');background-position:center}
html[lang=ar] .scene__image--lab{background-image:url('assets/lab-study-rtl.svg')}
.scene__image--archive{background-image:url('assets/orbit-study.svg');background-position:center}
.scene--threshold.is-opening .scene__image--gate{transform:scale(1.08)}
.scene__veil--gate{background:linear-gradient(270deg,#05070fd9 0%,#05070fa8 32%,#05070f28 62%,transparent 78%),linear-gradient(0deg,#05070fab,transparent 26%,transparent 72%,#05070f75)}
.scene__veil--presence{background:linear-gradient(270deg,#05070fe0,#05070fb0 48%,#05070f31 100%)}
.scene__veil--archive{background:radial-gradient(ellipse at center,#05070f88,#05070fc5 92%)}
.scene__veil--echoes{background:linear-gradient(270deg,#05070fd8,#05070fa0 60%,#05070f78)}
.scene__veil--departure{background:linear-gradient(270deg,#05070fe0,#05070fa9 53%,#05070f69)}
.scene__dust{opacity:.1;animation-duration:28s}
.scene__depth{opacity:.22;mix-blend-mode:normal}
.experience.has-webgl .scene__depth{opacity:.1}
.scene__webgl{opacity:.62;mix-blend-mode:screen;filter:none}
.eyebrow{color:#e5c99a;text-shadow:none;font-size:.78rem;font-weight:500;letter-spacing:.08em}
.eyebrow::before{width:22px;background:#d8b989}
h1 em,h2 em,.presence-copy__line em{color:#e8d6b8;font-weight:500}
.intro-copy h1,.archive-copy h2,.echoes-copy h2,.departure-copy h2,.presence-copy__line{text-shadow:none}
.reveal-line--accent .reveal-line__inner::after{height:1px;bottom:.03em;background:#e8c99780}
.intro-copy{top:31%}
.intro-copy h1{font-size:clamp(3.7rem,6vw,6.15rem);line-height:1.42}
.scene-verse{max-width:28rem;margin-top:1.5rem;color:#e8dac4;font-size:clamp(1.15rem,1.35vw,1.42rem);line-height:1.65;text-shadow:none}
.intro-identity{margin-bottom:1.4rem;color:#ead6b5;text-shadow:none}
.intro-identity__name{font-weight:400}
.intro-identity__name span{color:#f5e4c8;text-shadow:none}
.intro-identity__chapter{color:#d6c19f;border-color:#b49a706e;font-size:.72rem}
.home-status{top:18%;min-width:0;gap:.65rem;padding:.35rem 0 .45rem;border:0;border-bottom:1px solid #e8c99770;background:transparent;box-shadow:none;backdrop-filter:none}
.home-status::after{display:none}
.home-status__orb{width:5px;height:5px;border-radius:1px;background:#f1d6a5;box-shadow:none}
.home-status__orb::after{inset:-5px;border-color:#dabb8c6a;border-radius:0}
.home-status__copy small{color:#bda984;font-size:.61rem;letter-spacing:.06em}
.home-status__copy strong{color:#f4e8d3;font-size:.85rem}
.door-trigger{left:19%;top:18%;width:20%;height:64%;}
.door-trigger::before{content:'';position:absolute;top:9%;left:6%;width:88%;height:72%;border:1px solid #e9d1a584;border-radius:48% 48% 0 0 / 24% 24% 0 0;box-shadow:inset 0 0 0 13px #101522a0,0 0 0 1px #05070f;transition:border-color .55s,transform .7s}
.door-trigger:hover::before,.door-trigger:focus-visible::before{border-color:#fff1d8;transform:translateY(-4px)}
.door-trigger__slab{top:12%;left:11%;width:78%;height:68%;border:1px solid #e6c99666;border-radius:48% 48% 0 0 / 24% 24% 0 0;background:linear-gradient(110deg,#090d17e8 0%,#242434ee 49%,#05070ff5 100%);box-shadow:inset 15px 0 42px #e0bb8414,0 0 0 5px #070a139c;transform-origin:right center}
.door-trigger__slab::before{content:'Y0n';position:absolute;top:49%;left:50%;transform:translate(-50%,-50%);font-family:Georgia,serif;font-size:clamp(.75rem,1vw,1.1rem);letter-spacing:.22em;color:#ecd6b0a0}
.door-trigger__slab i{top:54%;right:10%;width:3px;height:3px;border-radius:0;background:#f8dfa9;box-shadow:none}
.door-trigger__light{top:14%;left:8%;width:84%;height:65%;border-radius:0;background:#e7bd752b;filter:blur(30px);opacity:.18}
.door-trigger:hover .door-trigger__slab,.door-trigger:focus-visible .door-trigger__slab{box-shadow:inset 15px 0 42px #e0bb8426,0 0 0 5px #070a13b0}
.door-trigger:hover .door-trigger__light{opacity:.38;transform:scale(1.04)}
.door-trigger__cue{bottom:0;color:#f2e2c7;font-size:.78rem;letter-spacing:.04em;text-shadow:none;border-bottom:1px solid #d4b58580;padding-bottom:.3rem}
.door-trigger__cue span:last-child{font-size:1rem}
.threshold-flash{background:radial-gradient(circle,#f9dfae77,#e8c38344 16%,transparent 64%)}
.intro-bottom{color:#c6b89e;font-size:.7rem}
.presence-copy{top:23%}
.presence-copy h2{font-weight:400;text-shadow:none}
.presence-copy h2 span{color:#e9cea1}
.presence-copy__line{margin:1.2rem 0}
.presence-copy__about{max-width:34rem;color:#e5d9c7;text-shadow:none;font-size:clamp(1.03rem,1.2vw,1.22rem)}
.lab-caption{color:#cbbb9e;border-color:#dfc39450}
.lab-caption i{border-radius:1px;background:#e4c997;box-shadow:none}
.scene-side-note{color:#d6c3a6;font-size:1rem}
.archive-copy h2{font-size:clamp(2.4rem,3.25vw,3.8rem)}
.archive-copy>p:last-child{color:#e8d8c1;font-size:clamp(1.12rem,1.35vw,1.4rem)}
.constellation::before{content:'';position:absolute;left:50%;top:50%;width:68%;height:58%;border:1px solid #d8b9892b;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
.artifact{left:50%;top:50%;min-width:116px;min-height:96px;padding:10px 8px;animation:none;transform:translate(-50%,-50%) translate3d(var(--orbit-x,0px),var(--orbit-y,0px),0);touch-action:manipulation}
.artifact__halo{background:none;filter:none;border-top:1px solid #e4c695a0;border-bottom:1px solid #e4c69543;border-radius:0;opacity:.4;transform:none}
.artifact__symbol{font-size:clamp(2.2rem,3vw,3.25rem);color:#ead0a5;text-shadow:none}
.artifact__name{font-size:1.2rem}
.artifact__short{color:#c8b795}
.artifact:hover .artifact__halo,.artifact:focus-visible .artifact__halo{opacity:1;transform:none}
.artifact:hover .artifact__symbol,.artifact:focus-visible .artifact__symbol{transform:translateY(-5px)}
.artifact.is-discovered .artifact__symbol{color:#fff0d5;text-shadow:none}
.archive-progress{color:#d9c49d}
.echoes__light{left:25%;width:min(66vw,860px);background:none;filter:none;animation-duration:18s;opacity:.65}
.echoes__light::before,.echoes__light::after{inset:4%;border:1px solid #d9c69f32;box-shadow:none}
.echoes__light::after{inset:17%;border:1px dashed #d9c69f4a;box-shadow:none;animation-duration:12s}
.echoes__light span{inset:34%;background:none;border:1px solid #e2c89861;filter:none;border-radius:50%}
.echoes__light i{top:17%;left:50%;width:3px;height:3px;border-radius:0;background:#f5dcaa;box-shadow:none}
.echoes__rays{display:none}
.echoes-copy::before{display:none}
.echoes-copy{width:min(67%,850px)}
.poem{padding:1.2rem 1.3rem 1.1rem 0;background:none;border-right:1px solid #e9cb929c;box-shadow:none;color:#fbf2e5;text-shadow:none;font-size:clamp(1.65rem,2.35vw,2.6rem)}
.poem::before{top:-1.8rem;right:-.05rem;font-size:5rem;color:#e8cca02e}
.scene.is-active .poem__line:nth-child(2){color:#f0d7ad}
.poem cite{color:#cbb898}
.echoes__marks{color:#ceb78e5c;font-size:1.5rem}
.echoes__marks .is-lit{color:#d2dacb;text-shadow:none}
.departure-copy>p:not(.eyebrow){color:#c8cec3}
.departure-link{color:#d1d8cd}
.departure-traces,.departure-traces .is-lit{color:#d9c49d}
.journey-hint{color:#d9c6a8;text-shadow:none}
.journey-hint__trail{background:#d9bb8a8c}
.journey-hint__trail i{width:3px;height:3px;top:-1px;border-radius:0;background:#f7dfa9;box-shadow:none}
.chapter-nav__dots::before{background:#d7b8846e}
.chapter-nav__dots button::before{border-color:#e3c89e;background:#05070f;border-radius:0}
.chapter-nav__dots button:hover::before,.chapter-nav__dots button:focus-visible::before{border-color:#fff0d8;box-shadow:none}
.chapter-nav__dots button.is-current::before{width:8px;height:8px;border-radius:0;background:#f2d8a7;box-shadow:none}
.chapter-label{color:#d9c6aa}
.music-credit{color:#b4a48d}.music-credit span{color:#d9c6aa}
.artifact-dialog{border:1px solid #d8b98979;background:#101523;box-shadow:0 20px 80px #0009}
.artifact-dialog::backdrop{background:#03050edf;backdrop-filter:blur(5px)}
.artifact-dialog__symbol{color:#ead2a9}
.artifact-dialog>p:not(.eyebrow){color:#e8d9c4}
.artifact-dialog__footnote{color:#c7b398}
html:not([lang=ar]) .intro-identity__chapter{border-color:#b49a706e}
html:not([lang=ar]) .echoes-copy::before{display:none}
html:not([lang=ar]) .poem{background:none;border-left:1px solid #e9cb929c;border-right:0}
@media(max-width:700px){
 .topbar{height:70px}
 .scene__image--gate{background-size:auto 100%;background-position:35% center}
 .scene__image--archive{background-size:auto 100%;background-position:center}
 .scene__veil--gate{background:linear-gradient(0deg,#05070fef 0%,#05070fd8 27%,#05070f6b 54%,#05070f2b 100%)}
 .scene__veil--presence{background:linear-gradient(0deg,#05070fed,#05070fc9 48%,#05070f79)}
 .scene__veil--archive{background:radial-gradient(ellipse at center,#05070f97,#05070fd1 93%)}
 .scene__veil--echoes{background:#05070fa8}
 .scene__veil--departure{background:linear-gradient(0deg,#05070ff0,#05070fc7 55%,#05070f7a)}
 .home-status{top:96px;right:22px;padding:.26rem 0 .36rem}
 html:not([lang=ar]) .home-status{right:22px}
 .intro-copy{bottom:12%}
 .intro-copy h1{font-size:clamp(3.4rem,12vw,5rem)}
 .scene-verse{margin-top:.8rem;font-size:1.04rem}
 .door-trigger{left:16%;top:13%;width:42%;height:43%}
 .door-trigger::before{top:5%;height:83%}
 .door-trigger__slab{top:8%;height:78%}
 .door-trigger__cue{bottom:-8%}
 .presence-copy{top:20%}
 .presence-copy h2{font-size:clamp(6.6rem,30vw,11rem)}
 .presence-copy__about{font-size:1.04rem}
 .archive-copy h2{font-size:2.2rem}
 .constellation::before{height:64%}
 .artifact{padding:8px 4px;min-width:92px;min-height:88px;max-width:100px}
 .artifact__symbol{font-size:2.4rem}
 .artifact__name{font-size:1.1rem}
 .echoes__light{left:40%;width:110vw}
 .echoes-copy{width:auto}
 .echoes-copy h2{font-size:clamp(2.7rem,9vw,4rem)}
 .poem{font-size:clamp(1.45rem,5.25vw,1.9rem)}
 html:not([lang=ar]) .poem{padding-left:1rem}
 .music-credit{color:#c9b69a}
}
@media(max-width:380px), (max-height:650px){
 .door-trigger{top:13%;height:41%}
 .intro-copy{bottom:8%}
 .intro-copy h1{font-size:clamp(3rem,11.5vw,4.4rem)}
 .scene-verse{font-size:.96rem}
 .poem{font-size:1.33rem}
}
@media(max-width:380px) and (max-height:650px){
 .constellation::before{top:42%}
 .artifact{min-width:78px;min-height:68px;max-width:82px;padding:4px 2px}
 .artifact__symbol{font-size:1.8rem}
 .artifact__name{font-size:.82rem;line-height:1.2;overflow-wrap:anywhere}
 html[lang=ru] .artifact__name{font-size:.68rem;letter-spacing:-.02em;white-space:nowrap;overflow-wrap:normal}
}

/* The architectural drawing follows the reader's direction. */
html:not([lang=ar]) .scene__image--gate{background-image:url('assets/gate-study-ltr.svg')}
html:not([lang=ar]) .scene__veil--gate{background:linear-gradient(90deg,#05070fd9 0%,#05070fa8 32%,#05070f28 62%,transparent 78%),linear-gradient(0deg,#05070fab,transparent 26%,transparent 72%,#05070f75)}
html:not([lang=ar]) .scene__veil--presence{background:linear-gradient(90deg,#05070fe0,#05070fb0 48%,#05070f31 100%)}
html:not([lang=ar]) .scene__veil--echoes{background:linear-gradient(90deg,#05070fd8,#05070fa0 60%,#05070f78)}
html:not([lang=ar]) .scene__veil--departure{background:linear-gradient(90deg,#05070fe0,#05070fa9 53%,#05070f69)}
html:not([lang=ar]) .scene.is-before{transform:translate3d(-28%,0,-420px) rotateY(10deg)}
html:not([lang=ar]) .scene.is-after{transform:translate3d(28%,0,-420px) rotateY(-10deg)}
html:not([lang=ar]) .intro-copy{left:clamp(34px,8.5vw,155px);right:auto;top:31%;width:min(51vw,690px)}
html:not([lang=ar]) .home-status{left:clamp(34px,8.5vw,155px);right:auto}
html:not([lang=ar]) .presence-copy{left:clamp(34px,8.5vw,155px);right:auto;width:min(51vw,690px)}
html:not([lang=ar]) .echoes-copy{left:clamp(34px,8.5vw,155px);right:auto}
html:not([lang=ar]) .departure-copy{left:clamp(34px,8.5vw,155px);right:auto;max-width:min(52vw,750px)}
html:not([lang=ar]) .intro-bottom{left:clamp(24px,4.5vw,76px);right:auto}
html:not([lang=ar]) .door-trigger{left:auto;right:19%}
html:not([lang=ar]) .door-trigger__slab{transform-origin:left center}
html:not([lang=ar]) .door-trigger__slab i{left:10%;right:auto}
html:not([lang=ar]) .door-trigger:hover .door-trigger__slab,html:not([lang=ar]) .door-trigger:focus-visible .door-trigger__slab{transform:rotateY(-14deg)}
html:not([lang=ar]) .door-trigger.is-opening .door-trigger__slab{transform:rotateY(-73deg)}
html:not([lang=ar]) .threshold-flash{left:72%}
html:not([lang=ar]) .door-trigger__cue span:last-child{font-size:0;margin:0 0 0 .7rem}
html:not([lang=ar]) .door-trigger__cue span:last-child::before{content:'↗';font-size:1rem}

/* Light comes from the opening and moves slowly across its inner frame. */
.door-trigger__interior{position:absolute;top:12%;left:11%;width:78%;height:68%;overflow:hidden;border-radius:48% 48% 0 0 / 24% 24% 0 0;background:radial-gradient(ellipse at 50% 62%,#c4a06a3d 0%,#42392242 30%,#090d19 69%),linear-gradient(120deg,#1b2030,#090c15);box-shadow:inset 0 0 40px #e5c99922,0 0 22px #d9ae7030;opacity:.8;transition:opacity .7s,box-shadow .7s;pointer-events:none}
.door-trigger__interior::before{content:'';position:absolute;inset:7%;border:1px solid #eed6a95c;border-radius:48% 48% 0 0 / 24% 24% 0 0;box-shadow:inset 0 0 0 1px #1a1b25,0 0 15px #e6c38e3b}
.door-trigger__interior::after{content:'';position:absolute;left:-40%;top:-70%;width:170%;height:35%;background:linear-gradient(180deg,transparent,#f8ddb322,#fff2d24d,#f8ddb311,transparent);filter:blur(9px);transform:rotate(-12deg);animation:threshold-sweep 8s ease-in-out infinite;pointer-events:none}
.door-trigger__interior i{position:absolute;top:49%;left:50%;width:7px;height:7px;border:1px solid #f4dfb4;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 11px #ebc9950d,0 0 30px #f7dba09c;animation:threshold-beacon 4.8s ease-in-out infinite alternate}
.scene--threshold .scene__image--gate{transform-origin:28% 43%}
html:not([lang=ar]) .scene--threshold .scene__image--gate{transform-origin:72% 43%}
.scene--threshold.is-opening .scene__image--gate{transform:scale(1.28)}
.scene--threshold .intro-copy{transition:opacity .45s ease,filter .6s ease}
.scene--threshold.is-opening .intro-copy{opacity:0;filter:blur(7px)}
.scene--threshold.is-opening .door-trigger{transform:translateZ(30px) scale(1.12);transition:transform .9s cubic-bezier(.16,.75,.2,1)}
.door-trigger__slab{background:linear-gradient(112deg,#0a0e18f5 0%,#292836f2 46%,#070a13fa 100%);box-shadow:inset 15px 0 42px #e0bb841c,inset 0 0 0 8px #d7b88b0b,0 0 0 5px #070a139c}
.door-trigger__slab::after{content:'';position:absolute;inset:8% 8% 6%;border:1px solid #d4b98d39;border-radius:48% 48% 0 0 / 24% 24% 0 0;box-shadow:inset 0 0 0 8px #070a1399;pointer-events:none}
.door-trigger:hover .door-trigger__interior,.door-trigger:focus-visible .door-trigger__interior,.door-trigger.is-opening .door-trigger__interior{opacity:1;box-shadow:inset 0 0 65px #f0d09a45,0 0 35px #e9c38866}
.scene.is-active .eyebrow::before{transform-origin:0 50%;animation:folio-rule .95s cubic-bezier(.2,.8,.2,1) .28s both}
html[lang=ar] .scene.is-active .eyebrow::before{transform-origin:100% 50%}
@keyframes threshold-sweep{0%,12%{transform:translateY(-130%) rotate(-12deg);opacity:0}25%{opacity:.65}54%{transform:translateY(490%) rotate(-12deg);opacity:0}100%{transform:translateY(490%) rotate(-12deg);opacity:0}}
@keyframes threshold-beacon{to{box-shadow:0 0 0 16px #ebc99505,0 0 43px #f7dba0ad;opacity:.65}}
@keyframes folio-rule{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}

@media(max-width:700px){
 .intro-copy{top:auto}
 .scene__image--gate{background-position:26% center}
 html:not([lang=ar]) .scene__image--gate{background-position:74% center}
 html:not([lang=ar]) .scene__veil--gate{background:linear-gradient(0deg,#05070fef 0%,#05070fd8 27%,#05070f6b 54%,#05070f2b 100%)}
 html:not([lang=ar]) .scene__veil--presence{background:linear-gradient(0deg,#05070fed,#05070fc9 48%,#05070f79)}
 html:not([lang=ar]) .scene__veil--echoes{background:#05070fa8}
 html:not([lang=ar]) .scene__veil--departure{background:linear-gradient(0deg,#05070ff0,#05070fc7 55%,#05070f7a)}
 html:not([lang=ar]) .intro-copy{left:25px;right:25px;top:auto;bottom:12%;width:auto}
 html:not([lang=ar]) .home-status{left:20px;right:auto;top:96px}
 html:not([lang=ar]) .door-trigger{left:auto;right:16%;top:13%;width:42%;height:43%}
 html:not([lang=ar]) .presence-copy{left:28px;right:28px;width:auto}
 html:not([lang=ar]) .echoes-copy{left:28px;right:28px;width:auto}
 html:not([lang=ar]) .departure-copy{left:25px;right:25px;max-width:none}
}
@media(max-width:380px), (max-height:650px){html:not([lang=ar]) .intro-copy{top:auto;bottom:8%}html:not([lang=ar]) .home-status{top:80px}}

/* The focused station reads as a specimen held briefly in the foreground. */
.artifact{transform:translate(-50%,-50%) translate3d(var(--orbit-x,0px),var(--orbit-y,0px),0) scale(var(--orbit-scale,1));transition:filter .5s}
.artifact.is-in-focus{filter:drop-shadow(0 0 14px #e4c89a65)}
.artifact.is-in-focus .artifact__halo{opacity:.95;border-top-color:#f2d8ac;transform:scale(1.1)}
.artifact.is-in-focus .artifact__symbol{color:#fff0d3;transform:translateY(-4px)}
.orbit-readout{position:absolute;z-index:5;bottom:13%;left:clamp(30px,5vw,85px);width:min(250px,25vw);padding:0 0 .65rem;border-bottom:1px solid #d8b9898c;display:flex;flex-direction:column;gap:.2rem;color:#f0e5d2;text-align:left;pointer-events:none;animation:soft-arrive .55s ease both}
.orbit-readout[hidden]{display:none}
.orbit-readout span{font-size:.65rem;letter-spacing:.16em;color:#d9bc8d}
.orbit-readout strong{font-family:Georgia,'Reem Kufi',serif;font-size:clamp(1.35rem,1.8vw,1.8rem);font-weight:400;line-height:1.25}
.orbit-readout small{font-size:.78rem;color:#c8bcaa}
html[lang=ar] .orbit-readout{left:auto;right:clamp(30px,5vw,85px);text-align:right}
@media(max-width:700px){
 .orbit-readout{top:33%;bottom:auto;left:24px;width:min(185px,48vw)}
 html[lang=ar] .orbit-readout{right:24px;left:auto}
 .orbit-readout strong{font-size:1.2rem}
 .orbit-readout small{font-size:.68rem}
}
@media(max-width:380px) and (max-height:650px){.orbit-readout{display:none}}