﻿/**
 * Snow.css - v3, rewritten clean.
 * Flake VISUALS only: containers, sizes, colours, light-mode shading, and the
 * rested-drift pseudo-elements. All MOTION lives in SnowEffect.js (one rAF
 * loop, fractional transforms) - there are deliberately no fall keyframes
 * here. Gated on html[data-snow] set by Snow.js; tokens.css's reduced-motion
 * block hides .snowflake entirely for users who opt out of animation.
 */

/* ============= Containers ============= */

/* Navbar strip: above the nav (z 1000). */
#navbar-snow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 56px;
    pointer-events: none;
    z-index: 1001;
    overflow: hidden;
}

/* Full-page fall (login): BELOW raised content - flakes pass behind the
   sign-in card (raised to z-index 1 further down), never over the form. */
#snow-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

html[data-snow="off"] #navbar-snow,
html[data-snow="off"] #snow-overlay {
    display: none;
}

/* ============= Flakes ============= */
/* Position/opacity are set inline per frame by SnowEffect. Dark-theme default:
   white with a soft glow. */
.snowflake {
    position: absolute;
    top: 0;
    border-radius: 50%;
    background-color: #FFFFFF;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
    opacity: 0;
    pointer-events: none;
}

    .snowflake.near {
        width: 4px;
        height: 4px;
    }

    .snowflake.medium {
        width: 3px;
        height: 3px;
    }

    .snowflake.far {
        width: 2px;
        height: 2px;
    }
/* Login full-page fall (#snow-overlay): larger flakes than the 56px nav
   strip - same component and light/dark styling, only the size differs. */
#snow-overlay .snowflake.near {
    width: 6px;
    height: 6px;
}

#snow-overlay .snowflake.medium {
    width: 4.5px;
    height: 4.5px;
}

#snow-overlay .snowflake.far {
    width: 3px;
    height: 3px;
}

@keyframes sparkle {
    0%, 100% {
        box-shadow: 0 0 3px rgba(255, 255, 255, 0.3);
    }

    50% {
        box-shadow: 0 0 9px rgba(255, 255, 255, 0.8);
    }
}

.snowflake.sparkle {
    animation: sparkle 2s ease-in-out infinite;
}

/* Light mode: white-on-cream is invisible, so each flake carries a cool halo
   ring, a soft under-shadow, and a shaded underside; the far layer tints
   slightly blue like distant snow. Sparkle's white glow is disabled here. */
html:not([data-theme="dark"]) .snowflake {
    background: #FDFEFF;
    box-shadow: 0 0 0 1px rgba(178, 199, 216, 0.85), 0 1.5px 3px rgba(122, 148, 170, 0.5), inset -1px -1px 1.5px rgba(178, 199, 216, 0.6);
}

    html:not([data-theme="dark"]) .snowflake.far {
        background: #EDF3F8;
        box-shadow: 0 0 0 1px rgba(178, 199, 216, 0.7), 0 1px 2px rgba(122, 148, 170, 0.4);
    }

    html:not([data-theme="dark"]) .snowflake.sparkle {
        animation: none;
    }

/* ============= Rested drifts ============= */
/* Inline-SVG banks: cool back layer, white crust, shaded crest, settled
   flecks; corner build-up left/right like real banked snow. Pseudo-elements
   only - zero markup changes, zero cost when off, no hit-testing impact. */

