/* ============================================================
   BACKYARD TECH — Animation support styles
   ============================================================ */

/* Mockup sub-elements are visible by default (idle = full mockup).
   Hover re-plays the reveal via gsap.fromTo starting from opacity:0. */
[class*="mockup-bubble"],
[class*="mockup-field"],
.mockup-result,
.mockup-cell-booked {
  opacity: 1;
}

/* Magnetic CTA — base + growing hairline underline */
.cta-magnetic {
  display: inline-flex;
  align-items: center;
  will-change: transform;
}
.cta-magnetic::after {
  content: '';
  display: block;
  height: 0.5px;
  background: currentColor;
  width: 0;
  margin-top: 2px;
  transition: width 0.3s ease;
}
.cta-magnetic:hover::after { width: 100%; }

/* Respect reduced motion: no magnetic-CTA will-change. Mockup sub-elements
   are already opacity:1 by default — nothing else to override here. */
@media (prefers-reduced-motion: reduce) {
  .cta-magnetic { will-change: auto; }
}