/* The normal background remains in styles.css and the original asset. */
.hero-season-label, .christmas-ornament-scene { display: none; }
html[data-season="christmas"] body::before {
  background-image: url("assets/salvatore-christmas-background.webp");
}
html[data-season="christmas"] .hero-season-label {
  position: absolute;
  z-index: 2;
  top: -22px;
  left: 50%;
  display: inline-block;
  width: max-content;
  max-width: 100%;
  padding: 7px 15px;
  border: 1px solid #cdbb94;
  border-radius: 999px;
  background: var(--cream);
  color: #32634a;
  font: 400 27px/1 "Allura", cursive;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}

html[data-season="christmas"] .hero-copy { position:relative; }
html[data-season="christmas"] .christmas-ornament-scene { display:block; position:absolute; left:20%; top:calc(100% + 10px); width:60px; height:86px; pointer-events:none; }
html[data-season="christmas"] .christmas-ornament-group { position:absolute; top:0; left:6px; width:48px; height:82px; transform-origin:24px 0; animation:salvatore-christmas-sway 5s ease-in-out infinite; }
html[data-season="christmas"] .christmas-ornament-cord { position:absolute; left:23px; top:0; height:31px; width:1px; background:#b8995d; }
html[data-season="christmas"] .christmas-ornament-loop { position:absolute; top:29px; left:20px; width:7px; height:8px; border:1px solid #b8995d; border-radius:50%; }
html[data-season="christmas"] .christmas-ornament-cap { position:absolute; top:35px; left:16px; width:16px; height:6px; border-radius:3px 3px 0 0; background:#c5a66f; }
html[data-season="christmas"] .christmas-bauble { position:absolute; top:40px; left:6px; display:grid; place-items:center; width:36px; height:38px; border-radius:48% 48% 50% 50%; background:linear-gradient(115deg,#d08070,#ac4540); box-shadow:inset -5px -2px 0 #8a302222; }
html[data-season="christmas"] .christmas-bauble::before { content:''; position:absolute; top:5px; left:6px; width:7px; height:12px; background:#ffffff48; border-radius:50%; transform:rotate(25deg); }
html[data-season="christmas"] .christmas-bauble-heart { position:relative; color:#fff4dc; font:400 18px/1 Georgia,serif; }
@keyframes salvatore-christmas-sway { 0%,100% { transform:rotate(-7deg); } 50% { transform:rotate(7deg); } }
@media(max-width:860px) {
 html[data-season="christmas"] .christmas-ornament-scene { top:calc(100% + 4px); height:62px; }
 html[data-season="christmas"] .christmas-ornament-group { scale:.72; }
}
@media(max-width:600px) {
 html[data-season="christmas"] .christmas-ornament-scene { left:-7px; top:calc(100% - 10px); }
 html[data-season="christmas"] .christmas-ornament-group { scale:.9; }
}
@media(prefers-reduced-motion:reduce) {
 html[data-season="christmas"] .christmas-ornament-group { animation:none; transform:rotate(0); }
}