/* ============================================================
   _hovers.css — Hover effects
   Add a class to any element.
   All effects use CSS variables from _base.css
   ============================================================ */

/* ═══════════════════════════════════════════
   SCALE EFFECTS
═══════════════════════════════════════════ */
.hover-scale {
  transition: transform var(--ease);
}
.hover-scale:hover {
  transform: scale(1.05);
}

.hover-scale-sm {
  transition: transform var(--ease);
}
.hover-scale-sm:hover {
  transform: scale(1.02);
}

.hover-scale-lg {
  transition: transform var(--ease);
}
.hover-scale-lg:hover {
  transform: scale(1.1);
}

.hover-scale-xl {
  transition: transform var(--ease);
}
.hover-scale-xl:hover {
  transform: scale(1.15);
}

/* ═══════════════════════════════════════════
   LIFT EFFECTS (translateY)
═══════════════════════════════════════════ */
.hover-lift {
  transition: transform var(--ease), box-shadow var(--ease);
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.hover-lift-sm {
  transition: transform var(--ease);
}
.hover-lift-sm:hover {
  transform: translateY(-2px);
}

.hover-lift-lg {
  transition: transform var(--ease), box-shadow var(--ease);
}
.hover-lift-lg:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.hover-lift-xl {
  transition: transform var(--ease), box-shadow var(--ease);
}
.hover-lift-xl:hover {
  transform: translateY(-12px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}

/* ═══════════════════════════════════════════
   GLOW EFFECTS
═══════════════════════════════════════════ */
.hover-glow {
  transition: box-shadow var(--ease);
}
.hover-glow:hover {
  box-shadow: var(--shadow-primary);
}

.hover-glow-accent {
  transition: box-shadow var(--ease);
}
.hover-glow-accent:hover {
  box-shadow: var(--shadow-accent);
}

.hover-glow-success {
  transition: box-shadow var(--ease);
}
.hover-glow-success:hover {
  box-shadow: 0 0 25px color-mix(in srgb, var(--color-success) 50%, transparent);
}

.hover-glow-error {
  transition: box-shadow var(--ease);
}
.hover-glow-error:hover {
  box-shadow: 0 0 25px color-mix(in srgb, var(--color-error) 50%, transparent);
}

.hover-glow-white {
  transition: box-shadow var(--ease);
}
.hover-glow-white:hover {
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
}

.hover-glow-intense {
  transition: box-shadow var(--ease);
}
.hover-glow-intense:hover {
  box-shadow: 0 0 40px color-mix(in srgb, var(--color-primary) 70%, transparent);
}

/* ═══════════════════════════════════════════
   BRIGHTNESS & FILTER EFFECTS
═══════════════════════════════════════════ */
.hover-bright {
  transition: filter var(--ease);
}
.hover-bright:hover {
  filter: brightness(1.15);
}

.hover-bright-strong {
  transition: filter var(--ease);
}
.hover-bright-strong:hover {
  filter: brightness(1.3);
}

.hover-dim {
  transition: filter var(--ease);
}
.hover-dim:hover {
  filter: brightness(0.85);
}

.hover-dim-strong {
  transition: filter var(--ease);
}
.hover-dim-strong:hover {
  filter: brightness(0.7);
}

.hover-grayscale {
  transition: filter var(--ease);
  filter: grayscale(100%);
}
.hover-grayscale:hover {
  filter: grayscale(0%);
}

.hover-sepia {
  transition: filter var(--ease);
  filter: sepia(100%);
}
.hover-sepia:hover {
  filter: sepia(0%);
}

.hover-invert {
  transition: filter var(--ease);
  filter: invert(0%);
}
.hover-invert:hover {
  filter: invert(100%);
}

.hover-blur {
  transition: filter var(--ease);
  filter: blur(0px);
}
.hover-blur:hover {
  filter: blur(2px);
}

/* ═══════════════════════════════════════════
   OPACITY EFFECTS
═══════════════════════════════════════════ */
.hover-opacity {
  transition: opacity var(--ease);
}
.hover-opacity:hover {
  opacity: 0.8;
}

.hover-opacity-sm {
  transition: opacity var(--ease);
}
.hover-opacity-sm:hover {
  opacity: 0.9;
}

.hover-opacity-lg {
  transition: opacity var(--ease);
}
.hover-opacity-lg:hover {
  opacity: 0.6;
}

.hover-fade {
  transition: opacity var(--ease), transform var(--ease);
}
.hover-fade:hover {
  opacity: 0.7;
  transform: scale(0.98);
}

/* ═══════════════════════════════════════════
   BORDER EFFECTS
═══════════════════════════════════════════ */
.hover-border {
  transition: border-color var(--ease);
  border: 2px solid transparent;
}
.hover-border:hover {
  border-color: var(--color-primary);
}

.hover-border-accent {
  transition: border-color var(--ease);
  border: 2px solid transparent;
}
.hover-border-accent:hover {
  border-color: var(--color-accent);
}

.hover-border-success {
  transition: border-color var(--ease);
  border: 2px solid transparent;
}
.hover-border-success:hover {
  border-color: var(--color-success);
}

.hover-border-glow {
  transition: border-color var(--ease), box-shadow var(--ease);
  border: 2px solid transparent;
}
.hover-border-glow:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 20px color-mix(in srgb, var(--color-primary) 40%, transparent);
}

/* ═══════════════════════════════════════════
   COLOR EFFECTS
═══════════════════════════════════════════ */
.hover-primary {
  transition: color var(--ease), background-color var(--ease);
}
.hover-primary:hover {
  color: var(--color-primary);
}

.hover-primary-bg {
  transition: background-color var(--ease);
}
.hover-primary-bg:hover {
  background-color: var(--color-primary);
  color: #fff;
}

.hover-accent {
  transition: color var(--ease), background-color var(--ease);
}
.hover-accent:hover {
  color: var(--color-accent);
}

.hover-accent-bg {
  transition: background-color var(--ease);
}
.hover-accent-bg:hover {
  background-color: var(--color-accent);
  color: #fff;
}

.hover-success-bg {
  transition: background-color var(--ease);
}
.hover-success-bg:hover {
  background-color: var(--color-success);
  color: #fff;
}

.hover-error-bg {
  transition: background-color var(--ease);
}
.hover-error-bg:hover {
  background-color: var(--color-error);
  color: #fff;
}

/* ═══════════════════════════════════════════
   UNDERLINE & TEXT EFFECTS
═══════════════════════════════════════════ */
.hover-underline {
  text-decoration: none;
  transition: text-decoration var(--ease);
}
.hover-underline:hover {
  text-decoration: underline;
}

.hover-underline-animated {
  position: relative;
  text-decoration: none;
}
.hover-underline-animated::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-primary);
  transition: width var(--ease);
}
.hover-underline-animated:hover::after {
  width: 100%;
}

