.card-hover-effect {
  --dfk-card-y: 0px;
  --dfk-card-rotate: 0deg;
  --dfk-card-hover-y: -12px;
  --dfk-card-hover-rotate: 4deg;
  --dfk-card-hover-scale: 1.045;
  position: relative;
  transform:
    perspective(900px)
    translate3d(0, var(--dfk-card-y), 0)
    rotate(var(--dfk-card-rotate))
    scale(1);
  transform-style: preserve-3d;
  transform-origin: center;
  backface-visibility: hidden;
  outline: 1px solid rgba(245, 213, 108, 0.16);
  outline-offset: -1px;
  filter: saturate(1.04) contrast(1.02);
  box-shadow:
    0 10px 18px -14px rgba(0, 0, 0, 0.9),
    0 30px 65px -38px rgba(0, 0, 0, 0.92),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    filter 0.28s ease,
    opacity 0.38s ease;
  will-change: transform, box-shadow, filter;
}

.card-hover-effect:hover,
.card-hover-effect:focus-visible {
  transform:
    perspective(900px)
    translate3d(0, calc(var(--dfk-card-y) + var(--dfk-card-hover-y)), 34px)
    rotate(calc(var(--dfk-card-rotate) + var(--dfk-card-hover-rotate)))
    scale(var(--dfk-card-hover-scale));
  filter: saturate(1.1) contrast(1.05) brightness(1.04);
  box-shadow:
    0 18px 24px -18px rgba(0, 0, 0, 0.95),
    0 42px 90px -42px rgba(0, 0, 0, 0.96),
    0 0 24px rgba(245, 213, 108, 0.28),
    0 0 54px rgba(15, 107, 153, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  z-index: 4;
}

.hero-gallery > img.card-hover-effect:nth-child(1) {
  --dfk-card-hover-rotate: -3deg;
}

.hero-gallery > img.card-hover-effect:nth-child(2) {
  --dfk-card-y: 12px;
  --dfk-card-rotate: 4deg;
  --dfk-card-hover-rotate: 3deg;
}

.hero-gallery > img.card-hover-effect:nth-child(3) {
  --dfk-card-y: -12px;
  --dfk-card-rotate: -3deg;
  --dfk-card-hover-rotate: -4deg;
}

.hero-gallery > img.card-hover-effect:nth-child(4) {
  --dfk-card-y: 10px;
  --dfk-card-rotate: 2deg;
  --dfk-card-hover-rotate: 4deg;
}

.card-hover-effect.card-reveal {
  opacity: 0;
  transform:
    perspective(900px)
    translate3d(0, calc(var(--dfk-card-y) + 18px), 0)
    rotate(var(--dfk-card-rotate))
    scale(0.985);
}

.card-hover-effect.card-reveal.is-visible {
  opacity: 1;
  transform:
    perspective(900px)
    translate3d(0, var(--dfk-card-y), 0)
    rotate(var(--dfk-card-rotate))
    scale(1);
}

.card-hover-effect.card-reveal.is-visible:hover,
.card-hover-effect.card-reveal.is-visible:focus-visible {
  transform:
    perspective(900px)
    translate3d(0, calc(var(--dfk-card-y) + var(--dfk-card-hover-y)), 34px)
    rotate(calc(var(--dfk-card-rotate) + var(--dfk-card-hover-rotate)))
    scale(var(--dfk-card-hover-scale));
}

.hero-gallery > img.card-reveal:nth-child(1) { transition-delay: 0.02s; }
.hero-gallery > img.card-reveal:nth-child(2) { transition-delay: 0.08s; }
.hero-gallery > img.card-reveal:nth-child(3) { transition-delay: 0.14s; }
.hero-gallery > img.card-reveal:nth-child(4) { transition-delay: 0.2s; }

@media (hover: none) {
  .card-hover-effect:hover,
  .card-hover-effect.card-reveal.is-visible:hover {
    transform:
      perspective(900px)
      translate3d(0, var(--dfk-card-y), 0)
      rotate(var(--dfk-card-rotate))
      scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-hover-effect,
  .card-hover-effect.card-reveal,
  .card-hover-effect.card-reveal.is-visible,
  .card-hover-effect.card-reveal.is-visible:hover,
  .card-hover-effect.card-reveal.is-visible:focus-visible {
    opacity: 1;
    transition: none;
    transform:
      perspective(900px)
      translate3d(0, var(--dfk-card-y), 0)
      rotate(var(--dfk-card-rotate))
      scale(1);
  }
}