/* Tracklyst seasonal theme — Christmas.
   Loaded alongside /theme/halloween/theme.css (both are always present, so
   a playlist saved with either season renders correctly whatever the date).
   Everything here is gated behind [data-season="christmas"] and uses its own
   --xmas-* palette and .xmas-* class names, so nothing in this file can leak
   into the Halloween look or vice versa. */

/* ── PALETTE ── global so the Settings season card renders in color even
   while decor is switched off; visibility is handled by the rules below. */
:root {
  --xmas-snow: #f6faff;
  --xmas-snow-shade: #c3d3e6;
  --xmas-flake: #eef5ff;
  --xmas-red: #e0393e;
  --xmas-stripe: #f6f2ea;
  --xmas-gold: #ffcf4d;
  --xmas-blue: #5cb6ff;
  --xmas-green: #45d17f;
  --xmas-tree: #2f9b5a;
  --xmas-branch: #7a5233;
  --xmas-hat: #1d1d22;
  --xmas-coal: #24242a;
  --xmas-carrot: #ff8a2a;
  --xmas-socket: #5d6b62;
  --xmas-wire: #4c6f57;
  /* Snow drift that sits on top of headings. A data URI can't read var(),
     so the colors are baked in; the "paper" override below swaps in a
     version with a darker rim so it still reads on a light background. */
  --xmas-cap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 30' preserveAspectRatio='none'%3E%3Cpath fill='%23f6faff' stroke='%23c3d3e6' stroke-width='1' vector-effect='non-scaling-stroke' d='M6,24 C1,23 2,15 10,15 C13,8 25,7 31,12 C37,5 52,5 58,11 C66,5 80,6 86,12 C94,6 108,6 114,12 C122,5 138,6 144,12 C151,6 166,7 171,13 C178,8 192,10 193,17 C199,18 199,24 193,24 L118,24 C116,24 115,25 115,27 C115,29.5 111,29.5 111,27 L111,25 C111,24.3 110.5,24 110,24 L52,24 C50,24 49.5,24.5 49.5,26 C49.5,28 46.5,28 46.5,26 C46.5,24.6 46,24 44.5,24 Z'/%3E%3C/svg%3E");
}
html[data-bg="paper"] {
  --xmas-flake: #9dbbe0;
  --xmas-snow-shade: #93a9c2;
  --xmas-wire: #3d5a46;
  --xmas-cap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 30' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' stroke='%2393a9c2' stroke-width='1.2' vector-effect='non-scaling-stroke' d='M6,24 C1,23 2,15 10,15 C13,8 25,7 31,12 C37,5 52,5 58,11 C66,5 80,6 86,12 C94,6 108,6 114,12 C122,5 138,6 144,12 C151,6 166,7 171,13 C178,8 192,10 193,17 C199,18 199,24 193,24 L118,24 C116,24 115,25 115,27 C115,29.5 111,29.5 111,27 L111,25 C111,24.3 110.5,24 110,24 L52,24 C50,24 49.5,24.5 49.5,26 C49.5,28 46.5,28 46.5,26 C46.5,24.6 46,24 44.5,24 Z'/%3E%3C/svg%3E");
}

/* ── BACKGROUND TINT ── cold blue light from the top, a little pine green
   at the bottom. Same containers as Halloween's tint (screens + pricing). */
[data-season="christmas"] {
  background-image:
    radial-gradient(ellipse 1400px 800px at 10% -5%, rgba(120, 170, 255, 0.13), transparent 78%),
    radial-gradient(ellipse 1500px 900px at 100% 100%, rgba(40, 150, 90, 0.12), transparent 80%);
}

/* ── SNOW PILED ON TEXT ── a drift on the app's "+ New Playlist" button,
   the listener's playlist title and the app wordmark. (The marketing pages
   get icicles instead — see WEBSITE ICICLES.) Absolutely positioned, so it
   never moves the layout. */
[data-season="christmas"] :is(.dash-new-btn, .view-header h1, .wordmark) {
  position: relative;
}
/* The playlist title is a full-width block; shrink it to its text so the
   snow sits on the words, not across the empty space after them. */
[data-season="christmas"] .view-header h1 { width: fit-content; max-width: 100%; }
[data-season="christmas"] :is(.dash-new-btn, .view-header h1, .wordmark)::before {
  content: "";
  position: absolute;
  left: -0.07em; right: -0.05em;
  top: -0.12em; height: 0.42em; min-height: 7px;
  background: var(--xmas-cap) center bottom / 100% 100% no-repeat;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
  pointer-events: none;
  z-index: 1;
}
/* The mono wordmark is small and letter-spaced — a slightly taller drift
   that ignores the trailing letter-spacing. */
