/* perspective container */
.interactive-card {
  perspective: 900px;
  -webkit-perspective: 900px;
}

/* image target (3D transform) */
.interactive-card .img,
.interactive-card img {
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  will-change: transform;
  transition: box-shadow 0.18s linear, filter 0.18s linear;
  border-radius: var(--card-radius);
  display: block;
  width: 100%;
  height: auto;
}

/* card container */
.project-img,
.project-img-rev {
  position: relative;
  overflow: visible;
  border-radius: 20px;
  padding: 0.5rem;
  background: var(--pannel-box);
  -webkit-tap-highlight-color: transparent;
  z-index: var(--z-ui);
  will-change: transform;
}

/* small-tablet lift */
@media (min-width: 481px) and (max-width: 767px) {
  .project-img,
  .project-img-rev,
  #my-pic {
    transform: translateY(var(--card-lift));
    transition: transform 240ms ease;
    will-change: transform;
  }
}

/* decorative background layer */
.project-img .card-bg,
.project-img-rev .card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  border-radius: var(--card-radius);
  pointer-events: none;
  transform: scale(1.03);
}

/* blur / soft background */
.project-img .card-blur,
.project-img-rev .card-blur {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  border-radius: var(--card-radius);
  filter: blur(6px);
  opacity: 0.45;
  transform: scale(1.06);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* light overlay */
.project-img .circleLight,
.project-img-rev .circleLight {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: var(--card-radius);
  transition: opacity 0.14s linear, background 0.08s linear;
  opacity: 0;
  mix-blend-mode: screen;
  will-change: background, opacity, filter;
  filter: blur(12px);
}

/* mobile adjustments */
@media (max-width: 480px) {
  :root {
    --card-lateral: 10px;
    --card-lift: -10px;
  }
  .project-img .card-blur,
  .project-img-rev .card-blur {
    filter: blur(4px);
    opacity: 0.35;
    transform: scale(1.03);
  }
  .project-img .circleLight,
  .project-img-rev .circleLight {
    opacity: 0.45;
  }
  .interactive-card .circleLight {
    filter: blur(10px);
  }
  .interactive-card .img {
    transition: none;
  }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .project-img .circleLight,
  .project-img-rev .circleLight {
    display: none;
  }
  .project-img .card-blur,
  .project-img-rev .card-blur {
    filter: none;
    opacity: 0.2;
  }
  .project-img .img,
  .project-img-rev .img {
    transition: none;
    transform: none;
  }
  .interactive-card .circleLight {
    display: none;
  }
  .interactive-card .card-blur {
    filter: none;
    opacity: 0.25;
  }
  .interactive-card .img {
    transition: none;
    transform: none;
    box-shadow: none;
  }
}

/* cursor */
.project-img,
.project-img-rev,
.project-img .img,
.project-img-rev .img,
.interactive-card {
  cursor: pointer;
  grid-column: 2;
}

@media (min-width: 768px) {
  .project-img-rev {
    grid-column: 1;
  }
}

/* small glimmer animation */
@keyframes glimmer {
  0% {
    text-shadow: none;
    filter: brightness(1);
    transform: translateX(0);
  }
  25% {
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
    filter: brightness(1.2);
    transform: translateX(-6px);
  }
  50% {
    text-shadow: 0 0 14px rgba(255, 255, 255, 1);
    filter: brightness(1.35);
    transform: translateX(6px);
  }
  75% {
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
    filter: brightness(1.2);
    transform: translateX(-4px);
  }
  100% {
    text-shadow: none;
    filter: brightness(1);
    transform: translateX(0);
  }
}

.tremble-shine {
  animation: glimmer 760ms cubic-bezier(0.2, 0.8, 0.3, 1);
  will-change: transform, text-shadow, filter;
}

/* Utility class to apply will-change while interacting */
.card-interact-will-change {
  will-change: transform;
}