/* Lights are aligned to the original Santa photograph, including its cover crop. */
.santa-lit-photo { position: relative; isolation: isolate; }
.santa-lit-photo > .santa-light-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
  transition: transform .6s;
}
.santa-light-cluster { opacity: .16; }
.santa-light-star { transform-box: fill-box; transform-origin: center; opacity: .65; }
.santa-candle-glow { opacity: .2; }
.santa-candle-flame { opacity: .35; transform-box: fill-box; transform-origin: center bottom; }
.santa-lit-photo :is(.image-badge, .card-badge, .gallery-expand) { z-index: 1; }
.photo-stage > .santa-light-overlay { inset: auto; transition: none; border-radius: 5px; }
.category-tile:hover > .santa-light-overlay { transform: scale(1.05); }
.tour-card:hover .card-image > .santa-light-overlay,
.trip-find-image:hover > .santa-light-overlay { transform: scale(1.04); }
.trip-find-image > .santa-light-overlay { transition-duration: .3s; }
.gallery-open > .santa-light-overlay { transition-duration: .5s; }
.gallery-open:hover > .santa-light-overlay { transform: scale(1.045); }

@media (prefers-reduced-motion: no-preference) {
  .santa-light-cluster {
    animation: santa-light-twinkle var(--twinkle-duration, 3.3s) ease-in-out var(--twinkle-delay, 0s) infinite;
  }
  .santa-light-star {
    animation: santa-star-shimmer var(--twinkle-duration, 3.3s) ease-in-out var(--twinkle-delay, 0s) infinite;
  }
  .santa-candle-glow {
    animation: santa-candle-warmth 2.7s ease-in-out var(--candle-delay, 0s) infinite;
  }
  .santa-candle-flame {
    animation: santa-candle-flicker 1.9s ease-in-out var(--candle-delay, 0s) infinite;
  }
  .santa-light-overlay :is(.santa-light-cluster, .santa-light-star, .santa-candle-glow, .santa-candle-flame) { animation-play-state: paused; }
  .santa-lit-photo.is-twinkling .santa-light-overlay :is(.santa-light-cluster, .santa-light-star, .santa-candle-glow, .santa-candle-flame) { animation-play-state: running; }
}
@media (prefers-reduced-motion: reduce) {
  .santa-lit-photo > .santa-light-overlay { transition: none; }
}
@keyframes santa-light-twinkle {
  0%, 100% { opacity: .04; }
  42% { opacity: 1; }
  65% { opacity: .65; }
  83% { opacity: .12; }
}
@keyframes santa-star-shimmer {
  0%, 100% { opacity: .12; transform: scale(.7) rotate(-7deg); }
  42% { opacity: 1; transform: scale(1.18) rotate(7deg); }
  70% { opacity: .4; transform: scale(.88) rotate(0deg); }
}
@keyframes santa-candle-warmth {
  0%, 100% { opacity: .18; }
  38% { opacity: .74; }
  68% { opacity: .32; }
}
@keyframes santa-candle-flicker {
  0%, 100% { opacity: .55; transform: scale(.9, 1) skewX(-3deg); }
  34% { opacity: .95; transform: scale(1.08, 1.12) skewX(3deg); }
  67% { opacity: .68; transform: scale(.96, .93) skewX(-1deg); }
}

.polar-video-link {
  position: absolute;
  top: clamp(12px, 2vw, 22px);
  right: clamp(12px, 2vw, 22px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid #ffffff65;
  border-radius: 5px;
  background: #173433f2;
  color: #fffdf4;
  font-size: 12px;
  font-weight: 650;
}

.polar-video-link:hover {
  background: #214841;
}

.polar-video-link:focus-visible,
.polar-video-dialog :is(a, button):focus-visible {
  outline: 3px solid #e4ab69;
  outline-offset: 3px;
}

.polar-video-dialog {
  width: min(860px, calc(100% - 28px));
  max-height: calc(100% - 28px);
  padding: clamp(12px, 3vw, 24px);
  border: 0;
  border-radius: 9px;
  background: #173433;
  color: #fffdf4;
}

.polar-video-dialog::backdrop {
  background: #071717d9;
}

.polar-video-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.polar-video-header h2 {
  margin: 0;
  color: inherit;
  font-size: clamp(19px, 3vw, 30px);
}

.polar-video-header button {
  min-height: 44px;
  padding: 7px 12px;
  border: 1px solid #ffffff60;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.polar-video-frame {
  aspect-ratio: 16 / 9;
  background: #0b1818;
}

.polar-video-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.polar-video-dialog p {
  margin: 10px 0 0;
  font-size: 13px;
}

.polar-video-dialog p a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}