@keyframes inkRipple{0%{transform:translateX(-50%) scale(.15);opacity:.55;}70%{opacity:.18;}100%{transform:translateX(-50%) scale(2.4);opacity:0;}}
@keyframes labIn{0%{opacity:0;transform:translateX(-50%) translateY(4px);}100%{opacity:1;transform:translateX(-50%) translateY(0);}}
@keyframes latFlicker{0%,100%{opacity:.5;}50%{opacity:1;}}

.dockNav{
  position:fixed;left:50%;bottom:28px;top:auto;transform:translateX(-50%);
  z-index:2147483000;display:flex;gap:6px;padding:9px 11px;
  max-width:calc(100vw - 20px);box-sizing:border-box;border-radius:22px;
  background:rgba(17,27,61,.42);
  -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 18px 50px rgba(6,12,32,.4), inset 0 1px 0 rgba(255,255,255,.12);
}
#slcDockFx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;border-radius:22px;}

.dockBtn{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border:none;cursor:pointer;border-radius:15px;
  background:transparent;color:rgba(245,243,238,.72);
  transition:background .3s ease, color .3s ease;
  text-decoration:none;
}
.dockBtn[aria-current="page"]{ color:#FF7A54; }
.dockBtn:hover{ color:#F5F3EE; }

.dockLabel{
  position:absolute;bottom:100%;left:50%;margin-bottom:12px;
  display:flex;justify-content:center;pointer-events:none;
  opacity:0;transition:opacity .25s ease;
}
.dockBtn:hover .dockLabel{ opacity:1; }
.dockRipple{
  position:absolute;top:50%;left:50%;width:34px;height:34px;margin-top:-17px;
  border-radius:50%;background:radial-gradient(circle,rgba(255,122,84,.6),transparent 70%);
}
.dockBtn:hover .dockRipple{ animation:inkRipple .6s ease-out both; }
.dockLabelText{
  position:relative;font-family:'Inter',sans-serif;font-size:11px;font-weight:500;letter-spacing:.02em;
  color:#F5F3EE;background:rgba(15,23,48,.7);padding:4px 9px;border-radius:8px;white-space:nowrap;
}
.dockBtn:hover .dockLabelText{ animation:labIn .3s ease .05s both; }

.svcLattice{transition:filter .3s ease;}
.dockBtn:hover .svcLattice{filter:drop-shadow(0 0 5px rgba(255,138,84,.55));}
.dockBtn:hover .svcLattice .latNode{animation:latFlicker 1.1s ease-in-out infinite;}

.aboutMark{transition:filter .3s ease, transform .3s ease;filter:drop-shadow(0 0 0 rgba(255,138,84,0));}
.dockBtn:hover .aboutMark{filter:drop-shadow(0 0 7px rgba(255,138,84,.7));transform:scale(1.04);}

@media(max-width:400px){
  .dockNav{gap:3px;padding:7px 8px;}
  .dockBtn{width:46px;height:46px;}
}

@media (prefers-reduced-motion: reduce){
  .dockBtn:hover .dockRipple,
  .dockBtn:hover .dockLabelText,
  .dockBtn:hover .svcLattice .latNode{ animation: none !important; }
}