/* Seasonal decor. seasons.js sets <html data-theme="…">; each theme swaps the room's palette (the CSS variables
   declared in style.css), the scene outside the window, and a few props around the radio. */

/* ---------- palettes ---------- */
html[data-theme="spring"] {
  --wall-1: #51705a; --wall-2: #668a6c; --wall-3: #54735d;
  --cur-a: #e6d28e; --cur-b: #bfa85c; --cur-c: #f2e3a8;
  --sky-1: #262e5e; --sky-2: #66579a; --sky-3: #e59aa8; --moon: #fff6e0; --moon-glow: rgba(255, 246, 224, .35);
  --rug-1: #7c3a50; --rug-2: #612c40; --rug-3: #4d2234; --rug-4: #3a1a28;
  --ch-d: #26402b; --ch-m: #3f6a45; --ch-l: #51835a; --ch-wd: #2f4f35; --ch-dot: #264a2c;
  --shade-a: #e8cc8c; --shade-b: #fff3c8; --shade-c: #f1d59c; --lamp-rgb: 255, 228, 165;
  --vase: #4a78a8; --wr-1: #6aa05a; --wr-2: #f4b6c8; --wr-3: #fff3b8; --bow: #f08fb0;
}
html[data-theme="summer"] {
  --wall-1: #3c625f; --wall-2: #4b7d77; --wall-3: #3e6662;
  --cur-a: #dccfa6; --cur-b: #b9a97b; --cur-c: #eadfbe;
  --sky-1: #2a2860; --sky-2: #a24b6c; --sky-3: #f2a45c; --moon: #ffe8c0; --moon-glow: rgba(255, 232, 192, .3);
  --rug-1: #245f6b; --rug-2: #1b4a55; --rug-3: #173e48; --rug-4: #10303a; --rug-gold: #d0a850;
  --ch-d: #122c3e; --ch-m: #245672; --ch-l: #2f6b8a; --ch-wd: #183a50; --ch-dot: #143549;
  --shade-a: #f0c070; --shade-b: #ffe9b0; --shade-c: #f2c97c; --lamp-rgb: 255, 214, 140;
  --vase: #b5602a;
}
html[data-theme="autumn"], html[data-theme="thanksgiving"] {
  --wall-1: #4e4a2e; --wall-2: #625c38; --wall-3: #524c30;
  --cur-a: #b3601f; --cur-b: #7e3f12; --cur-c: #cf7a2c;
  --sky-1: #1a1330; --sky-2: #5a2f3a; --sky-3: #c26a2a; --moon: #f6a53c; --moon-glow: rgba(246, 165, 60, .45); --moon-size: 50rem;
  --rug-1: #6a2e14; --rug-2: #4e2210; --rug-3: #3e1a0c; --rug-4: #2f1408;
  --ch-d: #4a1e0c; --ch-m: #8a421a; --ch-l: #a85422; --ch-wd: #5a2610; --ch-dot: #4a1e0c;
  --shade-a: #e0902e; --shade-b: #ffd080; --shade-c: #e8a040; --lamp-rgb: 255, 176, 90;
  --wr-1: #d9641a; --wr-2: #e8a22e; --wr-3: #8a4a14; --bow: #7a2a10;
}
html[data-theme="winter"] {
  --wall-1: #2c3f4c; --wall-2: #3b5566; --wall-3: #2f4452;
  --cur-a: #2f4f86; --cur-b: #1f3763; --cur-c: #3d62a0;
  --sky-1: #0a1630; --sky-2: #173055; --sky-3: #2e4f78; --moon: #eaf3ff; --moon-glow: rgba(220, 235, 255, .4);
}
html[data-theme="halloween"] {
  --wall-1: #2e2a3a; --wall-2: #3d3650; --wall-3: #302b40;
  --cur-a: #4a2a62; --cur-b: #2c1638; --cur-c: #5f3680;
  --sky-1: #14092a; --sky-2: #3a1d5c; --sky-3: #b8531e; --moon: #ffa83e; --moon-glow: rgba(255, 168, 62, .5); --moon-size: 56rem;
  --rug-1: #3a1230; --rug-2: #2a0c24; --rug-3: #200a1c; --rug-4: #160614; --rug-gold: #e08a2a; --rug-gold2: #f0a548;
  --ch-d: #24122f; --ch-m: #4e2a68; --ch-l: #633680; --ch-wd: #2f1740; --ch-dot: #24122f;
  --shade-a: #e08a2a; --shade-b: #ffc060; --shade-c: #e89a3a; --lamp-rgb: 255, 150, 50;
}
html[data-theme="christmas"] {
  --wall-1: #28463a; --wall-2: #33604a; --wall-3: #2a4a3c;
  --cur-a: #a81f2c; --cur-b: #701018; --cur-c: #c8323f;
  --sky-1: #0a1736; --sky-2: #17305a; --sky-3: #2b4a78; --moon: #fff4d8;
  --rug-1: #7c1a1a; --rug-2: #5a1212; --rug-3: #400d0d; --rug-4: #2c0808; --rug-gold2: #dcc070;
  --ch-d: #4a0d12; --ch-m: #8a1c24; --ch-l: #a52832; --ch-wd: #58101a; --ch-dot: #4a0d12;
  --wr-1: #1f6a3a; --wr-2: #2e8a4c; --wr-3: #c4202e; --bow: #c4202e;
}
html[data-theme="valentines"] {
  --wall-1: #5a2f3d; --wall-2: #6e3c4c; --wall-3: #5c3140;
  --cur-a: #d98aa2; --cur-b: #ab5a74; --cur-c: #ecaabf;
  --sky-1: #25103a; --sky-2: #5a2a5a; --sky-3: #d0607a; --moon: #ffd6e0; --moon-glow: rgba(255, 214, 224, .4);
  --rug-1: #7a1f34; --rug-2: #5e1828; --rug-3: #48121f; --rug-4: #340c16;
  --ch-d: #5a1a2e; --ch-m: #a03a58; --ch-l: #bd4c6c; --ch-wd: #6a2036; --ch-dot: #5a1a2e;
  --shade-a: #e8a0a8; --shade-b: #ffe0e4; --shade-c: #f0b0b8; --lamp-rgb: 255, 190, 200;
  --vase: #8a1c3a; --wr-1: #e0305a; --wr-2: #ff8fab; --wr-3: #fff0f3; --bow: #b3203f;
}
html[data-theme="july4"] {
  --wall-1: #2f4050; --wall-2: #3b5266; --wall-3: #304354;
  --cur-a: #243f7a; --cur-b: #16284f; --cur-c: #34549a;
  --sky-1: #060d24; --sky-2: #101f4a; --sky-3: #1c3468;
  --ch-d: #101c3a; --ch-m: #1f3a74; --ch-l: #2a4c92; --ch-wd: #15264c; --ch-dot: #101c3a;
}

