/* One brass highlight follows the selected tab with a soft transition. */
@media(min-width:651px) and (hover:hover) and (pointer:fine){
  :is(.sh-tabs,.sh-subtabs){
    position:relative;isolation:isolate;--sh-target:0;
    --sh-highlight:linear-gradient(180deg,#343822,#23291b);
    --sh-highlight-border:var(--amber4);--sh-highlight-text:var(--amber2);
  }
  .sh-subtabs{--sh-highlight:linear-gradient(180deg,#ffe1a0,var(--amber) 46%,#c98d1b);--sh-highlight-border:#b98418;--sh-highlight-text:#241703}
  :where(body[data-background="gold"]) .sh-tabs{--sh-highlight:linear-gradient(180deg,#5a4520,#38290f);--sh-highlight-border:#b18a3e}
  :is(.sh-tabs,.sh-subtabs)::before{
    content:'';position:absolute;top:4px;bottom:4px;left:4px;z-index:0;pointer-events:none;box-sizing:border-box;
    width:calc((100% - 16px)/3);border:1px solid var(--sh-highlight-border);border-radius:8px;
    background:var(--sh-highlight);box-shadow:inset 0 1px 0 #ffe1a015,0 2px 4px #0005;
    transform:translateX(calc(var(--sh-target) * (100% + 4px)));
    transition:transform .48s cubic-bezier(.25,.75,.25,1);will-change:transform;
  }
  .sh-subtabs::before{width:calc((100% - 12px)/2)}
  :is(.sh-tabs,.sh-subtabs)>[role="tab"]{position:relative;z-index:1;transition:color .24s ease}
  :is(.sh-tabs,.sh-subtabs)>[role="tab"][aria-selected="true"]{background:transparent;border-color:transparent;box-shadow:none;color:var(--sh-highlight-text)}
  :is(.sh-tabs,.sh-subtabs)>[role="tab"]:not([aria-selected="true"]):hover{color:var(--amber2)}
  :is(.sh-tabs,.sh-subtabs):has(>[role="tab"]:nth-child(2)[aria-selected="true"]){--sh-target:1}
  .sh-tabs:has(>[role="tab"]:nth-child(3)[aria-selected="true"]){--sh-target:2}
}
@media(prefers-reduced-motion:reduce){
  :is(.sh-tabs,.sh-subtabs)::before,:is(.sh-tabs,.sh-subtabs)>[role="tab"]{transition:none!important}
  :is(.sh-tabs,.sh-subtabs)::before{will-change:auto}
}

/* Play entrance motion only after opening the Safehouse or changing a tab.
   A data refresh or cosmetic selection must not replay it. */
#sh-panel-atmosphere > .sh-enter{
  animation:secin .45s cubic-bezier(.2,.8,.3,1) both;
}
#sh-panel-atmosphere > .sh-shelf.sh-enter{animation-delay:50ms}
@media(prefers-reduced-motion:reduce){
  #sh-panel-atmosphere > .sh-enter{animation:none!important}
}