/* Christmas theme: evergreen, holly red, cream, antique gold. Active 15 October to 6 January (see src/Themes.php). */
:root {
  --ink: #11392a;
  --ink-soft: #1c5039;
  --ink-rgb: 17 57 42;            /* --ink as r g b, for the translucent washes over the banner */
  --ink-glow: #1d4d3a;            /* lighter patches on dark headers */
  --snow: #fbf6ea;
  --white: #fffdf8;
  --frost: #e4ecda;
  --line: #ddd4bc;
  --input-line: #8c8266;
  --berry: #b3202a;
  --berry-dark: #8c1722;
  --berry-glow: #a52230;
  --pine: #276b46;
  --gold: #dfa736;
  --muted: #5a6554;
  --ok-bg: #dcecd8;
  --ok-line: #86b98f;
  --err-bg: #fbe1de;
  --err-line: #dd857e;
  /* text and edges that sit on --ink and --pine surfaces */
  --on-ink: #d5e6d8;
  --on-ink-muted: #b6cfba;
  --on-ink-line: #5f927a;
  --on-ink-edge: #f4e6bd;
  --on-pine: #d6ecd9;
  /* banner pictures (absolute paths: a url() inside a variable is resolved against the stylesheet that uses it). Bump ?v= when a file changes. */
  --hero-art-motion: url("/assets/themes/christmas/hero.svg?v=4");
  --hero-art-still: url("/assets/themes/christmas/hero-still.svg");
}

/* Santa's sleigh crosses the top of the banner now and then, left to right and then right to left (64-second loop, two 12-second flights).
   It is its own element rather than part of the banner picture, so it always flies just under the header however the banner is cropped.
   app.js adds .ready once the page has loaded, which is when santa.svg is fetched. Not shown to people who prefer reduced motion. */
.santa { position: absolute; top: .3rem; left: 0; width: 240px; height: 52px; pointer-events: none; transform: translate(-260px, 0); background: no-repeat center / contain; }
.santa.ready { background-image: url("/assets/themes/christmas/santa.svg?v=1"); animation: santa-fly 64s linear infinite; }
@keyframes santa-fly {
  0%, 9.375%     { transform: translate(-260px, 0) scaleX(1); }
  14.0625%       { transform: translate(25vw, 7px) scaleX(1); }
  18.75%         { transform: translate(50vw, 0) scaleX(1); }
  23.4375%       { transform: translate(75vw, 8px) scaleX(1); }
  28.125%, 59.3% { transform: translate(calc(100vw + 20px), 0) scaleX(1); }
  59.375%        { transform: translate(calc(100vw + 20px), 4px) scaleX(-1); }
  64.0625%       { transform: translate(75vw, 0) scaleX(-1); }
  68.75%         { transform: translate(50vw, 8px) scaleX(-1); }
  73.4375%       { transform: translate(25vw, 0) scaleX(-1); }
  78.125%, 100%  { transform: translate(-260px, 6px) scaleX(-1); }
}
@media (max-width: 640px) { .santa { width: 190px; height: 41px; } }
@media (prefers-reduced-motion: reduce) { .santa { display: none; } }