/* Isolated decoration; foreground placement clears artwork, text and controls. */
.pg-seasonal-background {
  position: absolute;
  inset: 0 0 auto;
  height: min(100svh, 960px);
  z-index: -1;
  overflow: hidden;
  contain: strict;
  pointer-events: none;
  user-select: none;
}

.pg-seasonal-background[data-placement="foreground"] {
  z-index: 2;
  visibility: hidden;
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
}

.pg-seasonal-background[data-placement="foreground"][data-protected="true"] {
  visibility: visible;
}

.pg-seasonal-background[data-placement="foreground"]::before {
  display: none;
}

.pg-seasonal-background::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.045;
  background:
    radial-gradient(ellipse at 0 0, var(--season-wash-a), transparent 55%),
    radial-gradient(ellipse at 100% 100%, var(--season-wash-b), transparent 55%);
}

.pg-seasonal-particle {
  position: absolute;
  top: -2rem;
  width: var(--season-size);
  height: var(--season-size);
  color: var(--season-color);
  opacity: 0;
  animation: pg-seasonal-fall var(--season-duration) cubic-bezier(0.35, 0.33, 0.65, 0.67) var(--season-delay) infinite;
}

.pg-seasonal-flutter {
  display: block;
  width: 100%;
  height: 100%;
  animation: pg-seasonal-flutter var(--season-flutter-duration, 6s) ease-in-out var(--season-delay) infinite;
}

.pg-seasonal-particle svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pg-seasonal-particle[data-shape="dot"] .pg-seasonal-flutter {
  border-radius: 50%;
  background: currentColor;
  scale: 0.7;
}

