.skill-item{flex-direction:column;flex-shrink:0;align-items:center;gap:12px;width:100px;display:flex}.skill-icon-wrapper{cursor:pointer;flex-shrink:0;justify-content:center;align-items:center;width:80px;height:80px;transition:transform .3s cubic-bezier(.175,.885,.32,1.275);display:flex;position:relative}.skill-icon-wrapper:hover{transform:translateY(-10px)scale(1.15)}.skill-icon-wrapper img{object-fit:contain;width:65px;height:65px;transition:all .3s}.white-icon-wrapper img{filter:invert()brightness(1.5)}.github-icon-wrapper img{filter:invert()}.skill-tooltip{-webkit-backdrop-filter:blur(12px);opacity:0;visibility:hidden;pointer-events:none;z-index:50;background:#0a0a0ad9;border:1px solid #ffffff1a;border-radius:12px;width:max-content;max-width:220px;padding:12px 16px;transition:all .35s cubic-bezier(.175,.885,.32,1.275);position:absolute;bottom:120%;left:50%;transform:translate(-50%)translateY(15px)scale(.9);box-shadow:0 10px 30px #0009}.skill-tooltip:after{content:"";border:7px solid #0000;border-top-color:#0a0a0ad9;position:absolute;top:100%;left:50%;transform:translate(-50%)}.skill-icon-wrapper:hover .skill-tooltip{opacity:1;visibility:visible;transform:translate(-50%)translateY(0)scale(1)}.tooltip-desc{color:#fff;text-align:center;white-space:normal;font-family:Poppins,sans-serif;font-size:13px;line-height:1.4}.skill-name{color:#a3a3a3;text-align:center;letter-spacing:.5px;font-family:Poppins,sans-serif;font-size:13px;font-weight:500}@media (max-width:640px){.skill-item{gap:6px;width:50px}.skill-icon-wrapper{width:45px;height:45px}.skill-icon-wrapper img{width:32px;height:32px}.skill-name{font-size:10px}.scroller-container{padding:20px 0}.scroller-track{gap:1.2rem;animation:12s linear infinite slide-right}}.scroller-container{border-top:1px solid #ffffff26;border-bottom:1px solid #ffffff26;width:100%;padding:40px 0;position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000,#000 10% 90%,#0000);mask-image:linear-gradient(90deg,#0000,#000 10% 90%,#0000)}.scroller-track{gap:2rem;width:max-content;animation:28s linear infinite slide-right;display:flex}.scroller-container:hover .scroller-track{animation-play-state:paused}@keyframes slide-right{0%{transform:translate(-50%)}to{transform:translate(0%)}}
.card{background:0 0;border:none;width:300px;height:300px;position:relative}.card:hover{width:300px}.card .container-image{-webkit-backdrop-filter:blur(12px);cursor:pointer;background:linear-gradient(145deg,#ffffff26 0%,#0009 100%);border:1px solid #ffffff1a;border-radius:50%;justify-content:center;align-items:center;width:210px;height:210px;transition:all .3s ease-in-out .6s,opacity .3s;animation:4s ease-in-out infinite pulse-ring;display:flex;position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%);box-shadow:inset 0 0 30px #000c,0 0 15px #00000080}@keyframes pulse-ring{0%,to{border-color:#ffffff1a;box-shadow:inset 0 0 30px #000c,0 0 20px #ffffff0d}50%{border-color:#fff6;box-shadow:inset 0 0 30px #000c,0 0 40px #ffffff26}}.card:hover .container-image{opacity:0;border-radius:8px;transition-delay:0s,.6s}.card .container-image .image-circle{justify-content:center;align-items:center;width:auto;height:auto;transition:all .3s ease-in-out .4s;display:flex}.card:hover .container-image .image-circle{opacity:0;transition-delay:0s}.card .content{-webkit-backdrop-filter:blur(16px);cursor:pointer;visibility:hidden;z-index:1;background:linear-gradient(145deg,#282828d9 0%,#050505f2 100%);border:1px solid #ffffff1a;border-radius:8px;justify-content:space-between;align-items:center;gap:1.5rem;width:210px;height:210px;padding:20px;transition:all .3s ease-in-out;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 15px #00000080}.card:hover .content{visibility:visible;width:420px;height:260px;transition-delay:.5s}.card .content .detail{opacity:0;flex-direction:column;width:50%;height:100%;transition:all .3s ease-in-out;display:flex}.card:hover .content .detail{color:#fff;opacity:1;transition:opacity .4s ease-in-out .8s}.card .content .detail span{margin-bottom:5px;font-size:18px;font-weight:800;line-height:1.2}.card .content .detail p{color:#aaa;flex-grow:1;margin-bottom:10px;font-size:12px;line-height:1.4}.card .content .detail button{color:#000;cursor:pointer;background:linear-gradient(90deg,#b0b0b0,#fff);border:none;border-radius:8px;width:85px;height:30px;margin-top:auto;font-size:13px;font-weight:700;transition:all .3s ease-in-out}.card .content .detail button:hover{background:#ccc}.card .content .product-image{align-items:center;width:50%;height:100%;display:flex;position:relative}.card .content .product-image .box-image{opacity:0;border-radius:8px;width:110%;height:120%;transition:all .5s ease-in-out;display:flex;position:absolute;top:0;left:0;overflow:hidden;transform:scale(.5)}.card:hover .content .product-image .box-image{opacity:1;transition:all .5s ease-out .8s;top:-10%;left:-5%;transform:scale(1)}.card .content .product-image .box-image .img-product{object-fit:contain;border:1px solid #ffffff1a;border-radius:8px;width:100%;height:100%;margin:auto}@media (max-width:640px){.card{width:180px;height:180px}.card .container-image{width:160px;height:160px}.image-circle svg{width:55px!important;height:55px!important}.card .content{flex-direction:column-reverse;justify-content:center;gap:.5rem;padding:12px}.card:hover .content{width:230px;height:330px}.card .content .detail{text-align:center;align-items:center;width:100%;height:48%}.card .content .product-image{width:100%;height:52%}.card .content .product-image .box-image{width:100%;height:100%;top:0;left:0}.card:hover .content .product-image .box-image{top:-5%;left:0}.card .content .detail span{font-size:1.15rem;line-height:1.1}.card .content .detail p{margin-bottom:5px;font-size:.7rem;overflow-y:auto}.card .content .detail button{width:80px;height:28px;margin-top:5px;font-size:11px}}