.hover-underline-center {
  position: relative;
  text-decoration: none;
}
.hover-underline-center::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--color-primary);
  transition: width var(--ease), left var(--ease);
}
.hover-underline-center:hover::after {
  width: 100%;
  left: 0;
}

.hover-strikethrough {
  position: relative;
  text-decoration: none;
}
.hover-strikethrough::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-accent);
  transition: width var(--ease);
}
.hover-strikethrough:hover::before {
  width: 100%;
}

/* ═══════════════════════════════════════════
   ROTATE EFFECTS
═══════════════════════════════════════════ */
.hover-rotate {
  transition: transform var(--ease);
}
.hover-rotate:hover {
  transform: rotate(5deg);
}

.hover-rotate-neg {
  transition: transform var(--ease);
}
.hover-rotate-neg:hover {
  transform: rotate(-5deg);
}

.hover-rotate-180 {
  transition: transform var(--ease-slow);
}
.hover-rotate-180:hover {
  transform: rotate(180deg);
}

.hover-rotate-360 {
  transition: transform var(--ease-slow);
}
.hover-rotate-360:hover {
  transform: rotate(360deg);
}

/* ═══════════════════════════════════════════
   IMAGE ZOOM EFFECTS
═══════════════════════════════════════════ */
.hover-zoom {
  overflow: hidden;
}
.hover-zoom img {
  transition: transform var(--ease-slow);
}
.hover-zoom:hover img {
  transform: scale(1.08);
}

.hover-zoom-sm {
  overflow: hidden;
}
.hover-zoom-sm img {
  transition: transform var(--ease);
}
.hover-zoom-sm:hover img {
  transform: scale(1.05);
}

.hover-zoom-lg {
  overflow: hidden;
}
.hover-zoom-lg img {
  transition: transform var(--ease-slow);
}
.hover-zoom-lg:hover img {
  transform: scale(1.15);
}

.hover-zoom-out {
  overflow: hidden;
}
.hover-zoom-out img {
  transition: transform var(--ease-slow);
}
.hover-zoom-out:hover img {
  transform: scale(0.95);
}

/* ═══════════════════════════════════════════
   CARD COMBO EFFECTS
═══════════════════════════════════════════ */
.hover-card {
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.hover-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
}

