/*
 * Muya CORS seasonal website animations (Halloween, Christmas, New Year).
 * Loaded together with muya_cors_season.js only while a season is on (muya_cors_inject_seasonal_skin() in muya_cors.php),
 * so outside the season nothing here reaches the page. Everything is fixed-position, ignores the mouse unless it is the
 * little character in the corner, never moves the page layout, and is switched off by "reduce motion" and for print.
 * Colours come from the --mcs-* variables set by the script.
 */
#mcs-ribbon { position: fixed; top: 0; left: 0; right: 0; height: 5px; z-index: 99999; pointer-events: none; background: linear-gradient(90deg, var(--mcs-c1, #b3122a), var(--mcs-c2, #1e6b3a)); }
#mcs-bulbs { position: fixed; top: -2px; left: 0; right: 0; height: 11px; z-index: 100000; pointer-events: none; overflow: hidden; }
#mcs-bulbs i { position: absolute; top: 0; width: 7px; height: 10px; border-radius: 50% 50% 50% 50% / 38% 38% 62% 62%; background: var(--b); box-shadow: 0 0 8px 2px var(--b); animation: mcs-tw 2.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes mcs-tw { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.78); } }

/* floating greeting: a card that minimises to a pill; the script remembers what the visitor chose for the rest of the season */
#mcs-pop { position: fixed; left: 64px; bottom: 104px; z-index: 9998; font: 13px/1.45 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
#mcs-pop.closed { display: none; }
#mcs-pop.min .mcs-pop-card, #mcs-pop.open .mcs-pop-pill { display: none; }
.mcs-pop-card { width: 300px; max-width: calc(100vw - 28px); background: #fff; color: #222; border-radius: 14px; box-shadow: 0 10px 36px rgba(0, 0, 0, .3); overflow: hidden; transform-origin: 0 100%; animation: mcs-pop-in .55s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes mcs-pop-in { from { opacity: 0; transform: translateY(24px) scale(.88); } to { opacity: 1; transform: none; } }
.mcs-pop-head { display: flex; align-items: center; gap: 8px; padding: 10px 8px 10px 12px; color: #fff; background: linear-gradient(135deg, var(--mcs-c1, #b3122a), var(--mcs-c2, #1e6b3a)); }
.mcs-pop-head strong { flex: 1; font-size: 13.5px; line-height: 1.25; }
.mcs-pop-ico { font-size: 20px; line-height: 1; }
.mcs-pop-head button { flex: none; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff; font-size: 17px; line-height: 26px; text-align: center; cursor: pointer; }
.mcs-pop-head button:hover, .mcs-pop-head button:focus-visible { background: rgba(255, 255, 255, .38); outline: none; }
.mcs-pop-body { padding: 12px 14px 14px; }
.mcs-pop-msg { margin: 0 0 10px; color: #3a4350; }
.mcs-pop-count { display: inline-block; margin: 0; padding: 3px 11px; border-radius: 12px; background: var(--mcs-soft, #fff4f2); color: var(--mcs-text, #8a1c1c); font-weight: 700; font-size: 12px; }
.mcs-pop-cta { display: block; margin-top: 10px; padding: 8px 12px; border-radius: 8px; background: var(--mcs-c1, #b3122a); color: #fff; font-weight: 700; text-align: center; text-decoration: none; }
.mcs-pop-pill { display: inline-flex; align-items: center; gap: 8px; max-width: calc(100vw - 28px); padding: 6px 6px 6px 12px; border-radius: 22px; background: var(--mcs-soft, #fff4f2); color: var(--mcs-text, #8a1c1c); font-weight: 600; font-size: 12px; box-shadow: 0 3px 14px rgba(0, 0, 0, .25); cursor: pointer; animation: mcs-pop-in .45s cubic-bezier(.2, .9, .3, 1.2) both; }
.mcs-pop-pill:focus-visible { outline: 2px solid var(--mcs-c1, #b3122a); outline-offset: 2px; }
.mcs-pop-pill .mcs-pop-ico { font-size: 16px; }
.mcs-pop-pill-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcs-pop-pill-x { flex: none; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .08); color: inherit; font-size: 14px; line-height: 20px; cursor: pointer; }
.mcs-pop-pill-x:hover { background: rgba(0, 0, 0, .2); }

#mcs-fx { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9997; }

/* the logo's hat: a gentle sway, set on the logo by the script that swaps in the hatted copy */
.mcs-logo { transform-origin: 50% 100%; animation: mcs-pop .9s cubic-bezier(.2, .9, .3, 1.3) both, mcs-sway 6s ease-in-out 1s infinite; }
@keyframes mcs-pop { from { opacity: 0; transform: translateY(-10px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes mcs-sway { 0%, 100% { transform: rotate(-.9deg); } 50% { transform: rotate(1.1deg); } }

/* little character in the corner: pumpkin, tree or champagne; clicking it does something */
#mcs-peek { position: fixed; right: 230px; bottom: 0; width: 66px; height: 74px; z-index: 9998; }
#mcs-peek button { display: block; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; transform: translateY(14px); transition: transform .25s ease; -webkit-tap-highlight-color: transparent; }
#mcs-peek button:hover, #mcs-peek button:focus-visible { transform: translateY(0); outline: none; }
#mcs-peek button:focus-visible { filter: drop-shadow(0 0 0 2px #fff); }
#mcs-peek svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mcs-bubble { position: absolute; right: 0; bottom: 84px; white-space: nowrap; padding: 7px 12px; border-radius: 12px; background: #fff; color: #222; font: 600 12px/1.2 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; box-shadow: 0 3px 14px rgba(0, 0, 0, .25); opacity: 0; transform: translateY(8px) scale(.9); transform-origin: 85% 100%; pointer-events: none; transition: opacity .25s, transform .25s; }
.mcs-bubble:after { content: ""; position: absolute; right: 22px; bottom: -6px; width: 12px; height: 12px; background: #fff; transform: rotate(45deg); }
.mcs-bubble.on { opacity: 1; transform: none; }

.mcs-pumpkin svg { filter: drop-shadow(0 0 9px rgba(255, 150, 30, .65)); }
.mcs-pumpkin .glow { animation: mcs-flick 3.2s infinite; }
.mcs-pumpkin.mcs-lit .glow { animation-duration: .25s; }
@keyframes mcs-flick { 0%, 100% { opacity: 1; } 42% { opacity: .85; } 48% { opacity: .55; } 54% { opacity: .95; } 80% { opacity: .78; } }

.mcs-tree .tw { animation: mcs-tw 1.7s ease-in-out infinite; }
.mcs-tree .tw:nth-of-type(2n) { animation-delay: .5s; }
.mcs-tree .tw:nth-of-type(3n) { animation-delay: 1s; }
.mcs-tree.mcs-lit .tw { animation-duration: .3s; }
.mcs-tree svg { filter: drop-shadow(0 0 7px rgba(60, 180, 90, .4)); }

.mcs-bottle svg { transform-origin: 50% 100%; animation: mcs-bottle 5s ease-in-out infinite; }
@keyframes mcs-bottle { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.mcs-bottle .cork { transform-box: fill-box; transform-origin: center; }
.mcs-bottle.mcs-lit .cork { animation: mcs-cork 1.1s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes mcs-cork { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(-46px, -210px) rotate(540deg); opacity: 0; } }
.mcs-bottle .foam { opacity: 0; }
.mcs-bottle.mcs-lit .foam { animation: mcs-foam 1.2s ease-out forwards; }
@keyframes mcs-foam { 0% { opacity: 1; transform: scaleY(.2); } 100% { opacity: 0; transform: scaleY(1.4) translateY(-14px); } }

.mcs-ghost { position: absolute; left: 6px; bottom: 40px; width: 46px; pointer-events: none; opacity: 0; animation: mcs-ghost 2.6s ease-out forwards; }
@keyframes mcs-ghost { 0% { opacity: 0; transform: translateY(24px) scale(.6); } 18% { opacity: .95; } 100% { opacity: 0; transform: translate(-34px, -190px) scale(1.2) rotate(-8deg); } }

/* Halloween: fog along the bottom and a spider that drops from the top */
#mcs-fog { position: fixed; left: -20%; right: -20%; bottom: 0; height: 150px; z-index: 9996; pointer-events: none; filter: blur(7px);
    background: radial-gradient(ellipse 40% 100% at 22% 100%, rgba(190, 170, 225, .26), transparent 70%), radial-gradient(ellipse 36% 100% at 72% 100%, rgba(255, 150, 60, .14), transparent 70%);
    animation: mcs-fog 30s ease-in-out infinite alternate; }
@keyframes mcs-fog { from { transform: translateX(-7%); } to { transform: translateX(7%); } }
#mcs-spider { position: fixed; top: -230px; right: 9%; width: 40px; z-index: 99998; pointer-events: none; transform-origin: 50% 0; }
#mcs-spider .th { width: 1px; height: 210px; margin: 0 auto; background: rgba(230, 230, 240, .55); }
#mcs-spider svg { display: block; width: 34px; margin: 0 auto; }
#mcs-spider.go { animation: mcs-drop 12s ease-in-out forwards; }
@keyframes mcs-drop { 0% { transform: translateY(0) rotate(0); } 16% { transform: translateY(var(--mcs-d, 280px)) rotate(2deg); } 24% { transform: translateY(calc(var(--mcs-d, 280px) - 24px)) rotate(-3deg); } 32% { transform: translateY(var(--mcs-d, 280px)) rotate(3deg); } 66% { transform: translateY(var(--mcs-d, 280px)) rotate(-2deg); } 100% { transform: translateY(0) rotate(0); } }

/* Christmas: Santa's sleigh across the sky now and then */
#mcs-sleigh { position: fixed; left: 0; top: var(--mcs-y, 16%); width: 300px; z-index: 99996; pointer-events: none; transform: translateX(-340px); }
#mcs-sleigh svg { display: block; width: 100%; overflow: visible; animation: mcs-bob 2.4s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(255, 230, 150, .5)); }
#mcs-sleigh.fly { animation: mcs-fly 17s linear forwards; }
@keyframes mcs-fly { to { transform: translateX(calc(100vw + 340px)); } }
@keyframes mcs-bob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-9px) rotate(1.5deg); } }

@media (max-width: 700px) {
    /* above the WhatsApp button and the live-chat bubble, which sit about 70px up on phones */
    #mcs-pop { left: 12px; bottom: 140px; }
    #mcs-peek, #mcs-fog, #mcs-spider, #mcs-sleigh { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    #mcs-fx, #mcs-fog, #mcs-spider, #mcs-sleigh { display: none; }
    #mcs-bulbs i, .mcs-pop-card, .mcs-pop-pill, .mcs-logo, .mcs-pumpkin .glow, .mcs-tree .tw, .mcs-bottle svg { animation: none; }
}
@media print { #mcs-ribbon, #mcs-bulbs, #mcs-pop, #mcs-fx, #mcs-fog, #mcs-spider, #mcs-sleigh, #mcs-peek { display: none; } }