/* ==========================================================================
   assets/holiday-theme.css  (v42 - Oct 2026)
   Halloween / Christmas / New Year. Loaded ONLY while a theme is on, by
   holiday_head() in includes/holiday_theme.php.

   Rules this file keeps:
   - every decorative layer is pointer-events:none, so it can never sit
     between a person and a button;
   - .hol-still (effects off, or the device asks for reduced motion)
     freezes everything into a still decoration;
   - every colour has an html.dark rule beside it, because header.php only
     darkens Tailwind utility classes, never custom ones.
   ========================================================================== */

html.hol-halloween { --hol-a:#f97316; --hol-b:#7c3aed; --hol-ink:#1e1029; --hol-paper:#fff7ed; --hol-glow:rgba(249,115,22,.35); }
html.hol-christmas { --hol-a:#b91c1c; --hol-b:#166534; --hol-ink:#0f2a1c; --hol-paper:#f0fdf4; --hol-glow:rgba(212,167,58,.35); }
html.hol-newyear   { --hol-a:#d4a73a; --hol-b:#1e3a8a; --hol-ink:#0d1530; --hol-paper:#fefce8; --hol-glow:rgba(232,200,114,.40); }

/* ------------------------------------------------------------------ layers */
.hol-canvas {
    position: fixed; inset: 0; width: 100%; height: 100%;
    z-index: 55; pointer-events: none;
}

/* ------------------------------------------------------------------ accent:
   only the active menu item and the page's own background tint change.
   Content colours are left alone so every screen stays as readable. */
html.hol-halloween .nav-active {
    background: linear-gradient(135deg, rgba(249,115,22,.16), rgba(124,58,237,.10)) !important;
    box-shadow: inset 3px 0 0 #f97316, 0 2px 12px rgba(249,115,22,.12) !important;
}
html.hol-christmas .nav-active {
    background: linear-gradient(135deg, rgba(185,28,28,.12), rgba(22,101,52,.10)) !important;
    box-shadow: inset 3px 0 0 #b91c1c, 0 2px 12px rgba(22,101,52,.12) !important;
}
html.hol-newyear .nav-active {
    background: linear-gradient(135deg, rgba(212,167,58,.20), rgba(30,58,138,.10)) !important;
    box-shadow: inset 3px 0 0 #d4a73a, 0 2px 12px rgba(212,167,58,.16) !important;
}
html.dark.hol-halloween .nav-active { color: #fdba74 !important; box-shadow: inset 3px 0 0 #fb923c !important; }
html.dark.hol-christmas .nav-active { color: #fecaca !important; box-shadow: inset 3px 0 0 #ef4444 !important; }
html.dark.hol-newyear   .nav-active { color: #fde68a !important; box-shadow: inset 3px 0 0 #e8c872 !important; }

html.hol-halloween .igs-animated-bg::after,
html.hol-christmas .igs-animated-bg::after,
html.hol-newyear   .igs-animated-bg::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
}
html.hol-halloween .igs-animated-bg::after { background: radial-gradient(900px 520px at 85% 0%, rgba(249,115,22,.10), transparent 60%), radial-gradient(700px 480px at 0% 100%, rgba(124,58,237,.08), transparent 60%); }
html.hol-christmas .igs-animated-bg::after { background: radial-gradient(900px 520px at 80% 0%, rgba(22,101,52,.08), transparent 60%), radial-gradient(700px 480px at 5% 100%, rgba(185,28,28,.06), transparent 60%); }
html.hol-newyear   .igs-animated-bg::after { background: radial-gradient(900px 520px at 50% 0%, rgba(212,167,58,.12), transparent 60%), radial-gradient(700px 480px at 100% 100%, rgba(30,58,138,.07), transparent 60%); }

/* ------------------------------------------------------------------ ribbon */
.hol-ribbon {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 14px;
    margin: 0 0 16px; padding: 12px 14px 12px 12px;
    border-radius: 18px;
    color: #fff8ec;
    box-shadow: 0 10px 30px -12px var(--hol-glow), 0 1px 0 rgba(255,255,255,.06) inset;
    font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    animation: holRibbonIn .7s cubic-bezier(.16,1,.3,1) both;
}
@keyframes holRibbonIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

html.hol-halloween .hol-ribbon {
    background:
        radial-gradient(140px 90px at 92% 120%, rgba(249,115,22,.45), transparent 70%),
        linear-gradient(110deg, #1e1029 0%, #2e1446 55%, #3b1a2a 100%);
    border: 1px solid rgba(249,115,22,.35);
}
html.hol-christmas .hol-ribbon {
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 10px, transparent 10px 20px),
        linear-gradient(110deg, #0f2a1c 0%, #14532d 60%, #1b4d2c 100%);
    border: 1px solid rgba(212,167,58,.45);
    color: #fdf6e3;
}
html.hol-newyear .hol-ribbon {
    background:
        radial-gradient(2px 2px at 12% 30%, rgba(255,255,255,.8), transparent 60%),
        radial-gradient(1.5px 1.5px at 38% 70%, rgba(255,255,255,.6), transparent 60%),
        radial-gradient(2px 2px at 64% 22%, rgba(232,200,114,.9), transparent 60%),
        radial-gradient(1.5px 1.5px at 86% 64%, rgba(255,255,255,.7), transparent 60%),
        linear-gradient(110deg, #0d1530 0%, #1a2350 60%, #2a1f4a 100%);
    border: 1px solid rgba(232,200,114,.45);
}

.hol-ribbon__art { flex: none; width: 46px; height: 46px; display: block; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.hol-ribbon__art svg { width: 100%; height: 100%; display: block; }
html.hol-halloween .hol-ribbon__art { animation: holBob 3.2s ease-in-out infinite; }
html.hol-christmas .hol-ribbon__art { animation: holSwing 3.6s ease-in-out infinite; transform-origin: 50% 0; }
html.hol-newyear   .hol-ribbon__art { animation: holSpin 9s linear infinite; }
@keyframes holBob   { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-3px) } }
@keyframes holSwing { 0%,100% { transform: rotate(-6deg) } 50% { transform: rotate(6deg) } }
@keyframes holSpin  { to { transform: rotate(360deg) } }

.hol-ribbon__text { flex: 1 1 auto; min-width: 0; }
.hol-ribbon__title { font-weight: 700; font-size: 15px; line-height: 1.3; letter-spacing: .005em; }
html.hol-christmas .hol-ribbon__title { color: #f5e39a; }
html.hol-newyear   .hol-ribbon__title { color: #f5e39a; }
html.hol-halloween .hol-ribbon__title { color: #ffd7b0; }
.hol-ribbon__sub { font-size: 12px; opacity: .82; margin-top: 2px; font-variant-numeric: tabular-nums; }
.hol-ribbon__sub b { font-weight: 700; opacity: 1; color: #fff; }
.hol-ribbon__note { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 999px; background: rgba(255,255,255,.14); font-size: 11px; font-weight: 600; }

.hol-ribbon__close {
    flex: none; width: 32px; height: 32px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
    color: inherit; cursor: pointer; transition: background .2s ease;
}
.hol-ribbon__close:hover { background: rgba(255,255,255,.18); }
.hol-ribbon__close:focus-visible, .hol-fx:focus-visible { outline: 2px solid #fbbf24; outline-offset: 2px; }
.hol-ribbon__close svg { width: 14px; height: 14px; }

/* Sign-in page and maintenance screen: the ribbon floats at the top. */
.hol-ribbon.hol-float {
    position: fixed; top: 12px; left: 50%; z-index: 57;
    width: min(560px, calc(100% - 24px));
    transform: translateX(-50%);
    margin: 0;
    animation: holFloatIn .7s cubic-bezier(.16,1,.3,1) both;
}
@keyframes holFloatIn { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ------------------------------------------------------------------ effects on/off (per person) */
.hol-fx {
    position: fixed; right: 24px; bottom: 80px; z-index: 60;
    width: 40px; height: 40px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(148,163,184,.30);
    background: #ffffff; color: var(--hol-a);
    box-shadow: 0 8px 22px rgba(15,23,42,.12);
    cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.hol-fx:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15,23,42,.16); }
.hol-fx svg { width: 18px; height: 18px; }
.hol-fx[aria-pressed="false"] { opacity: .65; }
.hol-fx[aria-pressed="false"]::after {
    content: ""; position: absolute; width: 22px; height: 2px; border-radius: 2px;
    background: currentColor; transform: rotate(-45deg);
}
.hol-fx.hol-fx--low { bottom: 18px; right: 18px; }
html.dark .hol-fx { background: #1e293b; border-color: rgba(148,163,184,.22); box-shadow: 0 8px 22px rgba(0,0,0,.5); }
html.dark.hol-halloween .hol-fx { color: #fb923c; }
html.dark.hol-christmas .hol-fx { color: #f87171; }
html.dark.hol-newyear   .hol-fx { color: #e8c872; }
@media (max-width: 640px) {
    .hol-fx { right: 18px; bottom: 70px; width: 38px; height: 38px; }
    .hol-fx.hol-fx--low { right: 14px; bottom: 14px; }
}

/* ------------------------------------------------------------------ hats on the sidebar logo */
[data-holiday-brand] { position: relative; display: inline-block; }
.hol-hat {
    position: absolute; top: -16px; left: -12px; width: 34px; height: 34px;
    pointer-events: none; z-index: 2;
    transform: rotate(-18deg);
    filter: drop-shadow(0 3px 4px rgba(0,0,0,.25));
    animation: holHatIn .8s cubic-bezier(.34,1.56,.64,1) both .3s;
}
.hol-hat svg { width: 100%; height: 100%; display: block; }
@keyframes holHatIn { from { opacity: 0; transform: translateY(-14px) rotate(-40deg); } to { opacity: 1; transform: rotate(-18deg); } }

/* ------------------------------------------------------------------ Christmas lights */
.hol-lights {
    position: fixed; top: 0; left: 0; right: 0; height: 40px;
    z-index: 56; pointer-events: none; overflow: visible;
}
.hol-lights svg { width: 100%; height: 40px; display: block; overflow: visible; }
.hol-lights .wire { fill: none; stroke: #1f2937; stroke-width: 1.6; opacity: .75; }
html.dark .hol-lights .wire { stroke: #94a3b8; opacity: .5; }
.hol-lights .cap { fill: #374151; }
html.dark .hol-lights .cap { fill: #64748b; }
.hol-lights .bulb { transform-box: fill-box; transform-origin: 50% 0; animation: holTwinkle 2.4s ease-in-out infinite; }
.hol-lights .glass { filter: drop-shadow(0 0 4px currentColor); }
@keyframes holTwinkle {
    0%, 100% { opacity: 1; }
    45%      { opacity: .35; }
    55%      { opacity: .35; }
}

/* ------------------------------------------------------------------ Halloween spider */
.hol-spider {
    position: fixed; top: 0; right: 70px; z-index: 56; pointer-events: none;
    width: 30px; transform-origin: 50% 0;
    animation: holSway 5s ease-in-out infinite;
}
.hol-spider .thread {
    width: 1px; margin: 0 auto; height: 0;
    background: linear-gradient(#475569, #94a3b8);
    animation: holDrop 18s cubic-bezier(.45,.05,.3,1) infinite;
}
html.dark .hol-spider .thread { background: linear-gradient(#64748b, #cbd5e1); }
.hol-spider svg { width: 30px; height: 30px; display: block; margin-top: -2px; }
@keyframes holSway { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes holDrop {
    0%   { height: 0; }
    12%  { height: 150px; }
    55%  { height: 150px; }
    62%  { height: 96px; }
    70%  { height: 150px; }
    90%  { height: 150px; }
    100% { height: 0; }
}
@media (max-width: 640px) { .hol-spider { right: 46px; } }

/* ------------------------------------------------------------------ Christmas sleigh */
.hol-sleigh {
    position: fixed; left: 0; top: 11%; z-index: 55; pointer-events: none;
    width: 190px; height: 64px;
    transform: translateX(-240px);
    opacity: 0;
}
.hol-sleigh.go { animation: holFly 15s linear forwards; }
.hol-sleigh svg { width: 100%; height: 100%; display: block; }
.hol-sleigh .sil { fill: #1e293b; }
html.dark .hol-sleigh .sil { fill: #e2e8f0; }
@keyframes holFly {
    0%   { opacity: 0;  transform: translate(-240px, 0)    rotate(-2deg); }
    6%   { opacity: .9; }
    25%  {              transform: translate(25vw, -10px)  rotate(-4deg); }
    50%  {              transform: translate(50vw, 6px)    rotate(1deg); }
    75%  {              transform: translate(75vw, -12px)  rotate(-3deg); }
    94%  { opacity: .9; }
    100% { opacity: 0;  transform: translate(calc(100vw + 40px), -4px) rotate(-2deg); }
}

/* ------------------------------------------------------------------ still mode */
html.hol-still .hol-ribbon__art,
html.hol-still .hol-lights .bulb,
html.hol-still .hol-hat,
html.hol-still .hol-ribbon,
html.hol-still .hol-ribbon.hol-float { animation: none !important; }
html.hol-still .hol-spider { animation: none; }
html.hol-still .hol-spider .thread { animation: none; height: 110px; }
html.hol-still .hol-sleigh { display: none; }

@media (prefers-reduced-motion: reduce) {
    .hol-ribbon, .hol-ribbon__art, .hol-lights .bulb, .hol-hat, .hol-spider, .hol-spider .thread { animation: none !important; }
    .hol-spider .thread { height: 110px; }
    .hol-sleigh { display: none; }
}



/* ==========================================================================
   v43 - SCENES: the animated greeting banner, the scenery behind the page,
   the cobweb, ghosts, the witch and New Year balloons.
   ========================================================================== */

/* ------------------------------------------------------------------ banner = a little animated scene */
.hol-banner { min-height: 128px; padding: 20px 16px 20px 22px; align-items: center; }
.hol-banner > .hol-ribbon__art { display: none; }
.hol-banner__scene { position: absolute; inset: 0; z-index: 0; }
.hol-banner__scene svg { width: 100%; height: 100%; display: block; }
.hol-banner__scene::after {           /* keeps the greeting readable over the art */
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(8,4,18,.82) 0%, rgba(8,4,18,.55) 34%, rgba(8,4,18,0) 62%);
}
html.hol-christmas .hol-banner__scene::after { background: linear-gradient(90deg, rgba(6,20,40,.85) 0%, rgba(6,20,40,.5) 34%, rgba(6,20,40,0) 62%); }
.hol-banner .hol-ribbon__text, .hol-banner .hol-ribbon__close { position: relative; z-index: 1; }
.hol-banner .hol-ribbon__text { max-width: 58%; }
.hol-banner .hol-ribbon__title { font-size: 19px; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.hol-banner .hol-ribbon__sub { font-size: 12.5px; text-shadow: 0 1px 6px rgba(0,0,0,.7); margin-top: 4px; }
.hol-banner .hol-ribbon__close { align-self: flex-start; margin-left: auto; background: rgba(0,0,0,.35); }
.hol-banner.hol-float { min-height: 104px; }
.hol-banner.hol-float .hol-ribbon__title { font-size: 16px; }
@media (max-width: 640px) {
    .hol-banner { min-height: 112px; padding: 16px 12px 16px 16px; }
    .hol-banner .hol-ribbon__text { max-width: 64%; }
    .hol-banner .hol-ribbon__title { font-size: 15px; }
    .hol-banner__scene::after { background: linear-gradient(90deg, rgba(8,4,18,.85) 0%, rgba(8,4,18,.55) 50%, rgba(8,4,18,.05) 80%); }
}

/* ---- shared scene motion (banner + background) ---- */
.hs-tw    { animation: hsTwinkle 3.2s ease-in-out infinite; }
.hs-glow  { animation: hsGlow 4s ease-in-out infinite; }
.hs-cloud { animation: hsDrift 22s ease-in-out infinite alternate; }
.hs-cloud2{ animation-duration: 30s; animation-direction: alternate-reverse; }
.hs-flap  { transform-box: fill-box; transform-origin: 50% 50%; animation: hsFlap .32s ease-in-out infinite alternate; }
.hs-batloop  { animation: hsBatLoop 9s linear infinite; }
.hs-batloop2 { animation-duration: 12s; animation-delay: -4s; }
.hs-batloop3 { animation-duration: 7s;  animation-delay: -2s; }
.hs-yoyo  { animation: hsYoyo 4s ease-in-out infinite alternate; }
.hs-win   { animation: hsWin 5s steps(1) infinite; }
.hs-flick { animation: hsFlicker 1.6s ease-in-out infinite; }
.hs-ghost { animation: hsGhostBob 4.4s ease-in-out infinite; }
.hs-ghost2{ animation-duration: 5.6s; animation-delay: -2s; }
.hs-fog   { animation: hsFog 18s ease-in-out infinite alternate; }
.hs-fog2  { animation-duration: 24s; animation-direction: alternate-reverse; }
.hs-parol { transform-box: fill-box; transform-origin: 50% 0; animation: hsSwing 5s ease-in-out infinite; }
.hs-sleighx { animation: hsSleighX 18s linear infinite; }
.hs-snow  { animation: hsSnow 7s linear infinite; }
.hs-tl    { animation: hsTwinkle 1.6s ease-in-out infinite; }
.hs-smoke { animation: hsSmoke 3.9s ease-out infinite; }
.hs-wave  { transform-box: fill-box; transform-origin: 0% 100%; animation: hsWave 1.4s ease-in-out infinite alternate; }
.hs-fw    { animation: hsFirework 3.4s ease-out infinite; opacity: 0; }
.hs-wn    { animation: hsWindow 6s steps(1) infinite; }
.hs-year  { animation: hsYear 3s ease-in-out infinite; }
.hs-clinkL{ transform-box: fill-box; transform-origin: 50% 100%; animation: hsClinkL 2.4s ease-in-out infinite; }
.hs-clinkR{ transform-box: fill-box; transform-origin: 50% 100%; animation: hsClinkR 2.4s ease-in-out infinite; }
.hs-bub   { animation: hsBubble 1.8s ease-in infinite; }
.hs-conf  { animation: hsConfetti 6s linear infinite; }

@keyframes hsTwinkle { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes hsGlow    { 0%,100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes hsDrift   { from { transform: translateX(-40px); } to { transform: translateX(50px); } }
@keyframes hsFlap    { from { transform: scaleY(1); } to { transform: scaleY(.35); } }
@keyframes hsBatLoop {
    0%   { transform: translate(630px, 44px); }
    25%  { transform: translate(700px, 14px); }
    50%  { transform: translate(780px, 50px); }
    75%  { transform: translate(700px, 92px); }
    100% { transform: translate(630px, 44px); }
}
.hsc-moon .hs-batloop { animation-name: hsBatLoopSm; }
@keyframes hsBatLoopSm {
    0%   { transform: translate(20px, 90px); }
    25%  { transform: translate(100px, 20px); }
    50%  { transform: translate(180px, 96px); }
    75%  { transform: translate(100px, 176px); }
    100% { transform: translate(20px, 90px); }
}
@keyframes hsYoyo    { from { transform: translateY(-14px); } to { transform: translateY(12px); } }
@keyframes hsWin     { 0% { opacity: 1; } 40% { opacity: .35; } 46% { opacity: 1; } 80% { opacity: .9; } }
@keyframes hsFlicker { 0%,100% { opacity: 1; } 20% { opacity: .7; } 45% { opacity: .95; } 60% { opacity: .6; } 80% { opacity: .9; } }
@keyframes hsGhostBob{ 0%,100% { transform: translate(0, 0); } 50% { transform: translate(10px, -8px); } }
@keyframes hsFog     { from { transform: translateX(-60px); } to { transform: translateX(60px); } }
@keyframes hsSwing   { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes hsSleighX { 0% { transform: translate(-90px, 34px); } 100% { transform: translate(980px, 6px); } }
@keyframes hsSnow    { from { transform: translateY(0); } to { transform: translateY(150px); } }
@keyframes hsSmoke   { 0% { transform: translate(0,0) scale(.6); opacity: .8; } 100% { transform: translate(8px,-26px) scale(1.8); opacity: 0; } }
@keyframes hsWave    { from { transform: rotate(-10deg); } to { transform: rotate(14deg); } }
@keyframes hsFirework{ 0% { transform: scale(.15); opacity: 0; } 8% { opacity: 1; } 55% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.08); opacity: 0; } }
@keyframes hsWindow  { 0% { opacity: 1; } 30% { opacity: .3; } 55% { opacity: 1; } 85% { opacity: .55; } }
@keyframes hsYear    { 0%,100% { opacity: .9; } 50% { opacity: 1; } }
@keyframes hsClinkL  { 0%,60%,100% { transform: rotate(0); } 75% { transform: rotate(14deg); } }
@keyframes hsClinkR  { 0%,60%,100% { transform: rotate(0); } 75% { transform: rotate(-14deg); } }
@keyframes hsBubble  { from { transform: translateY(0); opacity: .9; } to { transform: translateY(-16px); opacity: 0; } }
@keyframes hsConfetti{ from { transform: translateY(0) rotate(0); } to { transform: translateY(150px) rotate(540deg); } }

/* ------------------------------------------------------------------ scenery behind the page */
.hol-scene {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    z-index: -8; pointer-events: none; overflow: hidden;
}
@media (min-width: 1024px) { html.hol-where-app .hol-scene { left: 16rem; } }   /* starts after the sidebar */
html.hol-where-login .hol-scene { z-index: 1; }    /* between the sign-in particles and the card */
html.hol-where-maint .hol-scene { z-index: 0; }

.hsc-sky { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.hol-scene.night .hsc-sky { opacity: 1; }
html.hol-halloween .hsc-sky {
    background:
        radial-gradient(1.2px 1.2px at 12% 18%, #fff, transparent 70%), radial-gradient(1px 1px at 28% 42%, #fff, transparent 70%),
        radial-gradient(1.4px 1.4px at 46% 12%, #fff, transparent 70%), radial-gradient(1px 1px at 64% 36%, #fff, transparent 70%),
        radial-gradient(1.2px 1.2px at 82% 58%, #fff, transparent 70%), radial-gradient(1px 1px at 92% 28%, #fff, transparent 70%),
        radial-gradient(1000px 600px at 85% 10%, rgba(124,58,237,.22), transparent 60%),
        radial-gradient(900px 500px at 10% 100%, rgba(249,115,22,.12), transparent 60%);
}
html.hol-christmas .hsc-sky {
    background:
        radial-gradient(1.2px 1.2px at 15% 20%, #fff, transparent 70%), radial-gradient(1px 1px at 35% 45%, #fff, transparent 70%),
        radial-gradient(1.2px 1.2px at 55% 15%, #fff, transparent 70%), radial-gradient(1px 1px at 75% 40%, #fff, transparent 70%),
        radial-gradient(1000px 600px at 85% 5%, rgba(250,204,21,.10), transparent 60%),
        radial-gradient(900px 500px at 0% 100%, rgba(59,130,246,.14), transparent 60%);
}
html.hol-newyear .hsc-sky {
    background:
        radial-gradient(1.2px 1.2px at 18% 22%, #fff, transparent 70%), radial-gradient(1px 1px at 38% 48%, #fff, transparent 70%),
        radial-gradient(1.2px 1.2px at 58% 14%, #fde68a, transparent 70%), radial-gradient(1px 1px at 78% 36%, #fff, transparent 70%),
        radial-gradient(1000px 600px at 70% 0%, rgba(212,167,58,.16), transparent 60%),
        radial-gradient(900px 500px at 10% 100%, rgba(167,139,250,.14), transparent 60%);
}

.hsc-moon { position: absolute; top: 96px; right: 3%; width: 200px; height: 200px; opacity: .5; }
.hol-scene.night .hsc-moon { opacity: .95; }
.hsc-parol { width: 150px; height: 165px; }
.hsc-year { width: 320px; height: 150px; top: 110px; opacity: .14; }
.hol-scene.night .hsc-year { opacity: .3; }

.hsc-ground { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 120px; opacity: .3; }
.hol-scene.night .hsc-ground { opacity: 1; }
html.hol-halloween .hsc-fill   { fill: #2e1446; }
html.hol-halloween .hsc-stroke { stroke: #2e1446; fill: none; }
html.hol-halloween .hol-scene.night .hsc-fill   { fill: #0d0614; }
html.hol-halloween .hol-scene.night .hsc-stroke { stroke: #0d0614; fill: none; }
html.hol-christmas .hsc-ground { opacity: .85; }
html.hol-christmas .hol-scene.night .hsc-ground { opacity: .9; }
html.hol-newyear .hsc-fill { fill: #1e3a8a; }
html.hol-newyear .hol-scene.night .hsc-fill { fill: #070b1f; }
@media (max-width: 640px) {
    .hsc-moon { width: 120px; height: 120px; top: 84px; }
    .hsc-parol { width: 100px; height: 110px; }
    .hsc-year { width: 200px; height: 94px; }
    .hsc-ground { height: 80px; }
}

/* ------------------------------------------------------------------ Halloween cobweb (the spider hangs from it) */
.hol-web {
    position: fixed; top: 0; right: 0; width: 150px; height: 150px;
    z-index: 54; pointer-events: none; opacity: .55;
}
.hol-web svg { width: 100%; height: 100%; display: block; }
.hol-web path { fill: none; stroke: #64748b; stroke-width: .8; }
html.dark .hol-web path { stroke: #cbd5e1; }
@media (max-width: 640px) { .hol-web { width: 100px; height: 100px; } }

/* ------------------------------------------------------------------ moving characters */
.hol-actor { position: fixed; z-index: 55; pointer-events: none; }
.hol-actor svg { width: 100%; height: 100%; display: block; overflow: visible; }

.hol-ghost { bottom: -90px; opacity: 0; animation: hsGhostRise 12s linear forwards; filter: drop-shadow(0 0 10px rgba(255,255,255,.45)); }
.hol-ghost svg { animation: hsWobble 2.4s ease-in-out infinite; }
html:not(.dark) .hol-ghost { filter: drop-shadow(0 4px 10px rgba(46,20,70,.35)); }
@keyframes hsGhostRise {
    0%   { transform: translate(0, 0);          opacity: 0; }
    10%  { opacity: .6; }
    50%  { transform: translate(-36px, -52vh); }
    85%  { opacity: .55; }
    100% { transform: translate(24px, -112vh);  opacity: 0; }
}
@keyframes hsWobble { 0%,100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }

.hol-peek { width: 56px; height: 68px; opacity: .9; }
.hol-peek.from-left  { left: -62px;  animation: hsPeekL 6.5s ease-in-out forwards; }
.hol-peek.from-right { right: -62px; animation: hsPeekR 6.5s ease-in-out forwards; }
.hol-peek.from-right svg { transform: scaleX(-1); }
@keyframes hsPeekL { 0%,100% { transform: translateX(0) rotate(0); } 25%,70% { transform: translateX(44px) rotate(14deg); } }
@keyframes hsPeekR { 0%,100% { transform: translateX(0) rotate(0); } 25%,70% { transform: translateX(-44px) rotate(-14deg); } }

.hol-witch { left: 0; width: 130px; height: 65px; color: #1e1029; animation: hsWitch 16s linear forwards; }
html.dark .hol-witch { color: #c4b5fd; }
@keyframes hsWitch {
    0%   { transform: translate(-160px, 0)    rotate(-4deg); opacity: 0; }
    5%   { opacity: .85; }
    30%  { transform: translate(30vw, -16px)  rotate(-8deg); }
    60%  { transform: translate(60vw, 10px)   rotate(-2deg); }
    95%  { opacity: .85; }
    100% { transform: translate(calc(100vw + 40px), -20px) rotate(-6deg); opacity: 0; }
}

.hol-balloon { bottom: -100px; width: 40px; height: 90px; opacity: .9; animation: hsBalloon 13s linear forwards; }
.hol-balloon svg { animation: hsWobble 3s ease-in-out infinite; transform-origin: 50% 20%; }
@keyframes hsBalloon { from { transform: translate(0, 0); } 50% { transform: translate(-24px, -55vh); } to { transform: translate(18px, -118vh); } }

/* ------------------------------------------------------------------ still mode for everything new */
html.hol-still .hol-banner__scene *,
html.hol-still .hol-scene * { animation: none !important; }
html.hol-still .hs-fw { opacity: 1; }
html.hol-still .hs-snow, html.hol-still .hs-conf, html.hol-still .hs-sleighx, html.hol-still .hs-smoke { display: none; }
@media (prefers-reduced-motion: reduce) {
    .hol-banner__scene *, .hol-scene * { animation: none !important; }
    .hs-fw { opacity: 1; }
    .hs-snow, .hs-conf, .hs-sleighx, .hs-smoke, .hol-actor { display: none; }
}

/* ------------------------------------------------------------------ print: no decorations on paper */
@media print {
    .hol-canvas, .hol-ribbon, .hol-fx, .hol-hat, .hol-lights, .hol-spider, .hol-sleigh,
    .hol-scene, .hol-web, .hol-actor { display: none !important; }
}