/* The Christmas theme (scripts/christmas.js, SeasonalThemes.cs). christmas.js sets
   data-christmas="on" or "lucia" on <html>, on top of data-theme="dark": a winter night in
   midnight blue and forest green, with snow white, cranberry red and gold. MainLayout's .page
   carries data-theme as well, so the colours are set on it too. */

@font-face {
    font-family: 'Santa Nort Pole';
    font-style: normal;
    /* It has one weight; this keeps the browser from thickening it for the bold headings. */
    font-weight: 100 900;
    font-display: swap;
    /* Santa Nort Pole by Maikohatta (dafont.com); the Latin subset. */
    src: url('../fonts/santa-nort-pole-latin.woff2') format('woff2');
}

:root[data-christmas],
:root[data-christmas] [data-theme] {
    color-scheme: dark;
    --cb-primary: #c8102e;
    --cb-primary-dark: #e23b52;
    --cb-secondary: #1f7a46;
    --cb-link-color: #f2c14e;

    --cb-bg-body: #071225;
    --cb-bg-surface: #0b1a31;
    --cb-bg-elevated: #0f223d;
    --cb-bg-input: #0a172b;
    --cb-bg-sidebar-start: #06101f;
    --cb-bg-sidebar-end: #0c2a1b;

    --cb-text-body: #eef3f8;
    --cb-text-strong: #ffffff;
    --cb-text-muted: #a9b8c9;

    --cb-border-color: #1d3554;
    --cb-border-strong: #2b4a70;
    --cb-border-focus: #f2c14e;
    --cb-shadow-color: rgba(0, 0, 0, 0.45);

    --cb-tab-active: #f2c14e;
    --cb-row-active-bg: #12304f;
    --cb-row-active-border: #2b5a85;
    --cb-accent-strong: #f2c14e;
}

/* Headings, the header greeting and the loading screen's greeting in the festive font. The dense
   grids keep plain headers, as with the horror theme. */
:root[data-christmas] :is(h1, h2, h3, h4, h5, h6, legend, .cb-selector-label, .cb-loader-greeting),
:root[data-christmas] th:not(:is(.attendance-grid, .attendance-table, .poll-grid-roster-table, .poll-grid-tally-table, .lineup-spread) th) {
    font-family: 'Santa Nort Pole', var(--cb-font-family);
    font-weight: 700;
    color: #f2c14e;
    text-shadow: 0 0 8px rgba(242, 193, 78, 0.35);
}

:root[data-christmas] .cb-christmas-welcome {
    font-family: 'Santa Nort Pole', var(--cb-font-family);
    font-weight: 700;
    font-size: 1.3em;
    color: #f2c14e;
    text-shadow: 0 0 6px rgba(242, 193, 78, 0.5);
}

/* ---- The overlay: never in the way of a tap ---- */
.cbx-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2000;
    overflow: hidden;
}

/* The notes in full screen: nothing of the theme shows. */
:root[data-christmas]:has(.smv-overlay) .cbx-overlay {
    display: none;
}

/* ---- The string of lights along the top ---- */
.cbx-lights {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 14px;
}

.cbx-lights svg {
    width: 100%;
    height: 14px;
}

.cbx-bulbs {
    position: absolute;
    inset: 0;
    animation: cbx-twinkle 2.2s ease-in-out infinite alternate;
}

.cbx-bulbs-1 {
    animation-duration: 2.9s;
    animation-delay: -1.1s;
}

.cbx-bulbs-2 {
    animation-duration: 3.6s;
    animation-delay: -2.3s;
}

.cbx-bulb {
    position: absolute;
    top: 4px;
    width: 6px;
    height: 9px;
    border-radius: 45% 45% 50% 50% / 40% 40% 60% 60%;
}

.cbx-bulb::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 1.5px;
    width: 3px;
    height: 3px;
    background: #2c2c2c;
    border-radius: 1px;
}

