:root{--primary:#0042da;--primary-dark:#0034b0;--primary-light:rgba(0, 66, 218, 0.1);--primary-glow:rgba(0, 66, 218, 0.4);--bg:#0a0a0a;--bg-overlay:rgba(10, 10, 10, 0.8);--bg-transparent:rgba(10, 10, 10, 0.9);--text-white:#ffffff;--text-gray:#cccccc;--text-light:#999999;--z-deep-bg:-800;--z-grid:-400;--z-line:-200;--z-content:0;--z-nav:99999;--transition-base:0.05s linear;--transition-smooth:0.3s cubic-bezier(0.4, 0, 0.2, 1);--transition-strong:0.6s cubic-bezier(0.2, 0.85, 0.3, 1);--spacing-xs:8px;--spacing-sm:12px;--spacing-md:20px;--spacing-lg:30px;--spacing-xl:50px;--shadow-sm:0 2px 8px rgba(0, 0, 0, 0.1);--shadow-md:0 8px 24px rgba(0, 0, 0, 0.2);--shadow-lg:0 20px 60px rgba(0, 0, 0, 0.4);--shadow-glow:0 0 40px var(--primary-glow);--radius-sm:4px;--radius-md:8px;--radius-lg:16px;--radius-full:9999px}:root{--primary:#0042da;--primary-dark:#0034b0;--primary-light:rgba(0, 66, 218, 0.1);--primary-glow:rgba(0, 66, 218, 0.4);--bg:#0a0a0a;--bg-overlay:rgba(10, 10, 10, 0.8);--bg-transparent:rgba(10, 10, 10, 0.9);--text-white:#ffffff;--text-gray:#cccccc;--text-light:#999999;--z-nav:99999;--transition-base:0.05s linear;--transition-smooth:0.3s cubic-bezier(0.4, 0, 0.2, 1);--transition-strong:0.6s cubic-bezier(0.2, 0.85, 0.3, 1);--spacing-xs:8px;--spacing-sm:12px;--spacing-md:20px;--spacing-lg:30px;--spacing-xl:50px;--radius-sm:4px;--radius-md:8px}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--bg);color:var(--text-white);font-family:-apple-system,BlinkMacSystemFont,segoe ui,sans-serif;min-height:300vh;padding:50px}html{overflow-x:hidden;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--primary)var(--bg);height:100%;font-size:16px}html::-webkit-scrollbar{width:3px}html::-webkit-scrollbar-thumb{background:var(--primary);border-radius:3px}html::-webkit-scrollbar-track{background:var(--bg)}h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2}p{line-height:1.6}a{color:inherit;text-decoration:none;transition:var(--transition-smooth)}button{cursor:pointer;border:none;outline:none;font-family:inherit}img{max-width:100%;height:auto;display:block}::selection{background:var(--primary);color:var(--text-white)}::-moz-selection{background:var(--primary);color:var(--text-white)}.layer-3d{position:absolute;top:0;left:0;width:100%;pointer-events:none;backface-visibility:hidden;transition:transform var(--transition-base);will-change:transform}.layer-deep-bg,.layer-grid,.layer-line{height:300vh}.layer-deep-bg{z-index:var(--z-deep-bg);background:var(--bg)}.layer-grid{z-index:var(--z-grid)}.grid-svg{width:100%;height:100%;stroke:rgba(0,66,218,5%);stroke-width:1;fill:none;opacity:.6}.grid-pattern{animation:grid-pulse 4s ease-in-out infinite}@keyframes grid-pulse{0%,100%{opacity:.5}50%{opacity:.8}}.layer-line{z-index:var(--z-line)}.line-svg{position:absolute;top:15%;left:15%;width:70%;height:70%;stroke:rgba(0,66,218,.2);stroke-width:1;fill:none}.line-svg path{stroke-dasharray:1000;stroke-dashoffset:1000;animation:line-draw 3s ease-out forwards}.line-svg path:nth-child(2){animation-delay:.5s}.line-svg path:nth-child(3){animation-delay:1s}.line-svg path:nth-child(4){animation-delay:1.5s}@keyframes line-draw{to{stroke-dashoffset:0}}.layer-content{z-index:var(--z-content);pointer-events:all;padding:0 5vw;transform-style:preserve-3d;position:relative;width:100%;min-height:300vh}.layer-nav{z-index:var(--z-nav);pointer-events:none;position:fixed;top:0;left:0;width:0;height:0;transform:none!important}.layer-nav>*{pointer-events:all}.nav-desktop{position:fixed;top:50vh;right:4vw;transform:translateY(-50%);display:flex;flex-direction:column;gap:var(--spacing-lg);align-items:flex-end;opacity:0;animation:nav-fade-in .8s ease-out .5s forwards;z-index:99999;pointer-events:all}@keyframes nav-fade-in{from{opacity:0;top:50vh;right:2vw}to{opacity:1;top:50vh;right:4vw}}.nav-item{display:flex;align-items:center;gap:var(--spacing-sm);color:var(--text-gray);text-decoration:none;font-size:15px;font-weight:500;transition:var(--transition-strong);cursor:pointer;opacity:.7;position:relative}.nav-item::before{content:"";position:absolute;left:-20px;top:50%;transform:translateY(-50%);width:0;height:2px;background:var(--primary);transition:var(--transition-strong)}.nav-item:hover::before{width:12px}.nav-item i{font-size:20px;width:28px;text-align:center;transition:var(--transition-smooth)}.nav-item:hover{color:var(--text-white);opacity:1;transform:translateX(-4px)}.nav-item:hover i{transform:scale(1.1)}.nav-item.active{color:var(--primary);font-weight:700;opacity:1;text-shadow:0 0 8px var(--primary-glow);transform:translateX(-4px)}.nav-item.active::before{width:12px}.nav-item.active i{transform:scale(1.15)}.nav-divider{width:28px;height:1px;background:#333;margin-right:var(--spacing-sm);margin-top:10px;margin-bottom:10px}.nav-action{display:flex;align-items:center;gap:var(--spacing-sm);color:var(--text-white);background:var(--primary);border:none;padding:12px 20px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;cursor:pointer;transition:var(--transition-strong);text-decoration:none;margin-right:var(--spacing-sm);box-shadow:0 0 transparent;position:relative;overflow:hidden}.nav-action::before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,.2);transform:translate(-50%,-50%);transition:width .6s,height .6s}.nav-action:hover::before{width:300px;height:300px}.nav-action:hover{background:var(--primary-dark);transform:translateX(-8px);box-shadow:0 0 25px var(--primary-glow)}.nav-action i{font-size:18px;position:relative;z-index:1}.nav-action span{position:relative;z-index:1}.nav-mobile{position:fixed;top:20px;left:50%;transform:translateX(-50%);display:none;gap:25px;background:var(--bg-transparent);backdrop-filter:blur(15px);padding:12px 30px;border-radius:35px;border:1px solid var(--primary-light);z-index:var(--z-nav);box-shadow:0 4px 20px rgba(0,0,0,.3)}.nav-mobile .nav-item{gap:var(--spacing-xs);font-size:13px}.nav-mobile .nav-item i{font-size:17px}.nav-mobile .nav-item::before{display:none}@media(max-width:768px){.nav-desktop{display:none}.nav-mobile{display:flex}}.section{position:relative;width:100%;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;transform-style:preserve-3d;opacity:0;animation:section-fade-in 1s ease-out forwards}@keyframes section-fade-in{from{opacity:0;transform:translateZ(-50px)}to{opacity:1;transform:translateZ(0)}}.tag{padding:5px 14px;background:var(--primary-light);color:var(--primary);font-size:12px;font-weight:600;border-radius:20px;border:1px solid transparent;transition:var(--transition-smooth);display:inline-block}.tag:hover{background:var(--primary);color:var(--text-white);border-color:var(--primary);transform:translateY(-2px);box-shadow:0 4px 12px var(--primary-glow)}.icon-svg{width:100%;height:100%;fill:currentColor;stroke:currentColor;transition:var(--transition-smooth)}.icon-wrapper{display:flex;align-items:center;justify-content:center;transition:var(--transition-strong)}.icon-wrapper:hover .icon-svg{transform:scale(1.1)rotate(5deg)}.section-about{z-index:calc(var(--z-content) + 50)}.avatar{width:140px;height:140px;border-radius:50%;background:var(--primary);border:5px solid var(--text-white);overflow:clip;margin-bottom:40px;transform:translateZ(60px)scale(1.02);box-shadow:var(--shadow-glow);position:relative;animation:avatar-float 3s ease-in-out infinite}@keyframes avatar-float{0%,100%{transform:translateZ(60px)scale(1.02)translateY(0)}50%{transform:translateZ(60px)scale(1.02)translateY(-10px)}}.avatar::before{content:'';position:absolute;inset:-5px;border-radius:50%;background:linear-gradient(45deg,var(--primary),var(--primary-dark));z-index:-1;opacity:0;transition:opacity var(--transition-smooth)}.avatar:hover::before{opacity:1;animation:avatar-glow 1.5s ease-in-out infinite}@keyframes avatar-glow{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.1);opacity:1}}.avatar img{width:100%;height:100%;object-fit:cover;transition:var(--transition-smooth)}.avatar:hover img{transform:scale(1.05)}.about-title{font-size:8vw;font-weight:900;color:var(--primary);line-height:1.2;margin-bottom:25px;transform:translateZ(50px);background:linear-gradient(135deg,var(--primary) 0%,#0066ff 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:title-shine 3s ease-in-out infinite}@keyframes title-shine{0%,100%{filter:brightness(1)}50%{filter:brightness(1.2)}}.about-bio{font-size:1.3vw;color:var(--text-gray);max-width:750px;line-height:1.8;padding:0 2vw;margin-bottom:60px;transform:translateZ(40px)}.skills-container{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-lg);max-width:900px;margin-bottom:80px;transform:translateZ(30px)}.skill-item{background:var(--primary-light);border:1px solid rgba(0,66,218,.2);border-radius:var(--radius-md);padding:30px 20px;transform:translateZ(10px);transition:var(--transition-strong);position:relative;overflow:hidden}.skill-item::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(0,66,218,.1) 0%,transparent 70%);opacity:0;transition:var(--transition-strong)}.skill-item:hover::before{opacity:1;animation:skill-ripple 1.5s ease-out}@keyframes skill-ripple{from{transform:scale(0)}to{transform:scale(1)}}.skill-item:hover{transform:translateZ(30px)translateY(-8px);border-color:var(--primary);box-shadow:0 0 20px var(--primary-glow)}.skill-icon{font-size:32px;color:var(--primary);margin-bottom:15px;transform:translateZ(15px);transition:var(--transition-smooth)}.skill-item:hover .skill-icon{transform:translateZ(15px)scale(1.1)rotate(5deg)}.skill-name{font-size:20px;font-weight:700;margin-bottom:10px;transform:translateZ(12px)}.skill-desc{font-size:14px;color:var(--text-gray);line-height:1.6;margin-bottom:20px;transform:translateZ(10px)}.skill-tags{display:flex;flex-wrap:wrap;gap:var(--spacing-xs);justify-content:center;transform:translateZ(8px)}.experiences-container{max-width:1000px;width:90%;transform:translateZ(20px)}.exp-title{font-size:2vw;color:var(--primary);margin-bottom:40px;transform:translateZ(15px);font-weight:900}.exp-item{text-align:left;border-left:2px solid var(--primary);padding-left:30px;margin-bottom:40px;transform:translateZ(10px);margin-left:20px;position:relative;transition:var(--transition-smooth)}.exp-item::before{content:'';position:absolute;left:-6px;top:0;width:10px;height:10px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--primary);transition:var(--transition-smooth)}.exp-item:hover{border-color:var(--text-white);transform:translateZ(20px)translateX(5px)}.exp-item:hover::before{background:var(--text-white);box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--text-white),0 0 15px var(--primary-glow)}.exp-company{font-size:18px;font-weight:700;color:var(--primary);margin-bottom:5px;transition:var(--transition-smooth)}.exp-item:hover .exp-company{color:var(--text-white)}.exp-period{font-size:14px;color:var(--text-light);margin-bottom:15px}.exp-details{list-style:none}.exp-details li{font-size:14px;color:var(--text-gray);line-height:1.8;margin-bottom:10px;position:relative;padding-left:20px;transition:var(--transition-smooth)}.exp-details li::before{content:"•";color:var(--primary);position:absolute;left:0;top:0;font-size:1.2em;transition:var(--transition-smooth)}.exp-item:hover .exp-details li{color:var(--text-white)}.exp-item:hover .exp-details li::before{color:var(--text-white);transform:scale(1.3)}@media(max-width:768px){.about-title{font-size:15vw}.about-bio{font-size:3.5vw;margin-bottom:40px}.skills-container{grid-template-columns:1fr;gap:var(--spacing-md);width:90%}.exp-title{font-size:5vw}}.section-works-trigger{z-index:calc(var(--z-content) + 100)}.works-text{font-size:30vw;font-weight:900;color:var(--primary);line-height:1;transform-origin:center center;transform:translateZ(100px);position:relative;z-index:inherit;background:linear-gradient(135deg,var(--primary) 0%,#0066ff 50%,#00aaff 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 0 80px var(--primary-glow);filter:drop-shadow(0 0 40px var(--primary-glow));transition:var(--transition-base)}.section-works-illusion{z-index:calc(var(--z-content) + 150);position:absolute;top:100vh;left:0;width:100%;height:100vh;display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none;transition:opacity var(--transition-strong);background:var(--bg-overlay);backdrop-filter:blur(10px)}.works-container{display:grid;grid-template-columns:repeat(2,1fr);gap:60px;width:80%;max-width:1000px;perspective:1500px;transform-style:preserve-3d}.work-item{background:var(--bg-transparent);border:1px solid var(--primary-light);border-radius:var(--radius-md);padding:30px 20px;height:320px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;text-align:center;transform-style:preserve-3d;box-shadow:var(--shadow-lg);transition:var(--transition-strong);position:relative;overflow:hidden}.work-item::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at center,var(--primary-light) 0%,transparent 70%);opacity:0;transition:var(--transition-strong)}.work-item:hover::before{opacity:1}.work-item:nth-child(1){transform:rotateX(10deg)rotateY(-8deg)translateZ(20px)translateY(20px);z-index:2;animation:work-float-1 4s ease-in-out infinite}.work-item:nth-child(2){transform:rotateX(12deg)rotateY(10deg)translateZ(50px)translateY(-25px);z-index:3;border-color:rgba(0,66,218,.3);animation:work-float-2 4.5s ease-in-out infinite}.work-item:nth-child(3){transform:rotateX(12deg)rotateY(-10deg)translateZ(40px)translateY(-20px);z-index:3;border-color:rgba(0,66,218,.3);animation:work-float-3 5s ease-in-out infinite}.work-item:nth-child(4){transform:rotateX(10deg)rotateY(8deg)translateZ(20px)translateY(25px);z-index:2;animation:work-float-4 4.2s ease-in-out infinite}@keyframes work-float-1{0%,100%{transform:rotateX(10deg)rotateY(-8deg)translateZ(20px)translateY(20px)}50%{transform:rotateX(10deg)rotateY(-8deg)translateZ(25px)translateY(15px)}}@keyframes work-float-2{0%,100%{transform:rotateX(12deg)rotateY(10deg)translateZ(50px)translateY(-25px)}50%{transform:rotateX(12deg)rotateY(10deg)translateZ(55px)translateY(-30px)}}@keyframes work-float-3{0%,100%{transform:rotateX(12deg)rotateY(-10deg)translateZ(40px)translateY(-20px)}50%{transform:rotateX(12deg)rotateY(-10deg)translateZ(45px)translateY(-25px)}}@keyframes work-float-4{0%,100%{transform:rotateX(10deg)rotateY(8deg)translateZ(20px)translateY(25px)}50%{transform:rotateX(10deg)rotateY(8deg)translateZ(25px)translateY(20px)}}.work-item:hover{transform:rotateX(0)rotateY(0)translateZ(80px)translateY(-15px);z-index:10;border-color:var(--primary);box-shadow:0 0 40px var(--primary-glow);animation:none}.work-svg{width:90px;height:90px;color:var(--primary);margin-bottom:15px;transform:translateZ(30px);transition:var(--transition-strong);filter:drop-shadow(0 0 10px var(--primary-glow))}.work-item:hover .work-svg{transform:translateZ(40px)scale(1.1)rotate(5deg);filter:drop-shadow(0 0 20px var(--primary-glow))}.work-name{font-size:19px;font-weight:700;margin-bottom:10px;transform:translateZ(20px);transition:var(--transition-smooth)}.work-item:hover .work-name{color:var(--primary);transform:translateZ(25px)}.work-desc{font-size:14px;color:var(--text-light);line-height:1.6;margin-bottom:20px;padding:0 10px;transform:translateZ(15px);transition:var(--transition-smooth)}.work-item:hover .work-desc{color:var(--text-gray);transform:translateZ(20px)}.work-tags{display:flex;flex-wrap:wrap;gap:var(--spacing-xs);justify-content:center}@media(max-width:768px){.works-container{grid-template-columns:1fr;gap:40px;width:90%}.work-item{height:300px;padding:25px 15px}.work-svg{width:70px;height:70px}.work-item:nth-child(1),.work-item:nth-child(2),.work-item:nth-child(3),.work-item:nth-child(4){transform:translateZ(10px);animation:none}.work-item:hover{transform:translateZ(30px)translateY(-10px)}}.section-contact{z-index:calc(var(--z-content) + 200);background:var(--primary);color:var(--text-white);position:relative;overflow:hidden}.section-contact::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,5%) 0%,transparent 50%);animation:contact-glow 10s linear infinite}@keyframes contact-glow{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.section-contact::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent)}.contact-title{font-size:10vw;font-weight:900;margin-bottom:50px;transform:translateZ(60px);position:relative;z-index:1;text-shadow:0 0 20px rgba(0,0,0,.3)}.contact-container{display:flex;gap:var(--spacing-xl);flex-wrap:wrap;justify-content:center;transform:translateZ(50px);position:relative;z-index:1}.contact-item{display:flex;flex-direction:column;align-items:center;gap:15px;color:var(--text-white);text-decoration:none;transition:var(--transition-strong);transform:translateZ(30px);position:relative}.contact-item::before{content:'';position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:0;height:2px;background:var(--text-white);transition:var(--transition-strong)}.contact-item:hover::before{width:100%}.contact-item:hover{transform:translateZ(60px)translateY(-15px);text-shadow:0 0 15px rgba(255,255,255,.5)}.contact-icon{width:80px;height:80px;border-radius:50%;background:var(--text-white);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:32px;box-shadow:0 0 30px rgba(255,255,255,.3);transition:var(--transition-strong);position:relative;overflow:hidden}.contact-icon::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--primary-dark),var(--primary));opacity:0;transition:var(--transition-strong)}.contact-icon i{position:relative;z-index:1;transition:var(--transition-smooth)}.contact-item:hover .contact-icon{box-shadow:0 0 50px rgba(255,255,255,.6);transform:rotate(360deg)scale(1.1)}.contact-item:hover .contact-icon::before{opacity:1}.contact-item:hover .contact-icon i{color:var(--text-white);transform:scale(1.2)}.contact-value{font-size:16px;font-weight:600;transition:var(--transition-smooth)}.contact-item:hover .contact-value{font-size:17px;letter-spacing:.5px}@media(max-width:768px){.contact-container{gap:var(--spacing-lg)}.contact-icon{width:65px;height:65px;font-size:28px}.contact-title{font-size:15vw;margin-bottom:30px}.contact-value{font-size:14px}}