[data-season="christmas"] .wordmark::before { top: -0.3em; height: 0.6em; right: 0.08em; }
/* "+ New Playlist" button: its text is only 12px, so size the drift in px.
   It sits on the button's top edge and spills a little past the corners. */
[data-season="christmas"] .btn.dash-new-btn::before { top: -13px; height: 22px; left: -5px; right: -5px; }

/* ── CHRISTMAS LIGHTS ── a string hanging just below the top bar (marketing
   nav, dashboard header, listener header). Bulbs are filled in by
   TL_XMAS_DECOR.fill() in icons.js; the wire is a repeating background
   tile whose swag lines up with each 46px-wide bulb. */
.xmas-lights { display: none; }
[data-season="christmas"] .xmas-lights {
  display: flex;
  position: absolute; left: 0; right: 0; top: 100%;
  height: 40px; margin-top: -4px;
  overflow: hidden; pointer-events: none; z-index: 2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 40' width='46' height='40'%3E%3Cpath d='M0,2 Q23,14 46,2' fill='none' stroke='%234c6f57' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x 0 0 / 46px 40px;
}
[data-season="christmas"] .dash-header,
[data-season="christmas"] .listener-header { position: relative; }
/* The playlist title sits right under the listener header — leave room for
   the bulbs so they hang in their own space instead of over the title. */
[data-season="christmas"] .listener-header { margin-bottom: 30px; }
.xmas-bulb { flex: 0 0 46px; height: 40px; }
.xmas-bulb svg { display: block; width: 100%; height: 100%; overflow: visible; }
.xmas-bulb:nth-child(4n+1) { --xmas-bulb: var(--xmas-red); }
.xmas-bulb:nth-child(4n+2) { --xmas-bulb: var(--xmas-green); }
.xmas-bulb:nth-child(4n+3) { --xmas-bulb: var(--xmas-gold); }
.xmas-bulb:nth-child(4n+4) { --xmas-bulb: var(--xmas-blue); }
.xmas-bulb-glass { animation: xmasTwinkle 2.4s ease-in-out infinite alternate; }
.xmas-bulb:nth-child(3n+2) .xmas-bulb-glass { animation-duration: 1.8s; animation-delay: -0.9s; }
.xmas-bulb:nth-child(3n) .xmas-bulb-glass   { animation-duration: 3.1s; animation-delay: -1.7s; }
.xmas-bulb:nth-child(5n) .xmas-bulb-glass   { animation-duration: 1.3s; animation-delay: -0.4s; }

/* ── ICICLES ── hanging from the bottom edge of each dashboard stat tile.
   The tiles' 28px bottom margin leaves room for them. Colors are baked into
   the data URIs (no var() there); Paper gets a darker outline. */
