/*
 * Labbie — Global logo hover microinteraction (reusable system).
 *
 * Any element that carries the official brand-mark attribute
 *   role="img" aria-label="Labbie"
 * — every Labbie logo across the platform already uses this — OR the
 * optional .labbie-logo class inherits a subtle, organic squash-and-stretch
 * on hover. No per-page markup, color, size or placement changes required:
 * link this stylesheet and the behaviour is inherited automatically.
 *
 * Reinforces the soft / inflated logo personality. Transform-only, so it is
 * GPU-accelerated, runs at 60fps and causes no layout shift or reflow.
 */

/*
 * Official brand-mark image (gradient bloom). Renders the Labbie logo on every
 * brand element that carries role="img" aria-label="Labbie" — the topbar /
 * sidebar marks on landing, dashboard, workspace, auth and templates. Replaces
 * the legacy solid-dot CSS. Transparent PNG: no background plate, square slot
 * (border-radius:0) so the organic lobes are never clipped into a circle.
 */
[aria-label="Labbie"],
.labbie-logo {
  background: url("/assets/brand/labbie-logo.png") center / contain no-repeat !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

[aria-label="Labbie"],
.labbie-logo {
  transform: translateZ(0);
  transform-origin: center;
  will-change: transform;
  backface-visibility: hidden;
  /* Gentle, slightly elastic settle when the cursor leaves — never snaps. */
  transition: transform 0.55s cubic-bezier(0.34, 1.32, 0.5, 1);
}

/* Pointer devices only, and respect reduced-motion preferences. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  [aria-label="Labbie"]:hover,
  .labbie-logo:hover,
  /* Also fire when hovering the surrounding brand link for a larger,
     more responsive hit area (covers every known brand wrapper). */
  .brand:hover [aria-label="Labbie"],
  .tb-brand:hover [aria-label="Labbie"],
  .brand:hover .labbie-logo,
  .tb-brand:hover .labbie-logo {
    animation: labbieSquish 1.7s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  }
}

/*
 * Soft, organic squash & stretch — like gently pressing inflated foam.
 * Peaks at ~5% deformation (within the 3–8% target) and begins/ends at
 * scale(1,1) so the loop is seamless and an interrupted hover settles back
 * cleanly via the transition above.
 */
@keyframes labbieSquish {
  0%   { transform: scale(1,     1);     }
  20%  { transform: scale(1.05,  0.95);  }
  42%  { transform: scale(0.965, 1.045); }
  62%  { transform: scale(1.028, 0.985); }
  80%  { transform: scale(0.992, 1.011); }
  100% { transform: scale(1,     1);     }
}