:root{timeline-scope:--intro,--s1,--s2,--s3,--s4,--s5}.hero-wrapper{position:relative}.sticky-visual{float:right;z-index:10;pointer-events:none;border-left:1px solid color-mix(in srgb,var(--color-light)5%,transparent);place-items:center;width:50%;height:100vh;display:grid;position:sticky;top:0}[dir=rtl] .sticky-visual{float:left;border-left:none;border-right:1px solid color-mix(in srgb,var(--color-light)5%,transparent)}.shape-container{opacity:0;direction:ltr;place-items:center;width:400px;height:400px;animation-name:shape-fade;animation-timing-function:cubic-bezier(.4,0,.2,1);animation-fill-mode:both;display:grid;position:absolute}.shape-intro{animation-timeline:--intro}.shape-1{animation-timeline:--s1}.visual-browser{border:1px solid color-mix(in srgb,var(--color-light)20%,transparent);background:color-mix(in srgb,var(--color-light)3%,transparent);width:320px;height:220px}.browser-bar{border-bottom:1px solid color-mix(in srgb,var(--color-light)15%,transparent);align-items:center;gap:6px;height:32px;padding-left:12px;display:flex}.browser-bar span{background:color-mix(in srgb,var(--color-light)20%,transparent);border-radius:50%;width:10px;height:10px}.browser-bar span:first-child{background:var(--color-accent)}.browser-content{justify-content:center;align-items:center;padding:20px;display:flex}.pixel-grid{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.pixel-grid span{background:color-mix(in srgb,var(--color-accent)30%,transparent);width:32px;height:32px;animation:2s ease-in-out infinite pixel-pulse}.pixel-grid span:nth-child(odd){animation-delay:.5s}.pixel-grid span:nth-child(3n){background:color-mix(in srgb,var(--color-light)15%,transparent)}@keyframes pixel-pulse{0%,to{opacity:.4}50%{opacity:1}}.visual-stack{perspective:800px;flex-direction:column;gap:16px;display:flex}.stack-layer{letter-spacing:.15em;text-transform:uppercase;border:1px solid color-mix(in srgb,var(--color-light)20%,transparent);justify-content:center;align-items:center;width:260px;height:60px;font-size:.85rem;font-weight:500;display:flex;transform:rotateX(15deg)}.stack-frontend{background:linear-gradient(90deg,color-mix(in srgb,var(--color-accent)20%,transparent),transparent);color:var(--color-accent);border-color:color-mix(in srgb,var(--color-accent)40%,transparent)}.stack-backend{background:color-mix(in srgb,var(--color-light)5%,transparent);color:var(--color-light)}.stack-db{background:color-mix(in srgb,var(--color-light)3%,transparent);color:color-mix(in srgb,var(--color-light)50%,transparent)}.terminal-cursor{animation:1s step-end infinite cursor-blink}@keyframes cursor-blink{0%,to{opacity:1}50%{opacity:0}}.profile-frame{width:340px;height:400px;position:relative}.profile-border{background:linear-gradient(135deg,var(--color-accent)0%,transparent 40%,transparent 60%,var(--color-accent)100%);z-index:1;position:absolute;inset:-2px}.profile-border:after{content:"";background:var(--color-primary);position:absolute;inset:2px}.profile-photo{z-index:2;width:100%;height:100%;position:relative;overflow:hidden}.corner-accent{border:2px solid var(--color-accent);z-index:3;pointer-events:none;width:60px;height:60px;position:absolute}.corner-tl{border-bottom:none;border-left:none;top:-10px;right:-10px}.corner-br{border-top:none;border-right:none;bottom:-10px;left:-10px}[dir=rtl] .corner-tl{border-left:2px solid var(--color-accent);border-right:none;left:-10px;right:auto}[dir=rtl] .corner-br{border-right:2px solid var(--color-accent);border-left:none;left:auto;right:-10px}@media (max-width:768px){.profile-frame{width:260px;height:320px}.corner-accent{width:40px;height:40px}.corner-tl{top:-6px;right:-6px}.corner-br{bottom:-6px;left:-6px}[dir=rtl] .corner-tl{left:-6px;right:auto}[dir=rtl] .corner-br{left:auto;right:-6px}}.shape-2{animation-timeline:--s2}.shape-3{animation-timeline:--s3}.shape-4{animation-timeline:--s4}.shape-5{animation-timeline:--s5}.hero-content{z-index:20;width:50%;padding-bottom:20vh;position:relative}[dir=rtl] .hero-content{margin-left:auto}.hero-header{align-items:center;height:90vh;padding-left:10vw;display:flex}.hero-header.intro{view-timeline-name:--intro;view-timeline-axis:block;view-timeline-inset:0% 40%}[dir=rtl] .hero-header{padding-left:2rem;padding-right:10vw}.scroll-section{view-timeline-axis:block;view-timeline-inset:40% 40%;flex-direction:column;justify-content:center;height:100vh;padding-left:10vw;padding-right:2rem;display:flex}[dir=rtl] .scroll-section{padding-left:2rem;padding-right:10vw}.s1{view-timeline-name:--s1}.s2{view-timeline-name:--s2}.s3{view-timeline-name:--s3}.s4{view-timeline-name:--s4}.s5{view-timeline-name:--s5}.focus-text{color:color-mix(in srgb,var(--color-light)30%,transparent);letter-spacing:-.02em;max-width:500px;margin:0;font-size:3.5rem;font-weight:600;line-height:1.1;animation:linear both content-focus!important;animation-timeline:view()!important;animation-range:cover!important}.description{color:color-mix(in srgb,var(--color-light)50%,transparent);border-left:2px solid var(--color-accent);max-width:420px;margin-top:1.5rem;padding-left:1.5rem;font-size:1.1rem;font-weight:300;line-height:1.7;animation:linear both content-focus!important;animation-timeline:view()!important;animation-range:cover!important}[dir=rtl] .description{border-left:none;border-right:2px solid var(--color-accent);padding-left:0;padding-right:1.5rem}.desktop-progress{background:var(--color-accent);transform-origin:top;z-index:20;width:3px;height:100%;animation:linear progress-grow;animation-timeline:scroll();position:absolute;top:0;left:-1px;transform:scaleY(0)}[dir=rtl] .desktop-progress{left:auto;right:-1px}.progress-circle{fill:none;stroke:var(--color-accent);stroke-width:8px;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1px;animation:linear circle-grow;animation-timeline:scroll()}@keyframes shape-fade{entry 0%{opacity:0;transform:translateY(40px)scale(.9)}entry 100%{opacity:1;transform:translateY(0)scale(1)}exit 0%{opacity:1;transform:translateY(0)scale(1)}exit 100%{opacity:0;transform:translateY(-40px)scale(1.1)}}@keyframes content-focus{0%{filter:blur(12px);opacity:0;border-color:#0000;transform:scale(.8)translateY(40px)}45%,55%{filter:blur();opacity:1;color:var(--color-light);border-color:var(--color-accent);transform:scale(1)translateY(0)}to{filter:blur(12px);opacity:0;border-color:#0000;transform:scale(.95)translateY(-40px)}}@keyframes progress-grow{to{transform:scaleY(1)}}@keyframes circle-grow{to{stroke-dashoffset:0}}@media (max-width:1024px){.sticky-visual{display:none}.hero-content{width:100%}.hero-header,.scroll-section,.closing-section{padding-left:1.5rem;padding-right:1.5rem}.focus-text{font-size:2rem}.desktop-progress{display:none}.mobile-progress{display:flex}}