:root { --xmas-icicles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 22' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f6faff'/%3E%3Cstop offset='1' stop-color='%239fd0ff' stop-opacity='0.75'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' stroke='%23a9c4e2' stroke-width='0.8' vector-effect='non-scaling-stroke' d='M1,1.5 L8,1.5 C6.25,6.0 5.34,10.2 4.5,12 C3.66,10.2 2.75,6.0 1,1.5 Z M9,1.5 L13,1.5 C12.0,3.0 11.48,5.1 11.0,6 C10.52,5.1 10.0,3.0 9,1.5 Z M14,1.5 L23,1.5 C20.75,10.0 19.58,17.0 18.5,20 C17.42,17.0 16.25,10.0 14,1.5 Z M24,1.5 L29,1.5 C27.75,4.5 27.1,7.6499999999999995 26.5,9 C25.9,7.6499999999999995 25.25,4.5 24,1.5 Z M30,1.5 L37,1.5 C35.25,7.5 34.34,12.75 33.5,15 C32.66,12.75 31.75,7.5 30,1.5 Z M38,1.5 L41,1.5 C40.25,2.5 39.86,4.25 39.5,5 C39.14,4.25 38.75,2.5 38,1.5 Z M42,1.5 L50,1.5 C48.0,9.0 46.96,15.299999999999999 46.0,18 C45.04,15.299999999999999 44.0,9.0 42,1.5 Z M51,1.5 L56,1.5 C54.75,4.0 54.1,6.8 53.5,8 C52.9,6.8 52.25,4.0 51,1.5 Z M57,1.5 L64,1.5 C62.25,6.5 61.34,11.049999999999999 60.5,13 C59.66,11.049999999999999 58.75,6.5 57,1.5 Z M65,1.5 L69,1.5 C68.0,3.0 67.48,5.1 67.0,6 C66.52,5.1 66.0,3.0 65,1.5 Z M70,1.5 L79,1.5 C76.75,10.5 75.58,17.849999999999998 74.5,21 C73.42,17.849999999999998 72.25,10.5 70,1.5 Z M80,1.5 L85,1.5 C83.75,5.0 83.1,8.5 82.5,10 C81.9,8.5 81.25,5.0 80,1.5 Z M86,1.5 L93,1.5 C91.25,7.0 90.34,11.9 89.5,14 C88.66,11.9 87.75,7.0 86,1.5 Z M94,1.5 L97,1.5 C96.25,2.5 95.86,4.25 95.5,5 C95.14,4.25 94.75,2.5 94,1.5 Z M98,1.5 L106,1.5 C104.0,8.5 102.96,14.45 102.0,17 C101.04,14.45 100.0,8.5 98,1.5 Z M107,1.5 L112,1.5 C110.75,3.5 110.1,5.95 109.5,7 C108.9,5.95 108.25,3.5 107,1.5 Z M113,1.5 L119,1.5 C117.5,6.0 116.72,10.2 116.0,12 C115.28,10.2 114.5,6.0 113,1.5 Z '/%3E%3Crect x='0' y='0' width='120' height='2.6' rx='1.3' fill='%23f6faff'/%3E%3Cpath fill='none' stroke='white' stroke-opacity='0.7' stroke-width='0.8' stroke-linecap='round' d='M3.24,3 L3.94,6.6000000000000005 M16.88,3 L17.78,11.0 M32.24,3 L32.94,8.25 M44.56,3 L45.36,9.9 M59.24,3 L59.94,7.15 M72.88,3 L73.78,11.55 M88.24,3 L88.94,7.700000000000001 M100.56,3 L101.36,9.350000000000001 M114.92,3 L115.52,6.6000000000000005 '/%3E%3C/svg%3E"); }
html[data-bg="paper"] { --xmas-icicles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 22' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23a8d4ff' stop-opacity='0.75'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' stroke='%237f9ab8' stroke-width='1' vector-effect='non-scaling-stroke' d='M1,1.5 L8,1.5 C6.25,6.0 5.34,10.2 4.5,12 C3.66,10.2 2.75,6.0 1,1.5 Z M9,1.5 L13,1.5 C12.0,3.0 11.48,5.1 11.0,6 C10.52,5.1 10.0,3.0 9,1.5 Z M14,1.5 L23,1.5 C20.75,10.0 19.58,17.0 18.5,20 C17.42,17.0 16.25,10.0 14,1.5 Z M24,1.5 L29,1.5 C27.75,4.5 27.1,7.6499999999999995 26.5,9 C25.9,7.6499999999999995 25.25,4.5 24,1.5 Z M30,1.5 L37,1.5 C35.25,7.5 34.34,12.75 33.5,15 C32.66,12.75 31.75,7.5 30,1.5 Z M38,1.5 L41,1.5 C40.25,2.5 39.86,4.25 39.5,5 C39.14,4.25 38.75,2.5 38,1.5 Z M42,1.5 L50,1.5 C48.0,9.0 46.96,15.299999999999999 46.0,18 C45.04,15.299999999999999 44.0,9.0 42,1.5 Z M51,1.5 L56,1.5 C54.75,4.0 54.1,6.8 53.5,8 C52.9,6.8 52.25,4.0 51,1.5 Z M57,1.5 L64,1.5 C62.25,6.5 61.34,11.049999999999999 60.5,13 C59.66,11.049999999999999 58.75,6.5 57,1.5 Z M65,1.5 L69,1.5 C68.0,3.0 67.48,5.1 67.0,6 C66.52,5.1 66.0,3.0 65,1.5 Z M70,1.5 L79,1.5 C76.75,10.5 75.58,17.849999999999998 74.5,21 C73.42,17.849999999999998 72.25,10.5 70,1.5 Z M80,1.5 L85,1.5 C83.75,5.0 83.1,8.5 82.5,10 C81.9,8.5 81.25,5.0 80,1.5 Z M86,1.5 L93,1.5 C91.25,7.0 90.34,11.9 89.5,14 C88.66,11.9 87.75,7.0 86,1.5 Z M94,1.5 L97,1.5 C96.25,2.5 95.86,4.25 95.5,5 C95.14,4.25 94.75,2.5 94,1.5 Z M98,1.5 L106,1.5 C104.0,8.5 102.96,14.45 102.0,17 C101.04,14.45 100.0,8.5 98,1.5 Z M107,1.5 L112,1.5 C110.75,3.5 110.1,5.95 109.5,7 C108.9,5.95 108.25,3.5 107,1.5 Z M113,1.5 L119,1.5 C117.5,6.0 116.72,10.2 116.0,12 C115.28,10.2 114.5,6.0 113,1.5 Z '/%3E%3Crect x='0' y='0' width='120' height='2.6' rx='1.3' fill='%23ffffff'/%3E%3Cpath fill='none' stroke='white' stroke-opacity='0.7' stroke-width='0.8' stroke-linecap='round' d='M3.24,3 L3.94,6.6000000000000005 M16.88,3 L17.78,11.0 M32.24,3 L32.94,8.25 M44.56,3 L45.36,9.9 M59.24,3 L59.94,7.15 M72.88,3 L73.78,11.55 M88.24,3 L88.94,7.700000000000001 M100.56,3 L101.36,9.350000000000001 M114.92,3 L115.52,6.6000000000000005 '/%3E%3C/svg%3E"); }
[data-season="christmas"] #dash-stats .dash-stat-tile { position: relative; }
[data-season="christmas"] #dash-stats .dash-stat-tile::after {
  content: "";
  position: absolute; left: 10px; right: 10px; top: calc(100% - 1px);
  height: 22px;
  background: var(--xmas-icicles) 0 0 / 120px 22px repeat-x;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
  pointer-events: none;
}

/* ── WEBSITE ICICLES ── a few icicles hanging under each marketing heading
   (home page + pricing; not the home page's big hero headline) and a sparse row under each screenshot frame.
   Absolutely positioned, so they never move the layout; they hang a little
   into the line box's descender space so they read as attached to the text. */
:root {
  --xmas-icicles-few: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 20'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f6faff'/%3E%3Cstop offset='1' stop-color='%239fd0ff' stop-opacity='0.75'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' stroke='%23a9c4e2' stroke-width='0.8' d='M3,1.5 L8,1.5 C6.75,4.0 6.1,6.8 5.5,8 C4.9,6.8 4.2,4.0 3,1.5 Z M9,1.5 L16,1.5 C14.25,7.0 13.3,11.9 12.5,14 C11.7,11.9 10.8,7.0 9,1.5 Z M17,1.5 L21,1.5 C20.0,3.0 19.5,5.1 19.0,6 C18.5,5.1 18.0,3.0 17,1.5 Z M22,1.5 L30,1.5 C28.0,9.5 27.0,16.1 26.0,19 C25.0,16.1 24.0,9.5 22,1.5 Z M31,1.5 L36,1.5 C34.75,5.0 34.1,8.5 33.5,10 C32.9,8.5 32.2,5.0 31,1.5 Z M37,1.5 L40,1.5 C39.25,2.5 38.9,4.2 38.5,5 C38.1,4.2 37.8,2.5 37,1.5 Z M41,1.5 L48,1.5 C46.25,8.0 45.3,13.6 44.5,16 C43.7,13.6 42.8,8.0 41,1.5 Z M49,1.5 L53,1.5 C52.0,3.5 51.5,6.0 51.0,7 C50.5,6.0 50.0,3.5 49,1.5 Z M54,1.5 L60,1.5 C58.5,6.0 57.7,10.2 57.0,12 C56.3,10.2 55.5,6.0 54,1.5 Z M61,1.5 L64,1.5 C63.25,2.5 62.9,4.2 62.5,5 C62.1,4.2 61.8,2.5 61,1.5 Z M65,1.5 L73,1.5 C71.0,9.0 70.0,15.3 69.0,18 C68.0,15.3 67.0,9.0 65,1.5 Z M74,1.5 L79,1.5 C77.75,4.5 77.1,7.6 76.5,9 C75.9,7.6 75.2,4.5 74,1.5 Z M80,1.5 L84,1.5 C83.0,3.0 82.5,5.1 82.0,6 C81.5,5.1 81.0,3.0 80,1.5 Z M85,1.5 L92,1.5 C90.25,6.5 89.3,11.0 88.5,13 C87.7,11.0 86.8,6.5 85,1.5 Z M93,1.5 L96,1.5 C95.25,2.5 94.9,4.2 94.5,5 C94.1,4.2 93.8,2.5 93,1.5 Z M97,1.5 L103,1.5 C101.5,5.0 100.7,8.5 100.0,10 C99.3,8.5 98.5,5.0 97,1.5 Z M104,1.5 L108,1.5 C107.0,3.0 106.5,5.1 106.0,6 C105.5,5.1 105.0,3.0 104,1.5 Z '/%3E%3Crect x='2' y='0' width='107' height='2.6' rx='1.3' fill='%23f6faff'/%3E%3Cpath fill='none' stroke='white' stroke-opacity='0.7' stroke-width='0.8' stroke-linecap='round' d='M11.2,3 L11.9,7.7 M24.6,3 L25.4,10.5 M43.2,3 L43.9,8.8 M55.9,3 L56.5,6.6 M67.6,3 L68.4,9.9 M87.2,3 L87.9,7.2 '/%3E%3C/svg%3E");
  --xmas-icicles-row: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 20'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f6faff'/%3E%3Cstop offset='1' stop-color='%239fd0ff' stop-opacity='0.75'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' stroke='%23a9c4e2' stroke-width='0.8' d='M4,1.5 L9,1.5 C7.75,4.0 7.1,6.8 6.5,8 C5.9,6.8 5.2,4.0 4,1.5 Z M10,1.5 L17,1.5 C15.25,7.5 14.3,12.8 13.5,15 C12.7,12.8 11.8,7.5 10,1.5 Z M18,1.5 L21,1.5 C20.25,2.5 19.9,4.2 19.5,5 C19.1,4.2 18.8,2.5 18,1.5 Z M22,1.5 L28,1.5 C26.5,5.5 25.7,9.3 25.0,11 C24.3,9.3 23.5,5.5 22,1.5 Z M63,1.5 L67,1.5 C66.0,3.0 65.5,5.1 65.0,6 C64.5,5.1 64.0,3.0 63,1.5 Z M68,1.5 L76,1.5 C74.0,9.5 73.0,16.1 72.0,19 C71.0,16.1 70.0,9.5 68,1.5 Z M77,1.5 L82,1.5 C80.75,4.5 80.1,7.6 79.5,9 C78.9,7.6 78.2,4.5 77,1.5 Z M83,1.5 L86,1.5 C85.25,2.5 84.9,4.2 84.5,5 C84.1,4.2 83.8,2.5 83,1.5 Z M87,1.5 L93,1.5 C91.5,6.5 90.7,11.0 90.0,13 C89.3,11.0 88.5,6.5 87,1.5 Z M94,1.5 L98,1.5 C97.0,3.0 96.5,5.1 96.0,6 C95.5,5.1 95.0,3.0 94,1.5 Z M148,1.5 L153,1.5 C151.75,5.0 151.1,8.5 150.5,10 C149.9,8.5 149.2,5.0 148,1.5 Z M154,1.5 L157,1.5 C156.25,2.5 155.9,4.2 155.5,5 C155.1,4.2 154.8,2.5 154,1.5 Z M196,1.5 L202,1.5 C200.5,6.0 199.7,10.2 199.0,12 C198.3,10.2 197.5,6.0 196,1.5 Z M203,1.5 L207,1.5 C206.0,3.0 205.5,5.1 205.0,6 C204.5,5.1 204.0,3.0 203,1.5 Z M208,1.5 L215,1.5 C213.25,8.5 212.3,14.4 211.5,17 C210.7,14.4 209.8,8.5 208,1.5 Z M216,1.5 L219,1.5 C218.25,2.5 217.9,4.2 217.5,5 C217.1,4.2 216.8,2.5 216,1.5 Z M262,1.5 L266,1.5 C265.0,3.5 264.5,6.0 264.0,7 C263.5,6.0 263.0,3.5 262,1.5 Z M267,1.5 L273,1.5 C271.5,7.0 270.7,11.9 270.0,14 C269.3,11.9 268.5,7.0 267,1.5 Z M274,1.5 L277,1.5 C276.25,2.5 275.9,4.2 275.5,5 C275.1,4.2 274.8,2.5 274,1.5 Z M278,1.5 L283,1.5 C281.75,4.5 281.1,7.6 280.5,9 C279.9,7.6 279.2,4.5 278,1.5 Z M284,1.5 L288,1.5 C287.0,3.0 286.5,5.1 286.0,6 C285.5,5.1 285.0,3.0 284,1.5 Z '/%3E%3Crect x='3' y='0' width='26' height='2.6' rx='1.3' fill='%23f6faff'/%3E%3Crect x='62' y='0' width='37' height='2.6' rx='1.3' fill='%23f6faff'/%3E%3Crect x='147' y='0' width='11' height='2.6' rx='1.3' fill='%23f6faff'/%3E%3Crect x='195' y='0' width='25' height='2.6' rx='1.3' fill='%23f6faff'/%3E%3Crect x='261' y='0' width='28' height='2.6' rx='1.3' fill='%23f6faff'/%3E%3Cpath fill='none' stroke='white' stroke-opacity='0.7' stroke-width='0.8' stroke-linecap='round' d='M12.2,3 L12.9,8.2 M23.9,3 L24.5,6.1 M70.6,3 L71.4,10.5 M88.9,3 L89.5,7.2 M197.9,3 L198.5,6.6 M210.2,3 L210.9,9.4 M268.9,3 L269.5,7.7 '/%3E%3C/svg%3E");
}
html[data-bg="paper"] {
  --xmas-icicles-few: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 20'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23a8d4ff' stop-opacity='0.75'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' stroke='%237f9ab8' stroke-width='1' d='M3,1.5 L8,1.5 C6.75,4.0 6.1,6.8 5.5,8 C4.9,6.8 4.2,4.0 3,1.5 Z M9,1.5 L16,1.5 C14.25,7.0 13.3,11.9 12.5,14 C11.7,11.9 10.8,7.0 9,1.5 Z M17,1.5 L21,1.5 C20.0,3.0 19.5,5.1 19.0,6 C18.5,5.1 18.0,3.0 17,1.5 Z M22,1.5 L30,1.5 C28.0,9.5 27.0,16.1 26.0,19 C25.0,16.1 24.0,9.5 22,1.5 Z M31,1.5 L36,1.5 C34.75,5.0 34.1,8.5 33.5,10 C32.9,8.5 32.2,5.0 31,1.5 Z M37,1.5 L40,1.5 C39.25,2.5 38.9,4.2 38.5,5 C38.1,4.2 37.8,2.5 37,1.5 Z M41,1.5 L48,1.5 C46.25,8.0 45.3,13.6 44.5,16 C43.7,13.6 42.8,8.0 41,1.5 Z M49,1.5 L53,1.5 C52.0,3.5 51.5,6.0 51.0,7 C50.5,6.0 50.0,3.5 49,1.5 Z M54,1.5 L60,1.5 C58.5,6.0 57.7,10.2 57.0,12 C56.3,10.2 55.5,6.0 54,1.5 Z M61,1.5 L64,1.5 C63.25,2.5 62.9,4.2 62.5,5 C62.1,4.2 61.8,2.5 61,1.5 Z M65,1.5 L73,1.5 C71.0,9.0 70.0,15.3 69.0,18 C68.0,15.3 67.0,9.0 65,1.5 Z M74,1.5 L79,1.5 C77.75,4.5 77.1,7.6 76.5,9 C75.9,7.6 75.2,4.5 74,1.5 Z M80,1.5 L84,1.5 C83.0,3.0 82.5,5.1 82.0,6 C81.5,5.1 81.0,3.0 80,1.5 Z M85,1.5 L92,1.5 C90.25,6.5 89.3,11.0 88.5,13 C87.7,11.0 86.8,6.5 85,1.5 Z M93,1.5 L96,1.5 C95.25,2.5 94.9,4.2 94.5,5 C94.1,4.2 93.8,2.5 93,1.5 Z M97,1.5 L103,1.5 C101.5,5.0 100.7,8.5 100.0,10 C99.3,8.5 98.5,5.0 97,1.5 Z M104,1.5 L108,1.5 C107.0,3.0 106.5,5.1 106.0,6 C105.5,5.1 105.0,3.0 104,1.5 Z '/%3E%3Crect x='2' y='0' width='107' height='2.6' rx='1.3' fill='%23ffffff'/%3E%3Cpath fill='none' stroke='white' stroke-opacity='0.7' stroke-width='0.8' stroke-linecap='round' d='M11.2,3 L11.9,7.7 M24.6,3 L25.4,10.5 M43.2,3 L43.9,8.8 M55.9,3 L56.5,6.6 M67.6,3 L68.4,9.9 M87.2,3 L87.9,7.2 '/%3E%3C/svg%3E");
  --xmas-icicles-row: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 20'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23a8d4ff' stop-opacity='0.75'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' stroke='%237f9ab8' stroke-width='1' d='M4,1.5 L9,1.5 C7.75,4.0 7.1,6.8 6.5,8 C5.9,6.8 5.2,4.0 4,1.5 Z M10,1.5 L17,1.5 C15.25,7.5 14.3,12.8 13.5,15 C12.7,12.8 11.8,7.5 10,1.5 Z M18,1.5 L21,1.5 C20.25,2.5 19.9,4.2 19.5,5 C19.1,4.2 18.8,2.5 18,1.5 Z M22,1.5 L28,1.5 C26.5,5.5 25.7,9.3 25.0,11 C24.3,9.3 23.5,5.5 22,1.5 Z M63,1.5 L67,1.5 C66.0,3.0 65.5,5.1 65.0,6 C64.5,5.1 64.0,3.0 63,1.5 Z M68,1.5 L76,1.5 C74.0,9.5 73.0,16.1 72.0,19 C71.0,16.1 70.0,9.5 68,1.5 Z M77,1.5 L82,1.5 C80.75,4.5 80.1,7.6 79.5,9 C78.9,7.6 78.2,4.5 77,1.5 Z M83,1.5 L86,1.5 C85.25,2.5 84.9,4.2 84.5,5 C84.1,4.2 83.8,2.5 83,1.5 Z M87,1.5 L93,1.5 C91.5,6.5 90.7,11.0 90.0,13 C89.3,11.0 88.5,6.5 87,1.5 Z M94,1.5 L98,1.5 C97.0,3.0 96.5,5.1 96.0,6 C95.5,5.1 95.0,3.0 94,1.5 Z M148,1.5 L153,1.5 C151.75,5.0 151.1,8.5 150.5,10 C149.9,8.5 149.2,5.0 148,1.5 Z M154,1.5 L157,1.5 C156.25,2.5 155.9,4.2 155.5,5 C155.1,4.2 154.8,2.5 154,1.5 Z M196,1.5 L202,1.5 C200.5,6.0 199.7,10.2 199.0,12 C198.3,10.2 197.5,6.0 196,1.5 Z M203,1.5 L207,1.5 C206.0,3.0 205.5,5.1 205.0,6 C204.5,5.1 204.0,3.0 203,1.5 Z M208,1.5 L215,1.5 C213.25,8.5 212.3,14.4 211.5,17 C210.7,14.4 209.8,8.5 208,1.5 Z M216,1.5 L219,1.5 C218.25,2.5 217.9,4.2 217.5,5 C217.1,4.2 216.8,2.5 216,1.5 Z M262,1.5 L266,1.5 C265.0,3.5 264.5,6.0 264.0,7 C263.5,6.0 263.0,3.5 262,1.5 Z M267,1.5 L273,1.5 C271.5,7.0 270.7,11.9 270.0,14 C269.3,11.9 268.5,7.0 267,1.5 Z M274,1.5 L277,1.5 C276.25,2.5 275.9,4.2 275.5,5 C275.1,4.2 274.8,2.5 274,1.5 Z M278,1.5 L283,1.5 C281.75,4.5 281.1,7.6 280.5,9 C279.9,7.6 279.2,4.5 278,1.5 Z M284,1.5 L288,1.5 C287.0,3.0 286.5,5.1 286.0,6 C285.5,5.1 285.0,3.0 284,1.5 Z '/%3E%3Crect x='3' y='0' width='26' height='2.6' rx='1.3' fill='%23ffffff'/%3E%3Crect x='62' y='0' width='37' height='2.6' rx='1.3' fill='%23ffffff'/%3E%3Crect x='147' y='0' width='11' height='2.6' rx='1.3' fill='%23ffffff'/%3E%3Crect x='195' y='0' width='25' height='2.6' rx='1.3' fill='%23ffffff'/%3E%3Crect x='261' y='0' width='28' height='2.6' rx='1.3' fill='%23ffffff'/%3E%3Cpath fill='none' stroke='white' stroke-opacity='0.7' stroke-width='0.8' stroke-linecap='round' d='M12.2,3 L12.9,8.2 M23.9,3 L24.5,6.1 M70.6,3 L71.4,10.5 M88.9,3 L89.5,7.2 M197.9,3 L198.5,6.6 M210.2,3 L210.9,9.4 M268.9,3 L269.5,7.7 '/%3E%3C/svg%3E");
}
[data-season="christmas"] :is(.mkt-pain-h, .mkt-named-h, .mkt-section-h, .mkt-showcase-h,
  .hero h1, .use-case-title, .callout h2, .faq-title,
  .mkt-hero-visual, .mkt-named-visual, .mkt-feature-break-visual, .mkt-loop-col) { position: relative; }
[data-season="christmas"] :is(.mkt-pain-h, .mkt-named-h, .mkt-section-h, .mkt-showcase-h,
  .hero h1, .use-case-title, .callout h2, .faq-title)::after {
  content: "";
  position: absolute; top: calc(100% - 5px); left: 0.1em;
  width: clamp(96px, 2.6em, 170px); aspect-ratio: 110 / 20;
  background: var(--xmas-icicles-few) 0 0 / 100% 100% no-repeat;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
  pointer-events: none;
}
/* Centered headings get centered icicles. */
[data-season="christmas"] :is(.mkt-pain-h, .mkt-showcase-h, .hero h1, .faq-title)::after {
  left: 50%; transform: translateX(-50%);
}
[data-season="christmas"] :is(.mkt-hero-visual, .mkt-named-visual, .mkt-feature-break-visual, .mkt-loop-col)::after {
  content: "";
  position: absolute; left: 14px; right: 14px; top: calc(100% - 1px);
  height: 24px;
  background: var(--xmas-icicles-row) 0 0 / 384px 24px repeat-x;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
  pointer-events: none;
}

/* ── INLINE ICON ── little tree beside the "Dashboard" nav item. */
.xmas-icon-inline { display: none; width: 1.6em; height: 1.6em; vertical-align: -0.4em; margin-left: 0.3em; }
[data-season="christmas"] .xmas-icon-inline { display: inline-block; }
.xmas-icon-inline svg { width: 100%; height: 100%; display: block; }

/* ── FALLING SNOW + SNOWMAN ── decorative only, never intercepts clicks. */
.xmas-fx { display: none; }
[data-season="christmas"] .xmas-fx {
  display: block; position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 3;
}
.xmas-snow { position: absolute; inset: 0; }
/* Fall (Y) and sway (X) live on two nested elements so the flake never
   stops falling while the sway eases through a turn. */
.xmas-flake { position: absolute; top: 0; animation: xmasFall 12s linear infinite; }
.xmas-flake-sway { display: block; width: 100%; height: 100%; animation: xmasSway 4s ease-in-out infinite alternate; }
.xmas-flake-sway.alt { animation-direction: alternate-reverse; }
.xmas-dot {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle, var(--xmas-flake) 0 42%, transparent 72%);
}
.xmas-flake-spin { display: block; width: 100%; height: 100%; animation: xmasSpin 10s linear infinite; }
.xmas-flake-sway.alt .xmas-flake-spin { animation-direction: reverse; }
.xmas-flake-spin svg { display: block; width: 100%; height: 100%; }

