/* GOED WEBWERK Skills v3.2 — shared interaction language */
.skills-v32-progress{position:fixed;left:0;top:0;width:100%;height:3px;z-index:90;pointer-events:none;background:rgba(255,255,255,.04)}
.skills-v32-progress i{display:block;width:100%;height:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--s3-cyan),var(--s3-gold),var(--s3-orange),var(--s3-pink))}

.skills-v32-bridge{position:relative;height:70px;margin:-1px 0;overflow:hidden;z-index:5;pointer-events:none}
.skills-v32-bridge::before{content:"";position:absolute;width:72vw;height:24px;left:-8vw;top:20px;border-radius:999px;background:linear-gradient(90deg,var(--s3-cyan),var(--s3-blue));transform:rotate(-3deg)}
.skills-v32-bridge::after{content:"";position:absolute;width:48vw;height:11px;right:-4vw;bottom:13px;border-radius:999px;background:linear-gradient(90deg,var(--s3-gold),var(--s3-orange),var(--s3-pink));transform:rotate(2deg)}
.skills-v32-bridge.hero-library{background:linear-gradient(180deg,#061326,#f4efe4)}
.skills-v32-bridge.library-custom{background:linear-gradient(180deg,#efe7d8,#071426)}

body.skills-v3 .skill-card{
  --sv32-x:50%;--sv32-y:50%;
  position:relative;isolation:isolate;
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s cubic-bezier(.2,.8,.2,1),border-color .3s ease!important
}
body.skills-v3 .skill-card::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(300px circle at var(--sv32-x) var(--sv32-y),rgba(255,255,255,.8),transparent 42%);
  opacity:0;transition:opacity .28s ease
}
body.skills-v3 .skill-card:hover::after{opacity:.33}
body.skills-v3 .skill-card:hover{transform:translateY(-8px);box-shadow:0 30px 76px rgba(22,31,43,.15)}

body.skills-v3 .btn,
body.skills-v3 .open-skill,
body.skills-v3 .copy-btn{
  --sv32-mx:0px;--sv32-my:0px;
  transform:translate3d(var(--sv32-mx),var(--sv32-my),0);
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .28s ease,background .28s ease,border-color .28s ease!important
}
body.skills-v3 .btn:hover{transform:translate3d(var(--sv32-mx),calc(var(--sv32-my) - 4px),0) scale(1.015)}
body.skills-v3 .btn:active,body.skills-v3 .copy-btn:active{transform:scale(.97)!important;transition-duration:.08s!important}
body.skills-v3 .filter{transition:transform .28s cubic-bezier(.16,1,.3,1),background .28s ease,border-color .28s ease!important}
body.skills-v3 .filter:hover{transform:translateY(-3px)}
body.skills-v3 .filter:active{transform:translateY(0) scale(.96)}

.skills-v32-drift{--sv32-drift:0px;transform:translate3d(0,var(--sv32-drift),0);will-change:transform}

body.skills-v3 .open-skill{padding-bottom:4px}
body.skills-v3 .open-skill::before{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:linear-gradient(90deg,var(--s3-orange),var(--s3-pink));transform:scaleX(.18);transform-origin:left;transition:transform .3s cubic-bezier(.16,1,.3,1);opacity:.65}
body.skills-v3 .open-skill:hover::before{transform:scaleX(1)}

@media(max-width:640px){
  .skills-v32-bridge{height:42px}
  .skills-v32-bridge::before{height:17px;top:11px;width:82vw}
  .skills-v32-bridge::after{height:7px;bottom:8px;width:62vw}
  body.skills-v3 .skill-card::after{display:none}
  body.skills-v3 .btn,body.skills-v3 .open-skill,body.skills-v3 .copy-btn{transform:none!important}
}
@media(prefers-reduced-motion:reduce){
  .skills-v32-drift{transform:none!important}
  .skills-v32-bridge::before,.skills-v32-bridge::after{transform:none!important}
}