/* =============================
       BASE CARD STYLE
    ============================= */
 .img-card {
   position: relative;
   overflow: hidden;
   cursor: pointer;
 }
 .img-card img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: all 0.6s ease;
 }
 /*.img-card::after {
   content: attr(data-title);
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 600;
   letter-spacing: .04em;
   background: rgba(0, 0, 0, 0.35);
   opacity: 0;
   transition: .4s ease;
 }*/
 .img-card:hover::after {
   opacity: 1;
 }
 /* =============================
       EFFECTS (1–10)
    ============================= */
 .zoom:hover img {
   transform: scale(1.15);
 }
 .zoom-rotate:hover img {
   transform: scale(1.15) rotate(3deg);
 }
 .grayscale img {
   filter: grayscale(100%);
 }
 .grayscale:hover img {
   filter: grayscale(0);
   transform: scale(1.1);
 }
 .blur:hover img {
   filter: blur(4px);
   transform: scale(1.1);
 }
 .brightness:hover img {
   filter: brightness(1.4);
 }
 .contrast:hover img {
   filter: contrast(140%);
 }
 .sepia:hover img {
   filter: sepia(100%);
 }
 .invert:hover img {
   filter: invert(100%);
 }
 .saturate:hover img {
   filter: saturate(200%);
 }
 /* =============================
       EFFECTS (11–20)
    ============================= */
 .slide-up img {
   transform: translateY(0);
 }
 .slide-up:hover img {
   transform: translateY(-15px) scale(1.05);
 }
 .slide-down:hover img {
   transform: translateY(15px) scale(1.05);
 }
 .slide-left:hover img {
   transform: translateX(-15px) scale(1.05);
 }
 .slide-right:hover img {
   transform: translateX(15px) scale(1.05);
 }
 .rotate-left:hover img {
   transform: rotate(-6deg) scale(1.1);
 }
 .rotate-right:hover img {
   transform: rotate(6deg) scale(1.1);
 }
 .flip-x img {
   transform-origin: center;
 }
 .flip-x:hover img {
   transform: rotateX(180deg);
 }
 .flip-y:hover img {
   transform: rotateY(180deg);
 }
 .skew:hover img {
   transform: skew(-4deg, -4deg) scale(1.1);
 }
 /* =============================
       EFFECTS (21–30)
    ============================= */
 .glass::before {
   content: "";
   position: absolute;
   inset: 0;
   background: rgba(255, 255, 255, 0.08);
   backdrop-filter: blur(0px);
   opacity: 0;
   transition: .4s;
 }
 .glass:hover::before {
   opacity: 1;
   backdrop-filter: blur(6px);
 }
 .shine::before {
   content: "";
   position: absolute;
   top: 0;
   left: -75%;
   width: 50%;
   height: 100%;
   background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .4), transparent);
   transform: skewX(-25deg);
 }
 .shine:hover::before {
   left: 125%;
   transition: .8s;
 }
 .overlay-fade::after {
   background: rgba(15, 23, 42, .7);
 }
 .overlay-scale::after {
   transform: scale(1.2);
 }
 .overlay-scale:hover::after {
   transform: scale(1);
 }
 .border-glow:hover {
   box-shadow: 0 0 0 2px rgba(99, 102, 241, .8), 0 0 30px rgba(99, 102, 241, .6);
 }
 .neon:hover {
   box-shadow: 0 0 40px rgba(34, 211, 238, .9);
 }
 .soft-shadow:hover {
   box-shadow: 0 30px 60px rgba(0, 0, 0, .6);
 }
 .tilt:hover img {
   transform: perspective(600px) rotateX(8deg) rotateY(-8deg) scale(1.1);
 }
 /* =============================
       EFFECTS (31–40)
    ============================= */
 .zoom-out img {
   transform: scale(1.2);
 }
 .zoom-out:hover img {
   transform: scale(1);
 }
 .reveal-top::after {
   transform: translateY(-100%);
 }
 .reveal-top:hover::after {
   transform: translateY(0);
 }
 .reveal-bottom::after {
   transform: translateY(100%);
 }
 .reveal-bottom:hover::after {
   transform: translateY(0);
 }
 .reveal-left::after {
   transform: translateX(-100%);
 }
 .reveal-left:hover::after {
   transform: translateX(0);
 }
 .reveal-right::after {
   transform: translateX(100%);
 }
 .reveal-right:hover::after {
   transform: translateX(0);
 }
 .wave:hover img {
   filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="w"><feTurbulence baseFrequency="0.02" numOctaves="3"/><feDisplacementMap scale="12"/></filter></svg>#w');
 }
 /* =============================
       EFFECTS (41–50+)
    ============================= */
 .duotone:hover img {
   filter: grayscale(1) contrast(1.2);
 }
 .pixel:hover img {
   image-rendering: pixelated;
   transform: scale(1.1);
 }
 .fade-out:hover img {
   opacity: .2;
 }
 .fade-in img {
   opacity: .2;
 }
 .fade-in:hover img {
   opacity: 1;
 }
 .spin:hover img {
   transform: rotate(360deg) scale(1.1);
 }
 .pulse:hover img {
   animation: pulse 1.2s infinite;
 }
 @keyframes pulse {
   0% {
     transform: scale(1);
   }
   50% {
     transform: scale(1.12);
   }
   100% {
     transform: scale(1);
   }
 }
 .zoom-blur:hover img {
   transform: scale(1.3);
   filter: blur(3px);
 }
 .tilt-left:hover img {
   transform: rotate(-8deg) scale(1.1);
 }
 .tilt-right:hover img {
   transform: rotate(8deg) scale(1.1);
 }
 .mirror:hover img {
   transform: scaleX(-1);
 }
 /* ================= CORE EFFECTS ================= */
 .zoom:hover img {
   transform: scale(1.15);
 }
 .zoom-rotate:hover img {
   transform: scale(1.15) rotate(4deg);
 }
 .zoom-out img {
   transform: scale(1.2);
 }
 .zoom-out:hover img {
   transform: scale(1);
 }
 .slide-up:hover img {
   transform: translateY(-14px) scale(1.05);
 }
 .slide-down:hover img {
   transform: translateY(14px) scale(1.05);
 }
 .slide-left:hover img {
   transform: translateX(-14px) scale(1.05);
 }
 .slide-right:hover img {
   transform: translateX(14px) scale(1.05);
 }
 .rotate-left:hover img {
   transform: rotate(-6deg) scale(1.1);
 }
 .rotate-right:hover img {
   transform: rotate(6deg) scale(1.1);
 }
 .flip-x:hover img {
   transform: rotateX(180deg);
 }
 .flip-y:hover img {
   transform: rotateY(180deg);
 }
 .skew:hover img {
   transform: skew(-6deg) scale(1.1);
 }
 /* ================= FILTER FX ================= */
 .grayscale img {
   filter: grayscale(100%);
 }
 .grayscale:hover img {
   filter: grayscale(0) scale(1.05);
 }
 .blur:hover img {
   filter: blur(4px) scale(1.1);
 }
 .brightness:hover img {
   filter: brightness(1.35);
 }
 .contrast:hover img {
   filter: contrast(150%);
 }
 .sepia:hover img {
   filter: sepia(100%);
 }
 .invert:hover img {
   filter: invert(1);
 }
 .saturate:hover img {
   filter: saturate(220%);
 }
 .duotone:hover img {
   filter: grayscale(1) contrast(1.3);
 }
 /* ================= GLASS / LIQUID ================= */
 .glass::before {
   content: "";
   position: absolute;
   inset: 0;
   background: var(--glass-bg);
   border: 1px solid var(--glass-border);
   backdrop-filter: blur(0px);
   opacity: 0;
   transition: var(--speed) var(--ease);
   z-index: 1;
 }
 .glass:hover::before {
   opacity: 1;
   backdrop-filter: blur(10px);
 }
 .liquid:hover img {
   filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="l"><feTurbulence baseFrequency="0.015" numOctaves="2"/><feDisplacementMap scale="18"/></filter></svg>#l');
 }
 /* ================= SHINE / GLOW ================= */
 .shine::before {
   content: "";
   position: absolute;
   top: 0;
   left: -80%;
   width: 50%;
   height: 100%;
   background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .45), transparent);
   transform: skewX(-25deg);
   z-index: 3;
 }
 .shine:hover::before {
   left: 130%;
   transition: .9s;
 }
 .border-glow:hover {
   box-shadow: 0 0 0 2px rgba(var(--accent), .9), 0 0 40px rgba(var(--accent), .7);
 }
 .neon:hover {
   box-shadow: 0 0 60px rgba(34, 211, 238, .9);
 }
 .soft-shadow:hover {
   box-shadow: 0 40px 80px rgba(0, 0, 0, .6);
 }
 /* ================= 3D / MOTION ================= */
 .tilt:hover img {
   transform: perspective(800px) rotateX(8deg) rotateY(-8deg) scale(1.1);
 }
 .spin:hover img {
   transform: rotate(360deg) scale(1.1);
 }
 .pulse:hover img {
   animation: pulse 1.2s infinite;
 }
 @keyframes pulse {
   0%, 100% {
     transform: scale(1)
   }
   50% {
     transform: scale(1.14)
   }
 }
 .float:hover img {
   transform: translateY(-18px) scale(1.05);
 }
 /* ================= REVEALS ================= */
 .reveal-top::after {
   transform: translateY(-100%);
 }
 .reveal-top:hover::after {
   transform: translateY(0);
 }
 .reveal-bottom::after {
   transform: translateY(100%);
 }
 .reveal-bottom:hover::after {
   transform: translateY(0);
 }
 .reveal-left::after {
   transform: translateX(-100%);
 }
 .reveal-left:hover::after {
   transform: translateX(0);
 }
 .reveal-right::after {
   transform: translateX(100%);
 }
 .reveal-right:hover::after {
   transform: translateX(0);
 }
 /* ================= EXTRA PRO FX ================= */
 .fade-out:hover img {
   opacity: .25;
 }
 .fade-in img {
   opacity: .25;
 }
 .fade-in:hover img {
   opacity: 1;
 }
 .mirror:hover img {
   transform: scaleX(-1);
 }
 .tilt-left:hover img {
   transform: rotate(-10deg) scale(1.1);
 }
 .tilt-right:hover img {
   transform: rotate(10deg) scale(1.1);
 }
 .zoom-blur:hover img {
   transform: scale(1.35);
   filter: blur(3px);
 }