/* =========================================================
   MODERN UI HOVER EFFECTS – 100+ EFFECTS
   Author: Ready for ThemeForest / TemplateMonster
========================================================= */

/* -----------------------------
   GLOBAL TRANSITION BASE
------------------------------ */
.ui-effect {
  transition: all 0.4s ease;
  will-change: transform, opacity, filter;
}

/* -----------------------------
   SCALE EFFECTS (1–10)
------------------------------ */
.scale-up:hover { transform: scale(1.08); }
.scale-down:hover { transform: scale(0.95); }
.scale-x:hover { transform: scaleX(1.1); }
.scale-y:hover { transform: scaleY(1.1); }
.scale-soft:hover { transform: scale(1.03); }
.scale-strong:hover { transform: scale(1.15); }
.scale-img img { transition: 0.5s; }
.scale-img:hover img { transform: scale(1.1); }
.scale-hover-in { transform: scale(0.95); }
.scale-hover-in:hover { transform: scale(1); }

/* -----------------------------
   TRANSLATE / SLIDE (11–20)
------------------------------ */
.slide-up:hover { transform: translateY(-10px); }
.slide-down:hover { transform: translateY(10px); }
.slide-left:hover { transform: translateX(-10px); }
.slide-right:hover { transform: translateX(10px); }
.slide-float:hover { transform: translateY(-15px); }
.slide-diagonal:hover { transform: translate(10px, -10px); }
.slide-in { transform: translateY(20px); opacity: 0; }
.slide-in:hover { transform: translateY(0); opacity: 1; }
.slide-reveal { overflow: hidden; }
.slide-reveal:hover { transform: translateY(-5px); }

/* -----------------------------
   ROTATION EFFECTS (21–30)
------------------------------ */
.rotate-sm:hover { transform: rotate(3deg); }
.rotate-md:hover { transform: rotate(6deg); }
.rotate-lg:hover { transform: rotate(12deg); }
.rotate-back:hover { transform: rotate(-6deg); }
.rotate-scale:hover { transform: rotate(5deg) scale(1.05); }
.rotate-y:hover { transform: rotateY(180deg); }
.rotate-x:hover { transform: rotateX(180deg); }
.spin:hover { transform: rotate(360deg); }
.spin-slow:hover { transform: rotate(360deg); transition-duration: 1s; }
.flip-card:hover { transform: rotateY(180deg); }

