/* ==========================================================================
   Hover Bubble Cards - eDesign Space (edesignspace.com)
   Built for maatenpartners.com

   Direction-aware hover effect: background color "bubbles" in from
   whichever edge (top/right/bottom/left) the cursor entered the card from,
   and slides back out through the edge the cursor exits from.

   Usage: add the CSS class "hover-bubble-card" to any Elementor Section,
   Container, or widget (Advanced tab -> CSS Classes).

   NOTE: selectors below repeat ".hover-bubble-card" (e.g. ".hover-bubble-card
   .hover-bubble-card::before") on purpose. Elementor's flexbox Container
   widget (.e-con) auto-generates its own same-specificity ::before rule
   (for its background-overlay feature) in a per-page CSS file that loads
   AFTER this one, so on a plain single-class selector Elementor's rule wins
   cascade ties and cancels our "content"/"transform". Doubling the class
   raises our specificity just enough to win regardless of load order.
   ========================================================================== */

.hover-bubble-card.hover-bubble-card {
  position: relative;
  overflow: hidden;      /* keeps the bubble clipped inside the card */
  isolation: isolate;     /* own stacking context so the bubble layers correctly */
  z-index: 0;
  transition: color 0.4s ease; /* optional: smooth text color change, see below */
}

/* The color "bubble" layer */
.hover-bubble-card.hover-bubble-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #FFC200;
  z-index: -1;
  transform: translate3d(0, -100%, 0); /* hidden by default (parked above) */
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Parked position: which edge the bubble sits off-screen at */
.hover-bubble-card.hover-bubble-card.dir-top::before    { transform: translate3d(0, -100%, 0); }
.hover-bubble-card.hover-bubble-card.dir-bottom::before { transform: translate3d(0, 100%, 0); }
.hover-bubble-card.hover-bubble-card.dir-left::before   { transform: translate3d(-100%, 0, 0); }
.hover-bubble-card.hover-bubble-card.dir-right::before  { transform: translate3d(100%, 0, 0); }

/* Visible / "bubbled in" position - must come after the dir-* rules so it wins */
.hover-bubble-card.hover-bubble-card.bubble-in::before {
  transform: translate3d(0, 0, 0);
}

/* Used briefly by the JS to snap the bubble to the entry edge with no animation */
.hover-bubble-card.hover-bubble-card.no-transition::before {
  transition: none;
}

/* Optional: darken text a bit once the bubble is in, for contrast against #FFC200.
   Remove this block if you don't want the text color to change. */
.hover-bubble-card.hover-bubble-card.bubble-in,
.hover-bubble-card.hover-bubble-card.bubble-in * {
  color: #1a1a1a;
}