/* Reusable cursor-tracked streaks.
   JS updates --streak-x so the brightest point follows the pointer. */

:where(
  .footer-contact,
  .navbar-telamorph,
  .showcase-band,
  .value-card,
  .service-step,
  .service-card,
  .quote-list,
  .sphere-card,
  .sphere-panel,
  .workflow-step,
  .quote-panel,
  .product-card,
  .btn-accent,
  .btn-outline-accent,
  .svc-chip,
  .svc-catch,
  .cd-catch,
  .footer-links a,
  .footer-contact-value,
  .pd-tab-nav
)::before,
.menu-list li a::after,
.product-tab::after,
.pd-tab-btn::after {
  content: "";
  position: absolute;
  left: var(--streak-left, 0);
  right: var(--streak-right, 0);
  height: var(--streak-height, 1px);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(91, 168, 245, 0.22) calc(var(--streak-x, 50%) - 20%),
    var(--accent) var(--streak-x, 50%),
    rgba(91, 168, 245, 0.22) calc(var(--streak-x, 50%) + 20%),
    transparent 100%
  );
  box-shadow: 0 0 10px rgba(91, 168, 245, 0.16);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--transition),
    transform var(--transition);
}

:where(
  .footer-contact,
  .navbar-telamorph,
  .showcase-band,
  .value-card,
  .service-step,
  .service-card,
  .quote-list,
  .sphere-card,
  .sphere-panel,
  .workflow-step,
  .quote-panel,
  .product-card,
  .btn-accent,
  .btn-outline-accent,
  .svc-chip,
  .svc-catch,
  .cd-catch,
  .footer-links a,
  .footer-contact-value,
  .pd-tab-nav
)::before {
  top: 0;
  z-index: var(--streak-z, 1);
}

.menu-list li a::after,
.product-tab::after,
.pd-tab-btn::after {
  bottom: var(--streak-bottom, 0);
  transform: scaleX(0.35);
  transform-origin: var(--streak-origin, center);
}

:where(
  .footer-contact,
  .navbar-telamorph,
  .showcase-band,
  .value-card,
  .service-step,
  .service-card,
  .quote-list,
  .sphere-card,
  .sphere-panel,
  .workflow-step,
  .quote-panel,
  .product-card,
  .btn-accent,
  .btn-outline-accent,
  .svc-chip,
  .svc-catch,
  .cd-catch,
  .footer-links a,
  .footer-contact-value,
  .pd-tab-nav
):hover::before,
:where(
  .showcase-band,
  .service-step,
  .service-card,
  .quote-list,
  .sphere-card,
  .sphere-panel,
  .workflow-step,
  .quote-panel,
  .product-card,
  .btn-accent,
  .btn-outline-accent,
  .svc-catch,
  .cd-catch,
  .footer-links a,
  .footer-contact-value
):focus-visible::before,
/* Only light the bar for keyboard focus — not the focus Bootstrap restores to
   the hamburger after a mouse-driven offcanvas close (which froze the streak
   on-screen). */
.navbar-telamorph:has(:focus-visible)::before,
.menu-list li a:hover::after,
.menu-list li a:focus-visible::after,
.product-tab.active::after,
.pd-tab-btn:hover::after,
.pd-tab-btn:focus-visible::after,
.pd-tab-btn.is-active::after {
  opacity: 1;
}

.menu-list li a:hover::after,
.menu-list li a:focus-visible::after,
.product-tab.active::after,
.pd-tab-btn:hover::after,
.pd-tab-btn:focus-visible::after,
.pd-tab-btn.is-active::after {
  transform: scaleX(1);
}

:where(
  .product-tab,
  .footer-links a,
  .footer-contact-value,
  .menu-list li a
):hover,
:where(
  .product-tab,
  .footer-links a,
  .footer-contact-value,
  .menu-list li a
):focus-visible {
  text-shadow: 0 0 12px rgba(91, 168, 245, 0.16);
}

.footer-contact {
  --streak-x: 82%;
}

.footer-contact::before {
  opacity: 0.4;
}

.navbar-telamorph {
  --streak-height: 2px;
}

.navbar-telamorph::before {
  top: auto;
  bottom: 0;
}

.showcase-band {
  --streak-z: 3;
}

.service-step,
.service-card,
.quote-list,
.sphere-card,
.sphere-panel,
.workflow-step,
.quote-panel {
  --streak-z: 2;
}

.product-tab {
  --streak-height: 2px;
  --streak-left: clamp(0.3rem, 0.55vw, 1rem);
  --streak-right: clamp(0.3rem, 0.55vw, 1rem);
}

/* Product-detail tabs reuse the nav's streak: a 2px underline that lights the
   active/hovered tab, plus a subtle cursor-tracked glow along the divider. */
.pd-tab-btn {
  --streak-height: 2px;
}

.pd-tab-nav {
  --streak-height: 1px;
}

.pd-tab-nav::before {
  top: auto;
  bottom: 0;
}

/* Product cards keep overflow:visible (the image pops above the card), so the
   top streak isn't clipped. Inset its ends to the corner radius so the bar ends
   at the point the top edge goes straight instead of hanging past the curve. */
.product-card {
  --streak-left: var(--radius-lg);
  --streak-right: var(--radius-lg);
}

.menu-list li a {
  --streak-bottom: 0.32rem;
  --streak-origin: left;
}