/* =====================================================================
   The jobees.ai | Workspace button, shared by every app header.
   At rest: the jb mark and "Workspace". On hover or keyboard focus it opens
   to the full jobees.ai wordmark, with one soft pass of light.
   Markup:
   <a class="home-chip" href="…/workspace.html">
     <span class="hc-logo"><img class="hc-mark" src="…/assets/jobees-mark.png" alt="" width="18" height="22">
       <img class="hc-word" src="…/assets/jobees-wordmark.svg" alt="jobees.ai" width="80" height="18"></span>
     <i class="hc-sep"></i><svg>grid</svg><span>Workspace</span></a>
   ===================================================================== */
.home-chip { position: relative; overflow: hidden; isolation: isolate; transition: border-color .3s, box-shadow .3s, padding .45s cubic-bezier(.2, .8, .2, 1); }
.home-chip span.hc-logo { position: relative; display: block; flex: none; width: 18px; height: 22px; transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.home-chip .hc-logo img { position: absolute; left: 0; top: 50%; display: block; max-width: none; }
.home-chip .hc-logo .hc-mark { width: 18px; height: 22px; transform: translateY(-50%); transform-origin: 50% 60%; transition: opacity .3s ease, transform .45s cubic-bezier(.2, .8, .2, 1), filter .3s ease; }
.home-chip .hc-logo .hc-word { width: 80px; height: 18px; transform: translate(-4px, -50%); opacity: 0; clip-path: inset(0 100% 0 0); transition: opacity .35s ease .08s, transform .5s cubic-bezier(.2, .8, .2, 1) .04s, clip-path .55s cubic-bezier(.2, .8, .2, 1) .06s; }
/* the pass of light */
.home-chip::after { content: ""; position: absolute; z-index: 2; top: -20%; bottom: -20%; left: 0; width: 46%; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, .85) 50%, rgba(255, 255, 255, 0) 80%, transparent 100%);
  transform: translateX(-130%) skewX(-18deg); mix-blend-mode: soft-light; }
.home-chip::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(120% 140% at 0% 50%, rgba(4, 120, 252, .09), transparent 60%); }
@media (hover: hover) {
  .home-chip:hover .hc-logo, .home-chip:focus-visible .hc-logo { width: 80px; }
  .home-chip:hover .hc-mark, .home-chip:focus-visible .hc-mark { opacity: 0; transform: translateY(-50%) scale(.6) rotate(-8deg); filter: blur(1px); }
  .home-chip:hover .hc-word, .home-chip:focus-visible .hc-word { opacity: 1; transform: translate(0, -50%); clip-path: inset(0 0 0 0); }
  .home-chip:hover::before, .home-chip:focus-visible::before { opacity: 1; }
  .home-chip:hover::after, .home-chip:focus-visible::after { animation: hc-sheen .9s cubic-bezier(.3, .7, .3, 1) .12s 1 both; }
}
@keyframes hc-sheen { 0% { opacity: 0; transform: translateX(-130%) skewX(-18deg); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateX(260%) skewX(-18deg); } }
@media (prefers-reduced-motion: reduce) {
  .home-chip, .home-chip .hc-logo, .home-chip .hc-logo img { transition: none; }
  .home-chip::after { display: none; }
}