/*
 * Bento Hover styles.
 *
 * Lifted verbatim from Motion Bits for Elementor's assets/css/frontend.css (the block that
 * begins at its "Bento Hover Expand" comment). Class names are deliberately unchanged, so a
 * page built with either plugin renders identically under the other. Regenerate with
 * tools/sync-from-parent.sh rather than editing by hand.
 */

/* Bento Hover Expand */
/* The hover scale of one card, never inherited by a Bento card nested inside it. */
@property --mbfe-bento-scale {
  syntax: '*';
  inherits: false;
}

/* A card's own Width At Rest and Width On Hover, likewise never inherited by a card nested inside it. */
@property --mbfe-bento-rest-width {
  syntax: '*';
  inherits: false;
}

@property --mbfe-bento-hover-width {
  syntax: '*';
  inherits: false;
}

/*
 * Change Style When Card Is Active: Move X, Move Y and Scale, each on its own element only. Scale is
 * a number so it can be eased by itself; 1 means no change.
 */
@property --mbfe-bento-state-x {
  syntax: '*';
  inherits: false;
}

@property --mbfe-bento-state-y {
  syntax: '*';
  inherits: false;
}

@property --mbfe-bento-state-scale {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

.mbfe-bento-hover {
  --mbfe-bento-duration: .45s;
  --mbfe-bento-ease: cubic-bezier(.22,1,.36,1);
}

.mbfe-bento-hover--ready {
  isolation: isolate;
}

.mbfe-bento-hover-host {
  min-width: 0;
  box-sizing: border-box;
}

.mbfe-bento-hover-host--auto {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  grid-auto-flow: row;
}

.mbfe-bento-hover-host--auto.mbfe-bento-hover-host--full-width {
  max-width: none;
}

/*
 * An element's active-state Scale. The card, content and reveal rules below come later and multiply
 * it into their own scale instead.
 */
.mbfe-bento-state-yes {
  scale: var(--mbfe-bento-state-scale);
}

.mbfe-bento-item {
  min-width: 0;
  min-height: 0;
  max-width: none;
  box-sizing: border-box;
  transform-origin: center center;
  backface-visibility: hidden;
  /*
   * The individual scale property composes with Elementor's transform. Unset at rest, so it is none.
   * The card's own active-state Scale multiplies the container's Active Scale.
   */
  scale: calc(var(--mbfe-bento-scale) * var(--mbfe-bento-state-scale, 1));
}

/*
 * CSS eases the hover only when the motion engine is missing (the runtime adds --css then). With the engine loaded it
 * tweens these same values every frame, and a transition on top would ease each one twice.
 */
.mbfe-bento-hover--css .mbfe-bento-item {
  /* Elementor's own container transitions first, since this list replaces them. */
  transition:
    background .3s,
    border .3s,
    box-shadow .3s,
    transform var(--e-con-transform-transition-duration, .4s),
    opacity var(--mbfe-bento-duration, .45s) var(--mbfe-bento-ease, ease),
    filter var(--mbfe-bento-duration, .45s) var(--mbfe-bento-ease, ease),
    scale var(--mbfe-bento-duration, .45s) var(--mbfe-bento-ease, ease),
    flex-grow var(--mbfe-bento-duration, .45s) var(--mbfe-bento-ease, ease);
}

.mbfe-bento-hover--css .mbfe-bento-hover-host,
.mbfe-bento-hover--css.mbfe-bento-hover-host {
  transition:
    grid-template-columns var(--mbfe-bento-duration, .45s) var(--mbfe-bento-ease, ease),
    grid-template-rows var(--mbfe-bento-duration, .45s) var(--mbfe-bento-ease, ease);
}

.mbfe-bento-hover-host--auto > .mbfe-bento-item {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100%;
  flex-basis: auto !important;
  align-self: stretch;
  justify-self: stretch;
  overflow: hidden;
}

.mbfe-bento-scale-node {
  scale: calc(var(--mbfe-bento-content-scale, 1) * var(--mbfe-bento-state-scale, 1));
  transform-origin: center center;
  will-change: scale;
}

/*
 * While the cards resize, the runtime writes the content scale every frame, so easing it here as
 * well would leave the content trailing its card. Only its jumps are eased: to Active Content Scale
 * on the card that becomes active, and on every card when no card resizes. :where() keeps this at
 * one class, so a widget's own transition list still wins, as it did before.
 */
:where(.mbfe-bento-item[data-mbfe-bento-active], .mbfe-bento-hover--static .mbfe-bento-item) > .mbfe-bento-scale-node {
  transition:
    scale var(--mbfe-bento-duration, .45s) var(--mbfe-bento-ease, ease);
}

.mbfe-bento-reveal-node {
  opacity: 0;
  translate: 0 14px;
  scale: calc(.96 * var(--mbfe-bento-state-scale, 1));
  filter: blur(5px);
  pointer-events: none;
  will-change: opacity, translate, scale, filter;
}

/*
 * Change Style When Card Is Active eases with the card's Duration and Ease. Each list starts with
 * Elementor's own for that kind of element, since it replaces it; the card lists cover a widget card
 * too, as containers never set --e-transform-transition-duration. Three classes outrank Elementor's
 * widget rule (0,2,0) whatever the load order, but tie with the rule a widget's own hover Transition
 * Duration prints (0,3,0), so on such a widget load order picks one list. With the engine a card's opacity, filter, scale
 * and flex-grow are tweened by the runtime, so only the rule for the CSS fallback eases them. Scale
 * eases through --mbfe-bento-state-scale rather than scale, so a scale the runtime writes every
 * frame is never eased twice. Reveal and hide content keeps its own rule below, which adds these.
 */
.mbfe-bento-hover .mbfe-bento-item .mbfe-bento-state-yes {
  transition:
    background .3s,
    border .3s,
    border-radius .3s,
    box-shadow .3s,
    transform var(--e-transform-transition-duration, .4s),
    color var(--mbfe-bento-duration, .45s) var(--mbfe-bento-ease, ease),
    background-color var(--mbfe-bento-duration, .45s) var(--mbfe-bento-ease, ease),
    opacity var(--mbfe-bento-duration, .45s) var(--mbfe-bento-ease, ease),
    translate var(--mbfe-bento-duration, .45s) var(--mbfe-bento-ease, ease),
    --mbfe-bento-state-scale var(--mbfe-bento-duration, .45s) var(--mbfe-bento-ease, ease);
}

.mbfe-bento-hover .mbfe-bento-item.mbfe-bento-state-yes {
  transition:
    background var(--background-transition, .3s),
    border var(--border-transition, .3s),
    border-radius var(--border-transition, .3s),
    box-shadow var(--border-transition, .3s),
    transform var(--e-con-transform-transition-duration, var(--e-transform-transition-duration, .4s)),
    color var(--mbfe-bento-duration, .45s) var(--mbfe-bento-ease, ease),
    background-color var(--mbfe-bento-duration, .45s) var(--mbfe-bento-ease, ease),
    translate var(--mbfe-bento-duration, .45s) var(--mbfe-bento-ease, ease),
    --mbfe-bento-state-scale var(--mbfe-bento-duration, .45s) var(--mbfe-bento-ease, ease);
}

.mbfe-bento-hover--css .mbfe-bento-item.mbfe-bento-state-yes {
  transition:
    background var(--background-transition, .3s),
    border var(--border-transition, .3s),
    border-radius var(--border-transition, .3s),
    box-shadow var(--border-transition, .3s),
    transform var(--e-con-transform-transition-duration, var(--e-transform-transition-duration, .4s)),
    opacity var(--mbfe-bento-duration, .45s) var(--mbfe-bento-ease, ease),
    filter var(--mbfe-bento-duration, .45s) var(--mbfe-bento-ease, ease),
    scale var(--mbfe-bento-duration, .45s) var(--mbfe-bento-ease, ease),
    flex-grow var(--mbfe-bento-duration, .45s) var(--mbfe-bento-ease, ease),
    color var(--mbfe-bento-duration, .45s) var(--mbfe-bento-ease, ease),
    background-color var(--mbfe-bento-duration, .45s) var(--mbfe-bento-ease, ease),
    translate var(--mbfe-bento-duration, .45s) var(--mbfe-bento-ease, ease),
    --mbfe-bento-state-scale var(--mbfe-bento-duration, .45s) var(--mbfe-bento-ease, ease);
}

/*
 * Text Color is set on everything inside the element as well, so what is inside eases with it,
 * except where an element has a transition list of its own, which wins.
 */
@media (prefers-reduced-motion: no-preference) {
  :where(.mbfe-bento-hover:not(.mbfe-bento-hover--reduced) .mbfe-bento-state-yes) * {
    transition:
      color var(--mbfe-bento-duration, .45s) var(--mbfe-bento-ease, ease),
      fill var(--mbfe-bento-duration, .45s) var(--mbfe-bento-ease, ease);
  }
}

/*
 * Elementor gives every widget with Optimized Markup its own transition list at specificity 0,2,0,
 * which replaced this one and made the reveal jump. Three classes outrank it whatever the load order.
 */
.mbfe-bento-hover .mbfe-bento-item .mbfe-bento-reveal-node {
  transition:
    opacity var(--mbfe-bento-duration, .45s) var(--mbfe-bento-ease, ease),
    translate var(--mbfe-bento-duration, .45s) var(--mbfe-bento-ease, ease),
    scale var(--mbfe-bento-duration, .45s) var(--mbfe-bento-ease, ease),
    filter var(--mbfe-bento-duration, .45s) var(--mbfe-bento-ease, ease),
    color var(--mbfe-bento-duration, .45s) var(--mbfe-bento-ease, ease),
    background-color var(--mbfe-bento-duration, .45s) var(--mbfe-bento-ease, ease),
    --mbfe-bento-state-scale var(--mbfe-bento-duration, .45s) var(--mbfe-bento-ease, ease);
}

/*
 * Reveal content is hidden from the first paint, before the runtime has run, so it never shows and
 * then fades out. The runtime then takes it over (--ready) or leaves it visible (--off). If the
 * runtime never arrives, the animation shows it after five seconds; with scripting off it is never
 * hidden at all. Content set to hide while its card is active is shown at rest, so it is left out.
 */
@media (scripting: enabled) {
  .mbfe-bento-hover:not(.mbfe-bento-hover--ready):not(.mbfe-bento-hover--off) :is(.mbfe-bento-reveal, [data-mbfe-bento-reveal]):not(.mbfe-bento-hide) {
    opacity: 0;
    animation: mbfe-bento-reveal-failsafe 0s 5s forwards;
  }
}

@keyframes mbfe-bento-reveal-failsafe {
  to {
    opacity: 1;
  }
}

.mbfe-bento-reveal-node.is-revealed {
  opacity: 1;
  translate: 0 0;
  scale: var(--mbfe-bento-state-scale, 1);
  filter: blur(0);
  pointer-events: auto;
}

/*
 * Free Its Space While Hidden: hidden, the element leaves the layout and the rest of the card closes
 * up. Where the browser can, it stays in the layout until it has faded out and fades in from the
 * hidden look; elsewhere it simply goes and comes back. Before the runtime arrives it is out of the
 * layout as well, so a page does not load with the hole and then close it.
 */
.mbfe-bento-collapse-yes.mbfe-bento-reveal-node:not(.is-revealed) {
  display: none;
}

@media (scripting: enabled) {
  .mbfe-bento-hover:not(.mbfe-bento-hover--ready):not(.mbfe-bento-hover--off) .mbfe-bento-reveal.mbfe-bento-collapse-yes {
    display: none;
    animation-name: mbfe-bento-reveal-failsafe-collapse;
  }
}

@keyframes mbfe-bento-reveal-failsafe-collapse {
  to {
    opacity: 1;
    display: var(--display, block);
  }
}

@supports (transition-behavior: allow-discrete) {
  .mbfe-bento-hover .mbfe-bento-item .mbfe-bento-collapse-yes.mbfe-bento-reveal-node {
    transition-property: opacity, translate, scale, filter, color, background-color, --mbfe-bento-state-scale, display;
    transition-duration: var(--mbfe-bento-duration, .45s);
    transition-timing-function: var(--mbfe-bento-ease, ease);
    transition-behavior: allow-discrete;
  }

  @starting-style {
    .mbfe-bento-collapse-yes.mbfe-bento-reveal-node.is-revealed {
      opacity: 0;
      translate: 0 14px;
      scale: calc(.96 * var(--mbfe-bento-state-scale, 1));
      filter: blur(5px);
    }
  }
}

.mbfe-bento-hover--flex .mbfe-bento-item,
.mbfe-bento-hover-host--flex > .mbfe-bento-item {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex-basis: 0% !important;
  flex-shrink: 1 !important;
}

.mbfe-bento-item.is-active {
  z-index: 3;
}

.mbfe-bento-item.is-inactive {
  z-index: 1;
}

.mbfe-bento-hover--reduced .mbfe-bento-item,
.mbfe-bento-hover--reduced .mbfe-bento-hover-host--auto,
.mbfe-bento-hover--reduced .mbfe-bento-scale-node,
.mbfe-bento-hover--reduced .mbfe-bento-reveal-node,
.mbfe-bento-hover--reduced .mbfe-bento-state-yes {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .mbfe-bento-item,
  .mbfe-bento-hover-host,
  .mbfe-bento-scale-node,
  .mbfe-bento-reveal-node,
  .mbfe-bento-state-yes {
    transition: none !important;
  }
}