.xmas-snowman { position: absolute; left: 3%; bottom: 2%; width: 84px; height: 105px; transform-origin: 50% 100%; will-change: transform; }
.xmas-snowman svg { display: block; width: 100%; height: 100%; overflow: visible; }
.xmas-snowman-arm { transform-box: fill-box; transform-origin: 0% 100%; animation: xmasWave 3.6s ease-in-out infinite; }
@media (max-width: 640px) {
  .xmas-snowman { width: 54px; height: 68px; opacity: 0.85; }
}

/* ── ANIMATIONS ── */
@keyframes xmasFall {
  0%   { transform: translateY(-6vh); }
  100% { transform: translateY(106vh); }
}
@keyframes xmasSway {
  0%   { transform: translateX(-14px); }
  100% { transform: translateX(14px); }
}
@keyframes xmasSpin {
  to { transform: rotate(360deg); }
}
@keyframes xmasWave {
  0%, 55%, 100% { transform: rotate(0deg); }
  65%  { transform: rotate(-16deg); }
  75%  { transform: rotate(4deg); }
  85%  { transform: rotate(-12deg); }
}
@keyframes xmasTwinkle {
  0%   { opacity: 0.5; filter: none; }
  100% { opacity: 1; filter: drop-shadow(0 0 2px var(--xmas-bulb)) drop-shadow(0 0 6px var(--xmas-bulb)); }
}

/* Reduced motion: nothing moves. Flakes are parked at a fixed scattered
   height (--y, set per flake) instead of all bunching at the top. */
@media (prefers-reduced-motion: reduce) {
  .xmas-flake { animation: none !important; top: var(--y); }
  .xmas-flake-sway, .xmas-flake-spin, .xmas-snowman-arm, .xmas-bulb-glass { animation: none !important; }
  .xmas-bulb-glass { opacity: 0.9; }
}