html[data-snow="on"] {
    --snow-drift-nav: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 680 16%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0,16 L0,4 C20,8 44,10.5 76,10 C100,9.6 114,6.8 140,7.4 C168,8 184,10.6 214,10.1 C242,9.7 258,6.6 288,7.2 C316,7.8 336,10.4 370,10 C400,9.6 418,7 450,7.6 C478,8.1 498,10.5 530,10 C558,9.6 578,7.2 610,7.8 C638,8.3 660,6.4 680,3.5 L680,16 Z%22 fill=%22%23DEE9F2%22 opacity=%220.9%22/%3E%3Cpath d=%22M0,16 L0,8 C20,12 46,13.6 78,13.1 C102,12.7 116,10.8 142,11.2 C170,11.6 188,13.5 220,13.1 C248,12.8 264,10.6 294,11 C322,11.4 342,13.4 376,13 C406,12.6 424,10.9 456,11.3 C484,11.7 504,13.5 536,13.1 C562,12.8 582,11 612,11.5 C640,11.9 662,10.4 680,7.5 L680,16 Z%22 fill=%22%23FFFFFF%22/%3E%3Cpath d=%22M0,8 C20,12 46,13.6 78,13.1 C102,12.7 116,10.8 142,11.2 C170,11.6 188,13.5 220,13.1 C248,12.8 264,10.6 294,11 C322,11.4 342,13.4 376,13 C406,12.6 424,10.9 456,11.3 C484,11.7 504,13.5 536,13.1 C562,12.8 582,11 612,11.5 C640,11.9 662,10.4 680,7.5%22 fill=%22none%22 stroke=%22%23A9BFD2%22 stroke-width=%220.8%22 opacity=%220.85%22/%3E%3Ccircle cx=%22120%22 cy=%2210.6%22 r=%221.1%22 fill=%22%23FFFFFF%22 stroke=%22%23A9BFD2%22 stroke-width=%220.4%22/%3E%3Ccircle cx=%22333%22 cy=%2212.2%22 r=%220.9%22 fill=%22%23FFFFFF%22 stroke=%22%23A9BFD2%22 stroke-width=%220.4%22/%3E%3Ccircle cx=%22521%22 cy=%2211.6%22 r=%221%22 fill=%22%23FFFFFF%22 stroke=%22%23A9BFD2%22 stroke-width=%220.4%22/%3E%3C/svg%3E");
    --snow-drift-card: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 320 14%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0,14 L0,3.5 C12,6.8 30,8.8 56,8.4 C78,8.1 90,5.6 114,6.2 C140,6.8 156,9 186,8.6 C212,8.2 228,5.8 254,6.4 C280,7 300,5 320,3 L320,14 Z%22 fill=%22%23DEE9F2%22 opacity=%220.9%22/%3E%3Cpath d=%22M0,14 L0,7.5 C14,10.4 34,11.9 60,11.5 C82,11.2 94,9.6 118,10 C144,10.4 160,12 190,11.7 C216,11.4 232,9.8 258,10.2 C284,10.6 304,9.4 320,7 L320,14 Z%22 fill=%22%23FFFFFF%22/%3E%3Cpath d=%22M0,7.5 C14,10.4 34,11.9 60,11.5 C82,11.2 94,9.6 118,10 C144,10.4 160,12 190,11.7 C216,11.4 232,9.8 258,10.2 C284,10.6 304,9.4 320,7%22 fill=%22none%22 stroke=%22%23A9BFD2%22 stroke-width=%220.8%22 opacity=%220.85%22/%3E%3C/svg%3E");
    --snow-drift-card-2: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 320 14%22 preserveAspectRatio=%22none%22%3E%3Cg transform=%22translate(320 0) scale(-1 1)%22%3E%3Cpath d=%22M0,14 L0,3.5 C12,6.8 30,8.8 56,8.4 C78,8.1 90,5.6 114,6.2 C140,6.8 156,9 186,8.6 C212,8.2 228,5.8 254,6.4 C280,7 300,5 320,3 L320,14 Z%22 fill=%22%23DEE9F2%22 opacity=%220.9%22/%3E%3Cpath d=%22M0,14 L0,7.5 C14,10.4 34,11.9 60,11.5 C82,11.2 94,9.6 118,10 C144,10.4 160,12 190,11.7 C216,11.4 232,9.8 258,10.2 C284,10.6 304,9.4 320,7 L320,14 Z%22 fill=%22%23FFFFFF%22/%3E%3Cpath d=%22M0,7.5 C14,10.4 34,11.9 60,11.5 C82,11.2 94,9.6 118,10 C144,10.4 160,12 190,11.7 C216,11.4 232,9.8 258,10.2 C284,10.6 304,9.4 320,7%22 fill=%22none%22 stroke=%22%23A9BFD2%22 stroke-width=%220.8%22 opacity=%220.85%22/%3E%3C/g%3E%3C/svg%3E");
    --snow-drift-auth: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 280 12%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0,12 L0,4 C10,7.5 26,9.4 48,9 C66,8.7 76,6.8 96,7.2 C118,7.6 130,9.6 152,9.2 C174,8.8 186,6.9 208,7.4 C230,7.9 246,9.5 262,9 L280,3.5 L280,12 Z%22 fill=%22%23EAF1F7%22 opacity=%220.85%22/%3E%3Cpath d=%22M0,12 L0,6.5 C14,9.4 34,10.7 56,10.4 C78,10.1 92,8.6 116,9 C140,9.4 156,10.8 180,10.5 C204,10.2 220,8.8 244,9.2 L280,6 L280,12 Z%22 fill=%22%23FFFFFF%22/%3E%3Cpath d=%22M0,6.5 C14,9.4 34,10.7 56,10.4 C78,10.1 92,8.6 116,9 C140,9.4 156,10.8 180,10.5 C204,10.2 220,8.8 244,9.2 L280,6%22 fill=%22none%22 stroke=%22%23A9BFD2%22 stroke-width=%220.5%22 opacity=%220.85%22/%3E%3C/svg%3E");
}

