:root{--spicy-paprika:#cf5c36;--lavender-grey:#9993b2;--ink-black:#0f1020;--pearl-beige:#dbd5b2;--sky-bg:var(--pearl-beige);--text-main:var(--ink-black);--scroll-progress:0}*{box-sizing:border-box;margin:0;padding:0}body{background-color:color-mix(in srgb, var(--pearl-beige), var(--ink-black) calc(var(--scroll-progress) * 100%));color:color-mix(in srgb, var(--ink-black), var(--pearl-beige) calc(var(--scroll-progress) * 100%));min-height:400vh;font-family:Inter,system-ui,-apple-system,sans-serif;transition:background-color .1s linear,color .1s linear;overflow-x:hidden}#root{width:100%}.skyline-container{pointer-events:none;z-index:5;width:100%;height:60vh;position:fixed;bottom:0;left:0}.celestial-object.observer-eye{background-color:var(--pearl-beige);width:18vw;height:12vw;left:calc(10% + (var(--scroll-progress) * 80%));bottom:calc(20% + (sin(var(--scroll-progress) * 3.14159) * 40vh));border:4px solid var(--ink-black);box-shadow:0 0 40px color-mix(in srgb, var(--spicy-paprika), transparent 50%);border-radius:50%/100% 100% 0% 0%;justify-content:center;align-items:center;transition:clip-path .5s;display:flex;position:absolute;overflow:hidden;transform:translate(-50%,50%)}.eye-socket{background-color:var(--ink-black);border:2px solid var(--spicy-paprika);border-radius:50%;width:6vw;height:6vw;position:relative;overflow:hidden}.pupil{background-color:var(--spicy-paprika);width:2.5vw;height:2.5vw;box-shadow:0 0 15px var(--spicy-paprika);border-radius:50%;margin-top:-1.25vw;margin-left:-1.25vw;position:absolute;top:50%;left:50%}.eyelid-top,.eyelid-bottom{background-color:var(--ink-black);z-index:2;width:100%;height:100%;transition:transform .3s;position:absolute;left:0}.eyelid-top{transform:translateY(calc(-100% + (var(--scroll-progress) * 100%)));top:0}.eyelid-bottom{transform:translateY(calc(100% - (var(--scroll-progress) * 100%)));bottom:0}.searchlight-system{width:100%;height:100%;opacity:calc((var(--scroll-progress) - .7) * 4);pointer-events:none;position:absolute;top:0;left:0}.searchlight{background:linear-gradient(to top, var(--pearl-beige), transparent);transform-origin:bottom;filter:blur(8px);mix-blend-mode:screen;width:2px;height:200vh;position:absolute}.sl-1{transform:rotate(calc(atan2(calc(var(--target-x) - 20vw), calc(100vh - var(--target-y))) * 57.2958deg));bottom:10%;left:20%}.sl-2{transform:rotate(calc(atan2(calc(var(--target-x) - 80vw), calc(100vh - var(--target-y))) * 57.2958deg));bottom:15%;left:80%}.skyline-layer{justify-content:space-around;align-items:flex-end;width:120%;display:flex;position:absolute;bottom:0;left:-10%}.skyline-layer.back{opacity:.6;height:50%;transform:translateY(calc(var(--scroll-progress) * 10%))}.skyline-layer.middle{opacity:.8;height:40%;transform:translateY(calc(var(--scroll-progress) * 5%))}.skyline-layer.front{height:30%;transform:translateY(0)}.building{background-color:var(--ink-black);width:10%}.b1{clip-path:polygon(0 0,100% 20%,100% 100%,0 100%);height:100%}.b2{clip-path:polygon(0 30%,50% 0,100% 30%,100% 100%,0 100%);height:80%}.b3{clip-path:polygon(0 10%,100% 0,100% 100%,0 100%);height:110%}.b4{clip-path:polygon(0 0,80% 0,100% 20%,100% 100%,0 100%);width:15%;height:100%}.b5{clip-path:polygon(0 20%,20% 0,80% 0,100% 20%,100% 100%,0 100%);width:12%;height:90%}.b6{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);width:20%;height:100%}.b7{clip-path:polygon(20% 0,80% 0,100% 100%,0 100%);width:15%;height:120%}.b8{clip-path:polygon(0 0,50% 20%,100% 0,100% 100%,0 100%);width:18%;height:80%}.portfolio-section{flex-direction:column;align-items:center;gap:4rem;width:100%;padding:20vh 5vw;display:flex}.portfolio-section h2{letter-spacing:.5rem;text-transform:uppercase;font-size:3rem}.project-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;width:100%;max-width:1200px;display:grid}.project-card{border:1px solid var(--lavender-grey);padding:2rem;transition:all .5s}.terminal-header{align-items:center;gap:1rem;display:flex}.status-blink{background-color:var(--spicy-paprika);border-radius:50%;width:1rem;height:1rem;animation:1s step-end infinite blink}@keyframes blink{50%{opacity:0}}.transmission{background-color:color-mix(in srgb, var(--ink-black), transparent 90%);border:1px solid var(--lavender-grey);position:relative;overflow:hidden}.id-tag{font-family:var(--mono);color:var(--spicy-paprika);opacity:.7;font-size:.8rem}.scanline{pointer-events:none;background:#ffffff1a;width:100%;height:2px;animation:4s linear infinite scan;position:absolute;top:0;left:0}@keyframes scan{0%{top:0}to{top:100%}}.glitch-active .transmission{animation:.2s infinite jitter}@keyframes jitter{0%{transform:translate(0)}25%{transform:translate(-2px,2px)}50%{transform:translate(2px,-2px)}75%{transform:translate(-1px,-1px)}to{transform:translate(0)}}.glitch-overlay{pointer-events:none;background:repeating-linear-gradient(0deg,#0000,#0000 2px,#cf5c360d 2px 4px);width:100%;height:100%;position:absolute;top:0;left:0}.gate-button{letter-spacing:.3rem;color:inherit;cursor:pointer;background:0 0;border:2px solid;padding:1rem 3rem;font-size:1.2rem;transition:all .3s}.gate-button:hover:not(:disabled){background:var(--spicy-paprika);color:var(--pearl-beige);border-color:var(--spicy-paprika)}.gate-button.locked{opacity:.3;cursor:not-allowed;filter:grayscale()}.app-container{flex-direction:column;align-items:center;width:100%;display:flex}header{text-align:center;z-index:10;flex-direction:column;justify-content:center;align-items:center;height:100vh;display:flex;position:relative}header h1{margin-bottom:1rem;font-family:serif;font-size:clamp(3rem,10vw,8rem)}header p{letter-spacing:.2rem;text-transform:uppercase;font-size:1.5rem}