.scroll-journey{height:340svh;position:relative}.scroll-journey .hero{position:sticky;top:0;height:100svh;min-height:0;max-height:none}.scroll-journey .sculpture{inset:0;width:100%;height:100%;cursor:default;pointer-events:none;opacity:1}.scroll-journey .hero-copy{padding-top:clamp(155px,22vh,230px)}.scroll-journey .hero-copy,.scroll-journey .annotation,.scroll-journey .hero-bottom,.scroll-journey .drag-label{will-change:opacity,transform}.work{position:relative;z-index:4;margin-top:-100svh;opacity:0}.control-state{min-width:135px}.no-webgl .work{opacity:1!important;transform:none!important}.no-webgl .scroll-journey{height:100svh}.no-webgl .work{margin-top:0}.reduced .scroll-journey{height:100svh}.reduced .work{margin-top:0;opacity:1!important;transform:none!important}.scroll-journey .annotation,.scroll-journey .drag-label,.scroll-journey .hero-bottom{z-index:2}
@media(max-width:600px){.scroll-journey{height:300svh}.scroll-journey .hero-copy{padding-top:115px}.scroll-journey .annotation{top:auto;bottom:155px;left:5%}.scroll-journey .drag-label{bottom:150px}.control-state{display:none}}
/* The page is readable right away; only the 3D scene waits for its model, with a loader in its place. */
.line>span{animation-delay:.15s}.line:nth-child(2)>span{animation-delay:.3s}.enter{animation-delay:.45s}
#scene{transition:opacity 1.1s cubic-bezier(.16,1,.3,1)}
.booting #scene{opacity:0}
.scene-loader{--load:0;position:absolute;inset-inline-start:68%;top:54%;translate:-50% -50%;display:grid;justify-items:center;gap:14px;color:#cfc7b8;font-size:13px;letter-spacing:.04em;pointer-events:none;opacity:0;transition:opacity .5s ease}
.booting .scene-loader{opacity:1;transition-delay:.4s}
.scene-loader svg{width:56px;height:56px;rotate:-90deg}
.scene-loader circle{fill:none;stroke-width:2}
.scene-loader .track{stroke:#ffffff1c}
.scene-loader .bar{stroke:var(--orange);stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:calc(100 - var(--load) * 100);transition:stroke-dashoffset .3s ease}
.scene-loader-pct{font-variant-numeric:tabular-nums;color:#8d867a}
[dir=rtl] .scene-loader{translate:50% -50%}
@media(max-aspect-ratio:9/10){.scene-loader{inset-inline-start:50%;top:74%}}
.no-webgl .scene-loader{display:none}
/* Grab-and-spin affordance on the laptop. */
.scroll-journey .sculpture canvas{touch-action:pan-y}
.over-laptop .scroll-journey .sculpture canvas{cursor:grab}
.grabbing,.grabbing *{cursor:grabbing!important;user-select:none}
/* Hero atmosphere: a warm glow behind the laptop, fine grain, a cursor light and drifting particles. */
.hero{background:radial-gradient(55% 60% at 72% 56%,#3a2b1e 0%,#24190f00 72%),radial-gradient(130% 100% at 50% 35%,#1b1915 0%,#0c0b09 72%)}
[dir=rtl] .hero{background:radial-gradient(55% 60% at 28% 56%,#3a2b1e 0%,#24190f00 72%),radial-gradient(130% 100% at 50% 35%,#1b1915 0%,#0c0b09 72%)}
.hero::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 85% 75% at 50% 45%,transparent 55%,#00000080 100%)}
.ambient{opacity:.06;mix-blend-mode:overlay;background-size:150px;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero-light{position:absolute;top:0;left:0;width:0;height:0;pointer-events:none;transform:translate(70vw,50vh);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.hero-light::before{content:'';position:absolute;width:760px;height:760px;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,#ff7a3514 0%,#ff7a3508 35%,transparent 68%)}
.ambient-particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
@media(pointer:coarse){.hero-light{display:none}}
/* Floating skill chips around the laptop (wide landscape screens only). */
.skill-orbit{position:absolute;inset:0;z-index:3;margin:0;padding:0;list-style:none;pointer-events:none;--spread:0}
.skill-chip{position:absolute;left:0;top:0;translate:-50% -50%;transform:translate(-999px,-999px);will-change:transform;opacity:0}
.skill-float{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:999px;background:#1c1a16f2;border:1px solid #ffffff1a;box-shadow:0 12px 30px -12px #000c,inset 0 1px 0 #ffffff0d;color:#e3dbcd;font-size:14px;font-weight:500;white-space:nowrap;animation:chip-float var(--float) ease-in-out calc(var(--i)*-.7s) infinite alternate}
.skill-float .tech-logo{width:18px;height:18px}
.skill-float{overflow:hidden}
.chip-face{display:inline-flex;align-items:center;gap:8px}
@keyframes chip-float{from{translate:0 -6px}to{translate:0 7px}}
@media(max-width:899px),(max-aspect-ratio:9/10),(max-height:600px){.skill-orbit{display:none}}
@media(prefers-reduced-motion:reduce){.skill-float{animation:none}}
.reduced .skill-float{animation:none}/* chips stay, but still */
/* The back layer sits under the laptop canvas, so the lid partly covers those chips. */
.skill-orbit-back{z-index:0}
.skill-orbit-back .skill-float{background:#17150fe6;color:#bdb5a7}
/* Front chips paint above the projects panel, which joins the hero after them. */
.skill-orbit:not(.skill-orbit-back){z-index:4}