/* =========================================================
   12D – Shared Hover Effects
   File: assets/css/d12-hover-effects.css
   =========================================================

   Purpose
   -------
   Shared hover-motion effects for interactive elements used
   by 12D Elementor widgets.

   Usage
   -----
   The wrapper receives:

   data-d12-hover="grow|shrink|lift|push|pop|pulse"

   The animated element receives:

   class="d12-hover-target"

   Effect values are supplied through generic CSS variables,
   normally generated by the D12_Hover_Effects PHP trait.

   This stylesheet controls motion only. Visual styling such
   as colors, typography, borders, radius, and shadows remains
   the responsibility of each widget and Elementor.
   ========================================================= */

/* =========================================================
   Shared defaults
   ========================================================= */

[data-d12-hover] {
  --d12-hover-duration: 250ms;
  --d12-hover-easing: ease-out;

  --d12-hover-grow-scale: 1.06;
  --d12-hover-shrink-scale: 0.96;
  --d12-hover-lift-distance: 3px;
  --d12-hover-push-distance: 2px;
  --d12-hover-pop-peak-scale: 1.1;
  --d12-hover-pop-end-scale: 1.04;
  --d12-hover-pulse-scale: 1.06;
}

/* =========================================================
   Shared target behavior
   ========================================================= */

[data-d12-hover] .d12-hover-target {
  transition:
    color var(--d12-hover-duration) var(--d12-hover-easing),
    background-color var(--d12-hover-duration) var(--d12-hover-easing),
    border-color var(--d12-hover-duration) var(--d12-hover-easing),
    box-shadow var(--d12-hover-duration) var(--d12-hover-easing),
    transform var(--d12-hover-duration) var(--d12-hover-easing);

  transform: translateZ(0);
  transform-origin: center;
}

/* =========================================================
   Grow
   ========================================================= */

[data-d12-hover="grow"] .d12-hover-target:hover {
  transform: scale(var(--d12-hover-grow-scale, 1.06));
}

/* =========================================================
   Shrink
   ========================================================= */

[data-d12-hover="shrink"] .d12-hover-target:hover {
  transform: scale(var(--d12-hover-shrink-scale, 0.96));
}

/* =========================================================
   Lift
   ========================================================= */

[data-d12-hover="lift"] .d12-hover-target:hover {
  transform: translateY(calc(-1 * var(--d12-hover-lift-distance, 3px)));
}

/* =========================================================
   Push
   ========================================================= */

[data-d12-hover="push"] .d12-hover-target:hover {
  transform: translateY(var(--d12-hover-push-distance, 2px)) scale(0.98);
}

/* =========================================================
   Pop
   ========================================================= */

[data-d12-hover="pop"] .d12-hover-target:hover {
  animation: d12-hover-pop var(--d12-hover-duration) var(--d12-hover-easing)
    both;
}

/* =========================================================
   Pulse
   ========================================================= */

[data-d12-hover="pulse"] .d12-hover-target:hover {
  animation: d12-hover-pulse calc(var(--d12-hover-duration) * 1.8) ease-in-out
    infinite;
}

/* =========================================================
   Keyframes
   ========================================================= */

@keyframes d12-hover-pop {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(var(--d12-hover-pop-peak-scale, 1.1));
  }

  100% {
    transform: scale(var(--d12-hover-pop-end-scale, 1.04));
  }
}

@keyframes d12-hover-pulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(var(--d12-hover-pulse-scale, 1.06));
  }
}

/* =========================================================
   Reduced-motion accessibility
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  [data-d12-hover] .d12-hover-target {
    transition-duration: 0.01ms;
  }

  [data-d12-hover] .d12-hover-target:hover {
    animation: none;
    transform: none;
  }
}

/* End of file d12-hover-effects.css */