/* -----------------------------
   SHADOW EFFECTS (31–40)
------------------------------ */
.shadow-soft:hover { box-shadow: 0 10px 30px rgba(0,0,0,.15); }
.shadow-strong:hover { box-shadow: 0 25px 60px rgba(0,0,0,.3); }
.shadow-inset:hover { box-shadow: inset 0 0 20px rgba(0,0,0,.2); }
.shadow-glow:hover { box-shadow: 0 0 30px rgba(99,102,241,.6); }
.shadow-lift:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0,0,0,.25); }
.shadow-neon:hover { box-shadow: 0 0 25px #38bdf8; }
.shadow-outline:hover { box-shadow: 0 0 0 4px rgba(255,255,255,.2); }
.shadow-dual:hover { box-shadow: 0 10px 30px rgba(0,0,0,.2), inset 0 0 0 1px rgba(255,255,255,.1); }
.shadow-depth:hover { box-shadow: 0 40px 80px rgba(0,0,0,.35); }
.shadow-hover:hover { box-shadow: 0 8px 20px rgba(0,0,0,.18); }

/* -----------------------------
   BLUR & GLASS (41–50)
------------------------------ */
.blur-hover:hover { filter: blur(2px); }
.glass-hover:hover {
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(10px);
}
.frosted:hover {
  backdrop-filter: blur(14px) saturate(150%);
}
.glass-border:hover {
  border: 1px solid rgba(255,255,255,.3);
}
.blur-bg:hover { backdrop-filter: blur(6px); }
.glass-glow:hover { box-shadow: 0 0 30px rgba(255,255,255,.25); }
.glass-card:hover { background: rgba(255,255,255,.08); }
.glass-soft:hover { backdrop-filter: blur(6px); }
.glass-hard:hover { backdrop-filter: blur(20px); }
.glass-focus:hover { outline: 2px solid rgba(255,255,255,.4); }

/* -----------------------------
   IMAGE FILTER EFFECTS (51–60)
------------------------------ */
.img-grayscale:hover { filter: grayscale(1); }
.img-color:hover { filter: grayscale(0); }
.img-contrast:hover { filter: contrast(1.3); }
.img-bright:hover { filter: brightness(1.2); }
.img-dark:hover { filter: brightness(0.7); }
.img-blur:hover { filter: blur(3px); }
.img-saturate:hover { filter: saturate(1.6); }
.img-hue:hover { filter: hue-rotate(40deg); }
.img-zoom:hover img { transform: scale(1.15); }
.img-pan:hover img { transform: scale(1.1) translateX(10px); }

/* -----------------------------
   TEXT EFFECTS (61–70)
------------------------------ */
.text-glow:hover { text-shadow: 0 0 15px currentColor; }
.text-slide span {
  display: inline-block;
  transition: transform .4s;
}
.text-slide:hover span { transform: translateY(-4px); }
.text-underline:hover { text-decoration: underline; }
.text-expand:hover { letter-spacing: 2px; }
.text-shrink:hover { letter-spacing: -1px; }
.text-fade:hover { opacity: .6; }
.text-pop:hover { transform: scale(1.1); }
.text-skew:hover { transform: skewX(-5deg); }
.text-shadow:hover { text-shadow: 2px 2px 10px rgba(0,0,0,.4); }
.text-gradient:hover {
  background: linear-gradient(90deg,#38bdf8,#a855f7);
  -webkit-background-clip: text;
  color: transparent;
}

/* -----------------------------
   BUTTON EFFECTS (71–80)
------------------------------ */
.btn-fill {
  position: relative;
  overflow: hidden;
}
.btn-fill::before {
  content:"";
  position:absolute;
  inset:0;
  background:#fff;
  transform: scaleX(0);
  transform-origin:left;
  transition:.4s;
  z-index:-1;
}
.btn-fill:hover::before { transform: scaleX(1); }
.btn-fill:hover { color:#000; }

.btn-ripple:hover { box-shadow: 0 0 0 12px rgba(255,255,255,.1); }
.btn-glow:hover { box-shadow: 0 0 25px currentColor; }
.btn-lift:hover { transform: translateY(-6px); }
.btn-press:hover { transform: scale(.95); }
.btn-outline:hover { border-color: currentColor; }
.btn-pulse:hover { animation: pulse 1s infinite; }
.btn-slide:hover { padding-left: 24px; }
.btn-skew:hover { transform: skewX(-8deg); }
.btn-shadow:hover { box-shadow: 0 10px 30px rgba(0,0,0,.3); }

/* -----------------------------
   CARD EFFECTS (81–90)
------------------------------ */
.card-hover:hover { transform: translateY(-12px); }
.card-tilt:hover { transform: rotateX(5deg) rotateY(5deg); }
.card-glass:hover { backdrop-filter: blur(12px); }
.card-outline:hover { outline: 2px solid rgba(255,255,255,.2); }
.card-zoom:hover img { transform: scale(1.1); }
.card-stack:hover { transform: translateY(-8px) scale(1.03); }
.card-depth:hover { box-shadow: 0 50px 100px rgba(0,0,0,.4); }
.card-float:hover { transform: translateY(-15px); }
.card-border:hover { border-color: #fff; }
.card-reveal:hover { opacity: 1; }

/* -----------------------------
   ADVANCED / MICRO (91–110)
------------------------------ */
.hover-opacity:hover { opacity:.7; }
.hover-visible { opacity:0; }
.hover-visible:hover { opacity:1; }
.hover-border:hover { border-width:2px; }
.hover-radius:hover { border-radius:20px; }
.hover-wave:hover { animation: wave .6s ease; }
.hover-jump:hover { animation: jump .5s ease; }
.hover-shake:hover { animation: shake .4s ease; }
.hover-glitch:hover { animation: glitch .5s linear; }
.hover-focus:hover { filter: drop-shadow(0 0 10px currentColor); }
.hover-soft:hover { transition-timing-function:cubic-bezier(.4,0,.2,1); }
.hover-fast:hover { transition-duration:.2s; }
.hover-slow:hover { transition-duration:.8s; }
.hover-delay:hover { transition-delay:.15s; }
.hover-outline:hover { outline-offset:6px; }
.hover-3d:hover { transform: perspective(800px) rotateX(6deg); }
.hover-magnetic:hover { transform: translateX(4px); }
.hover-reveal:hover { clip-path: inset(0); }
.hover-mask:hover { mask-size:200%; }

/* =========================================================
   MODERN UI HOVER EFFECTS – PART 2 (60+ NEW EFFECTS)
========================================================= */

/* -----------------------------
   LIQUID / MORPH (111–120)
------------------------------ */
.liquid-hover {
  transition: all .6s cubic-bezier(.68,-0.6,.32,1.6);
}
.liquid-hover:hover { border-radius: 32px; }

.liquid-scale:hover {
  transform: scale(1.08) skewX(-2deg);
}

.liquid-stretch:hover {
  transform: scaleX(1.1);
}

.liquid-squash:hover {
  transform: scaleY(0.92);
}

.liquid-wobble:hover {
  animation: wobble .8s ease;
}

.liquid-bounce:hover {
  animation: bounce-soft .9s ease;
}

/* -----------------------------
   NEON / FUTURE (121–130)
------------------------------ */
.neon-glow:hover {
  box-shadow:
    0 0 10px rgba(56,189,248,.6),
    0 0 30px rgba(56,189,248,.4),
    0 0 60px rgba(56,189,248,.2);
}

.neon-border:hover {
  border: 1px solid #38bdf8;
  box-shadow: inset 0 0 20px rgba(56,189,248,.4);
}

.neon-text:hover {
  text-shadow:
    0 0 10px currentColor,
    0 0 30px currentColor;
}

.neon-fill {
  position: relative;
  overflow: hidden;
}
.neon-fill::after {
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(120deg,transparent,rgba(56,189,248,.4),transparent);
  transform: translateX(-100%);
  transition:.6s;
}
.neon-fill:hover::after { transform: translateX(100%); }

.cyber-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(56,189,248,.35);
}

/* -----------------------------
   GLASS MOTION (131–140)
------------------------------ */
.glass-tilt:hover {
  transform: perspective(1000px) rotateX(6deg);
}

.glass-shine {
  position: relative;
  overflow: hidden;
}
.glass-shine::before {
  content:"";
  position:absolute;
  inset:-100%;
  background: linear-gradient(45deg,transparent,rgba(255,255,255,.25),transparent);
  transform: translateX(-100%);
  transition:.8s;
}
.glass-shine:hover::before { transform: translateX(100%); }

.glass-depth:hover {
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
}

.glass-focus-ring:hover {
  outline: 2px solid rgba(255,255,255,.5);
  outline-offset: 6px;
}

.glass-soft-move:hover {
  transform: translateY(-4px) scale(1.02);
}

/* -----------------------------
   IMAGE CINEMATIC (141–150)
------------------------------ */
.img-cinematic:hover img {
  transform: scale(1.2) rotate(1deg);
  filter: contrast(1.2) saturate(1.2);
}

.img-parallax:hover img {
  transform: scale(1.15) translateY(-10px);
}

.img-spotlight {
  position: relative;
}
.img-spotlight::after {
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at center, transparent 40%, rgba(0,0,0,.5));
  opacity:0;
  transition:.4s;
}
.img-spotlight:hover::after { opacity:1; }

.img-film:hover img {
  filter: sepia(.2) contrast(1.1);
}

.img-depth:hover img {
  transform: scale(1.1);
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}

/* -----------------------------
   CTA / SALES BOOSTERS (151–160)
------------------------------ */
.cta-attention:hover {
  animation: attention 1s ease;
}

.cta-expand:hover {
  padding-inline: 2.5rem;
}

.cta-glow:hover {
  box-shadow: 0 0 40px rgba(168,85,247,.6);
}

.cta-arrow::after {
  content:"→";
  margin-left: 8px;
  transition:.3s;
}
.cta-arrow:hover::after {
  transform: translateX(6px);
}

.cta-press:hover {
  transform: translateY(2px) scale(.97);
}

/* -----------------------------
   UI MICRO INTERACTIONS (161–170)
------------------------------ */
.hover-blip:hover {
  animation: blip .4s ease;
}

.hover-expand-y:hover {
  transform: scaleY(1.05);
}

.hover-contract:hover {
  transform: scale(.92);
}

.hover-focus-blur:hover {
  filter: drop-shadow(0 0 12px currentColor);
}

.hover-underline-grow {
  position: relative;
}
.hover-underline-grow::after {
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:0;
  height:2px;
  background: currentColor;
  transition:.4s;
}
.hover-underline-grow:hover::after {
  width:100%;
}

/* -----------------------------
   PREMIUM SaaS EFFECTS (171–180)
------------------------------ */
.saas-card:hover {
  transform: translateY(-12px) scale(1.04);
  box-shadow: 0 40px 100px rgba(0,0,0,.45);
}

.saas-highlight:hover {
  background: linear-gradient(135deg,rgba(255,255,255,.12),transparent);
}

.saas-glass-border:hover {
  border: 1px solid rgba(255,255,255,.25);
}

.saas-raise:hover {
  transform: translateY(-8px);
}

.saas-fade-in {
  opacity:.6;
}
.saas-fade-in:hover {
  opacity:1;
}

/* -----------------------------
   KEYFRAMES
------------------------------ */
@keyframes wobble {
  0% { transform: rotate(0); }
  25% { transform: rotate(3deg); }
  75% { transform: rotate(-3deg); }
}
@keyframes bounce-soft {
  0% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes attention {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@keyframes blip {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
}


/* -----------------------------
   KEYFRAMES
------------------------------ */
@keyframes pulse {
  0% { box-shadow:0 0 0 0 rgba(255,255,255,.4); }
  100% { box-shadow:0 0 0 20px rgba(255,255,255,0); }
}
@keyframes jump {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
@keyframes wave {
  0% { transform: rotate(0); }
  25% { transform: rotate(3deg); }
  75% { transform: rotate(-3deg); }
}
@keyframes glitch {
  0% { transform: translate(0); }
  20% { transform: translate(-2px,2px); }
  40% { transform: translate(2px,-2px); }
  60% { transform: translate(-2px,-1px); }
  80% { transform: translate(1px,2px); }
}