/* Two Best Mates: Christmas effects (snow canvas, flying Santa, snow toggle). Paired with /xmas-fx.js.
   Open <dialog>s sit in the browser's top layer, so they always cover all of this. */

.xfx-snow{position:fixed;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:40}
.xfx-snow[hidden]{display:none}

/* Santa's stage: laid over the hero ([data-santa-sky]) by the script, clipped so nothing can widen the page. */
.xfx-stage{position:absolute;left:0;top:0;width:100%;height:0;overflow:hidden;overflow:clip;pointer-events:none;z-index:39}
.xfx-stage.is-paused .xfx-spark{animation-play-state:paused}

.xfx-santa{position:absolute;left:0;top:0;display:block;width:clamp(220px,30vw,440px);padding:0;margin:0;border:0;background:none;color:inherit;font:inherit;
  cursor:pointer;pointer-events:auto;visibility:hidden;transform:translate3d(-9999px,0,0);will-change:transform;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border-radius:14px}
.xfx-santa.is-flying{visibility:visible}
.xfx-santa:focus{outline:none}
.xfx-santa:focus-visible{outline:4px dashed #ffd84d;outline-offset:6px;box-shadow:0 0 0 10px rgba(23,42,92,.25)}
.xfx-santa-art{display:block}
.xfx-santa img{display:block;width:100%;height:auto;-webkit-user-drag:none;user-select:none;filter:drop-shadow(0 5px 5px rgba(20,40,70,.22))}
.xfx-santa.is-left img{transform:scaleX(-1)}
.xfx-santa.is-talking .xfx-santa-art{animation:xfx-jiggle .7s ease-out}

/* "Ho ho ho!" speech bubble above Santa's head */
.xfx-bubble{position:absolute;left:1%;bottom:calc(100% - 4px);padding:7px 13px 6px;background:#fff;color:#c8302b;border:3px solid #183d35;border-radius:20px;
  font:400 clamp(19px,2vw,26px)/1 Bangers,Lilita,Baloo,system-ui,sans-serif;letter-spacing:1.2px;white-space:nowrap;pointer-events:none;
  opacity:0;transform:scale(.2);transform-origin:26px 115%;box-shadow:0 4px 0 rgba(24,61,53,.18)}
.xfx-bubble::before,.xfx-bubble::after{content:"";position:absolute;left:20px;width:0;height:0;border-style:solid}
.xfx-bubble::before{bottom:-14px;border-width:14px 9px 0 3px;border-color:#183d35 transparent transparent transparent}
.xfx-bubble::after{bottom:-8px;left:23px;border-width:9px 5px 0 2px;border-color:#fff transparent transparent transparent}
.xfx-santa.is-left .xfx-bubble{left:auto;right:1%;transform-origin:calc(100% - 26px) 115%}
.xfx-santa.is-left .xfx-bubble::before{left:auto;right:20px;border-width:14px 3px 0 9px}
.xfx-santa.is-left .xfx-bubble::after{left:auto;right:23px;border-width:9px 2px 0 5px}
.xfx-santa.is-talking .xfx-bubble{animation:xfx-pop 2s both}

/* sparkle trail + snow puffs (positioned and animated from the script) */
.xfx-spark{position:absolute;left:0;top:0;width:16px;height:16px;opacity:0;pointer-events:none;background:no-repeat center/100% 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23fff3b0' stop-opacity='.95'/%3E%3Cstop offset='1' stop-color='%23ffc93c' stop-opacity='0'/%3E%3C/radialGradient%3E%3Ccircle cx='20' cy='20' r='20' fill='url(%23g)'/%3E%3Cpath d='M20 3l3.4 13.6L37 20l-13.6 3.4L20 37l-3.4-13.6L3 20l13.6-3.4z' fill='%23ffe066' stroke='%23f08a00' stroke-width='1.3' stroke-linejoin='round'/%3E%3Ccircle cx='20' cy='20' r='3.2' fill='%23fff'/%3E%3C/svg%3E")}
.xfx-spark.is-white{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23ffffff' stop-opacity='.9'/%3E%3Cstop offset='1' stop-color='%23bfe0ff' stop-opacity='0'/%3E%3C/radialGradient%3E%3Ccircle cx='20' cy='20' r='20' fill='url(%23g)'/%3E%3Cpath d='M20 5l3 12 12 3-12 3-3 12-3-12-12-3 12-3z' fill='%23fff' stroke='%236fa3dd' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E")}
.xfx-spark.is-snow{background-image:radial-gradient(circle,#fff 0 50%,rgba(205,225,247,.9) 70%,rgba(205,225,247,0) 72%)}

.xfx-drop{position:absolute;left:0;top:0;height:auto;pointer-events:none;opacity:0;filter:drop-shadow(0 3px 3px rgba(20,40,70,.25))}

.xfx-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* snow on/off toggle: a small round icon button, bottom-right, clear of the page's buttons */
.xfx-toggle{position:fixed;right:max(10px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));z-index:41;display:grid;place-items:center;width:44px;height:44px;padding:0;
  border:2px solid #183d35;border-radius:50%;background:rgba(255,255,255,.94);color:#2f6fb8;cursor:pointer;box-shadow:0 3px 0 rgba(24,61,53,.28);-webkit-tap-highlight-color:transparent}
.xfx-toggle:hover{background:#fff}
.xfx-toggle{transition:opacity .2s,visibility .2s}
.xfx-toggle.is-tucked{opacity:0;visibility:hidden;pointer-events:none}
.xfx-toggle:focus-visible{outline:3px solid #ffd84d;outline-offset:3px}
.xfx-toggle svg{width:26px;height:26px;display:block}
.xfx-toggle .xfx-slash{opacity:0}
.xfx-toggle[aria-pressed="false"]{background:rgba(236,238,230,.94);color:#7c8a83}
.xfx-toggle[aria-pressed="false"] .xfx-slash{opacity:1}
.xfx-tip{position:absolute;right:52px;top:50%;transform:translateY(-50%);padding:5px 9px;border-radius:8px;background:#183d35;color:#fff;font:700 13px/1.2 DM,system-ui,sans-serif;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
.xfx-toggle:hover .xfx-tip,.xfx-toggle:focus-visible .xfx-tip{opacity:1}

@keyframes xfx-pop{0%{opacity:0;transform:scale(.2) rotate(-8deg)}12%{opacity:1;transform:scale(1.12) rotate(3deg)}20%{transform:scale(.96) rotate(-1deg)}28%,82%{opacity:1;transform:scale(1) rotate(0)}100%{opacity:0;transform:scale(.9) translateY(-6px)}}
@keyframes xfx-jiggle{0%{transform:none}20%{transform:translateY(-7px) rotate(-3deg)}45%{transform:translateY(2px) rotate(2.5deg)}70%{transform:translateY(-3px) rotate(-1deg)}100%{transform:none}}

@media (prefers-reduced-motion:reduce){
  .xfx-santa.is-talking .xfx-santa-art{animation:none}
  .xfx-santa.is-talking .xfx-bubble{animation:xfx-fade 2s both}
  @keyframes xfx-fade{0%,100%{opacity:0;transform:none}10%,85%{opacity:1;transform:none}}
}
@media print{.xfx-snow,.xfx-stage,.xfx-toggle{display:none!important}}