@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap";:root{--color-header-bg: #1a1a1a;--color-header-text: #ffffff;--color-accent: #856628;--color-accent-v2: #ac925f;--color-section-bg: rgba(20, 20, 20, .8);--color-surface: rgba(24, 24, 24, .401)}*{margin:0;padding:0;box-sizing:border-box}html,body{color:#fff;font-family:Inter,sans-serif;overflow-x:hidden;scroll-behavior:smooth;height:100%}#loading-screen{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#000;display:flex;justify-content:center;align-items:center;z-index:9999;transition:opacity 1.5s ease-in,visibility 1.5s ease-in}#loading-screen.hidden{opacity:0;visibility:hidden;pointer-events:none}.loading-content{display:flex;flex-direction:column;align-items:center;gap:1.5rem;width:250px}.loading-skull{width:50px;height:50px;fill:#fff}.loading-bar-track{width:100%;height:2px;background-color:#ffffff1a;overflow:hidden}#loading-bar{width:100%;height:100%;background-color:#fff;transform-origin:top left;transform:scaleX(0);transition:transform .1s linear}.main-header{position:fixed;top:0;left:0;width:100%;height:80px;background-color:var(--color-header-bg);color:var(--color-header-text);display:flex;align-items:center;padding:0 10%;z-index:100;border-bottom:1px solid rgba(255,255,255,.1)}nav{display:flex;justify-content:space-between;align-items:center;width:100%}.logo{font-size:1.2rem;font-weight:900;letter-spacing:2px;color:#fff;cursor:pointer}.nav-links{display:flex;list-style:none;gap:2rem}.nav-links a{text-decoration:none;color:#ffffffb3;font-size:.9rem;text-transform:uppercase;font-weight:500;transition:color .3s ease}.nav-links a:hover{color:#fff}@media(max-width:768px){.main-header{padding:0 5%}.nav-links{gap:1rem}}.webgl{position:fixed;top:0;left:0;outline:none;z-index:1}#ui-wrapper{position:relative;top:0;left:0;z-index:2;width:100%}.section{height:100%;display:flex;align-items:center;padding:0 10%;height:100vh}.section h2{font-size:clamp(2rem,5vw,4rem);text-transform:uppercase;margin-bottom:1rem}.content{max-width:800px;line-height:1.5}h1{font-size:clamp(3rem,8vw,6rem);text-transform:uppercase}.btn-primary{margin-top:2rem;padding:1rem 2rem;background:#fff;color:#000;border:none;cursor:pointer;font-weight:700;text-transform:uppercase;transition:transform .2s ease}.btn-primary:hover{transform:scale(1.1)}.about-grid{display:flex;flex-direction:column;gap:2rem;margin-top:2rem}.about-block h3{font-size:1.2rem;color:var(--color-accent-v2);text-transform:uppercase;letter-spacing:2px;margin-bottom:.8rem;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:.5rem}.about-block ul{list-style:none}.about-block li{margin-bottom:.5rem;font-size:1rem;line-height:1.5;color:#ffffffd9}.about-block strong{color:#fff}.skills-list{display:flex;flex-wrap:wrap;gap:1rem}.skills-list li{background:#ffffff1a;padding:.4rem 1rem;border-radius:20px;font-size:.9rem;font-weight:500}#tutorial-ui{position:absolute;bottom:15%;left:50%;transform:translate(-50%);display:flex;gap:4rem;color:#fff;z-index:4;pointer-events:none;opacity:0;visibility:hidden;transition:opacity 1s ease-in-out,visibility 1s ease-in-out}#tutorial-ui.visible{opacity:.8;visibility:visible}#tutorial-ui.visible .tutorial-action{animation:gentlePulse 2s infinite ease-in-out}.tutorial-action{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.8rem;font-family:sans-serif;text-transform:uppercase;letter-spacing:1.5px;font-size:.8rem}.tutorial-action svg{width:35px;height:35px}@keyframes gentlePulse{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}.mobile-only{display:none}@media screen and (max-width:600px){#tutorial-ui{gap:2.5rem}.desktop-only{display:none}.mobile-only{display:flex}}#ui-wrapper{transition:opacity 1s ease,visibility 1s;opacity:1;visibility:visible}#ui-wrapper.hidden{opacity:0;visibility:hidden;pointer-events:none}.main-header.hidden{transform:translateY(-100%);transition:transform .5s ease}.hotpointsContainer{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:3;opacity:0;visibility:hidden;transition:opacity 1s ease-in}.hotpointsContainer.active{opacity:1;visibility:visible}.point{position:fixed;top:0;left:0;opacity:0;pointer-events:none;cursor:pointer;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.point.visible{opacity:1;pointer-events:auto}.point .label{width:30px;height:30px;border-radius:50%;background:#0009;border:1px solid rgba(255,255,255,.5);color:#fff;display:flex;justify-content:center;align-items:center;font-weight:700;font-size:14px;transition:transform .3s ease,background .3s ease;z-index:2;position:relative;transform:translate(-50%,-50%)}.point .text{position:absolute;top:10px;width:110px;padding:10px;background:#000c;border-radius:25px;font-size:12px;text-align:center;opacity:0;pointer-events:none;z-index:1;transform:translate(-50%) scale(.8);transition:opacity .3s,transform .3s}.point .label.tap-active{transform:translate(-50%,-50%) scale(1.3);background:var(--color-accent);transition:transform .1s ease,background .1s ease}.point.is-active .label{background:var(--color-accent);transform:translate(-50%,-50%) scale(1.15);transition:transform .3s ease,background .3s ease}.point .text.tap-active{opacity:1;transform:translate(-50%) scale(1);transition:opacity .1s ease,transform .1s ease}.point.is-active .text{opacity:1;transform:translate(-50%) scale(1);transition:opacity .3s ease,transform .3s ease}@media(hover:hover)and (pointer:fine){.point:hover .label{transform:translate(-50%,-50%) scale(1.2);background:var(--color-accent)}.point:hover .text{opacity:1;transform:translate(-50%) scale(1)}}#project-modal{position:fixed;inset:auto auto 50px 50px;transform:none;width:420px;max-width:90vw;background:linear-gradient(135deg,#f5f2e6fa,#e6e1c8f2);color:#1a1a1a;border:none;border-left:4px solid var(--color-accent);padding:40px;z-index:3;box-shadow:20px 20px 60px #0000004d;opacity:1;visibility:visible;transform:translate(0);pointer-events:all;transition:transform .6s cubic-bezier(.23,1,.32,1),opacity .6s ease,visibility .6s}#project-modal.hidden{opacity:0;visibility:hidden;transform:translate(-40px);pointer-events:none}.modal-category{display:flex;align-items:center;gap:10px;text-transform:uppercase;font-size:.7rem;letter-spacing:3px;color:var(--color-accent);margin-bottom:10px}.modal-category:before{content:"";width:20px;height:1px;background:var(--color-accent)}.project-title{font-family:Playfair Display,serif;font-size:2.4rem;font-weight:700;margin-bottom:20px;line-height:1;color:#000}.project-description{font-size:1.1rem;line-height:1.7;font-weight:400;color:#3d3d3d;white-space:pre-line;margin-bottom:25px}#project-modal::-webkit-scrollbar{width:6px}#project-modal::-webkit-scrollbar-thumb{background:#0000001a;border-radius:10px}.close-btn{position:absolute;top:15px;right:15px;width:30px;height:30px;border:1px solid rgba(0,0,0,.1);background:transparent;border-radius:50%;color:#000;font-size:1.2rem;opacity:.5;display:flex;justify-content:center;align-items:center;line-height:0;padding-bottom:4px;transition:all .3s ease}.close-btn:hover{opacity:1;transform:rotate(90deg);border-color:var(--color-accent);color:var(--color-accent)}@media screen and (max-width:600px){#project-modal{width:85vw;left:50%;bottom:20px;transform:translate(-50%);padding:20px 15px;max-height:45vh;overflow-y:auto}#project-modal.hidden{transform:translate(-50%,20px)}.project-title{font-size:1.5rem;font-weight:600;line-height:1.15;margin-bottom:10px}.project-description{font-size:1rem;line-height:1.6;font-weight:400;color:#000;margin-bottom:15px}.modal-category{font-size:.65rem;font-weight:600;margin-bottom:5px;letter-spacing:2px}.close-btn{top:10px;right:10px;width:25px;height:25px}}.btn-exit{position:fixed;top:25px;left:25px;z-index:100;display:flex;align-items:center;gap:8px;background:#0006;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;border:1px solid rgba(255,255,255,.2);padding:10px 20px;border-radius:30px;font-family:Inter,sans-serif;font-size:.9rem;font-weight:500;text-transform:uppercase;letter-spacing:1px;cursor:pointer;opacity:1;visibility:visible;transform:translate(0);transition:all 1s ease-in}.btn-exit svg{width:18px;height:18px;transition:transform .7s ease}.btn-exit:hover{background:var(--color-accent);border-color:var(--color-accent)}.btn-exit:hover svg{transform:translate(-4px)}.btn-exit.hidden{opacity:0;visibility:hidden;transform:translate(-20px);pointer-events:none;transition:all .3s ease-out}@media screen and (max-width:600px){.btn-exit{top:20px;left:50%;transform:translate(-50%)}.btn-exit.hidden{transform:translate(-50%,-20px)}}