/* New Year ornaments belong to the RP Helper app preview, not the page viewport. */
body[data-holiday-theme="new_year"] .holiday-app-window--new-year {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  z-index: 5 !important;
}

body[data-holiday-theme="new_year"] .holiday-app-window--new-year > img:not(.holiday-app-window-decor) {
  position: relative;
  z-index: 1;
}

body[data-holiday-theme="new_year"] .holiday-app-window-decor {
  position: absolute !important;
  display: block !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

/* A soft, wavy snow shelf rests directly on the app window's top frame. */
body[data-holiday-theme="new_year"] .holiday-app-window-snow {
  z-index: 8 !important;
  top: -2px !important;
  left: -0.65% !important;
  width: 101.3% !important;
  height: clamp(18px, 3.6vw, 34px) !important;
  background: url("/assets/images/holiday-app-snow-cap.svg?v=20261103-app-snow-accumulate-2") center top / 100% 100% no-repeat !important;
  opacity: .12;
  transform: scaleY(.025);
  transform-origin: 50% 0;
  filter: drop-shadow(0 2px 3px rgba(4, 12, 28, .28)) blur(1.4px);
}

/* Snow gathers from the app frame and remains as a soft, wavy drift. */
body[data-holiday-theme="new_year"] .holiday-app-window-snow.is-settled {
  animation: holiday-app-snow-build-up 4.8s cubic-bezier(.18,.72,.22,1) forwards !important;
}
@keyframes holiday-app-snow-build-up {
  0% { opacity: .12; transform: scaleY(.025); filter: drop-shadow(0 2px 3px rgba(4,12,28,.28)) blur(1.4px); }
  24% { opacity: .58; transform: scaleY(.34); filter: drop-shadow(0 3px 4px rgba(4,12,28,.3)) blur(.7px); }
  72% { opacity: .98; transform: scaleY(1.06); filter: drop-shadow(0 4px 6px rgba(4,12,28,.34)) blur(0); }
  100% { opacity: .98; transform: scaleY(1); filter: drop-shadow(0 3px 5px rgba(4,12,28,.38)) blur(0); }
}

/* The Santa hat sits on the upper-right corner of the actual app preview. */
body[data-holiday-theme="new_year"] .holiday-app-window-hat {
  z-index: 10 !important;
  top: -9% !important;
  right: -0.6% !important;
  width: clamp(56px, 13%, 118px) !important;
  height: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  filter: drop-shadow(0 5px 9px rgba(0, 0, 0, .32)) drop-shadow(0 0 9px rgba(176, 218, 255, .2)) !important;
  transform: rotate(13deg);
  transform-origin: 78% 88% !important;
  animation: holiday-app-hat-sway 6.8s ease-in-out infinite !important;
}

body[data-holiday-theme="new_year"] .holiday-app-window-sparkles {
  z-index: 9 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 13% !important;
  background:
    radial-gradient(circle at 12% 62%, rgba(255,255,255,.95) 0 1px, transparent 2px),
    radial-gradient(circle at 38% 24%, rgba(222,243,255,.9) 0 1px, transparent 2px),
    radial-gradient(circle at 71% 48%, rgba(255,255,255,.82) 0 1.2px, transparent 2px),
    radial-gradient(circle at 89% 72%, rgba(206,231,255,.9) 0 1px, transparent 2px) !important;
  opacity: .68 !important;
  animation: holiday-app-sparkle 3.8s ease-in-out infinite alternate !important;
}

@keyframes holiday-app-hat-sway {
  0%, 100% { transform: rotate(13deg) translateY(0); }
  50% { transform: rotate(8deg) translateY(2px); }
}
@keyframes holiday-app-sparkle {
  from { opacity: .38; }
  to { opacity: .9; }
}

@media (max-width: 760px) {
  body[data-holiday-theme="new_year"] .holiday-app-window-hat {
    top: -8% !important;
    right: -0.5% !important;
    width: clamp(48px, 13%, 72px) !important;
  }
  body[data-holiday-theme="new_year"] .holiday-app-window-snow {
    height: 18px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-holiday-theme="new_year"] .holiday-app-window-hat,
  body[data-holiday-theme="new_year"] .holiday-app-window-sparkles {
    animation: none !important;
  }
  body[data-holiday-theme="new_year"] .holiday-app-window-snow {
    animation: none !important;
    opacity: .98 !important;
    transform: scaleY(1) !important;
    filter: drop-shadow(0 3px 5px rgba(4, 12, 28, .38)) !important;
  }
}