.cbx-red { background: #ff3b4e; box-shadow: 0 0 5px 1px rgba(255, 59, 78, 0.7); }
.cbx-gold { background: #ffd24a; box-shadow: 0 0 5px 1px rgba(255, 210, 74, 0.7); }
.cbx-green { background: #3bdc7a; box-shadow: 0 0 5px 1px rgba(59, 220, 122, 0.6); }
.cbx-blue { background: #4aa8ff; box-shadow: 0 0 5px 1px rgba(74, 168, 255, 0.7); }
.cbx-white { background: #fffbe8; box-shadow: 0 0 5px 1px rgba(255, 251, 232, 0.7); }

@keyframes cbx-twinkle {
    from { opacity: 1; }
    to { opacity: 0.45; }
}

/* ---- The window star, on the left: on a long cord from the top, so the star itself hangs just
   below the header (3.5rem) rather than over its button and title ---- */
.cbx-star {
    position: absolute;
    top: 0;
    left: 2px;
    width: 40px;
    height: 110px;
    /* Swings from the top of its cord, straight above the star's middle */
    transform-origin: 50% 0;
    filter: drop-shadow(0 0 10px rgba(255, 214, 110, 0.75));
    animation: cbx-sway 7s ease-in-out infinite alternate;
}

.cbx-star svg {
    width: 100%;
    height: 100%;
}

@keyframes cbx-sway {
    from { transform: rotate(-3deg); }
    to { transform: rotate(3deg); }
}

/* ---- Snowfall ----
   Layers of snow dots (a repeating pattern) that fall by exactly one tile and start over, so the
   loop never shows, and a few big flakes. */
.cbx-snow {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(-1 * var(--tile));
    bottom: 0;
    background-size: var(--tile) var(--tile);
    animation: cbx-snowfall var(--fall) linear infinite;
}

@keyframes cbx-snowfall {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(0, var(--tile), 0); }
}

.cbx-flake {
    position: absolute;
    top: 0;
    font-size: var(--size);
    line-height: 1;
    color: #fff;
    transform: translate3d(0, -12vh, 0);
    animation: cbx-fall var(--fall) linear var(--delay) infinite;
}

@keyframes cbx-fall {
    from { transform: translate3d(0, -12vh, 0) rotate(0deg); }
    to { transform: translate3d(var(--drift), 112vh, 0) rotate(240deg); }
}

/* Snow swirling round a finger or the mouse: a ring of dots, animated as one (christmas.js). */
.cbx-swirl {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
}

.cbx-swirl i {
    position: absolute;
    width: var(--dot);
    height: var(--dot);
    margin: calc(var(--dot) / -2) 0 0 calc(var(--dot) / -2);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.8);
}

/* ---- Santa's sleigh ---- */
.cbx-sleigh {
    position: absolute;
    top: 0;
    left: 0;
    width: 345px;
    height: 60px;
    filter: drop-shadow(0 0 6px rgba(255, 214, 110, 0.6));
}

.cbx-sleigh svg {
    width: 100%;
    height: 100%;
}

/* ---- A tomte peeking up from behind a card ---- */
.cbx-peek {
    position: absolute;
    overflow: hidden;
}

.cbx-tomte {
    width: 100%;
    height: 100%;
    transform: translateY(100%);
    animation: cbx-peek 4.2s ease-in-out forwards;
}

.cbx-tomte svg {
    width: 100%;
    height: 100%;
}

@keyframes cbx-peek {
    0% { transform: translateY(100%); }
    20%, 35% { transform: translateY(18%); }
    45% { transform: translateY(24%) rotate(-6deg); }
    60%, 75% { transform: translateY(18%) rotate(4deg); }
    100% { transform: translateY(100%); }
}

/* ---- Small surprises on the start page ---- */
.cbx-surprise {
    position: absolute;
    opacity: 0;
    transform: rotate(var(--tilt));
    animation: cbx-surprise 7s ease-out forwards;
}

.cbx-surprise svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 0 8px rgba(255, 214, 110, 0.35));
}

@keyframes cbx-surprise {
    0% { opacity: 0; transform: rotate(var(--tilt)) translateY(12px) scale(0.9); }
    10% { opacity: 1; transform: rotate(var(--tilt)) translateY(0) scale(1); }
    50% { transform: rotate(var(--tilt)) translateY(-6px); }
    70% { opacity: 1; }
    100% { opacity: 0; transform: rotate(var(--tilt)) translateY(-12px); }
}

/* ---- Snowy frames: snow on top of the start page's cards, with icicles, and holly ----
   Extra layers that ignore the pointer, so the cards keep their size. The song list's card clips
   what overflows it (.home-panel), so here the cards do not clip. */
:root[data-christmas] .home-page .cb-page-card {
    position: relative;
    overflow: visible;
    border-color: #2b4a70;
    box-shadow: 0 0 0 1px rgba(242, 193, 78, 0.15), 0 4px 16px rgba(0, 0, 0, 0.45);
}

:root[data-christmas] .home-page .cb-page-card::before {
    content: "";
    position: absolute;
    left: -4px;
    right: -4px;
    top: -14px;
    height: 34px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='34' viewBox='0 0 120 34'%3E %3Cpath d='M0 14 C6 4 18 2 26 9 C32 2 46 1 54 8 C62 0 78 2 84 10 C92 3 108 4 114 11 L120 14 L120 20 C112 22 104 19 96 21 C88 23 80 20 72 22 C64 24 56 21 48 22 C40 23 32 20 24 22 C16 23 8 20 0 21 Z' fill='%23f4f8ff'/%3E %3Cpath d='M0 18 C30 24 60 16 120 19' stroke='%23cfe0f5' stroke-width='2' fill='none'/%3E %3Cg fill='%23e6f1ff' stroke='%23c4d8f0' stroke-width='0.6'%3E%3Cpath d='M14 21 L17 33 L20 21 Z'/%3E%3Cpath d='M38 22 L40 29 L43 22 Z'/%3E%3Cpath d='M63 23 L66 34 L69 23 Z'/%3E%3Cpath d='M90 22 L92 28 L95 22 Z'/%3E%3Cpath d='M106 20 L108 30 L111 20 Z'/%3E%3C/g%3E %3Cg fill='%23fff'%3E%3Ccircle cx='22' cy='9' r='1.6'/%3E%3Ccircle cx='70' cy='6' r='1.4'/%3E%3Ccircle cx='98' cy='9' r='1.2'/%3E%3C/g%3E %3C/svg%3E") repeat-x left top / 120px 34px;
    pointer-events: none;
}

/* Holly on the top right: the window star hangs on the left. */
:root[data-christmas] .home-page .cb-page-card::after {
    content: "";
    position: absolute;
    right: -14px;
    top: -18px;
    transform: scaleX(-1);
    width: 60px;
    height: 44px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='44' viewBox='0 0 60 44'%3E %3Cpath d='M28 22 C22 10 12 10 4 6 C8 12 6 18 10 22 C6 26 8 32 4 36 C14 34 22 32 28 22 Z' fill='%231f7a46' stroke='%230f4a2a' stroke-width='1.2'/%3E %3Cpath d='M30 22 C38 10 48 12 56 8 C52 14 54 20 50 24 C54 28 52 34 56 38 C46 36 38 32 30 22 Z' fill='%232a8f55' stroke='%230f4a2a' stroke-width='1.2'/%3E %3Ccircle cx='26' cy='26' r='5' fill='%23c8102e'/%3E%3Ccircle cx='34' cy='27' r='5' fill='%23d6162f'/%3E%3Ccircle cx='30' cy='19' r='5' fill='%23c8102e'/%3E %3Ccircle cx='24.5' cy='24.5' r='1.4' fill='%23fff' opacity='0.7'/%3E%3Ccircle cx='28.5' cy='17.5' r='1.4' fill='%23fff' opacity='0.7'/%3E %3C/svg%3E") no-repeat center / contain;
    pointer-events: none;
}

/* ---- The loading screen: the bird as Santa ---- */
.cb-loader-christmas .cbx-splash-bird {
    width: min(58vw, 14rem);
    height: auto;
    animation: cbx-splash 3s ease-in-out infinite;
}

.cb-loader-christmas .cb-loader-lines {
    fill: #2b4a70;
}

.cb-loader-christmas .cb-loader-note.cb-current {
    fill: #f2c14e;
}

@keyframes cbx-splash {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-6px) rotate(1deg); }
}

