/* Christmas (config/themes/christmas.yml): pine green, berry red, gold and snow in the week of
   Christmas. Every rule keys on body[data-app-theme="christmas"] or on an xmas- class only this
   theme's partials and scripts add, so the file does nothing on any other day. Most of the costume
   is the app's own tokens with new values; the rest styles app/views/themes/christmas. docs/THEMES.md. */

body[data-app-theme="christmas"] {
  --xmas-pine: #1d4d35;
  --xmas-berry: #c8102e;
  --xmas-gold: #e0b44f;
  --xmas-ice: #dbe8f1;
  --xmas-snow: #a9c1d3;      /* falling snow: a pale blue that shows on the light plane */
  --xmas-cap: #ffffff;       /* the snow lying on cards and panels */
  --xmas-cap-shade: rgba(60, 90, 120, 0.18);
  --xmas-night-1: #0b1e33;
  --xmas-night-2: #22476b;
  --xmas-bulb-1: #ff4b5c;
  --xmas-bulb-2: #ffd34d;
  --xmas-bulb-3: #59e08f;
  --xmas-bulb-4: #5cc8ff;

  --plane: #edf3f7;
  --rail: var(--xmas-pine);
  --rail-ink: #f3f7ef;
  --rail-ink-2: #b9d6b0;
  --rail-hover: rgba(255, 255, 255, 0.1);
  --rail-active: rgba(255, 255, 255, 0.16);

  --chart-annotation: rgba(29, 77, 53, 0.09);
  --chart-annotation-ink: var(--xmas-pine);
  --chart-endpoint: var(--xmas-berry);
}

@media (prefers-color-scheme: dark) {
  body[data-app-theme="christmas"] {
    --xmas-pine: #0f2d20;
    --xmas-snow: #e8f1f8;
    --xmas-cap: #dfe9f1;
    --xmas-cap-shade: rgba(0, 0, 0, 0.35);
    --plane: #0b1216;
    --rail-ink-2: #9cc493;
    --chart-annotation: rgba(232, 241, 248, 0.08);
    --chart-annotation-ink: var(--xmas-ice);
    --chart-endpoint: var(--xmas-gold);
  }
}

/* Snow falling behind the content (snow_controller.js): over the plane, under the rail, cards and
   panels. A blizzard brings it in front for a few seconds, still letting every click through. The
   drift it leaves along the foot of the window lies in front of the page, under the snowman, and
   takes no clicks either. */
