.scroll{width:100%;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:sticky;top:0;z-index:5;font-family:Roboto,sans-serif;letter-spacing:.2em;font-size:11px}.scroll span{display:block}.scroll svg{margin-top:10px;width:18px;height:18px;animation:scroll .95s ease-in-out infinite alternate;fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:1}.port-page{min-height:100vh;background-color:#000;transition:background-color .4s ease;scroll-snap-type:y mandatory;overflow-y:scroll;height:100vh;scroll-behavior:smooth;scroll-padding:0;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.port-page::-webkit-scrollbar{display:none}.port-page .port-section{color:#fff;height:100vh;display:flex;padding:0 40px;scroll-snap-align:start;scroll-snap-stop:normal;will-change:transform;transform:translateZ(0)}.port-page .port-section.skill-section{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;overflow:hidden}.port-page .port-section.skill-section .skills-battlefield{position:relative;width:100%;max-width:1200px;height:100vh;display:flex;flex-direction:column;align-items:center}.port-page .port-section.skill-section .skills-battlefield .battlefield-title{text-align:center;margin-bottom:60px;z-index:10}.port-page .port-section.skill-section .skills-battlefield .battlefield-title h2{font-size:48px;font-weight:700;color:#fff;margin:0 0 12px;letter-spacing:.02em;text-shadow:0 2px 10px rgba(0,0,0,.3);background:linear-gradient(135deg,#fff,#a0a0a0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.port-page .port-section.skill-section .skills-battlefield .battlefield-title p{font-size:18px;color:hsla(0,0%,100%,.8);margin:0;font-weight:500}.port-page .port-section.skill-section .skills-battlefield .skills-dual-columns{display:flex;width:100vw;height:500px;position:absolute;left:0;right:0;align-items:stretch;padding:0}@media(max-width:768px){.port-page .port-section.skill-section .skills-battlefield .skills-dual-columns{flex-direction:column;height:auto;position:relative;width:100%}}.port-page .port-section.skill-section .skills-battlefield .skills-column{width:400px;display:flex;flex-direction:column;gap:20px;justify-content:space-between;padding:40px}.port-page .port-section.skill-section .skills-battlefield .skills-column.left-column{position:fixed;left:0;top:50%;transform:translateY(-50%);align-items:flex-start}.port-page .port-section.skill-section .skills-battlefield .skills-column.left-column .skill-item{animation:slideInLeft .8s ease-out var(--delay) both}.port-page .port-section.skill-section .skills-battlefield .skills-column.right-column{position:fixed;right:0;top:50%;transform:translateY(-50%);align-items:flex-end}.port-page .port-section.skill-section .skills-battlefield .skills-column.right-column .skill-name{text-align:right}.port-page .port-section.skill-section .skills-battlefield .skills-column.right-column .skill-item{animation:slideInRight .8s ease-out var(--delay) both}@media(max-width:768px){.port-page .port-section.skill-section .skills-battlefield .skills-column{position:relative;width:100%;transform:none;top:auto;left:auto;right:auto}}.port-page .port-section.skill-section .skill-item{position:relative;width:auto;min-width:200px;max-width:280px;pointer-events:auto;cursor:pointer;z-index:5}.port-page .port-section.skill-section .skill-item.left-side .launch-trail.left-trail{position:absolute;left:100%;top:50%;width:60px;height:3px;background:linear-gradient(90deg,hsla(0,0%,100%,.9),hsla(0,0%,100%,.4),transparent);transform:translateY(-50%);opacity:0;transition:all .4s ease;box-shadow:0 0 8px hsla(0,0%,100%,.5)}.port-page .port-section.skill-section .skill-item.right-side .launch-trail.right-trail{position:absolute;right:100%;top:50%;width:60px;height:3px;background:linear-gradient(270deg,hsla(0,0%,100%,.9),hsla(0,0%,100%,.4),transparent);transform:translateY(-50%);opacity:0;transition:all .4s ease;box-shadow:0 0 8px hsla(0,0%,100%,.5)}.port-page .port-section.skill-section .skill-item .skill-content{display:flex;align-items:center;gap:12px;padding:16px 20px;background:hsla(0,0%,100%,.1);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:20px;border:1px solid hsla(0,0%,100%,.2);transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 6px 25px rgba(0,0,0,.15),inset 0 1px 0 hsla(0,0%,100%,.25);min-height:70px}.port-page .port-section.skill-section .skill-item .skill-content:hover{background:hsla(0,0%,100%,.18);transform:scale(1.02);box-shadow:0 15px 40px rgba(0,0,0,.3),0 0 25px hsla(0,0%,100%,.15),inset 0 1px 0 hsla(0,0%,100%,.4);border-color:hsla(0,0%,100%,.4)}.port-page .port-section.skill-section .skill-item .skill-name{font-size:15px;font-weight:600;color:#fff;margin:0;white-space:normal;word-break:break-word;line-height:1.3;text-shadow:0 1px 3px rgba(0,0,0,.6);letter-spacing:.02em;flex:1}.port-page .port-section.skill-section .skill-item:hover .launch-trail{opacity:1;animation:trail-extend .6s ease-out}.port-page .port-section.skill-section .skill-item .skill-icon{position:relative;width:40px;height:40px;border-radius:50%;background-size:70% 70%;background-position:50%;background-repeat:no-repeat;box-shadow:0 4px 15px rgba(0,0,0,.2),inset 0 0 0 1px hsla(0,0%,100%,.2);filter:saturate(1.2) contrast(1.1);transition:all .3s ease;flex-shrink:0}@keyframes slideInLeft{0%{opacity:0;transform:translateX(-100px)}to{opacity:1;transform:translateX(0)}}@keyframes slideInRight{0%{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}@keyframes trail-extend{0%{width:10px;opacity:.5}50%{width:60px;opacity:1}to{width:40px;opacity:.8}}@keyframes pulse{0%,to{transform:scale(1);opacity:.3}50%{transform:scale(1.1);opacity:.6}}@keyframes rotate{0%{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(1turn)}}@keyframes float{0%,to{transform:translate(-50%,-50%) rotate(var(--orbit-angle)) translateX(var(--orbit-radius)) rotate(calc(-1 * var(--orbit-angle))) translateY(0)}50%{transform:translate(-50%,-50%) rotate(var(--orbit-angle)) translateX(var(--orbit-radius)) rotate(calc(-1 * var(--orbit-angle))) translateY(-8px)}}@keyframes trail-glow{0%{opacity:0;height:10px;background:linear-gradient(180deg,hsla(0,0%,100%,.8),transparent)}50%{opacity:1;height:40px;background:linear-gradient(180deg,#fff,hsla(0,0%,100%,.3))}to{opacity:0;height:60px;background:linear-gradient(180deg,transparent,transparent)}}@keyframes parabolaShoot{0%{opacity:0;transform:translate(-40px,-50%) scale(.6)}10%{opacity:1}45%{transform:translate(40px,-120%) scale(1)}70%{transform:translate(120px,-30%) scale(.95)}85%{transform:translate(160px,10%) scale(.92)}to{transform:translate(200px,60%) scale(.9);opacity:.9}}.introduction-section{color:#fff;height:100vh;display:flex;align-items:center;margin-left:100px;scroll-snap-align:start;scroll-snap-stop:normal;will-change:transform;transform:translateZ(0)}.introduction-section .introduce-wrap>.text-element{display:inline-block;width:100%}.introduction-section .introduce-wrap>.text-element .char,.introduction-section .introduce-wrap>.text-element .char-space{display:inline-block;position:relative;transition:all .2s ease}.introduction-section .introduce-wrap>.text-element .char:hover{transform:scale(1.1) translateY(-2px);text-shadow:0 0 15px hsla(0,0%,100%,.5)}.introduction-section .introduce-wrap>.text-element:nth-of-type(2){font-size:80px;font-weight:700;margin-bottom:20px}.introduction-section .introduce-wrap>.text-element:nth-of-type(2) .char{background:linear-gradient(45deg,#fff,#e0e0e0);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 4px 8px rgba(0,0,0,.3);filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.introduction-section .introduce-wrap>.text-element:nth-of-type(3){font-size:30px;font-weight:300;letter-spacing:1px;margin-bottom:10px}.introduction-section .introduce-wrap>.text-element:nth-of-type(3) .char{color:hsla(0,0%,100%,.9)}.introduction-section .introduce-wrap>.text-element:nth-of-type(4){font-size:40px;font-weight:400;letter-spacing:2px}.introduction-section .introduce-wrap>.text-element:nth-of-type(4) .char{color:hsla(0,0%,100%,.9)}.introduction-section .introduce-wrap>.text-element.japanese{font-family:Hiragino Sans,Yu Gothic,Noto Sans JP,sans-serif;letter-spacing:.5px}.introduction-section .introduce-wrap>.text-element.japanese .char,.introduction-section .introduce-wrap>.text-element.japanese .char-space{letter-spacing:.5px}.introduction-section .introduce-wrap>.text-element.korean{font-family:Noto Sans KR,Malgun Gothic,Apple SD Gothic Neo,sans-serif;letter-spacing:1px}.introduction-section .introduce-wrap>.text-element.korean .char,.introduction-section .introduce-wrap>.text-element.korean .char-space{letter-spacing:1px}.introduction-section .introduce-wrap>.text-element.european{font-family:Inter,Roboto,Helvetica Neue,sans-serif}.introduction-section .introduce-wrap>.text-element.european .char,.introduction-section .introduce-wrap>.text-element.european .char-space{letter-spacing:inherit}.introduction-section .introduce-wrap>.text-element .char,.introduction-section .introduce-wrap>.text-element .char-space{min-width:.5em;text-align:center;transition:all .1s ease;margin-right:.05em;font-variant-numeric:tabular-nums}.introduction-section .introduce-wrap .language-indicator{position:absolute;top:20px;right:20px;font-size:14px;color:hsla(0,0%,100%,.6);font-weight:300;letter-spacing:1px;transition:opacity .3s ease}@keyframes charAppear{0%{opacity:0;transform:translateY(30px) scale(.5) rotate(15deg)}50%{opacity:.7;transform:translateY(-5px) scale(1.1) rotate(-5deg)}to{opacity:1;transform:translateY(0) scale(1) rotate(0deg)}}@keyframes charDisappear{0%{opacity:1;transform:translateY(0) scale(1) rotate(0deg)}50%{opacity:.5;transform:translateY(-10px) scale(.8) rotate(10deg)}to{opacity:0;transform:translateY(-20px) scale(.3) rotate(-15deg)}}