/* Shop Window: Christmas look (Shop front › Notices, pop-ups & Christmas › Christmas). Loaded only while it's on. */

/* Santa hat on the logo */
.sw-logo { position: relative; }
.sw-xmas-hat { position: absolute; width: 18%; height: auto; left: -5%; top: -34%; transform: rotate(-16deg); transform-origin: 50% 80%; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(19, 32, 43, .18)); }

/* Holly garland between the menu and the page: a green swag with holly and berries, red bows where it's tied.
   (Setting key is still "lights" so saved settings carry over. Drawn by rebuild/tools/garland.py (python3 garland.py <out dir>; copy garland.svg to ../image/xmas-garland.svg). A separate file, so it only downloads when the garland is on.) */
/* Takes no space of its own: it hangs over the top of the page (transparent between the branches), and is lifted
   so the bows overhang the bottom of the menu bar (above it: menu bar z-index 30). Hidden while a drop-down menu
   is open so it never covers it. Clicks go straight through it. */
.sw-xmas-lights { position: relative; z-index: 31; height: 0; pointer-events: none; }
body:has(.sw-nav-item.is-open) .sw-xmas-lights { visibility: hidden; }
.sw-xmas-lights::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 54px;
  background: url("../image/xmas-garland.svg") repeat-x 0 0 / 160px 54px; }
@media (max-width: 767px) { .sw-xmas-lights::before { top: -9px; height: 41px; background-size: 120px 41px; } }

/* Snowy edges: snow along the top of the first dark bar and of the footer */
.sw-xmas-snowcap #container > .sw-ticker:first-child, .sw-xmas-snowcap #container > .sw-topbar:first-child, .sw-xmas-snowcap .sw-footer { position: relative; }
.sw-xmas-snowcap #container > .sw-ticker:first-child, .sw-xmas-snowcap #container > .sw-topbar:first-child { padding-top: 6px; }
.sw-xmas-snowcap #container > .sw-ticker:first-child::before, .sw-xmas-snowcap #container > .sw-topbar:first-child::before, .sw-xmas-snowcap .sw-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; z-index: 2; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='12'%3E%3Cpath d='M0 0H60V4Q56 10 52 5Q46 3 41 5Q37 12 33 5Q26 2 19 4Q15 10 11 5Q6 3 0 4Z' fill='%23fff'/%3E%3C/svg%3E") repeat-x 0 0 / 60px 12px; }
.sw-xmas-snowcap .sw-footer { padding-top: 6px; }

/* Christmas scene above the footer */
.sw-xmas-scene { position: relative; margin-top: 48px; height: clamp(150px, 17vw, 210px); background: #EAF2FA; overflow: hidden; }
.sw-xmas-scene + .sw-footer { margin-top: 0; }
.sw-xmas-scene::before { content: ""; position: absolute; inset: 0; opacity: .55; pointer-events: none;
  background: radial-gradient(circle, #fff 1.4px, transparent 1.8px) 0 0 / 46px 38px, radial-gradient(circle, #fff 1px, transparent 1.4px) 23px 19px / 46px 38px; }
.sw-xmas-greeting { position: absolute; left: 0; right: 0; top: clamp(10px, 1.6vw, 20px); z-index: 2; margin: 0; padding-inline: var(--sw-gutter); text-align: center; font-family: var(--sw-display); font-weight: 800; font-size: clamp(16px, 2.2vw, 26px); line-height: 1.2; color: var(--sw-ink); }
.sw-xmas-cast { position: absolute; left: 0; right: 0; bottom: clamp(10px, 1.4vw, 16px); z-index: 1; display: flex; justify-content: center; align-items: flex-end; gap: clamp(4px, 2vw, 34px); padding-inline: 8px; }
.sw-xmas-cast svg { display: block; flex: 0 0 auto; overflow: visible; }
.sw-xmas-cast .x-tree { width: auto; aspect-ratio: 80 / 120; }
.sw-xmas-cast .x-big { height: clamp(78px, 9.5vw, 128px); }
.sw-xmas-cast .x-small { height: clamp(60px, 7vw, 92px); }
.sw-xmas-cast .x-snowman { height: clamp(62px, 7.4vw, 100px); aspect-ratio: 70 / 110; }
.sw-xmas-cast .x-santa { height: clamp(68px, 8.2vw, 112px); aspect-ratio: 96 / 120; }
.sw-xmas-cast .x-elf { height: clamp(46px, 5.4vw, 72px); aspect-ratio: 64 / 96; }
.sw-xmas-cast .x-presents { height: clamp(26px, 2.9vw, 40px); aspect-ratio: 70 / 50; }
.sw-xmas-ground { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(22px, 3vw, 36px); display: block; }
@media (max-width: 640px) { .sw-xmas-cast .x-wide { display: none; } .sw-xmas-scene { height: 150px; } .sw-xmas-greeting { padding-inline: 12px; } }

/* Falling snow (christmas.js); never covers clicks */
.sw-xmas-snow { position: fixed; inset: 0; z-index: 70; pointer-events: none; }

/* Santa's sleigh across the top, once per visit */
.sw-xmas-sleigh { position: fixed; left: 0; top: 110px; z-index: 72; width: clamp(150px, 18vw, 240px); color: #13202B; opacity: .9; pointer-events: none; transform: translateX(-110%); animation: sw-sleigh 11s linear forwards; }
.sw-xmas-sleigh svg { display: block; width: 100%; height: auto; animation: sw-bob 1.4s ease-in-out infinite alternate; }
@keyframes sw-sleigh { from { transform: translateX(-110%); } to { transform: translateX(calc(100vw + 10%)); } }
@keyframes sw-bob { from { transform: translateY(-6px) rotate(-2deg); } to { transform: translateY(6px) rotate(2deg); } }

/* The peeking elf, bottom right, once per visit */
.sw-xmas-peek { position: fixed; right: clamp(12px, 4vw, 48px); bottom: 0; z-index: 73; width: clamp(84px, 9vw, 120px); padding: 0; border: 0; background: none; cursor: pointer; transform: translateY(105%); transition: transform .6s cubic-bezier(.3, 1.4, .5, 1); }
.sw-xmas-peek svg { display: block; width: 100%; height: auto; }
.sw-xmas-peek.is-up { transform: translateY(12%); }
.sw-xmas-peek.is-up .sw-xmas-peek-hat { animation: sw-jingle .5s ease-in-out 3 .7s; transform-origin: 60px 46px; }
@keyframes sw-jingle { 0%, 100% { transform: rotate(0); } 33% { transform: rotate(-6deg); } 66% { transform: rotate(5deg); } }
body.sw-pop-open .sw-xmas-peek, body.sw-pop-open .sw-xmas-sleigh { display: none; }

@media (prefers-reduced-motion: reduce) {
  .sw-xmas-peek-hat { animation: none !important; }
  .sw-xmas-sleigh, .sw-xmas-snow { display: none; }
}
@media print { .sw-xmas-snow, .sw-xmas-sleigh, .sw-xmas-peek, .sw-xmas-lights, .sw-xmas-scene, .sw-xmas-hat { display: none !important; } }