/* Seasonal themes (docs/seasonal-themes.md). Loaded only while a theme is on. Everything hangs off
   <html data-season="…"> (+ data-season-colours / data-season-decor) set by the server, so nothing
   flashes. App pages use the --primary HSL token, the public pages --brand / --glow. */

/* ---------------------------------------------------------------- colours */
html[data-season="christmas"][data-season-colours] { --primary: 354 72% 44%; --brand: #c8102e; --glow: rgba(200, 16, 46, .35); }
html.dark[data-season="christmas"][data-season-colours] { --primary: 354 80% 58%; --primary-foreground: 0 0% 100%; --brand: #f04358; --glow: rgba(240, 67, 88, .45); }
html[data-season="halloween"][data-season-colours] { --primary: 25 95% 46%; --brand: #e45b0c; --glow: rgba(228, 91, 12, .4); }
html.dark[data-season="halloween"][data-season-colours] { --primary: 27 96% 56%; --primary-foreground: 260 50% 8%; --brand: #fb8a2e; --glow: rgba(251, 138, 46, .45); }
html[data-season="easter"][data-season-colours] { --primary: 276 55% 52%; --brand: #9b4dca; --glow: rgba(155, 77, 202, .35); }
html.dark[data-season="easter"][data-season-colours] { --primary: 276 70% 70%; --primary-foreground: 276 50% 10%; --brand: #c18be8; --glow: rgba(193, 139, 232, .45); }
html[data-season="winter"][data-season-colours] { --primary: 199 89% 40%; --brand: #0b84c6; --glow: rgba(11, 132, 198, .35); }
html.dark[data-season="winter"][data-season-colours] { --primary: 199 90% 60%; --primary-foreground: 205 60% 8%; --brand: #45b8f0; --glow: rgba(69, 184, 240, .45); }
html[data-season="spring"][data-season-colours] { --primary: 142 64% 34%; --brand: #1f8a4c; --glow: rgba(31, 138, 76, .35); }
html.dark[data-season="spring"][data-season-colours] { --primary: 142 60% 52%; --primary-foreground: 142 60% 8%; --brand: #45c97a; --glow: rgba(69, 201, 122, .45); }
html[data-season="summer"][data-season-colours] { --primary: 32 95% 44%; --brand: #d97706; --glow: rgba(217, 119, 6, .35); }
html.dark[data-season="summer"][data-season-colours] { --primary: 40 95% 56%; --primary-foreground: 32 60% 8%; --brand: #fbbf24; --glow: rgba(251, 191, 36, .45); }
html[data-season="autumn"][data-season-colours] { --primary: 18 75% 42%; --brand: #b84a1a; --glow: rgba(184, 74, 26, .35); }
html.dark[data-season="autumn"][data-season-colours] { --primary: 22 85% 58%; --primary-foreground: 18 60% 8%; --brand: #f0884a; --glow: rgba(240, 136, 74, .45); }

/* ---------------------------------------------------------------- the strip along the top */
html[data-season-decor] body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: 5px; z-index: 70; pointer-events: none;
}
/* Fairy lights: coloured bulbs on a dark wire. */
html[data-season="christmas"][data-season-decor] body::before {
  height: 10px;
  background:
    radial-gradient(circle at 10px 6px, #ff3b3b 0 3px, transparent 3.5px) 0 0 / 80px 10px repeat-x,
    radial-gradient(circle at 30px 6px, #ffd23b 0 3px, transparent 3.5px) 0 0 / 80px 10px repeat-x,
    radial-gradient(circle at 50px 6px, #2ecc71 0 3px, transparent 3.5px) 0 0 / 80px 10px repeat-x,
    radial-gradient(circle at 70px 6px, #3b9bff 0 3px, transparent 3.5px) 0 0 / 80px 10px repeat-x,
    linear-gradient(#1b2a1b, #1b2a1b) 0 1px / 100% 1px no-repeat;
}
html[data-season="halloween"][data-season-decor] body::before { background: repeating-linear-gradient(90deg, #f97316 0 28px, #1f1030 28px 56px, #7c3aed 56px 84px, #1f1030 84px 112px); }
html[data-season="easter"][data-season-decor] body::before { background: repeating-linear-gradient(90deg, #f9a8d4 0 24px, #a5f3fc 24px 48px, #fde68a 48px 72px, #c4b5fd 72px 96px, #bbf7d0 96px 120px); }
html[data-season="winter"][data-season-decor] body::before { background: linear-gradient(90deg, #e0f2fe, #7dd3fc, #e0f2fe); }
html[data-season="spring"][data-season-decor] body::before { background: repeating-linear-gradient(90deg, #86efac 0 30px, #f9a8d4 30px 60px); }
html[data-season="summer"][data-season-decor] body::before { background: linear-gradient(90deg, #fde047, #fb923c, #f472b6); }
html[data-season="autumn"][data-season-decor] body::before { background: repeating-linear-gradient(90deg, #b45309 0 30px, #dc2626 30px 60px, #ca8a04 60px 90px); }
@media (prefers-reduced-motion: no-preference) {
  html[data-season="christmas"][data-season-decor]:not([data-motion="off"]) body::before { animation: nn-twinkle 2.4s steps(2) infinite; }
}
@keyframes nn-twinkle { 50% { filter: brightness(1.5) saturate(1.3); } }

/* ---------------------------------------------------------------- hats on the logo */
.nn-mark { position: relative; display: inline-flex; flex: none; }
.nn-hat { position: absolute; pointer-events: none; background: no-repeat center / contain; }
.nn-hat-santa { width: 62%; height: 52%; right: -14%; top: -30%; transform: rotate(18deg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 32'%3E%3Cpath d='M4 26 C8 10 18 2 30 6 L36 20 Z' fill='%23d62839'/%3E%3Crect x='2' y='23' width='34' height='8' rx='4' fill='%23fff'/%3E%3Ccircle cx='34' cy='19' r='5' fill='%23fff'/%3E%3C/svg%3E"); }
.nn-hat-pumpkin { width: 46%; height: 46%; right: -12%; bottom: -10%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M15 6 q1-5 5-4' stroke='%23365314' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='16' cy='19' rx='14' ry='11' fill='%23f97316'/%3E%3Cpath d='M9 16 l3 3 h-6z M23 16 l3 3 h-6z' fill='%231f1030'/%3E%3Cpath d='M8 23 q8 5 16 0 l-3 1 -2-2 -2 2 -2-2 -2 2 -2-2z' fill='%231f1030'/%3E%3C/svg%3E"); }
.nn-hat-bunny { width: 50%; height: 56%; left: 25%; top: -44%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 36'%3E%3Cellipse cx='9' cy='14' rx='5' ry='13' fill='%23fff' stroke='%23e2e8f0'/%3E%3Cellipse cx='23' cy='14' rx='5' ry='13' fill='%23fff' stroke='%23e2e8f0'/%3E%3Cellipse cx='9' cy='15' rx='2.2' ry='9' fill='%23f9a8d4'/%3E%3Cellipse cx='23' cy='15' rx='2.2' ry='9' fill='%23f9a8d4'/%3E%3C/svg%3E"); }
.nn-hat-beanie { width: 64%; height: 46%; left: 18%; top: -26%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Ccircle cx='20' cy='5' r='5' fill='%23e0f2fe'/%3E%3Cpath d='M4 22 C4 8 36 8 36 22 Z' fill='%230ea5e9'/%3E%3Crect x='2' y='19' width='36' height='8' rx='3' fill='%23075985'/%3E%3C/svg%3E"); }
.nn-hat-sunglasses { width: 70%; height: 30%; left: 15%; top: 30%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 16'%3E%3Crect x='2' y='3' width='17' height='11' rx='4' fill='%23111'/%3E%3Crect x='25' y='3' width='17' height='11' rx='4' fill='%23111'/%3E%3Crect x='18' y='5' width='8' height='2.5' fill='%23111'/%3E%3C/svg%3E"); }

/* ---------------------------------------------------------------- greeting */
.nn-greeting { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 10px 12px 10px 14px; border-radius: 14px; background: hsl(var(--primary) / .1); color: hsl(var(--foreground)); border: 1px solid hsl(var(--primary) / .25); font-size: 14px; font-weight: 550; }
.nn-greeting[hidden] { display: none; }
.nn-greeting.nn-greeting-lp { margin: 16px auto 0; background: color-mix(in srgb, var(--brand) 10%, transparent); border-color: color-mix(in srgb, var(--brand) 25%, transparent); color: var(--ink); }
.nn-greeting-text { flex: 1; min-width: 0; }
.nn-greeting-text a { text-decoration: underline; text-underline-offset: 3px; color: inherit; opacity: .8; }
.nn-greeting-icon { width: 22px; height: 22px; flex: none; background: no-repeat center / contain; }
html[data-season="christmas"] .nn-greeting-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 13h4l-5 7h18l-5-7h4z' fill='%2316a34a'/%3E%3Crect x='10' y='20' width='4' height='3' fill='%2378350f'/%3E%3Ccircle cx='12' cy='3' r='2' fill='%23facc15'/%3E%3C/svg%3E"); }
html[data-season="halloween"] .nn-greeting-icon, html[data-season="autumn"] .nn-greeting-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cellipse cx='16' cy='19' rx='14' ry='11' fill='%23f97316'/%3E%3Cpath d='M9 16 l3 3 h-6z M23 16 l3 3 h-6z' fill='%231f1030'/%3E%3C/svg%3E"); }
html[data-season="easter"] .nn-greeting-icon, html[data-season="spring"] .nn-greeting-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='13' rx='8' ry='10' fill='%23f9a8d4'/%3E%3Cpath d='M4 12 q4-3 8 0 t8 0' stroke='%23fff' stroke-width='2' fill='none'/%3E%3C/svg%3E"); }
html[data-season="winter"] .nn-greeting-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%230ea5e9' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 2v20M3 7l18 10M3 17L21 7'/%3E%3C/svg%3E"); }
html[data-season="summer"] .nn-greeting-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='6' fill='%23fbbf24'/%3E%3C/svg%3E"); }
.nn-greeting-btn, .nn-greeting-close { flex: none; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; border-radius: 999px; }
.nn-greeting-btn { padding: 4px 10px; font-size: 12px; background: hsl(var(--primary) / .12); }
.nn-greeting-lp .nn-greeting-btn { background: color-mix(in srgb, var(--brand) 14%, transparent); }
.nn-greeting-btn[aria-pressed="false"] { opacity: .7; }
.nn-greeting-close { width: 28px; height: 28px; font-size: 18px; line-height: 1; opacity: .6; }
.nn-greeting-close:hover { opacity: 1; }

/* ---------------------------------------------------------------- the effects canvas */
.nn-season-fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 65; pointer-events: none; }
@media print { .nn-season-fx, html[data-season-decor] body::before { display: none !important; } }