.xmas-snow, .xmas-drift { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.xmas-snow { z-index: -1; transition: opacity 1.2s; }
.xmas-snow.is-blizzard { z-index: 60; }
.xmas-drift { z-index: 35; }

/* Chasing lights down the rail's edge: four colours of bulb on a dark wire, stepping one bulb along.
   On a phone the rail is a bar at the top, and the lights run along its foot. */
@media (max-width: 900px) { body[data-app-theme="christmas"] .rail { position: relative; } } /* sticky, so positioned, on wider screens */
body[data-app-theme="christmas"] .rail::before {
  content: ""; position: absolute; top: 0; bottom: 0; right: 3px; width: 12px; pointer-events: none;
  background:
    radial-gradient(circle at 6px 12px, var(--xmas-bulb-1) 3.5px, transparent 4.5px),
    radial-gradient(circle at 6px 36px, var(--xmas-bulb-2) 3.5px, transparent 4.5px),
    radial-gradient(circle at 6px 60px, var(--xmas-bulb-3) 3.5px, transparent 4.5px),
    radial-gradient(circle at 6px 84px, var(--xmas-bulb-4) 3.5px, transparent 4.5px),
    linear-gradient(to right, transparent 5.5px, rgba(0, 0, 0, 0.45) 5.5px, rgba(0, 0, 0, 0.45) 6.5px, transparent 6.5px);
  background-size: 12px 96px;
  filter: drop-shadow(0 0 3px rgba(255, 240, 200, 0.55));
  animation: xmas-chase 2.4s steps(4) infinite;
}
@media (max-width: 900px) {
  body[data-app-theme="christmas"] .rail::before {
    top: auto; left: 0; right: 0; bottom: 2px; width: auto; height: 12px;
    background:
      radial-gradient(circle at 12px 6px, var(--xmas-bulb-1) 3.5px, transparent 4.5px),
      radial-gradient(circle at 36px 6px, var(--xmas-bulb-2) 3.5px, transparent 4.5px),
      radial-gradient(circle at 60px 6px, var(--xmas-bulb-3) 3.5px, transparent 4.5px),
      radial-gradient(circle at 84px 6px, var(--xmas-bulb-4) 3.5px, transparent 4.5px),
      linear-gradient(to bottom, transparent 5.5px, rgba(0, 0, 0, 0.45) 5.5px, rgba(0, 0, 0, 0.45) 6.5px, transparent 6.5px);
    background-size: 96px 12px;
    animation-name: xmas-chase-across;
  }
}
@keyframes xmas-chase { to { background-position: 0 96px; } }
@keyframes xmas-chase-across { to { background-position: 96px 0; } }

/* Snow lying along the top of every card and panel. Panels use their ::before only while being
   arranged (components.css), so those keep it. */
body[data-app-theme="christmas"] .card,
body[data-app-theme="christmas"] .panel { position: relative; }
body[data-app-theme="christmas"] .card::before,
body[data-app-theme="christmas"] .panel:not(.is-drop-before)::before {
  content: ""; position: absolute; top: -6px; left: 8px; right: 8px; height: 12px; pointer-events: none;
  background:
    radial-gradient(ellipse 17px 7px at 50% 100%, var(--xmas-cap) 96%, transparent 100%) 0 0 / 34px 12px repeat-x,
    radial-gradient(ellipse 11px 6px at 50% 100%, var(--xmas-cap) 96%, transparent 100%) 17px 2px / 34px 10px repeat-x;
  filter: drop-shadow(0 -1px 1px var(--xmas-cap-shade));
}

/* A bauble hanging into the corner of each dashboard card, swaying, and swinging when the card is
   hovered. */
body[data-app-theme="christmas"] .card { padding-right: 64px; }
.xmas-bauble {
  position: absolute; top: 0; right: 22px; width: 26px; height: calc(var(--xmas-string) + 30px);
  transform-origin: 50% 0; pointer-events: none;
  background: linear-gradient(var(--ink-3), var(--ink-3)) 50% 0 / 1px var(--xmas-string) no-repeat;
  animation: xmas-sway 4s ease-in-out infinite alternate; animation-delay: calc(var(--d) * -1);
}
.xmas-bauble::before { content: ""; position: absolute; left: 9px; top: var(--xmas-string); width: 8px; height: 5px; border-radius: 1px; background: var(--xmas-gold); }
.xmas-bauble::after {
  content: ""; position: absolute; left: 0; top: calc(var(--xmas-string) + 4px); width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.85) 0 3px, transparent 4px), radial-gradient(circle at 40% 35%, var(--xmas-bauble), color-mix(in srgb, var(--xmas-bauble) 55%, black));
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}
.card:hover .xmas-bauble { animation: xmas-swing 0.9s ease-in-out 2; }
@keyframes xmas-sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes xmas-swing { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(18deg); } 75% { transform: rotate(-14deg); } }

