:root {
  --card-3d-tilt: 8deg;
  --card-3d-depth: 12px;
  --card-3d-shadow: 0 18px 38px rgba(0, 0, 0, 0.12);
  --card-3d-shadow-hover: 0 24px 55px rgba(0, 0, 0, 0.16);
  --card-3d-transition: 360ms ease-in-out;
}

main {
  perspective: 1100px;
}

.service-card,
.package-category-card,
.pkg-card,
.package-subcard {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
  transform: translateZ(var(--tz, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform var(--card-3d-transition), box-shadow var(--card-3d-transition);
}

.service-card::after,
.package-category-card::after,
.pkg-card::after,
.package-subcard::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transform: translateZ(2px);
  background: radial-gradient(circle at var(--shine-x, 50%) var(--shine-y, 50%), rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 58%);
  transition: opacity 300ms ease-in-out;
}

.service-card:hover,
.package-category-card:hover,
.pkg-card:hover,
.package-subcard:hover,
.service-card.is-tilting,
.package-category-card.is-tilting,
.pkg-card.is-tilting,
.package-subcard.is-tilting {
  --tz: 8px;
  --rx: 2deg;
  --ry: -2deg;
  box-shadow: var(--card-3d-shadow-hover);
}

.service-card:hover::after,
.package-category-card:hover::after,
.pkg-card:hover::after,
.package-subcard:hover::after,
.service-card.is-tilting::after,
.package-category-card.is-tilting::after,
.pkg-card.is-tilting::after,
.package-subcard.is-tilting::after {
  opacity: 1;
}

.btn,
button,
.pkg-tab {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 220ms ease-in-out, box-shadow 220ms ease-in-out;
}

.btn:hover,
button:hover,
.pkg-tab:hover {
  transform: translateY(-2px) translateZ(4px);
}

.btn:active,
button:active,
.pkg-tab:active {
  transform: translateY(0) translateZ(0) scale(0.98);
}

.reveal-3d {
  opacity: 0;
  transform: translateY(18px) rotateX(6deg);
  transition: opacity 500ms ease-in-out, transform 520ms ease-in-out;
  transform-style: preserve-3d;
  will-change: opacity, transform;
}

.reveal-3d.is-revealed {
  opacity: 1;
  transform: translateY(0) rotateX(0deg);
}

@media (prefers-reduced-motion: reduce) {
  .service-card,
  .package-category-card,
  .pkg-card,
  .package-subcard,
  .btn,
  button,
  .pkg-tab,
  .reveal-3d {
    transition: none !important;
    transform: none !important;
  }

  .service-card::after,
  .package-category-card::after,
  .pkg-card::after,
  .package-subcard::after {
    opacity: 0 !important;
  }
}