html[data-theme="dark"][data-snow="on"] {
    --snow-drift-nav: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 680 16%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0,16 L0,4 C20,8 44,10.5 76,10 C100,9.6 114,6.8 140,7.4 C168,8 184,10.6 214,10.1 C242,9.7 258,6.6 288,7.2 C316,7.8 336,10.4 370,10 C400,9.6 418,7 450,7.6 C478,8.1 498,10.5 530,10 C558,9.6 578,7.2 610,7.8 C638,8.3 660,6.4 680,3.5 L680,16 Z%22 fill=%22%23DCE9F2%22 opacity=%220.45%22/%3E%3Cpath d=%22M0,16 L0,8 C20,12 46,13.6 78,13.1 C102,12.7 116,10.8 142,11.2 C170,11.6 188,13.5 220,13.1 C248,12.8 264,10.6 294,11 C322,11.4 342,13.4 376,13 C406,12.6 424,10.9 456,11.3 C484,11.7 504,13.5 536,13.1 C562,12.8 582,11 612,11.5 C640,11.9 662,10.4 680,7.5 L680,16 Z%22 fill=%22%23F4F8FB%22 opacity=%220.9%22/%3E%3Cpath d=%22M0,8 C20,12 46,13.6 78,13.1 C102,12.7 116,10.8 142,11.2 C170,11.6 188,13.5 220,13.1 C248,12.8 264,10.6 294,11 C322,11.4 342,13.4 376,13 C406,12.6 424,10.9 456,11.3 C484,11.7 504,13.5 536,13.1 C562,12.8 582,11 612,11.5 C640,11.9 662,10.4 680,7.5%22 fill=%22none%22 stroke=%22%23FFFFFF%22 stroke-width=%220.7%22 opacity=%220.9%22/%3E%3Ccircle cx=%22120%22 cy=%2210.6%22 r=%221.1%22 fill=%22%23FFFFFF%22 opacity=%220.95%22/%3E%3Ccircle cx=%22333%22 cy=%2212.2%22 r=%220.9%22 fill=%22%23FFFFFF%22 opacity=%220.9%22/%3E%3Ccircle cx=%22521%22 cy=%2211.6%22 r=%221%22 fill=%22%23FFFFFF%22 opacity=%220.95%22/%3E%3C/svg%3E");
    --snow-drift-card: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 320 14%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0,14 L0,3.5 C12,6.8 30,8.8 56,8.4 C78,8.1 90,5.6 114,6.2 C140,6.8 156,9 186,8.6 C212,8.2 228,5.8 254,6.4 C280,7 300,5 320,3 L320,14 Z%22 fill=%22%23DCE9F2%22 opacity=%220.45%22/%3E%3Cpath d=%22M0,14 L0,8 C16,10.8 36,12.1 62,11.8 C84,11.5 96,10 120,10.4 C146,10.8 162,12.2 192,11.9 C218,11.6 234,10.2 260,10.6 C286,11 306,9.8 320,7.6 L320,14 Z%22 fill=%22%23F4F8FB%22 opacity=%220.85%22/%3E%3Cpath d=%22M0,8 C16,10.8 36,12.1 62,11.8 C84,11.5 96,10 120,10.4 C146,10.8 162,12.2 192,11.9 C218,11.6 234,10.2 260,10.6 C286,11 306,9.8 320,7.6%22 fill=%22none%22 stroke=%22%23FFFFFF%22 stroke-width=%220.7%22 opacity=%220.9%22/%3E%3C/svg%3E");
    --snow-drift-card-2: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 320 14%22 preserveAspectRatio=%22none%22%3E%3Cg transform=%22translate(320 0) scale(-1 1)%22%3E%3Cpath d=%22M0,14 L0,3.5 C12,6.8 30,8.8 56,8.4 C78,8.1 90,5.6 114,6.2 C140,6.8 156,9 186,8.6 C212,8.2 228,5.8 254,6.4 C280,7 300,5 320,3 L320,14 Z%22 fill=%22%23DCE9F2%22 opacity=%220.45%22/%3E%3Cpath d=%22M0,14 L0,8 C16,10.8 36,12.1 62,11.8 C84,11.5 96,10 120,10.4 C146,10.8 162,12.2 192,11.9 C218,11.6 234,10.2 260,10.6 C286,11 306,9.8 320,7.6 L320,14 Z%22 fill=%22%23F4F8FB%22 opacity=%220.85%22/%3E%3Cpath d=%22M0,8 C16,10.8 36,12.1 62,11.8 C84,11.5 96,10 120,10.4 C146,10.8 162,12.2 192,11.9 C218,11.6 234,10.2 260,10.6 C286,11 306,9.8 320,7.6%22 fill=%22none%22 stroke=%22%23FFFFFF%22 stroke-width=%220.7%22 opacity=%220.9%22/%3E%3C/g%3E%3C/svg%3E");
    --snow-drift-auth: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 280 12%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0,12 L0,4 C10,7.5 26,9.4 48,9 C66,8.7 76,6.8 96,7.2 C118,7.6 130,9.6 152,9.2 C174,8.8 186,6.9 208,7.4 C230,7.9 246,9.5 262,9 L280,3.5 L280,12 Z%22 fill=%22%23DCE9F2%22 opacity=%220.35%22/%3E%3Cpath d=%22M0,12 L0,6.5 C14,9.4 34,10.7 56,10.4 C78,10.1 92,8.6 116,9 C140,9.4 156,10.8 180,10.5 C204,10.2 220,8.8 244,9.2 L280,6 L280,12 Z%22 fill=%22%23F4F8FB%22 opacity=%220.85%22/%3E%3Cpath d=%22M0,6.5 C14,9.4 34,10.7 56,10.4 C78,10.1 92,8.6 116,9 C140,9.4 156,10.8 180,10.5 C204,10.2 220,8.8 244,9.2 L280,6%22 fill=%22none%22 stroke=%22%23FFFFFF%22 stroke-width=%220.7%22 opacity=%220.9%22/%3E%3C/svg%3E");
}