.hover-card-glow {
  transition: transform var(--ease), box-shadow var(--ease);
}
.hover-card-glow:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 30px color-mix(in srgb, var(--color-primary) 35%, transparent);
}

.hover-card-slide {
  transition: transform var(--ease), box-shadow var(--ease);
}
.hover-card-slide:hover {
  transform: translateX(8px);
  box-shadow: 8px 8px 30px rgba(0, 0, 0, 0.3);
}

/* ═══════════════════════════════════════════
   BUTTON EFFECTS
═══════════════════════════════════════════ */
.hover-btn {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.hover-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.hover-btn-press {
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.hover-btn-press:hover {
  transform: translateY(1px) scale(0.98);
}

.hover-btn-glow {
  transition: all 0.3s;
}
.hover-btn-glow:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 25px color-mix(in srgb, var(--color-primary) 50%, transparent);
}

/* ═══════════════════════════════════════════
   SHIMMER / SHINE EFFECT
═══════════════════════════════════════════ */
.hover-shimmer {
  position: relative;
  overflow: hidden;
}
.hover-shimmer::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transition: left 0.5s;
}
.hover-shimmer:hover::before {
  left: 100%;
}

/* ═══════════════════════════════════════════
   PULSE EFFECT
═══════════════════════════════════════════ */
.hover-pulse {
  transition: transform var(--ease);
}
.hover-pulse:hover {
  animation: hover-pulse-animation 0.6s ease-in-out;
}

@keyframes hover-pulse-animation {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1.05); }
}

/* ═══════════════════════════════════════════
   BACKGROUND GRADIENT HOVER
═══════════════════════════════════════════ */
.hover-gradient {
  transition: background var(--ease);
  background-size: 200% 200%;
}
.hover-gradient:hover {
  background-position: 100% 50%;
}

/* ═══════════════════════════════════════════
   BACKDROP BLUR HOVER
═══════════════════════════════════════════ */
.hover-backdrop-blur {
  transition: backdrop-filter var(--ease);
}
.hover-backdrop-blur:hover {
  backdrop-filter: blur(10px);
}

/* ═══════════════════════════════════════════
   COMBO: ALL IN ONE
═══════════════════════════════════════════ */
.hover-mega {
  transition: transform var(--ease), box-shadow var(--ease), 
              filter var(--ease), border-color var(--ease);
}
.hover-mega:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.5);
  filter: brightness(1.1);
  border-color: var(--color-primary);
}

/* ═══════════════════════════════════════════
   FILL FROM BOTTOM (hover-fill)
═══════════════════════════════════════════ */
.hover-fill {
  position: relative;
  overflow: hidden;
  transition: color var(--ease);
  z-index: 0;
}
.hover-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-primary);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}
.hover-fill:hover::after { transform: translateY(0); }
.hover-fill:hover { color: #fff; }

.hover-fill-accent::after { background: var(--color-accent); }
.hover-fill-success::after { background: var(--color-success); }

/* ═══════════════════════════════════════════
   BORDER DRAW (hover-border-draw)
═══════════════════════════════════════════ */
.hover-border-draw {
  position: relative;
}
.hover-border-draw::before,
.hover-border-draw::after {
  content: '';
  position: absolute;
  background: var(--color-primary);
  transition: transform 0.3s ease;
}
/* Top & bottom bars */
.hover-border-draw::before {
  left: 0; right: 0; height: 2px;
  top: 0; transform: scaleX(0);
  transform-origin: left;
}
.hover-border-draw::after {
  left: 0; right: 0; height: 2px;
  bottom: 0; transform: scaleX(0);
  transform-origin: right;
}
.hover-border-draw:hover::before,
.hover-border-draw:hover::after { transform: scaleX(1); }

/* ═══════════════════════════════════════════
   TILT (subtle 3D perspective)
═══════════════════════════════════════════ */
.hover-tilt {
  transition: transform 0.3s ease;
  transform-style: preserve-3d;
}
.hover-tilt:hover { transform: perspective(400px) rotateX(4deg) rotateY(-4deg) scale(1.02); }

.hover-tilt-r {
  transition: transform 0.3s ease;
  transform-style: preserve-3d;
}
.hover-tilt-r:hover { transform: perspective(400px) rotateX(4deg) rotateY(4deg) scale(1.02); }

/* ═══════════════════════════════════════════
   Backward compatibility
   (kept for projects using older class names)
═══════════════════════════════════════════ */
/** @deprecated use .hover-scale instead */
.hover-scailed-1 {
  transition: transform var(--ease);
}
.hover-scailed-1:hover {
  transform: scale(1.05);
}