/* The banner: a winter night over a village, on the right; the words sit on the sky. */
.xmas-banner {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 22px; padding: 18px 18px 30px; min-height: 96px; border-radius: var(--radius);
  background: linear-gradient(180deg, var(--xmas-night-1), var(--xmas-night-2)); color: #f3f7fb;
}
.xmas-banner::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 12px; pointer-events: none; z-index: 1;
  background:
    radial-gradient(circle at 12px 7px, var(--xmas-bulb-1) 3px, transparent 4px),
    radial-gradient(circle at 36px 7px, var(--xmas-bulb-2) 3px, transparent 4px),
    radial-gradient(circle at 60px 7px, var(--xmas-bulb-3) 3px, transparent 4px),
    radial-gradient(circle at 84px 7px, var(--xmas-bulb-4) 3px, transparent 4px),
    linear-gradient(to bottom, transparent 6px, rgba(0, 0, 0, 0.5) 6px, rgba(0, 0, 0, 0.5) 7px, transparent 7px);
  background-size: 96px 12px;
  filter: drop-shadow(0 0 3px rgba(255, 240, 200, 0.6));
  animation: xmas-chase-across 2.4s steps(4) infinite;
}
.xmas-scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.xmas-banner p, .xmas-banner .btn { position: relative; }
.xmas-banner p { flex: 1; min-width: 16ch; max-width: 60ch; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.xmas-banner .btn { flex: none; }
@media (max-width: 700px) { /* the scene drops to a strip under the words instead of behind them */
  .xmas-banner { padding-bottom: 76px; }
  .xmas-scene { top: auto; height: 70px; }
}
.xmas-star { animation: xmas-twinkle 2.4s ease-in-out infinite alternate; animation-delay: var(--d); }
.xmas-window { animation: xmas-flicker 3s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
.xmas-smoke circle { animation: xmas-smoke 3.3s ease-out infinite; animation-delay: var(--d); opacity: 0; }
@keyframes xmas-twinkle { from { opacity: 0.25; } to { opacity: 1; } }
@keyframes xmas-flicker { 0% { fill: #ffd77a; } 50% { fill: #ffc451; } 100% { fill: #ffe39c; } }
@keyframes xmas-smoke { 0% { transform: translate(0, 0) scale(0.6); opacity: 0.8; } 100% { transform: translate(10px, -34px) scale(1.6); opacity: 0; } }

/* Snow falling on a present while figures are wrapped: on the warming page and in a computing panel
   (chart_controller.js sets is-computing; hidden the rest of the time). */
body[data-app-theme="christmas"] .empty:has(.xmas-flurry) { position: relative; overflow: hidden; }
.empty:has(.xmas-flurry) > :not(.xmas-flurry) { position: relative; }
.panel-body > .xmas-flurry { display: none; }
body[data-app-theme="christmas"] .panel-body.is-computing { overflow: hidden; }
.panel-body.is-computing > .xmas-flurry { display: block; }
.xmas-flurry { position: absolute; inset: 0; pointer-events: none; }
.xmas-flurry i {
  position: absolute; bottom: 4px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%;
  background: var(--xmas-snow); opacity: 0.9;
  animation: xmas-fall 4.2s linear infinite; animation-delay: var(--d);
}
.xmas-present { position: absolute; right: 16px; bottom: 6px; transform-origin: 50% 100%; animation: xmas-wiggle 2.6s ease-in-out infinite; }
@keyframes xmas-fall {
  0% { transform: translate(0, -240px); }
  50% { transform: translate(12px, -120px); }
  100% { transform: translate(-6px, 0); }
}
@keyframes xmas-wiggle { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-9deg) translateY(-3px); } 82% { transform: rotate(8deg); } 88% { transform: rotate(-5deg); } 94% { transform: rotate(3deg); } }

/* The sleigh crossing the sky now and then (sleigh_controller.js), above everything, taking no clicks. */
.xmas-sky { position: fixed; inset: 0; z-index: 55; pointer-events: none; overflow: hidden; }
.xmas-sleigh { position: absolute; top: 0; left: 0; width: 220px; height: auto; visibility: hidden; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25)); }
.xmas-sky.is-flying .xmas-sleigh { visibility: visible; }
.xmas-sky.is-flying .xmas-legs { animation: xmas-gallop 0.36s ease-in-out infinite alternate; transform-origin: 0 0; }
.xmas-reindeer .xmas-legs { animation-delay: var(--d); }
@keyframes xmas-gallop { from { transform: skewX(-14deg); } to { transform: skewX(14deg); } }
.xmas-spark { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--xmas-gold); box-shadow: 0 0 6px 2px rgba(255, 220, 120, 0.8); }

/* The snowman peeking up from the bottom corner; it comes up on hover or focus, waves, and answers a
   click (snowman_controller.js). Not on a phone, where the corner is precious. */
.xmas-snowman { position: fixed; right: max(18px, env(safe-area-inset-right, 0px)); bottom: 0; z-index: 40; pointer-events: none; display: flex; flex-direction: column; align-items: flex-end; }
.xmas-snowman-button {
  pointer-events: auto; padding: 0; border: 0; background: none; cursor: pointer; line-height: 0;
  transform: translateY(58%); transition: transform 0.35s cubic-bezier(.3, 1.5, .5, 1);
}
.xmas-snowman-button:hover, .xmas-snowman-button:focus-visible, .xmas-snowman.is-greeting .xmas-snowman-button { transform: translateY(6%); }
.xmas-snowman-figure { width: 76px; height: auto; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18)); }
.xmas-snowman-arm { transform-box: fill-box; transform-origin: 0% 100%; }
.xmas-snowman-button:hover .xmas-snowman-arm, .xmas-snowman.is-greeting .xmas-snowman-arm { animation: xmas-wave 0.5s ease-in-out infinite alternate; }
@keyframes xmas-wave { from { transform: rotate(-12deg); } to { transform: rotate(18deg); } }
.xmas-snowman-says {
  pointer-events: auto; position: relative; max-width: 22ch; margin: 0 6px 8px 0; padding: 8px 12px; border-radius: 12px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15); font-size: 0.95rem;
}
.xmas-snowman-says::after { content: ""; position: absolute; right: 28px; bottom: -7px; width: 12px; height: 12px; background: var(--surface); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: rotate(45deg); }
@media (max-width: 700px) { .xmas-snowman { display: none; } }