/* =============================================================================
   LILY LIBRARY - HOLIDAY SEASON THEME  ("Cozy Winter Lights")
   =============================================================================

   Every rule is scoped to  body.holiday , so the file is inert until switched on.
   style.css is never edited, so the normal look is always intact underneath.

   TO TURN IT ON    ->  <body class="holiday">
   TO TURN IT OFF   ->  <body>

   Leave the <link> to this file (and the holiday.js script) in index.html all
   year; with no body class they change nothing.

   Look: evergreen-to-midnight header, a string of twinkling lights across the
   top, soft snowfall, golden sparkles, and a red ornament beside the title.
   ============================================================================= */

/* ---------- 1. Title container: evergreen, midnight and a touch of berry --- */

body.holiday #animated-title-bg {
    background: linear-gradient(
        45deg,
        #0d2a26,   /* deep pine       */
        #14463f,   /* evergreen       */
        #1b3a5c,   /* midnight blue   */
        #5e1d2c,   /* berry           */
        #14463f,
        #0d2a26
    );
    background-size: 200% 200%;
    animation: color 18s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

/* ---------- 2. String of twinkling lights across the top ---------------- */
/* Drawn with gradients: a wire plus a repeating tile of five coloured bulbs. */

body.holiday #animated-title-bg::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 30px;
    pointer-events: none;
    z-index: 2;
    background:
        radial-gradient(circle at 10% 68%, #ff4d5e 0 4px, rgba(255, 77, 94, .35) 5px 9px, transparent 10px),
        radial-gradient(circle at 30% 68%, #ffd45e 0 4px, rgba(255, 212, 94, .35) 5px 9px, transparent 10px),
        radial-gradient(circle at 50% 68%, #5ee08a 0 4px, rgba(94, 224, 138, .35) 5px 9px, transparent 10px),
        radial-gradient(circle at 70% 68%, #5eb8ff 0 4px, rgba(94, 184, 255, .35) 5px 9px, transparent 10px),
        radial-gradient(circle at 90% 68%, #fff4d6 0 4px, rgba(255, 244, 214, .35) 5px 9px, transparent 10px),
        linear-gradient(rgba(10, 20, 20, .8), rgba(10, 20, 20, .8)) 0 6px / 100% 1.5px no-repeat;
    background-size: 150px 30px, 150px 30px, 150px 30px, 150px 30px, 150px 30px, 100% 1.5px;
    background-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, no-repeat;
    animation: hlLights 3.2s ease-in-out infinite;
}

@keyframes hlLights {
    0%, 100% { filter: brightness(1)    saturate(1);   }
    50%      { filter: brightness(1.35) saturate(1.2); }
}

/* keep the real content above the overlays (stacking only, no position change) */
body.holiday #animated-title-bg,
body.holiday .text-scroller-container {
    position: relative;
    z-index: 3;
}
body.holiday .books-games { z-index: 200; }
body.holiday #banner1     { z-index: 3; }

/* ---------- 3. The title: warm white with a golden glow ---------------- */

body.holiday .title span {
    color: #fff6e0 !important;
    text-shadow:
        0 0 8px  rgba(255, 214, 120, 0.55),
        0 0 22px rgba(255, 190, 80, 0.30),
        2px 2px 0 rgba(0, 0, 0, 0.45);
    animation: letterWave 3s ease-in-out infinite, hlGlow 4.4s ease-in-out infinite;
}
@keyframes hlGlow {
    0%, 100% { filter: brightness(1);    }
    50%      { filter: brightness(1.18); }
}
body.holiday .title span:nth-child(3n)   { animation-delay: 0s,    0.5s; }
body.holiday .title span:nth-child(3n+1) { animation-delay: 0.15s, 1.7s; }
body.holiday .title span:nth-child(3n+2) { animation-delay: 0.3s,  2.9s; }
body.holiday .title span:hover {
    color: #ffffff !important;
    text-shadow: 0 0 12px rgba(255, 230, 150, 0.9), 0 0 30px rgba(255, 200, 90, 0.5);
}

/* ---------- 4. Subtitle ------------------------------------------------ */

body.holiday .subtitle {
    color: #f0ece0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* ---------- 5. The star bubbles become golden sparkles ------------------ */
/* index.js keeps spawning the same .bubble stars - only the colour changes.  */

body.holiday .bubble {
    background-color: #ffe9a8;
    background-image: none;
    border: none;
    filter: drop-shadow(0 0 5px rgba(255, 214, 120, 0.9));
    animation: floatUp 5s forwards, hlSparkle 0.9s ease-in-out infinite;
}
@keyframes hlSparkle {
    0%, 100% { transform: scale(1)   rotate(0deg);  }
    50%      { transform: scale(.78) rotate(18deg); }
}

/* ---------- 6. Header: dark evergreen wash, warm lamp, snowbank --------- */

body.holiday .header {
    position: relative;
    background-color: #0b1f1d;
    background-blend-mode: multiply, normal;
    box-shadow: inset 0 -40px 70px -30px rgba(0, 0, 0, 0.8);
}

body.holiday .header::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        radial-gradient(ellipse 45% 40% at 50% 12%, rgba(255, 196, 94, 0.22), transparent 68%),
        linear-gradient(180deg, rgba(8, 28, 26, 0.55), rgba(8, 28, 26, 0.2) 45%, rgba(8, 28, 26, 0.6));
}

/* falling snow: two tiled dot layers drifting down at different speeds */
body.holiday .header::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background-image:
        radial-gradient(circle, rgba(255,255,255,.95) 0 2px, transparent 3px),
        radial-gradient(circle, rgba(255,255,255,.75) 0 1.5px, transparent 2.5px),
        radial-gradient(circle, rgba(255,255,255,.55) 0 1px, transparent 2px),
        radial-gradient(ellipse 60% 100% at 20% 100%, rgba(240,247,252,.45), transparent 70%),
        radial-gradient(ellipse 55% 100% at 62% 100%, rgba(240,247,252,.38), transparent 70%),
        radial-gradient(ellipse 60% 100% at 95% 100%, rgba(240,247,252,.45), transparent 70%);
    background-size: 170px 170px, 110px 110px, 70px 70px, 100% 54px, 100% 54px, 100% 54px;
    background-position: 0 0, 40px 60px, 15px 25px, 0 100%, 0 100%, 0 100%;
    background-repeat: repeat, repeat, repeat, no-repeat, no-repeat, no-repeat;
    animation: hlSnow 14s linear infinite;
}
@keyframes hlSnow {
    from { background-position: 0 0,    40px 60px,  15px 25px,  0 100%, 0 100%, 0 100%; }
    to   { background-position: 22px 170px, 8px 170px, -20px 140px, 0 100%, 0 100%, 0 100%; }
}

body.holiday .text-scroller-container {
    background: linear-gradient(225deg, #14463f 0%, #0f3a34 35%, #0b2a27 70%, #081d1b 100%);
    outline-color: rgba(255, 244, 214, 0.6);
}
body.holiday .text-scroller-content       { color: #ffe9a8; }
body.holiday .text-scroller-content p     { background-color: rgba(10, 40, 36, 0.45); }

/* ---------- 7. Navigation ---------------------------------------------- */

body.holiday .books-games li  { color: #f2c14e; }
body.holiday .books-games a   { color: #f2c14e; }
body.holiday .books-games a[href*="iblog"] { color: #f2c14e !important; }   /* About is inline-black */
body.holiday .books-games a:hover {
    color: #fff6dc;
    text-shadow: 0 0 8px rgba(255, 210, 110, 0.75);
}
body.holiday .books-games .nav-dd {
    background: rgba(8, 30, 27, 0.97);
    border-color: rgba(242, 193, 78, 0.45);
}
body.holiday .books-games .nav-dd a       { color: #f2c14e; }
body.holiday .books-games .nav-dd a:hover,
body.holiday .books-games .nav-dd a:focus { background: rgba(242, 193, 78, 0.16); color: #fff6dc; }

/* ---------- 8. Ornament beside the title -------------------------------- */
/* Two free pseudo-elements on .title: a golden glow and a red bauble.        */

body.holiday .title { position: relative; }

body.holiday .title::after {
    content: "";
    position: absolute;
    left: 15%;
    top: 50%;
    width: 130px;
    height: 130px;
    margin: -65px 0 0 -31px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(circle, rgba(255, 205, 100, 0.38) 0%, rgba(255, 180, 70, 0.14) 45%, transparent 72%);
    animation: hlGlowPulse 4.6s ease-in-out infinite;
}

body.holiday .title::before {
    content: "";
    position: absolute;
    left: 15%;
    top: 50%;
    width: 68px;
    height: 68px;
    margin-top: -34px;
    pointer-events: none;
    z-index: 1;
    background: no-repeat center/contain url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">\
<defs><radialGradient id="b" cx="35%25" cy="30%25" r="75%25">\
<stop offset="0" stop-color="%23ff6b6b"/><stop offset="55%25" stop-color="%23d62839"/><stop offset="100%25" stop-color="%23800f1f"/>\
</radialGradient></defs>\
<path d="M32 2 v9" stroke="%23f2c14e" stroke-width="2.4" stroke-linecap="round"/>\
<rect x="25" y="9" width="14" height="8" rx="2" fill="%23f2c14e"/>\
<circle cx="32" cy="38" r="22" fill="url(%23b)"/>\
<path d="M16 36 q16 -9 32 0" fill="none" stroke="%23f2c14e" stroke-width="2.4" opacity=".85"/>\
<path d="M15 45 q17 9 34 0" fill="none" stroke="%23f2c14e" stroke-width="2.4" opacity=".85"/>\
<ellipse cx="24" cy="29" rx="5.5" ry="3.2" fill="white" opacity=".35" transform="rotate(-30 24 29)"/>\
</svg>');
    animation: hlTwinkle 4.6s ease-in-out infinite;
}

@keyframes hlTwinkle {
    0%, 100% { filter: brightness(1)    drop-shadow(0 0 7px rgba(255, 200, 90, 0.5)); }
    25%      { filter: brightness(1.12) drop-shadow(0 0 11px rgba(255, 210, 110, 0.7)); }
    50%      { filter: brightness(0.96) drop-shadow(0 0 6px  rgba(255, 200, 90, 0.45)); }
    75%      { filter: brightness(1.1)  drop-shadow(0 0 10px rgba(255, 210, 110, 0.65)); }
}
@keyframes hlGlowPulse {
    0%, 100% { opacity: 0.85; transform: scale(1);    }
    25%      { opacity: 1;    transform: scale(1.07); }
    50%      { opacity: 0.75; transform: scale(0.97); }
    75%      { opacity: 0.98; transform: scale(1.05); }
}
@keyframes hlDrift {
    from { transform: translateX(-4%); }
    to   { transform: translateX(4%);  }
}

/* ---------- 9. Reduced motion and small screens ------------------------- */

@media (prefers-reduced-motion: reduce) {
    body.holiday .title span,
    body.holiday .bubble,
    body.holiday .header::after,
    body.holiday #animated-title-bg,
    body.holiday #animated-title-bg::before,
    body.holiday .title::before,
    body.holiday .title::after {
        animation: none !important;
    }
}
@media (max-width: 600px) {
    body.holiday #animated-title-bg::before { height: 24px; background-size: 110px 24px, 110px 24px, 110px 24px, 110px 24px, 110px 24px, 100% 1.5px; }
    body.holiday .title::before { left: 7%; width: 44px; height: 44px; margin-top: -22px; }
    body.holiday .title::after  { left: 7%; width: 86px; height: 86px; margin: -43px 0 0 -21px; }
}

/* =============================================================================
   HOLIDAY - SEASONAL BANNER AND "HOLIDAY READS" POPUP
   =============================================================================
   Built by holiday.js. Every selector below is still scoped to body.holiday,
   so removing that one class hides the styling and stops the script in the same
   motion. The elements are appended to <body>, so they need no markup changes.
   ============================================================================= */

/* ---------- 14. The banner ------------------------------------------------ */

body.holiday #hl-banner {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 9000;
    display: flex;
    align-items: flex-start;
    gap: 4px;
    max-width: 340px;
    transform: translateY(140%);
    opacity: 0;
    transition: transform 0.55s cubic-bezier(.22,1,.36,1), opacity 0.55s ease;
}

body.holiday #hl-banner.in { transform: translateY(0); opacity: 1; }

body.holiday .hl-banner-hit {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 15px;
    cursor: pointer;
    text-align: left;
    font-family: "Bebas Neue", Arial, sans-serif;
    color: #f2efe4;
    border: 1px solid rgba(242, 193, 78, 0.55);
    border-radius: 14px;
    background:
        radial-gradient(ellipse 70% 120% at 12% 50%, rgba(255, 205, 95, 0.22), transparent 70%),
        linear-gradient(135deg, #14403a 0%, #0f2f2b 55%, #0a2220 100%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55),
                0 0 0 1px rgba(0, 0, 0, 0.3) inset;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

body.holiday .hl-banner-hit:hover {
    transform: translateY(-2px);
    border-color: #f2c14e;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6),
                0 0 22px rgba(255, 200, 90, 0.28);
}

/* the little lantern on the banner reuses the title lantern's artwork */
body.holiday .hl-lantern {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    background: no-repeat center/contain url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">\
<defs><radialGradient id="o" cx="35%25" cy="30%25" r="75%25">\
<stop offset="0" stop-color="%23ff6b6b"/><stop offset="55%25" stop-color="%23d62839"/><stop offset="100%25" stop-color="%23800f1f"/>\
</radialGradient></defs>\
<path d="M32 3 v9" stroke="%23f2c14e" stroke-width="2.4" stroke-linecap="round"/>\
<rect x="25" y="10" width="14" height="8" rx="2" fill="%23f2c14e"/>\
<circle cx="32" cy="38" r="21" fill="url(%23o)"/>\
<path d="M17 36 q15 -9 30 0" fill="none" stroke="%23f2c14e" stroke-width="2.4" opacity=".85"/>\
<path d="M16 44 q16 8 32 0" fill="none" stroke="%23f2c14e" stroke-width="2.4" opacity=".85"/>\
<ellipse cx="24" cy="29" rx="5" ry="3" fill="white" opacity=".35" transform="rotate(-30 24 29)"/>\
</svg>');
    animation: hlTwinkle 4.6s ease-in-out infinite;
}

body.holiday .hl-banner-text  { display: flex; flex-direction: column; line-height: 1.25; }
body.holiday .hl-banner-kicker{ font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #f2c14e; }
body.holiday .hl-banner-line  { font-size: 21px; letter-spacing: 1px; color: #f2efe4; }
body.holiday .hl-banner-sub   { font-size: 11.5px; letter-spacing: .5px; color: #b9d3cc; }
body.holiday .hl-banner-go    { margin-left: auto; font-size: 26px; color: #f2c14e; }

body.holiday .hl-banner-x {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin-top: 2px;
    cursor: pointer;
    font-size: 17px;
    line-height: 1;
    color: #b9d3cc;
    background: rgba(7, 26, 24, 0.9);
    border: 1px solid rgba(185, 211, 204, 0.35);
    border-radius: 50%;
}
body.holiday .hl-banner-x:hover { color: #fff6dc; border-color: #f2c14e; }

/* ---------- 15. The popup ------------------------------------------------ */

body.holiday #hl-overlay {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(3, 15, 17, 0.84);
    backdrop-filter: blur(3px);
}
body.holiday #hl-overlay.open { display: flex; animation: hlFade 0.3s ease both; }

@keyframes hlFade { from { opacity: 0; } to { opacity: 1; } }

body.holiday.hl-locked { overflow: hidden; }   /* stop the page scrolling behind */

body.holiday .hl-panel {
    position: relative;
    width: 100%;
    max-width: 940px;
    max-height: 88vh;
    overflow-y: auto;
    padding: 30px 28px 24px;
    border: 1px solid rgba(242, 193, 78, 0.4);
    border-radius: 18px;
    background:
        radial-gradient(ellipse 60% 45% at 50% 0%, rgba(255, 205, 95, 0.16), transparent 70%),
        linear-gradient(170deg, #15423b 0%, #0f3029 45%, #0a211e 100%);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
    animation: hlRise 0.4s cubic-bezier(.22,1,.36,1) both;
}

@keyframes hlRise { from { transform: translateY(16px) scale(.985); } to { transform: none; } }

/* fog along the bottom of the panel */
body.holiday .hl-fog {
    position: absolute;
    left: -20%; right: -20%; bottom: 0;
    height: 80px;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 100% at 25% 100%, rgba(235,243,250,.14), transparent 70%),
                radial-gradient(ellipse 60% 100% at 75% 100%, rgba(235,243,250,.12), transparent 70%);
    animation: hlDrift 26s linear infinite alternate;
}

body.holiday .hl-close {
    position: absolute;
    top: 12px; right: 14px;
    width: 34px; height: 34px;
    cursor: pointer;
    font-size: 23px; line-height: 1;
    color: #f0ece0;
    background: rgba(7, 26, 24, 0.75);
    border: 1px solid rgba(240, 236, 224, 0.3);
    border-radius: 50%;
}
body.holiday .hl-close:hover { color: #ffe9a8; border-color: #f2c14e; }

body.holiday .hl-head   { text-align: center; margin-bottom: 22px; }
body.holiday .hl-kicker { margin: 0 0 6px; font-size: 11.5px; letter-spacing: 3px; text-transform: uppercase; color: #f2c14e; }
body.holiday .hl-title  {
    margin: 0 0 8px;
    font-family: "Fredoka One", "Bebas Neue", sans-serif;
    font-size: 34px;
    color: #f2efe4;
    text-shadow: 0 0 10px rgba(255, 220, 130, 0.35), 2px 2px 0 rgba(0,0,0,.5);
}
body.holiday .hl-sub {
    margin: 0 auto;
    max-width: 520px;
    font-family: Georgia, serif;
    font-size: 13.5px;
    line-height: 1.6;
    color: #b9d3cc;
}

body.holiday .hl-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

body.holiday .hl-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    overflow: hidden;
    border: 1px solid rgba(242, 193, 78, 0.22);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(24, 66, 59, 0.72), rgba(10, 34, 31, 0.72));
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
body.holiday .hl-card:hover {
    transform: translateY(-4px);
    border-color: #f2c14e;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.55), 0 0 18px rgba(255, 200, 90, 0.2);
}

body.holiday .hl-card-cover     { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: #08201d; }
body.holiday .hl-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

body.holiday .hl-card-body   { display: flex; flex-direction: column; gap: 3px; padding: 10px 11px 12px; }
body.holiday .hl-card-title  { font-family: "Bebas Neue", Arial, sans-serif; font-size: 16px; letter-spacing: .5px; color: #f2efe4; }
body.holiday .hl-card-author { font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: #f2c14e; }
body.holiday .hl-card-desc   { margin-top: 3px; font-family: Georgia, serif; font-size: 11.5px; line-height: 1.5; color: #9fbdb6;
                                 display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
body.holiday .hl-card-go     { margin-top: 6px; font-size: 11.5px; letter-spacing: 1px; color: #9fd3e0; }

body.holiday .hl-foot { margin-top: 20px; text-align: center; }
body.holiday .hl-all  {
    display: inline-block;
    padding: 9px 20px;
    font-family: "Bebas Neue", Arial, sans-serif;
    font-size: 15px; letter-spacing: 1.5px;
    text-decoration: none;
    color: #0a2220;
    background: linear-gradient(135deg, #f2c14e, #e0a526);
    border-radius: 22px;
}
body.holiday .hl-all:hover { background: linear-gradient(135deg, #ffd978, #f0b530); }

/* ---------- 16. Banner and popup on smaller screens --------------------- */

@media (max-width: 900px) {
    body.holiday .hl-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
    body.holiday #hl-banner { right: 10px; left: 10px; bottom: 10px; max-width: none; }
    body.holiday .hl-grid   { grid-template-columns: repeat(2, 1fr); gap: 11px; }
    body.holiday .hl-panel  { padding: 26px 16px 18px; max-height: 92vh; }
    body.holiday .hl-title  { font-size: 26px; }
    body.holiday .hl-card-desc { -webkit-line-clamp: 2; }
}

@media (prefers-reduced-motion: reduce) {
    body.holiday #hl-banner,
    body.holiday .hl-lantern,
    body.holiday .hl-fog,
    body.holiday #hl-overlay.open,
    body.holiday .hl-panel { animation: none !important; transition: none !important; }
}