/* Shared treatment for rental prices and photo package prices. */
@property --price-ring-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.photo-package-card {
  position: relative;
  isolation: isolate;
  border-color: #f58220 !important;
  box-shadow: 0 8px 18px #153e6320, 0 20px 38px #153e631f;
  animation: price-card-shadow 4.8s ease-in-out infinite;
  transition: transform .28s ease, box-shadow .28s ease;
}
.photo-package-card:nth-child(2n) { animation-delay: -.9s; }
.photo-package-card:nth-child(3n) { animation-delay: -1.8s; }
.photo-package-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  padding: 3px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  background: conic-gradient(from var(--price-ring-angle), #f58220 0deg, #ffb44a 75deg, #fff0cb 105deg, #ff9b21 140deg, #e86809 230deg, #f58220 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: price-card-ring 5s linear infinite;
}
.photo-package-card:nth-child(2n)::before { animation-delay: -1.25s; }
.photo-package-card:nth-child(3n)::before { animation-delay: -2.5s; }
.photo-package-card.price-animation-paused,
.photo-package-card.price-animation-paused::before { animation-play-state: paused; }
@keyframes price-card-ring { to { --price-ring-angle: 360deg; } }
@keyframes price-card-shadow {
  0%, 100% { box-shadow: 0 8px 18px #153e6320, 0 20px 38px #153e631f; }
  50% { box-shadow: 0 10px 24px #153e6329, 0 24px 44px #f582202b; }
}
@media (hover: hover) and (pointer: fine) {
  .photo-package-grid > .photo-package-card:hover {
    transform: translateY(-5px) !important;
    animation: none;
    box-shadow: 0 14px 26px #153e6329, 0 28px 48px #f5822033;
  }
}
.photo-package-card:focus-within {
  box-shadow: 0 12px 26px #153e6329, 0 0 0 4px #f5822030;
}
@media (prefers-reduced-motion: reduce) {
  .photo-package-card, .photo-package-card::before { animation: none !important; transition: none !important; }
  .photo-package-grid > .photo-package-card:hover { transform: none !important; }
}