/* DAP STUDIO — Skill Rack / POWER SLIDE MOTION v1.0
 * Loaded after base + cinema styles so ON and OFF have one consistent motion.
 * No animated layout properties; transform-driven switch slide runs smoothly
 * during boot sequence and direct taps, even if clicked mid-transition.
 */
#skills .u-switch {
  --power-slide: 29px;
  isolation: isolate;
  flex: 0 0 auto;
  display: inline-block;
  width: 60px;
  min-width: 60px;
  height: 32px;
  border: 1px solid #344366;
  border-radius: 999px;
  position: relative;
  overflow: visible;
  padding: 0;
  background: linear-gradient(145deg,#101a30,#1c2943);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.38), 0 0 0 0 transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background .48s ease,border-color .45s ease,box-shadow .48s ease;
}
/* An illuminated track runs behind the thumb. Its opacity is independent
 * from the thumb's transform, so both can animate without repainting layout. */
#skills .u-switch::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 2px;
  border-radius: inherit;
  background: linear-gradient(95deg,color-mix(in srgb,var(--c) 48%,#071d25),color-mix(in srgb,var(--c) 22%,#14233c));
  box-shadow: inset 0 0 12px color-mix(in srgb,var(--c) 22%,transparent);
  opacity: 0;
  transition: opacity .48s ease;
  pointer-events: none;
}
/* Soft aura follows the physical knob as a separate layer. */
#skills .u-switch::after {
  content: "";
  z-index: 1;
  position: absolute;
  left: 4px;
  top: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c);
  opacity: 0;
  filter: blur(6px);
  transform: translate3d(0,0,0);
  transition: transform .53s cubic-bezier(.23,1.17,.31,1),opacity .37s ease;
  pointer-events: none;
}
#skills .u-switch i {
  position: absolute;
  z-index: 2;
  left: 4px;
  top: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #bac7dd;
  color: #31405f;
  font-size: 9px;
  box-shadow: 0 2px 7px rgba(0,0,0,.5),inset 0 1px 1px rgba(255,255,255,.8);
  transform: translate3d(0,0,0);
  will-change: transform;
  transition:
    transform .53s cubic-bezier(.23,1.17,.31,1),
    background-color .42s ease,
    color .42s ease,
    box-shadow .42s ease;
  pointer-events: none;
}
#skills .u-switch.is-on,
#skills .unit:not(.is-off) .u-switch.is-on {
  background: color-mix(in srgb,var(--c) 32%,#111d36);
  border-color: color-mix(in srgb,var(--c) 82%,white);
  box-shadow: inset 0 1px 6px rgba(0,0,0,.24),0 0 14px -5px var(--c);
}
#skills .u-switch.is-on::before {opacity: 1;}
#skills .u-switch.is-on::after {opacity: .45;transform:translate3d(var(--power-slide),0,0);}
#skills .u-switch.is-on i {
  transform: translate3d(var(--power-slide),0,0);
  color: var(--c);
  background: #fff;
  box-shadow: 0 2px 7px rgba(0,0,0,.38),0 0 9px color-mix(in srgb,var(--c) 42%,transparent),inset 0 1px 1px white;
}
/* Make sure cinema's off state does NOT suppress the sliding transition. */
#skills .unit.is-off .u-switch {
  background: linear-gradient(145deg,#101a30,#1c2943);
  border-color: #344366;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.38);
}
#skills .unit.is-off .u-switch i {
  transform: translate3d(0,0,0);
  color: #31405f;
  background: #bac7dd;
}
#skills .unit.is-off .u-switch::before {opacity:0;}
#skills .unit.is-off .u-switch::after {opacity:0;transform:translate3d(0,0,0);}
/* OFF still looks like a real switch instead of a disabled, gray control. */
#skills .unit.is-off {opacity:.78;filter:none;background:linear-gradient(90deg,#0a1021,#0b1020 48%);}
#skills .unit.is-off .u-ico {color:#68748e;filter:none;}
#skills .unit .u-led {transition: background-color .4s ease,box-shadow .4s ease,opacity .4s ease;}
#skills .unit.is-off .u-led {background:#354260;box-shadow:none;opacity:.75;}
#skills .unit .u-load i::after {transition:width .9s cubic-bezier(.18,.7,.23,1) !important;}
#skills .unit.is-off .u-load i::after {width:0!important;transition:width .72s cubic-bezier(.18,.7,.23,1) !important;}
#skills .unit:not(.is-off) .u-load i::after {width:var(--w);}
#skills .u-switch:hover {box-shadow: inset 0 2px 5px rgba(0,0,0,.25),0 0 13px -3px var(--c);}
#skills .u-switch:focus-visible {outline:2px solid #fff;outline-offset:4px;}
#skills .u-switch:active i {scale:.94;}
#skills .unit {transition: transform .3s var(--ease),box-shadow .35s ease,opacity .42s ease,filter .38s ease,background .5s ease;}
/* All visual feedback disabled when user requests reduced motion. */
@media (prefers-reduced-motion:reduce) {
  #skills .u-switch,#skills .u-switch::before,#skills .u-switch::after,
  #skills .u-switch i,#skills .unit,#skills .unit .u-load i::after,
  #skills .unit .u-led {transition-duration:.01ms!important;animation:none!important;}
}
@media (max-width:640px){
  #skills .u-switch{width:54px;min-width:54px;height:30px;--power-slide:24px;}
  #skills .u-switch i,#skills .u-switch::after{left:4px;top:4px;width:20px;height:20px;}
}