/* ==== The Christmas calendar (christmas.js) ==== */

/* ---- The Advent candles, bottom left ---- */
.cbx-candles {
    position: absolute;
    left: 8px;
    bottom: 8px;
    width: 72px;
    height: 40px;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.6));
}

.cbx-candles svg {
    width: 100%;
    height: 100%;
}

.cbx-flames {
    position: absolute;
    inset: 0;
    animation: cbx-flicker 1.3s ease-in-out infinite alternate;
}

.cbx-flames i {
    position: absolute;
    top: 6%;
    width: 6px;
    height: 10px;
    margin-left: -3px;
    border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%;
    background: radial-gradient(circle at 50% 70%, #fff7d6 0 25%, #ffd36b 45%, #ff9a2a 80%);
    box-shadow: 0 0 10px 4px rgba(255, 190, 80, 0.55);
}

@keyframes cbx-flicker {
    0% { opacity: 1; transform: scaleY(1); }
    50% { opacity: 0.85; transform: scaleY(0.96); }
    100% { opacity: 1; transform: scaleY(1.03); }
}

/* ---- The tree and its parcel, bottom right on the start page ---- */
.cbx-tree {
    position: absolute;
    right: 10px;
    bottom: 8px;
    width: 64px;
    height: 92px;
    transform-origin: 50% 100%;
    filter: drop-shadow(0 0 6px rgba(255, 214, 110, 0.35));
}

.cbx-tree > svg {
    width: 100%;
    height: 100%;
}

/* A sysadmin's tree takes a tap: it sets off a random effect (christmas.js). */
.cbx-tree.cbx-tree-tappable {
    pointer-events: auto;
    cursor: pointer;
}

/* The one thing in the theme that takes everyone's tap: today's hatch of the advent calendar. */
.cbx-parcel {
    position: absolute;
    left: -30px;
    bottom: -4px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: none;
    pointer-events: auto;
    cursor: pointer;
}

.cbx-parcel svg {
    width: 100%;
    height: 100%;
}

.cbx-parcel span {
    /* On the red, left of the ribbon, where it can be read. */
    position: absolute;
    left: 14%;
    width: 30%;
    top: 46%;
    font-family: 'Santa Nort Pole', var(--cb-font-family);
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    text-align: center;
    color: #fff;
    text-shadow: 0 0 2px #000, 0 0 4px #000;
}

.cbx-unopened {
    animation: cbx-wiggle 2.4s ease-in-out infinite;
}

@keyframes cbx-wiggle {
    0%, 70%, 100% { transform: none; }
    76% { transform: rotate(-8deg); }
    82% { transform: rotate(7deg); }
    88% { transform: rotate(-4deg); }
}

/* Saint Knut's Day: the tree dances, hops out of the picture and comes back. */
.cbx-tree.cbx-dancing {
    animation: cbx-knut 6s ease-in-out;
}

@keyframes cbx-knut {
    0% { transform: none; }
    8% { transform: translateY(-14px) rotate(-8deg); }
    16% { transform: none; }
    24% { transform: translateY(-14px) rotate(8deg); }
    32% { transform: none; }
    50% { transform: translate(140px, -10px) rotate(20deg); opacity: 0; }
    70% { transform: translate(140px, 0); opacity: 0; }
    100% { transform: none; opacity: 1; }
}

/* ---- Today's hatch ---- */
.cbx-hatch {
    position: absolute;
    left: 50%;
    bottom: 110px;
    width: min(88vw, 26rem);
    transform: translateX(-50%);
    padding: 0.9rem 1.1rem;
    border: 2px solid #f2c14e;
    border-radius: 12px;
    background: rgba(9, 22, 44, 0.96);
    box-shadow: 0 0 0 4px rgba(200, 16, 46, 0.6), 0 10px 30px rgba(0, 0, 0, 0.6);
    color: #eef3f8;
    text-align: left;
    pointer-events: auto;
    animation: cbx-hatch-in 0.4s ease-out;
}

.cbx-hatch b {
    display: block;
    font-family: 'Santa Nort Pole', var(--cb-font-family);
    font-size: 1.4rem;
    color: #f2c14e;
}

.cbx-hatch span {
    display: block;
    font-size: 1rem;
    line-height: 1.4;
}

@keyframes cbx-hatch-in {
    from { opacity: 0; transform: translateX(-50%) translateY(16px) scale(0.96); }
    to { opacity: 1; transform: translateX(-50%); }
}

/* ---- What the hatches play, and the Lucia procession ---- */
.cbx-actor {
    position: absolute;
    top: 0;
    left: 0;
}

.cbx-actor svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.cbx-actor-small { width: 80px; height: 90px; }
.cbx-actor-bird { width: 150px; height: 165px; }
.cbx-actor-parcel { width: 100px; height: 100px; }
.cbx-actor-snowman { width: 100px; height: 140px; }
.cbx-actor-shootingstar { width: 240px; height: 60px; }
.cbx-actor-lucia { width: 240px; height: 98px; filter: drop-shadow(0 0 8px rgba(255, 214, 110, 0.5)); }

.cbx-building .cbx-ball {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    transform: scale(0);
    animation: cbx-build 0.6s ease-out forwards;
}

.cbx-building .cbx-ball-2 { animation-delay: 0.7s; }
.cbx-building .cbx-ball-3 { animation-delay: 1.4s; }

@keyframes cbx-build {
    to { transform: scale(1); }
}

.cbx-note {
    font-size: 26px;
    color: #ffe7a0;
    text-shadow: 0 0 6px rgba(255, 214, 110, 0.7);
}

.cbx-note-snow {
    color: #fff;
}

.cbx-beak-note {
    position: absolute;
    left: -10px;
    top: 34%;
    font-size: 30px;
    color: #111;
}

.cbx-glow {
    filter: drop-shadow(0 0 4px #ffd36b);
}

/* Reduced motion: the lights, the star and the frames stay, still; nothing falls or flies
   (christmas.js adds no snow, sleigh, tomte or surprises). */
@media (prefers-reduced-motion: reduce) {
    .cbx-bulbs,
    .cbx-flames,
    .cbx-unopened,
    .cbx-tree.cbx-dancing,
    .cbx-star,
    .cb-loader-christmas .cbx-splash-bird {
        animation: none;
    }
}