.pg-seasonal-background[data-theme="christmas"] .pg-seasonal-particle[data-shape="dot"] .pg-seasonal-flutter {
  background: radial-gradient(circle at 35% 30%, #fff, #c5dfe8 65%, #83afc0);
}

.pg-seasonal-particle[data-shape="petal"] .pg-seasonal-flutter {
  border-radius: 70% 10% 70% 25%;
  background: currentColor;
}

.pg-seasonal-particle[data-shape="sparkle"] svg,
.pg-seasonal-particle[data-shape="leaf"] svg {
  fill: currentColor;
  stroke-width: 0.5;
}

@keyframes pg-seasonal-fall {
  0% { transform: translate3d(0, -2rem, 0); opacity: 0; }
  12%, 85% { opacity: var(--season-alpha, 0.75); }
  100% { transform: translate3d(0, var(--season-fall-distance, calc(100svh + 4rem)), 0); opacity: 0; }
}

@keyframes pg-seasonal-flutter {
  0%, 100% { transform: translate3d(calc(var(--season-drift) * -0.4), 0, 0) rotate(calc(var(--season-turn) * -0.1)); }
  50% { transform: translate3d(calc(var(--season-drift) * 0.6), 0, 0) rotate(calc(var(--season-turn) * 0.1)); }
}

[data-christmas-banner-scene][data-paused="true"] *,
[data-christmas-banner-scene][data-offscreen="true"] *,
.pg-seasonal-background[data-offscreen="true"] *,
.pg-seasonal-background[data-paused="true"] .pg-seasonal-particle,
.pg-seasonal-background[data-paused="true"] .pg-seasonal-flutter,
.pg-seasonal-background[data-paused="true"] .pg-christmas-light,
.pg-seasonal-background[data-paused="true"] .pg-christmas-ornament,
body.cart-open .pg-seasonal-particle,
body.cart-open .pg-seasonal-flutter,
body.cart-open .pg-christmas-light,
body.cart-open .pg-christmas-ornament {
  animation-play-state: paused;
}

body.cart-open .pg-seasonal-background[data-placement] {
  visibility: hidden;
}

@media (forced-colors: active), print {
  .pg-seasonal-background, [data-christmas-banner-scene] { display: none; }
  .pg-seasonal-particle { animation: none; }
}

.pg-christmas-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

[data-christmas-banner-scene] {
  position: absolute;
  inset: 0;
  overflow: hidden;
  --season-header-edge: 0px;
  --season-fall-distance: 400px;
  pointer-events: none;
}

[data-christmas-banner-scene] .pg-christmas-greenery { width: 145px; }
[data-christmas-banner-scene] .pg-christmas-ornament { width: 24px; height: 96px; }
[data-christmas-banner-scene] .pg-christmas-bauble { height: 28px; }
[data-christmas-banner-scene] .pg-christmas-ornament::before { bottom: 26px; }

.pg-christmas-greenery {
  position: absolute;
  top: calc(var(--season-header-edge, 70px) - 3px);
  width: clamp(120px, 19vw, 245px);
  height: auto;
}

.pg-christmas-greenery svg { display: block; width: 100%; height: auto; }
.pg-christmas-greenery-left { left: -12px; }
.pg-christmas-greenery-right { right: -12px; transform: scaleX(-1); }

.pg-christmas-lights {
  position: absolute;
  top: calc(var(--season-header-edge, 70px) - 6px);
  left: 0;
  right: 0;
  height: 65px;
}

.pg-christmas-lights > svg { display: block; width: 100%; height: 65px; }

.pg-christmas-light {
  position: absolute;
  width: 7px;
  height: 11px;
  transform: translateX(-50%);
  border-radius: 35% 35% 50% 50%;
  background: radial-gradient(ellipse at 40% 35%, #fffef0 10%, #ffe5a4 50%, #d9aa56);
  box-shadow: 0 0 5px #fff3c9, 0 0 15px rgba(215, 168, 70, 0.7);
  animation: pg-christmas-twinkle var(--light-duration, 5.6s) ease-in-out var(--light-delay) infinite;
}

.pg-christmas-light::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 1px;
  width: 5px;
  height: 4px;
  border-radius: 1px;
  background: #7d7850;
}

.pg-christmas-light::after {
  content: "";
  position: absolute;
  inset: -9px;
  background: radial-gradient(ellipse, rgba(247, 209, 125, 0.45), transparent 70%);
}

.pg-christmas-ornament {
  position: absolute;
  top: calc(var(--season-header-edge, 70px) + 9px);
  width: 34px;
  height: 104px;
  transform-origin: 50% 0;
  animation: pg-christmas-sway 8s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}

.pg-christmas-ornament::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 36px;
  left: 50%;
  width: 1px;
  background: linear-gradient(#c4ab6b, #aa8b4b);
}

.pg-christmas-ornament-red { left: clamp(4px, 0.75vw, 12px); }
.pg-christmas-ornament-gold { right: clamp(4px, 0.75vw, 12px); height: 132px; animation-delay: -4s; }

.pg-christmas-bauble {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 38px;
  border-radius: 47% 47% 50% 50%;
  background: radial-gradient(ellipse at 29% 24%, #f8c3b2 0%, #b44c52 17%, #8a2638 55%, #4c1727 100%);
  box-shadow: inset -3px -4px 7px rgba(25, 15, 20, 0.18);
}

.pg-christmas-bauble::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 33%;
  width: 34%;
  height: 7px;
  border: 1px solid #a7833e;
  border-radius: 3px 3px 1px 1px;
  background: repeating-linear-gradient(90deg, #c6a55c 0 2px, #e6cd8b 2px 4px);
}

.pg-christmas-ornament-gold .pg-christmas-bauble {
  background: radial-gradient(ellipse at 29% 24%, #fffbe1 0%, #e6cb81 18%, #ba9345 57%, #80622f 100%);
}

.pg-christmas-bauble::after {
  content: "";
  position: absolute;
  top: 36%;
  left: 3%;
  width: 94%;
  height: 24%;
  border-top: 1px solid rgba(242, 221, 170, 0.8);
  border-bottom: 1px solid rgba(242, 221, 170, 0.55);
  border-radius: 50%;
  background: repeating-linear-gradient(90deg, transparent 0 5px, rgba(249, 227, 177, 0.4) 5px 6px, transparent 6px 10px);
  transform: rotate(-9deg);
}

@keyframes pg-christmas-twinkle {
  0%, 100% { opacity: 0.72; }
  40%, 65% { opacity: 1; }
}

@keyframes pg-christmas-sway {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}

@media (max-width: 700px) {
  .pg-christmas-greenery { width: 125px; }
  .pg-christmas-lights { top: calc(var(--season-header-edge, 70px) - 3px); }
  .pg-christmas-ornament { width: 23px; height: 68px; }
  .pg-christmas-ornament-gold { height: 94px; }
  .pg-christmas-bauble { height: 26px; }
  .pg-christmas-ornament::before { bottom: 24px; }
  .pg-christmas-light { width: 7px; height: 10px; }
  .pg-christmas-light::before { left: 0; width: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .pg-seasonal-particle { display: none; animation: none; }
  .pg-seasonal-flutter { animation: none; }
  .pg-christmas-light, .pg-christmas-ornament { animation: none; }
}