/* Navbar bottom edge. */
html[data-snow="on"] nav.Nav-Bar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 16px;
    background: var(--snow-drift-nav) center / 100% 100% no-repeat;
    pointer-events: none;
}

/* Project cards: adjacent cards alternate a mirrored skyline. */
html[data-snow="on"] .pj-card {
    position: relative;
}

    html[data-snow="on"] .pj-card::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 12px;
        border-radius: 0 0 12px 12px;
        background: var(--snow-drift-card) center / 100% 100% no-repeat;
        pointer-events: none;
    }

    html[data-snow="on"] .pj-card:nth-child(2n)::after {
        background-image: var(--snow-drift-card-2);
    }

/* Login card: 24px bank inside the bottom edge, clipped to the card's 20px
   (--r-lg) corner radius so the snow stays in the box; the active container
   is raised above the full-page overlay. */
html[data-snow="on"] .auth-container {
    position: relative;
    z-index: 1;
}

    html[data-snow="on"] .auth-container::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 24px;
        border-radius: 0 0 calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px);
        background: var(--snow-drift-auth) center / 100% 100% no-repeat;
        pointer-events: none;
    }

/* ============= Settings switch (Snow.js) - mirrors .qv-tf-sw ============= */
.qv-snow-sw {
    position: relative;
    width: 48px;
    height: 26px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--row-hover);
    cursor: pointer;
    transition: .18s ease;
    flex-shrink: 0;
    padding: 0;
}