/* ---------- strings of lights / bunting / foliage along the top of the wall ---------- */
.garland, .lights { position: absolute; left: 0; right: 0; pointer-events: none; display: none; }
.garland { top: 8rem; height: 64rem; background: var(--garland-img) repeat-x 0 0 / 160rem 64rem; filter: drop-shadow(0 3rem 3rem rgba(0, 0, 0, .45)); }
.lights { top: 46rem; height: 64rem; }
.lights::before, .lights::after { content: ""; position: absolute; inset: 0; background-repeat: repeat-x; background-size: 160rem 64rem; }
.lights::before { background-image: var(--lights-a); animation: twinkleA 2.4s ease-in-out infinite; }
.lights::after { background-image: var(--lights-b); animation: twinkleB 2.4s ease-in-out infinite; }
@keyframes twinkleA { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes twinkleB { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
html[data-garland="1"] .garland, html[data-lights="1"] .lights { display: block; }

/* ---------- the scene outside the window ---------- */
.window .ground { position: absolute; left: 0; right: 0; bottom: 0; height: 44%; display: none; }
.window .ground::before, .window .ground::after { content: ""; position: absolute; display: none; }
.window .fx { position: absolute; inset: 0; display: none; pointer-events: none; }
.window .moon { right: 28rem; }

/* spring: blossom tree on green hills, drifting petals */
html[data-theme="spring"] .window .ground { display: block; background:
  radial-gradient(circle at 24% 34%, #f6a8c0 0 11%, transparent 12%), radial-gradient(circle at 34% 24%, #f9bfd0 0 10%, transparent 11%),
  radial-gradient(circle at 15% 28%, #f3a0b8 0 9%, transparent 10%), radial-gradient(circle at 28% 44%, #f9bfd0 0 8%, transparent 9%),
  linear-gradient(#3d2a1e, #3d2a1e) 24% 100% / 5rem 52% no-repeat,
  radial-gradient(ellipse 75% 62% at 22% 100%, #4d8a4a 0 70%, transparent 71%), radial-gradient(ellipse 85% 56% at 88% 100%, #3c7544 0 70%, transparent 71%); }
html[data-theme="spring"] .fx-petals { display: block; background-image:
  radial-gradient(ellipse 3.6rem 2rem at 12% 12%, #f8c0d2 60%, transparent 66%), radial-gradient(ellipse 3rem 1.8rem at 46% 58%, #fbd3df 60%, transparent 66%),
  radial-gradient(ellipse 3.4rem 2rem at 78% 30%, #f6b2c8 60%, transparent 66%), radial-gradient(ellipse 2.8rem 1.6rem at 64% 88%, #fbd3df 60%, transparent 66%);
  background-size: 110rem 120rem; animation: petals 9s linear infinite; }
@keyframes petals { to { background-position: -50rem 120rem; } }

/* summer: dark hills, fireflies */
html[data-theme="summer"] .window .ground { display: block; background:
  linear-gradient(#10261a, #10261a) 70% 100% / 5rem 40% no-repeat, radial-gradient(circle at 70% 52%, #1b3b28 0 15%, transparent 16%), radial-gradient(circle at 62% 60%, #1b3b28 0 12%, transparent 13%),
  radial-gradient(ellipse 80% 60% at 20% 100%, #1d3b2a 0 70%, transparent 71%), radial-gradient(ellipse 80% 55% at 85% 100%, #17301f 0 70%, transparent 71%); }
html[data-theme="summer"] .fx-fireflies { display: block; background-image:
  radial-gradient(circle 3rem at 18% 62%, rgba(255, 244, 150, .95), transparent 70%), radial-gradient(circle 2.6rem at 44% 74%, rgba(255, 244, 150, .9), transparent 70%),
  radial-gradient(circle 3rem at 70% 58%, rgba(255, 244, 150, .95), transparent 70%), radial-gradient(circle 2.4rem at 86% 78%, rgba(255, 244, 150, .9), transparent 70%),
  radial-gradient(circle 2.6rem at 30% 48%, rgba(255, 244, 150, .8), transparent 70%); animation: fireflies 4s ease-in-out infinite alternate; }
@keyframes fireflies { 0% { opacity: .25; transform: translate(-6rem, 3rem); } 100% { opacity: 1; transform: translate(6rem, -5rem); } }

/* autumn / thanksgiving: orange trees, falling leaves */
html[data-theme="autumn"] .window .ground, html[data-theme="thanksgiving"] .window .ground { display: block; background:
  radial-gradient(circle at 22% 38%, #d8641a 0 17%, transparent 18%), radial-gradient(circle at 34% 46%, #e89a2a 0 15%, transparent 16%), radial-gradient(circle at 12% 48%, #b8481a 0 13%, transparent 14%),
  radial-gradient(circle at 78% 52%, #c0392b 0 12%, transparent 13%), radial-gradient(circle at 68% 58%, #e8a22e 0 10%, transparent 11%),
  linear-gradient(#2c1c10, #2c1c10) 24% 100% / 5rem 46% no-repeat, linear-gradient(#2c1c10, #2c1c10) 74% 100% / 4rem 34% no-repeat,
  radial-gradient(ellipse 90% 50% at 50% 100%, #2a2014 0 70%, transparent 71%); }
html[data-theme="autumn"] .fx-leaves, html[data-theme="thanksgiving"] .fx-leaves { display: block; background-image:
  radial-gradient(ellipse 4rem 2.4rem at 14% 14%, #e0701a 60%, transparent 66%), radial-gradient(ellipse 3.4rem 2.2rem at 52% 42%, #c0392b 60%, transparent 66%),
  radial-gradient(ellipse 3.8rem 2.2rem at 80% 22%, #e8a22e 60%, transparent 66%), radial-gradient(ellipse 3.2rem 2rem at 36% 80%, #b8481a 60%, transparent 66%),
  radial-gradient(ellipse 3.6rem 2.2rem at 90% 70%, #e0701a 60%, transparent 66%); background-size: 120rem 130rem; animation: leaves 7s linear infinite; }
@keyframes leaves { to { background-position: -60rem 130rem; } }

/* winter and christmas: snow */
html[data-theme="winter"] .window .ground, html[data-theme="christmas"] .window .ground { display: block; background:
  linear-gradient(#2a1d18, #2a1d18) 12% 100% / 34rem 30% no-repeat, linear-gradient(#ffd878, #ffd878) 17% 86% / 5rem 5rem no-repeat, linear-gradient(#ffd878, #ffd878) 28% 86% / 5rem 5rem no-repeat,
  radial-gradient(ellipse 80% 70% at 30% 112%, #eef4fb 0 70%, transparent 71%), radial-gradient(ellipse 80% 60% at 90% 112%, #d4e2f0 0 70%, transparent 71%); }
html[data-theme="winter"] .window .ground { background:
  radial-gradient(ellipse 80% 70% at 30% 112%, #eef4fb 0 70%, transparent 71%), radial-gradient(ellipse 80% 60% at 90% 112%, #d4e2f0 0 70%, transparent 71%); }
html[data-theme="winter"] .window .ground::before, html[data-theme="christmas"] .window .ground::before { display: block; right: 22%; bottom: 14%; width: 30rem; height: 62rem;
  background: linear-gradient(#f4f8fc 0 12%, #1f5a38 12%); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
html[data-theme="christmas"] .window .ground::after { display: block; left: 10%; bottom: 29%; width: 38rem; height: 16rem; background: #2a1d18; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
html[data-theme="winter"] .fx-snow, html[data-theme="christmas"] .fx-snow { display: block; background-image:
  radial-gradient(2.4rem 2.4rem at 10% 20%, #fff 45%, transparent 50%), radial-gradient(1.7rem 1.7rem at 35% 70%, #fff 45%, transparent 50%), radial-gradient(2.2rem 2.2rem at 60% 40%, #fff 45%, transparent 50%),
  radial-gradient(1.5rem 1.5rem at 85% 85%, #fff 45%, transparent 50%), radial-gradient(1.9rem 1.9rem at 75% 10%, #fff 45%, transparent 50%), radial-gradient(1.4rem 1.4rem at 22% 92%, #fff 45%, transparent 50%);
  background-size: 112rem 112rem; animation: snowfall 7s linear infinite; }
html[data-theme="winter"] .fx-snow::after, html[data-theme="christmas"] .fx-snow::after { content: ""; position: absolute; inset: 0; opacity: .75; background-image:
  radial-gradient(1.4rem 1.4rem at 15% 55%, #fff 45%, transparent 50%), radial-gradient(1.2rem 1.2rem at 50% 15%, #fff 45%, transparent 50%), radial-gradient(1.3rem 1.3rem at 80% 60%, #fff 45%, transparent 50%), radial-gradient(1.1rem 1.1rem at 40% 88%, #fff 45%, transparent 50%);
  background-size: 76rem 76rem; animation: snowfall 11s linear infinite; }
@keyframes snowfall { to { background-position: -22rem 112rem; } }

/* halloween: haunted hill, bats */
html[data-theme="halloween"] .window .ground { display: block; background:
  linear-gradient(#0c0616, #0c0616) 72% 100% / 40rem 38% no-repeat, linear-gradient(#ffa83e, #ffa83e) 78% 78% / 5rem 6rem no-repeat, linear-gradient(#ffa83e, #ffa83e) 88% 78% / 5rem 6rem no-repeat,
  linear-gradient(#0a0512, #0a0512) 20% 100% / 4rem 58% no-repeat, radial-gradient(ellipse 90% 55% at 40% 100%, #150a22 0 70%, transparent 71%); }
html[data-theme="halloween"] .window .ground::before { display: block; left: 66%; bottom: 36%; width: 52rem; height: 26rem; background: #0c0616; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
html[data-theme="halloween"] .window .ground::after { display: block; left: 12%; bottom: 40%; width: 36rem; height: 30rem; background: #0a0512; clip-path: polygon(40% 100%, 44% 55%, 10% 30%, 30% 36%, 46% 20%, 40% 0, 54% 18%, 70% 8%, 62% 28%, 92% 20%, 62% 44%, 58% 100%); }
html[data-theme="halloween"] .fx-bats { display: block; }
.fx-bats i { position: absolute; left: 0; width: 24rem; height: 11rem; background: #07040c; clip-path: polygon(0 40%, 14% 4%, 28% 34%, 38% 18%, 50% 50%, 62% 18%, 72% 34%, 86% 4%, 100% 40%, 80% 68%, 64% 56%, 50% 100%, 36% 56%, 20% 68%); animation: batfly 8s linear infinite, flap .28s ease-in-out infinite alternate; }
.fx-bats i:nth-child(1) { top: 22%; }
.fx-bats i:nth-child(2) { top: 40%; width: 18rem; height: 8rem; animation-duration: 11s, .24s; animation-delay: -4s, 0s; }
.fx-bats i:nth-child(3) { top: 12%; width: 20rem; height: 9rem; animation-duration: 9.5s, .3s; animation-delay: -7s, 0s; }
@keyframes batfly { 0% { transform: translate(-40rem, 0); } 50% { transform: translate(110rem, 22rem); } 100% { transform: translate(260rem, -6rem); } }
@keyframes flap { from { scale: 1 1; } to { scale: 1 .55; } }

/* july 4th: fireworks */
html[data-theme="july4"] .window .ground { display: block; background:
  linear-gradient(#ffd878, #ffd878) 24% 76% / 5rem 5rem no-repeat, linear-gradient(#0a1020, #0a1020) 20% 100% / 34rem 26% no-repeat, radial-gradient(ellipse 90% 50% at 60% 100%, #0c1428 0 70%, transparent 71%); }
html[data-theme="july4"] .fx-fireworks { display: block; }
.fx-fireworks .fw { position: absolute; width: 90rem; height: 90rem; border-radius: 50%; opacity: 0;
  background: repeating-conic-gradient(var(--c) 0 3deg, transparent 3deg 15deg);
  -webkit-mask: radial-gradient(circle, transparent 0 24%, #000 26% 58%, transparent 62%); mask: radial-gradient(circle, transparent 0 24%, #000 26% 58%, transparent 62%);
  animation: burst 3.6s ease-out infinite; }
.fx-fireworks .fw.a { --c: #ff4d4d; left: 8%; top: 6%; animation-delay: 0s; }
.fx-fireworks .fw.b { --c: #ffe066; left: 46%; top: 20%; width: 72rem; height: 72rem; animation-delay: 1.3s; }
.fx-fireworks .fw.c { --c: #6aa8ff; left: 26%; top: 34%; width: 80rem; height: 80rem; animation-delay: 2.4s; }
@keyframes burst { 0% { transform: scale(.1); opacity: 0; } 12% { opacity: 1; } 70% { opacity: .7; } 100% { transform: scale(1.15); opacity: 0; } }

/* valentines: rising hearts */
html[data-theme="valentines"] .window .ground { display: block; background:
  linear-gradient(#ffd0a0, #ffd0a0) 30% 80% / 4rem 5rem no-repeat, linear-gradient(#34102a, #34102a) 26% 100% / 30rem 28% no-repeat, radial-gradient(ellipse 90% 55% at 55% 100%, #3a1432 0 70%, transparent 71%); }
html[data-theme="valentines"] .fx-hearts { display: block; }
.fx-hearts i { position: absolute; bottom: -20rem; color: #ff7a9c; font-style: normal; font-size: 18rem; line-height: 1; animation: rise 7s linear infinite; text-shadow: 0 0 8rem rgba(255, 122, 156, .6); }
.fx-hearts i::before { content: "\2665"; }
.fx-hearts i:nth-child(1) { left: 14%; animation-delay: 0s; } .fx-hearts i:nth-child(2) { left: 36%; font-size: 13rem; animation-delay: -2.2s; }
.fx-hearts i:nth-child(3) { left: 58%; animation-delay: -4s; } .fx-hearts i:nth-child(4) { left: 78%; font-size: 12rem; animation-delay: -1.2s; } .fx-hearts i:nth-child(5) { left: 88%; animation-delay: -5.4s; }
@keyframes rise { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: .95; } 100% { transform: translate(10rem, -290rem); opacity: 0; } }

/* ---------- props: the first group stands left of the lamp, the second to the right of the radio ---------- */
.prop { display: none; position: absolute; bottom: 128rem; width: 76rem; height: 125rem; z-index: 3; pointer-events: none; }
.prop i { position: absolute; display: block; }
.pL { left: -566rem; } .pR { left: 492rem; }
html[data-theme="spring"] .bouquet, html[data-theme="summer"] .bouquet, html[data-theme="valentines"] .bouquet,
html[data-theme="autumn"] .pumpkins, html[data-theme="thanksgiving"] .pumpkins, html[data-theme="halloween"] .jack, html[data-theme="winter"] .mug,
html[data-theme="christmas"] .tree, html[data-theme="july4"] .flag, html[data-theme="christmas"] .gifts,
html[data-theme="spring"] .plant, html[data-theme="summer"] .plant, html[data-theme="valentines"] .chocs,
html[data-theme="autumn"] .candle, html[data-theme="thanksgiving"] .candle, html[data-theme="winter"] .candle, html[data-theme="halloween"] .candle { display: block; }

/* bouquet: tulips / sunflowers / roses */
.bouquet .vase { left: 20rem; bottom: 0; width: 36rem; height: 46rem; border-radius: 8rem 8rem 16rem 16rem; background: linear-gradient(90deg, rgba(0, 0, 0, .35), rgba(255, 255, 255, .25) 40%, rgba(0, 0, 0, .35)), var(--vase, #4a78a8); box-shadow: 0 3rem 4rem rgba(0, 0, 0, .45); }
.bouquet .stem { bottom: 40rem; width: 3rem; height: 56rem; background: linear-gradient(#3f8a3f, #2a6a2e); transform-origin: bottom center; }
.bouquet .s1 { left: 30rem; transform: rotate(-16deg); } .bouquet .s2 { left: 37rem; } .bouquet .s3 { left: 44rem; transform: rotate(16deg); }
.bouquet .bloom { width: 20rem; height: 24rem; }
.bouquet .b1 { left: 8rem; bottom: 86rem; transform: rotate(-16deg); } .bouquet .b2 { left: 28rem; bottom: 96rem; } .bouquet .b3 { left: 47rem; bottom: 86rem; transform: rotate(16deg); }
html[data-theme="spring"] .bouquet .bloom { border-radius: 40% 40% 50% 50% / 55% 55% 45% 45%; clip-path: polygon(0 24%, 24% 0, 50% 26%, 76% 0, 100% 24%, 100% 100%, 0 100%); }
html[data-theme="spring"] .b1 { background: linear-gradient(90deg, #f0607e, #d03a60); } html[data-theme="spring"] .b2 { background: linear-gradient(90deg, #f7d45a, #e0b030); } html[data-theme="spring"] .b3 { background: linear-gradient(90deg, #dc6ad0, #b04aa8); }
html[data-theme="summer"] .bouquet .bloom { width: 28rem; height: 28rem; margin-left: -4rem; border-radius: 50%; background: radial-gradient(circle, #4a2c0c 0 32%, transparent 33%), repeating-conic-gradient(#f7c52f 0 14deg, #e69a12 14deg 28deg); }
html[data-theme="valentines"] .bouquet .bloom { width: 24rem; height: 24rem; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #7a0a22 0 14%, #c4163a 15% 45%, #e0305a 46% 70%, #9a1030 71%); }

/* pumpkins */
.pumpkins .pk { bottom: 0; border-radius: 50% / 56% 56% 44% 44%; overflow: hidden; background: radial-gradient(ellipse at 38% 32%, #ffb85a, #e0701a 58%, #9c4208); box-shadow: 0 4rem 6rem rgba(0, 0, 0, .5); }
.pumpkins .pk::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 8rem, rgba(0, 0, 0, .17) 8rem 10rem); }
.pumpkins .pk::after { content: ""; position: absolute; left: 50%; top: -3rem; width: 8rem; height: 10rem; margin-left: -4rem; background: #4a5a1e; border-radius: 3rem 3rem 0 0; }
.pumpkins .big { left: 2rem; width: 54rem; height: 46rem; } .pumpkins .small { left: 46rem; width: 34rem; height: 30rem; }
.pumpkins .gourd { left: 30rem; bottom: 2rem; width: 20rem; height: 34rem; border-radius: 50% 50% 40% 40% / 62% 62% 38% 38%; background: linear-gradient(135deg, #e0cc3a, #6e9a2a); transform: rotate(14deg); box-shadow: 0 3rem 4rem rgba(0, 0, 0, .5); }

/* jack-o'-lantern */
.jack i { left: 6rem; bottom: 0; width: 66rem; height: 56rem; border-radius: 50% / 56% 56% 44% 44%; background: radial-gradient(ellipse at 40% 34%, #ffa83e, #e0701a 60%, #8a3a06); box-shadow: 0 4rem 6rem rgba(0, 0, 0, .5), 0 0 40rem 14rem rgba(255, 150, 40, .35); animation: jackglow 2.6s ease-in-out infinite alternate; }
.jack i::before { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 56'%3E%3Cg fill='%23ffe27a'%3E%3Cpolygon points='12,20 24,20 18,31'/%3E%3Cpolygon points='42,20 54,20 48,31'/%3E%3Cpolygon points='31,29 36,29 33.5,34'/%3E%3Cpolygon points='12,38 18,43 24,39 30,45 36,39 42,43 48,38 54,38 48,50 40,47 33,52 26,47 18,50'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.jack i::after { content: ""; position: absolute; left: 50%; top: -9rem; width: 9rem; height: 13rem; margin-left: -4rem; background: #3e4a1a; border-radius: 3rem 3rem 0 0; }
@keyframes jackglow { from { filter: brightness(.9); } to { filter: brightness(1.15); } }

/* cocoa mug */
.mug .cup { left: 22rem; bottom: 0; width: 36rem; height: 38rem; border-radius: 4rem 4rem 14rem 14rem; background: linear-gradient(transparent 36%, #b02a2a 36% 58%, transparent 58%), linear-gradient(90deg, #d8cfc0, #f6f0e6 40%, #d8cfc0); box-shadow: 0 3rem 4rem rgba(0, 0, 0, .45); }
.mug .cup::after { content: ""; position: absolute; right: -13rem; top: 8rem; width: 15rem; height: 20rem; border: 5rem solid #eee6d8; border-left: 0; border-radius: 0 50% 50% 0; }
.mug .steam { bottom: 40rem; width: 6rem; height: 36rem; border-radius: 50%; background: linear-gradient(transparent, rgba(255, 255, 255, .55), transparent); filter: blur(2.5rem); animation: steam 3s ease-in-out infinite; }
.mug .s1 { left: 32rem; } .mug .s2 { left: 44rem; animation-delay: -1.4s; }
@keyframes steam { 0% { transform: translateY(8rem) scaleX(.8); opacity: 0; } 30% { opacity: .9; } 100% { transform: translateY(-34rem) scaleX(1.6); opacity: 0; } }

/* christmas tree and presents */
.tree .trunk { left: 33rem; bottom: 0; width: 10rem; height: 14rem; background: #4a2e18; }
.tree .t1, .tree .t2, .tree .t3 { clip-path: polygon(50% 0, 100% 100%, 0 100%); background: linear-gradient(90deg, #14502c, #2e8a4c 50%, #14502c); }
.tree .t1 { left: 6rem; bottom: 10rem; width: 64rem; height: 44rem; } .tree .t2 { left: 12rem; bottom: 38rem; width: 52rem; height: 40rem; } .tree .t3 { left: 20rem; bottom: 66rem; width: 36rem; height: 36rem; }
.tree .star { left: 31rem; bottom: 98rem; width: 15rem; height: 15rem; background: #ffd24a; clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%); filter: drop-shadow(0 0 5rem #ffd24a); }
.tree .bulbs { inset: 0; background:
  radial-gradient(circle 2.6rem at 50% 66%, #ff4040 70%, transparent 74%), radial-gradient(circle 2.6rem at 36% 52%, #ffd23a 70%, transparent 74%), radial-gradient(circle 2.6rem at 64% 50%, #4aa0ff 70%, transparent 74%),
  radial-gradient(circle 2.6rem at 28% 36%, #ff4040 70%, transparent 74%), radial-gradient(circle 2.6rem at 72% 34%, #ffd23a 70%, transparent 74%), radial-gradient(circle 2.6rem at 50% 38%, #4aa0ff 70%, transparent 74%), radial-gradient(circle 2.4rem at 50% 20%, #ff4040 70%, transparent 74%);
  animation: bulbs 1.8s ease-in-out infinite alternate; }
@keyframes bulbs { from { filter: brightness(.75); } to { filter: brightness(1.4) drop-shadow(0 0 3rem rgba(255, 255, 255, .6)); } }
.gifts .g1, .gifts .g2, .gifts .g3 { bottom: 0; box-shadow: 0 3rem 5rem rgba(0, 0, 0, .5); }
.gifts .g1 { left: 6rem; width: 36rem; height: 28rem; background: linear-gradient(90deg, transparent 44%, #e6b422 44% 56%, transparent 56%), linear-gradient(#c4202e, #8c1220); }
.gifts .g2 { left: 38rem; width: 32rem; height: 40rem; background: linear-gradient(transparent 40%, #fff 40% 52%, transparent 52%), linear-gradient(90deg, transparent 44%, #fff 44% 56%, transparent 56%), linear-gradient(#1f7a44, #135230); }
.gifts .g3 { left: 18rem; bottom: 28rem; width: 28rem; height: 22rem; background: linear-gradient(90deg, transparent 44%, #d8d8e0 44% 56%, transparent 56%), linear-gradient(#2f5fb4, #1e3f80); }

/* flag in a jar */
.flag .pole { left: 30rem; bottom: 0; width: 3rem; height: 112rem; background: linear-gradient(90deg, #8a6a2a, #e0c070, #8a6a2a); border-radius: 2rem; }
.flag .cloth { left: 33rem; bottom: 74rem; width: 42rem; height: 30rem; background: linear-gradient(90deg, #1f3f9a 0 38%, transparent 38%), repeating-linear-gradient(#c8202f 0 4.3rem, #fff 4.3rem 8.6rem); transform-origin: left center; animation: wave 2.4s ease-in-out infinite alternate; box-shadow: 2rem 3rem 5rem rgba(0, 0, 0, .35); }
@keyframes wave { from { transform: skewY(-3deg) scaleX(1); } to { transform: skewY(3deg) scaleX(.94); } }

/* candle */
.candle .wax { left: 30rem; bottom: 0; width: 16rem; height: 54rem; border-radius: 3rem; background: linear-gradient(90deg, #d8ccb0, #f8f0dc 45%, #d8ccb0); box-shadow: 0 3rem 4rem rgba(0, 0, 0, .45); }
.candle .wax::before { content: ""; position: absolute; left: -9rem; right: -9rem; bottom: -3rem; height: 8rem; border-radius: 50%; background: linear-gradient(#e6c778, #8a6a24); }
.candle .flame { left: 34rem; bottom: 56rem; width: 9rem; height: 17rem; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: radial-gradient(ellipse at 50% 70%, #fff6c0, #ffb02a 60%, #ff7a10); box-shadow: 0 0 22rem 10rem rgba(255, 170, 60, .5); animation: candle .9s ease-in-out infinite alternate; transform-origin: bottom center; }
@keyframes candle { from { transform: scale(1, 1) rotate(-2deg); filter: brightness(.95); } to { transform: scale(.92, 1.1) rotate(2deg); filter: brightness(1.2); } }

/* potted plant */
.plant .pot { left: 22rem; bottom: 0; width: 34rem; height: 30rem; border-radius: 2rem 2rem 9rem 9rem; background: linear-gradient(90deg, #7a3a1c, #c4683a 45%, #7a3a1c); box-shadow: 0 3rem 4rem rgba(0, 0, 0, .45); }
.plant .pot::before { content: ""; position: absolute; left: -3rem; right: -3rem; top: -3rem; height: 9rem; border-radius: 3rem; background: linear-gradient(#d47a4a, #8a4426); }
.plant .leaf { bottom: 28rem; width: 12rem; height: 54rem; border-radius: 50% 50% 8rem 8rem / 80% 80% 20% 20%; background: linear-gradient(90deg, #2a7a3a, #5ab86a); transform-origin: bottom center; }
.plant .l1 { left: 24rem; transform: rotate(-30deg); } .plant .l2 { left: 33rem; height: 64rem; } .plant .l3 { left: 42rem; transform: rotate(30deg); }

/* heart box of chocolates */
.chocs .box { left: 12rem; bottom: 0; width: 56rem; height: 50rem; background: radial-gradient(circle at 30% 30%, #ff6b8a, #c4163a 60%, #8a0f2a); clip-path: polygon(50% 100%, 8% 56%, 0 33%, 6% 12%, 22% 0, 40% 6%, 50% 24%, 60% 6%, 78% 0, 94% 12%, 100% 33%, 92% 56%); filter: drop-shadow(0 4rem 4rem rgba(0, 0, 0, .5)); }
.chocs .box::after { content: ""; position: absolute; left: 20%; right: 20%; top: 28%; height: 22%; background: repeating-linear-gradient(90deg, #fff0f3 0 5rem, transparent 5rem 9rem); opacity: .7; }

/* ---------- wall decor ---------- */
.wreath { display: none; position: absolute; left: 445rem; bottom: 562rem; width: 96rem; height: 96rem; pointer-events: none; filter: drop-shadow(0 5rem 6rem rgba(0, 0, 0, .5)); }
.wreath::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(var(--wr-1, #2e8a4c) 0 17deg, var(--wr-2, #1f6a3a) 17deg 34deg, var(--wr-3, #c4202e) 34deg 40deg, var(--wr-1, #2e8a4c) 40deg 57deg);
  -webkit-mask: radial-gradient(circle, transparent 0 38%, #000 40% 98%, transparent 100%); mask: radial-gradient(circle, transparent 0 38%, #000 40% 98%, transparent 100%); }
.wreath .bow { left: 50%; bottom: -10rem; width: 38rem; height: 28rem; margin-left: -19rem; background: var(--bow, #c4202e); clip-path: polygon(0 0, 40% 40%, 50% 28%, 60% 40%, 100% 0, 100% 100%, 60% 62%, 50% 72%, 40% 62%, 0 100%); }
html[data-theme="christmas"] .wreath, html[data-theme="autumn"] .wreath, html[data-theme="thanksgiving"] .wreath, html[data-theme="spring"] .wreath, html[data-theme="valentines"] .wreath { display: block; }
html[data-theme="christmas"] .frame.f3, html[data-theme="autumn"] .frame.f3, html[data-theme="thanksgiving"] .frame.f3, html[data-theme="spring"] .frame.f3, html[data-theme="valentines"] .frame.f3 { display: none; }

.cobweb { display: none; position: absolute; top: 0; width: 280rem; height: 280rem; pointer-events: none;
  background: repeating-radial-gradient(circle at 0 0, transparent 0 30rem, rgba(235, 235, 245, .32) 30rem 31.5rem), repeating-conic-gradient(from 0deg at 0 0, rgba(235, 235, 245, .42) 0 .8deg, transparent .8deg 22.5deg);
  -webkit-mask: radial-gradient(circle 272rem at 0 0, #000 0 90%, transparent 100%); mask: radial-gradient(circle 272rem at 0 0, #000 0 90%, transparent 100%); }
.cobweb.l { left: 0; } .cobweb.r { right: 0; transform: scaleX(-1); }
.spider { display: none; position: absolute; top: 0; right: 170rem; width: 1.5rem; height: 92rem; background: rgba(230, 230, 240, .7); pointer-events: none; animation: dangle 3.6s ease-in-out infinite alternate; transform-origin: top center; }
.spider::after { content: ""; position: absolute; left: 50%; bottom: -10rem; width: 16rem; height: 14rem; margin-left: -8rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4a3a5a, #07040c 60%); box-shadow: -9rem 3rem 0 -4rem #07040c, 9rem 3rem 0 -4rem #07040c, -11rem -2rem 0 -5rem #07040c, 11rem -2rem 0 -5rem #07040c; }
@keyframes dangle { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
html[data-theme="halloween"] .cobweb, html[data-theme="halloween"] .spider { display: block; }

/* the lamp bulb glow follows the theme; keep the lit-radio glow warm in every season */
@media (prefers-reduced-motion: reduce) {
  .lights::before, .lights::after, .window .fx, .fx-bats i, .fx-fireworks .fw, .fx-hearts i, .jack i, .tree .bulbs, .candle .flame, .mug .steam, .flag .cloth, .spider { animation: none; }
  .fx-fireworks .fw { opacity: .5; transform: scale(.8); }
}