/*
  Seasonal theme (Nov–Feb):
  - Snowflake overlay (larger, layered)
  - Decorative pine trees in bottom corners
  - Gentle "dance" (sway) and slight blink on trees
  - Motion disabled if user prefers reduced motion

  Scoped via body.theme-christmas so it only applies when enabled.
*/

/* Ensure we create a stacking context for pseudo-elements */
body.theme-christmas {
  position: relative;
}

/* Soft snowflake overlay across the viewport */
body.theme-christmas::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  /* Three layers to mimic light-to-large snow */
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.85) 2px, rgba(255, 255, 255, 0) 3px),
    radial-gradient(rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 4px),
    radial-gradient(rgba(255, 255, 255, 0.50) 4px, rgba(255, 255, 255, 0) 5px);
  background-size: 160px 160px, 240px 240px, 320px 320px;
  background-position: 0 0, 80px 40px, 120px -60px;
  background-repeat: repeat;
  opacity: 0.22;
  z-index: 2;
  animation: snow-fall 18s linear infinite;
}

@keyframes snow-fall {
  0%   { background-position: 0 0, 80px 40px, 120px -60px; }
  100% { background-position: 0 420px, 80px 520px, 120px 300px; }
}

/* Discreet trees tucked into corners */
body.theme-christmas::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  pointer-events: none;
  z-index: 2;
  background-repeat: no-repeat, no-repeat;
  background-position: left 20px bottom 8px, right 20px bottom 8px;
  background-size: 84px auto, 84px auto;
  /* Two identical inline SVGs as separate layers (left, right) */
  background-image:
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>\
  <defs>\
    <linearGradient id='g' x1='0' x2='0' y1='0' y2='1'>\
      <stop offset='0' stop-color='%2332a852'/>\
      <stop offset='1' stop-color='%232d7b3f'/>\
    </linearGradient>\
  </defs>\
  <path d='M32 4 L18 22 H26 L16 36 H26 L10 56 H54 L38 36 H48 L38 22 H46 Z' fill='url(%23g)'/>\
  <rect x='30' y='50' width='4' height='12' fill='%238b5a2b'/>\
</svg>"),
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>\
  <defs>\
    <linearGradient id='g' x1='0' x2='0' y1='0' y2='1'>\
      <stop offset='0' stop-color='%2332a852'/>\
      <stop offset='1' stop-color='%232d7b3f'/>\
    </linearGradient>\
  </defs>\
  <path d='M32 4 L18 22 H26 L16 36 H26 L10 56 H54 L38 36 H48 L38 22 H46 Z' fill='url(%23g)'/>\
  <rect x='30' y='50' width='4' height='12' fill='%238b5a2b'/>\
</svg>");
  /* Gentle sway and subtle blink */
  transform-origin: bottom center;
  animation: tree-sway 3.8s ease-in-out infinite alternate, tree-blink 3s ease-in-out infinite alternate;
}

@keyframes tree-sway {
  0%   { transform: translateX(-4px) rotate(-0.4deg); }
  100% { transform: translateX(4px)  rotate(0.4deg); }
}

@keyframes tree-blink {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.18); }
}

/* Keep header readable above overlay */
#menu.navbar-default {
  backdrop-filter: saturate(120%) blur(0px);
}

/* Respect user preference to reduce motion */
@media (prefers-reduced-motion: reduce) {
  body.theme-christmas::before {
    animation: none;
  }
  body.theme-christmas::after {
    animation: none;
  }
}

/*
  Interactive trees (click/tap to shake + local snowfall)
  We render real elements so they can receive pointer events.
*/

/* Hide decorative pseudo-element trees when interactive ones are present */
body.theme-christmas::after {
  background-image: none !important;
  height: 0 !important;
}

/* Clickable trees (left + right) */
.xmas-tree {
  position: fixed;
  bottom: 8px;
  left: 20px; /* overriden by .right */
  width: 84px;
  height: 120px;
  z-index: 3;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  /* SVG background */
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center bottom;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>\
  <defs>\
    <linearGradient id='g' x1='0' x2='0' y1='0' y2='1'>\
      <stop offset='0' stop-color='%2332a852'/>\
      <stop offset='1' stop-color='%232d7b3f'/>\
    </linearGradient>\
  </defs>\
  <path d='M32 4 L18 22 H26 L16 36 H26 L10 56 H54 L38 36 H48 L38 22 H46 Z' fill='url(%23g)'/>\
  <rect x='30' y='50' width='4' height='12' fill='%238b5a2b'/>\
</svg>");
  /* Gentle ambient sway to match the old decoration */
  transform-origin: bottom center;
  animation: tree-sway 3.8s ease-in-out infinite alternate, tree-blink 3s ease-in-out infinite alternate;
}
.xmas-tree.right { left: auto; right: 20px; }
.xmas-tree:focus { outline: 2px solid rgba(255,255,255,0.8); outline-offset: 2px; }

/* Tap/click shake boost */
.xmas-tree.shake { animation: tree-shake 0.65s ease-in-out 1 both; }
@keyframes tree-shake {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(-6deg); }
  30%  { transform: rotate(6deg); }
  45%  { transform: rotate(-4deg); }
  60%  { transform: rotate(4deg); }
  75%  { transform: rotate(-2deg); }
  90%  { transform: rotate(2deg); }
  100% { transform: rotate(0deg); }
}

/* Local, short‑lived snowflakes emitted from a tree */
.xmas-snowflake {
  position: fixed;
  left: 0; top: 0; /* actual start pos set inline */
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 0 6px rgba(255,255,255,0.8);
  pointer-events: none;
  z-index: 3;
  opacity: 0.95;
  transform: translate3d(0,0,0) scale(var(--s, 1));
  animation-name: flake-fall;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes flake-fall {
  to {
    transform: translate3d(var(--dx, 12px), var(--dy, 160px), 0) scale(var(--s, 1));
    opacity: 0;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .xmas-tree { animation: none; }
  .xmas-tree.shake { animation: none; }
}

/* Do not show interactive pieces outside the season */
body:not(.theme-christmas) .xmas-tree,
body:not(.theme-christmas) .xmas-snowflake { display: none !important; }