.skill-anim,.m-skill-anim{--delay: 0;--delayed-progress: calc( var(--progress) * (1 + var(--delay) / var(--delay-factor)) );--progress-in-out: clamp(-1, pow(var(--delayed-progress), var(--pow)), 1);--progress-in-out-cos: calc(pow(var(--delayed-progress), calc(var(--pow) - 1))*-1 + 1) ;opacity:var(--progress-in-out-cos);transform:translate3d(calc(var(--progress-in-out) * -100% + var(--progress) * -20%),0,0) rotateY(calc(var(--progress-in-out) * -90deg));transform-origin:50% 50% 10px;backface-visibility:hidden;will-change:transform,opacity}@media (prefers-reduced-motion: reduce){.skill-anim,.m-skill-anim{transform:none}}.skill-wrapper{--stage-scale: 1;position:relative;width:100%;height:calc(100svh - 16px);overflow:hidden;touch-action:pan-y pinch-zoom}.skill-stage{--pow: 23;--delay-factor: 25;--progress: 0;--mouse-x: 0;--mouse-y: 0;position:absolute;top:50%;left:50%;width:1916px;height:1220px;transform:translate(-50%,-50%) scale(var(--stage-scale));transform-origin:center center;perspective:1500px}@media (prefers-reduced-motion: reduce){.skill-stage{--pow: 3;--delay-factor: 100 }}.skill-controls{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:24px;z-index:20}.skill-idle{width:100%;height:100%;animation:skill-idle 4s ease-in-out alternate infinite}.skill-idle[data-idle-delay="1"]{animation-delay:-1.4s}.skill-idle[data-idle-delay="2"]{animation-delay:-2.8s}@keyframes skill-idle{to{translate:0 6px}}@media (prefers-reduced-motion: reduce){.skill-idle{animation:none}}.skill-phone{position:absolute;left:1170px;top:198px;width:847.092px;height:1025.015px;pointer-events:none;z-index:5;display:flex;align-items:center;justify-content:center}.skill-phone-rotate{position:relative;width:766.306px;height:961.996px;transform:rotate(4.99deg) scale(.9);transform-origin:center center}.skill-phone-tilt{width:100%;height:100%;transform:rotateX(calc(var(--mouse-y) * -6deg)) rotateY(calc(var(--mouse-x) * 6deg)) translate3d(calc(var(--mouse-x) * -28px),calc(var(--mouse-y) * -28px),0);transform-style:preserve-3d;transition:transform 60ms linear;will-change:transform}.skill-phone-idle{width:100%;height:100%;animation:skill-phone-bob 4.6s ease-in-out alternate infinite}@keyframes skill-phone-bob{to{translate:0 14px}}.skill-phone-img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;-o-object-fit:contain;object-fit:contain;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}@media (prefers-reduced-motion: reduce){.skill-phone-tilt{transform:none}.skill-phone-idle{animation:none}}.skill-text-swap{opacity:0;transition:opacity .5s cubic-bezier(.22,1,.36,1)}.skill-text-swap[data-active=true]{opacity:1}html[data-skill-debug="1"] .skill-anim{opacity:1!important;transform:none!important}html[data-skill-debug="1"] .skill-idle,html[data-skill-debug="1"] .skill-phone-idle{animation:none!important}html[data-skill-debug="1"] .skill-phone-tilt{transform:none!important}html[data-skill-debug="1"] .skill-text-swap[data-active=true]{opacity:1!important}.m-skill-wrapper{position:relative;width:100%;display:grid;grid-template-rows:minmax(200px,1fr) auto auto;justify-items:center;height:100vh;height:100dvh;overflow-x:clip;overflow-y:auto;overscroll-behavior-x:contain;padding:16px 16px max(96px,env(safe-area-inset-bottom));background:#fff;touch-action:pan-y pinch-zoom}.m-skill-hero{position:relative;width:calc(100% + 32px);margin-left:-16px;margin-right:-16px;container-type:size;overflow:clip;overflow-clip-margin:80px}.m-skill-hero-stage{--pow: 23;--delay-factor: 25;--progress: 0;--hero-scale: calc(100cqh/310px) ;position:absolute;top:calc((100cqh - 310px * var(--hero-scale)) / 2);left:calc(50% - 196.5px * var(--hero-scale));width:393px;height:310px;transform:scale(var(--hero-scale));transform-origin:top left;perspective:1500px;overflow:visible}@media (prefers-reduced-motion: reduce){.m-skill-hero-stage{--pow: 3;--delay-factor: 100 }}.m-skill-hero-layer{position:absolute;top:0;right:0;bottom:0;left:0}.m-skill-idle{width:100%;height:100%;animation:m-skill-idle 4s ease-in-out alternate infinite}.m-skill-idle[data-idle-delay="1"]{animation-delay:-1.4s}.m-skill-idle[data-idle-delay="2"]{animation-delay:-2.8s}@keyframes m-skill-idle{to{translate:0 4px}}@media (prefers-reduced-motion: reduce){.m-skill-idle{animation:none}}.m-skill-phone{--phone-zoom: 1.05;position:absolute;left:70px;top:15px;width:273.74px;height:309.75px;pointer-events:none;z-index:5}.m-skill-phone-rotate{position:relative;width:100%;height:100%;transform:rotate(-1.5deg) scale(var(--phone-zoom));transform-origin:62% 95%}.m-skill-phone-idle{width:100%;height:100%;animation:m-skill-phone-bob 4.6s ease-in-out alternate infinite}@keyframes m-skill-phone-bob{to{translate:0 5px}}.m-skill-phone-img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;-o-object-fit:contain;object-fit:contain;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}@media (prefers-reduced-motion: reduce){.m-skill-phone-idle{animation:none}}.m-skill-stepper{position:relative;margin-top:8px;display:flex;align-items:center;gap:6px;height:28px}.m-skill-stepper-dot{position:relative;width:8px;height:28px;border-radius:999px;border:none;padding:0;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:width .6s cubic-bezier(.22,1,.36,1)}.m-skill-stepper-dot[data-active=true]{width:28px}.m-skill-stepper-dot:before{content:"";position:absolute;top:50%;left:0;right:0;height:8px;margin-top:-4px;background:#0000002e;border-radius:999px}.m-skill-stepper-dot>progress{position:absolute;top:50%;left:0;width:100%;height:8px;margin-top:-4px;border:none;background:transparent;-moz-appearance:none;appearance:none;-webkit-appearance:none;border-radius:999px;overflow:hidden}.m-skill-stepper-dot>progress::-webkit-progress-bar{background:transparent;border-radius:999px}.m-skill-stepper-dot>progress::-webkit-progress-value{background:#00000080;border-radius:999px;-webkit-transition:width 80ms linear;transition:width 80ms linear}.m-skill-stepper-dot>progress::-moz-progress-bar{background:#00000080;border-radius:999px}.m-skill-content{width:100%;max-width:361px;margin-top:24px;display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center;container-type:inline-size}.m-skill-heading-wrap{position:relative;width:100%;height:76px}.m-skill-subtext-wrap{position:relative;width:100%;height:22px}.m-skill-subtext-wrap>p{white-space:nowrap;font-size:clamp(12px,calc(16px*100cqi/361px),16px)}.m-skill-text-swap{opacity:0;transition:opacity .5s cubic-bezier(.22,1,.36,1)}.m-skill-text-swap[data-active=true]{opacity:1}html[data-skill-debug="1"] .m-skill-anim{opacity:1!important;transform:none!important}html[data-skill-debug="1"] .m-skill-idle,html[data-skill-debug="1"] .m-skill-phone-idle{animation:none!important}html[data-skill-debug="1"] .m-skill-text-swap[data-active=true]{opacity:1!important}