/* Glass surfaces settle into depth; light stays on their edges. */
.app-shell #workspace{position:relative;isolation:isolate}
.app-shell #workspace>*{animation:none}
.app-shell #workspace.legion-navigation-enter>.legion-panel-enter{transform-origin:50% 15%;will-change:transform,opacity;backface-visibility:hidden}
.app-shell #workspace.legion-navigation-enter>.legion-panel-enter:is(.panel,.welcome-card,.catalog-manufacturer-menu,.catalog-selection-bar,.team-summary,.team-directory),.app-shell #workspace.legion-navigation-enter>.legion-panel-enter :is(.stat-card,.quick-card,.catalog-manufacturer-card,.contact-card,.employee-card,.client-card){animation:legion-glass-edge .64s cubic-bezier(.18,.78,.24,1) both}
@keyframes legion-glass-edge{
  0%{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--glass-gold,#8dbbe9) 10%,transparent),inset 1px 0 0 #ffffff04,0 12px 25px #00000005}
  34%{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--glass-gold,#8dbbe9) 26%,transparent),inset 1px 0 0 #ffffff0a,0 16px 28px #0000000a}
  100%{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--glass-gold,#8dbbe9) 8%,transparent),inset 1px 0 0 #ffffff02,0 7px 20px #00000004}
}

/* Only pointer-owned properties affect these two interactive surface types. */
:root .app-shell #workspace :is(.catalog-manufacturer-card,.quick-card){transform:none;transform-style:preserve-3d;backface-visibility:hidden;transition:transform .32s cubic-bezier(.2,.75,.25,1),border-color .24s ease,box-shadow .3s ease}
:root .app-shell #workspace :is(.catalog-manufacturer-card,.quick-card):hover{transform:none}
:root .app-shell #workspace :is(.catalog-manufacturer-card,.quick-card)::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(ellipse 65% 75% at var(--glass-x,50%) var(--glass-y,50%),color-mix(in srgb,var(--glass-gold,#8dbbe9) 11%,transparent),#ffffff03 38%,transparent 75%);transition:opacity .3s ease}
@media(hover:hover) and (pointer:fine) and (min-width:761px){
  :root .app-shell #workspace :is(.catalog-manufacturer-card,.quick-card).glass-pointer-active{transform:perspective(1100px) translate3d(0,-2px,0) rotateX(var(--glass-rx,0deg)) rotateY(var(--glass-ry,0deg));transition:transform .12s ease-out,border-color .24s ease,box-shadow .3s ease;will-change:transform;box-shadow:inset 0 1px 0 color-mix(in srgb,var(--glass-gold,#8dbbe9) 24%,transparent),0 18px 35px #00000013}
  :root .app-shell #workspace :is(.catalog-manufacturer-card,.quick-card).glass-pointer-active::before{opacity:1}
}
:root .app-shell #workspace :is(.catalog-manufacturer-card,.quick-card):focus-visible{transform:none!important;will-change:auto}
:root .app-shell #workspace :is(.catalog-manufacturer-card,.quick-card):focus-visible::before{opacity:0}
@media(max-width:760px),(hover:none),(pointer:coarse){
  :root .app-shell #workspace :is(.catalog-manufacturer-card,.quick-card){transform:none!important;will-change:auto}
  :root .app-shell #workspace :is(.catalog-manufacturer-card,.quick-card)::before{display:none}
}
@media(prefers-reduced-motion:reduce){
  .app-shell #workspace>*{animation:none!important;transition:none!important}
  .app-shell #workspace.legion-navigation-enter>.legion-panel-enter{will-change:auto;transform:none!important;opacity:1!important;filter:none!important}
  .app-shell #workspace.legion-navigation-enter :is(.panel,.welcome-card,.catalog-manufacturer-menu,.catalog-selection-bar,.team-summary,.team-directory,.stat-card,.quick-card,.catalog-manufacturer-card,.contact-card,.employee-card,.client-card){animation:none!important}
  :root .app-shell #workspace :is(.catalog-manufacturer-card,.quick-card){transform:none!important;transition:none!important;will-change:auto}
  :root .app-shell #workspace :is(.catalog-manufacturer-card,.quick-card)::before{display:none;transition:none}
}