.qv-snow-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .18s cubic-bezier(.4,0,.2,1);
}

    .qv-snow-knob svg {
        width: 13px;
        height: 13px;
    }

.qv-snow-sw[aria-checked="true"] {
    background: var(--accent);
}

    .qv-snow-sw[aria-checked="true"] .qv-snow-knob {
        transform: translateX(22px);
        background: var(--on-accent);
        color: var(--accent);
    }

/* Ground layer: settled snow across the bottom of the viewport. Fixed, full
   width, banked at the corners like the other drifts. z-index 500 sits above
   page panels/footer (<=101) but below the nav (1000) and modals (1200+);
   pointer-events: none so it never intercepts a click. */
html[data-snow="on"] {
    --snow-drift-ground: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 680 30%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0,30 L0,9 C22,15 52,19.5 96,18.5 C130,17.7 150,12.5 188,13.5 C230,14.6 254,20 302,19 C342,18.2 362,12.8 402,13.8 C444,14.9 468,19.8 514,18.8 C552,18 574,13 614,13.8 C644,14.4 664,11 680,7 L680,30 Z%22 fill=%22%23EAF1F7%22 opacity=%220.9%22/%3E%3Cpath d=%22M0,30 L0,14 C24,20 56,23.5 100,22.6 C134,21.9 154,17.6 192,18.5 C234,19.5 258,24 306,23.1 C346,22.4 366,18 406,18.9 C448,19.8 472,23.8 518,22.9 C556,22.2 578,18 618,18.7 C648,19.2 666,16 680,12 L680,30 Z%22 fill=%22%23FFFFFF%22/%3E%3Cpath d=%22M0,14 C24,20 56,23.5 100,22.6 C134,21.9 154,17.6 192,18.5 C234,19.5 258,24 306,23.1 C346,22.4 366,18 406,18.9 C448,19.8 472,23.8 518,22.9 C556,22.2 578,18 618,18.7 C648,19.2 666,16 680,12%22 fill=%22none%22 stroke=%22%23A9BFD2%22 stroke-width=%220.8%22 opacity=%220.85%22/%3E%3C/svg%3E");
}

html[data-theme="dark"][data-snow="on"] {
    --snow-drift-ground: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 680 30%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0,30 L0,9 C22,15 52,19.5 96,18.5 C130,17.7 150,12.5 188,13.5 C230,14.6 254,20 302,19 C342,18.2 362,12.8 402,13.8 C444,14.9 468,19.8 514,18.8 C552,18 574,13 614,13.8 C644,14.4 664,11 680,7 L680,30 Z%22 fill=%22%23DCE9F2%22 opacity=%220.4%22/%3E%3Cpath d=%22M0,30 L0,14 C24,20 56,23.5 100,22.6 C134,21.9 154,17.6 192,18.5 C234,19.5 258,24 306,23.1 C346,22.4 366,18 406,18.9 C448,19.8 472,23.8 518,22.9 C556,22.2 578,18 618,18.7 C648,19.2 666,16 680,12 L680,30 Z%22 fill=%22%23F4F8FB%22 opacity=%220.92%22/%3E%3Cpath d=%22M0,14 C24,20 56,23.5 100,22.6 C134,21.9 154,17.6 192,18.5 C234,19.5 258,24 306,23.1 C346,22.4 366,18 406,18.9 C448,19.8 472,23.8 518,22.9 C556,22.2 578,18 618,18.7 C648,19.2 666,16 680,12%22 fill=%22none%22 stroke=%22%23FFFFFF%22 stroke-width=%220.7%22 opacity=%220.85%22/%3E%3C/svg%3E");
}

html[data-snow="on"] body::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30px;
    z-index: 500;
    background: var(--snow-drift-ground) center bottom / 100% 100% no-repeat;
    pointer-events: none;
}