/* public/assets/page-studio/runtimes/background-hover.css */
/* Kind 4 runtime CSS for background hover behaviors. Verbatim shared
   between SSR and the builder canvas, declared via each component
   schema's behaviors.runtime (see flex.json). */

/* CHANGED (hover transition duration): the hover-color transition now
   reads --ps-bg-hover-color-duration (seeded by background-hover.js's
   initColorImageSwap() from data-ps-bg-hover-color-duration, itself
   emitted only for image fillType's swapColor fallback — see
   BackgroundResolver.php's class header) with a 0.3s fallback, instead
   of a bare hardcoded 0.3s. The hover-image transition is left
   untouched: background-image is not an animatable CSS property in any
   browser, so that transition declaration has always been inert —
   wiring a duration var into it would not change its observable
   behavior, so it is deliberately left as-is rather than touched for
   consistency's own sake. */

@layer ps-components {

  [data-ps-bg-hover-pulse="true"] [data-ps-bg-layer="video"] {
    transition: transform var(--ps-bg-pulse-duration, 1.2s) ease-in-out;
  }

  [data-ps-bg-hover-pulse="true"] [data-ps-bg-layer="video"].ps-bg-pulse-active {
    animation: ps-bg-pulse var(--ps-bg-pulse-duration, 1.2s) ease-in-out infinite;
  }

  @keyframes ps-bg-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(var(--ps-bg-pulse-scale, 1.05)); }
  }

  [data-ps-bg-hover-color] [data-ps-bg-layer] {
    transition: background-color var(--ps-bg-hover-color-duration, 0.3s) ease;
  }
  [data-ps-bg-hover-color] [data-ps-bg-layer].ps-bg-hover-color-active {
    background-color: var(--ps-bg-hover-color);
  }

  [data-ps-bg-hover-image] [data-ps-bg-layer] {
    transition: background-image 0.3s ease;
  }
  [data-ps-bg-hover-image] [data-ps-bg-layer].ps-bg-hover-image-active {
    background-image: var(--ps-bg-hover-image);
  }

}