/* Christmas season: homepage + /christmas landing page. Classes are prefixed xm-. */

/*#region Season background (whole page) */

/* One light winter background for the whole page: warm cream at the top, blush, then a pale icy
   sky that ends in white. Set on the root (not the wrapper) so the site's side menu stays visible
   and the snow layer (z-index -1) paints above it; <body> is made transparent so it doesn't cover the snow. */
html:has(.xm-season) {
    background:
        /* many small steps so the pink → icy-blue turn has no visible band */
        linear-gradient(180deg, #fff3e3 0, #fdede4 380px, #fbe9e6 600px, #f5e8ec 800px, #eee9f1 1000px, #e8eaf5 1180px, #e4ecf6 1350px, #e9f0f8 1600px, #f4f8fc 1950px, #ffffff 2300px) no-repeat,
        #ffffff;
}

    html:has(.xm-season) body {
        background: transparent;
    }

.xm-season {
    position: relative;
}

    .xm-season .HpSection1 {
        background: none;
    }

/* Light snow over the whole page, behind the content (z-index -1 in the root stacking context). */
.xm-snowfall {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

    .xm-snowfall::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -280px;
        bottom: 0;
        background-size: 280px 280px;
        /* soft blue-grey flakes: white would vanish on the light sky */
        background-image:
            radial-gradient(circle at 20px 30px, rgba(150, 176, 206, .6) 1.6px, transparent 3.6px),
            radial-gradient(circle at 100px 160px, rgba(150, 176, 206, .5) 1px, transparent 2.8px),
            radial-gradient(circle at 180px 84px, rgba(150, 176, 206, .6) 2.2px, transparent 4.4px),
            radial-gradient(circle at 246px 214px, rgba(150, 176, 206, .5) 1px, transparent 2.8px),
            radial-gradient(circle at 64px 246px, rgba(150, 176, 206, .55) 1.4px, transparent 3.4px),
            radial-gradient(circle at 150px 250px, rgba(150, 176, 206, .45) .8px, transparent 2.4px),
            radial-gradient(circle at 220px 40px, rgba(150, 176, 206, .5) 1.2px, transparent 3px);
        animation: xm-fall 26s linear infinite;
        will-change: transform;
    }

@keyframes xm-fall {
    to { transform: translate3d(0, 280px, 0); }
}

/* Homepage: the floating pills become snowflakes. Fixed to the viewport (behind the content) so they
   fall the full height of the screen rather than stopping at the bottom of the first section. */
.xm-flakes {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.xm-flake {
    position: absolute;
    top: 0;
    opacity: .7;
    animation-name: xm-flake-fall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}

.xm-flake__sway {
    width: 100%;
    height: 100%;
    animation-name: xm-flake-sway;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

    .xm-flake svg {
        display: block;
        width: 100%;
        height: 100%;
    }

@keyframes xm-flake-fall {
    from { transform: translate3d(0, -60px, 0); }
    to { transform: translate3d(0, calc(100vh + 60px), 0); }
}

@keyframes xm-flake-sway {
    from { transform: translate3d(calc(var(--xm-sway) * -1), 0, 0) rotate(-40deg); }
    to { transform: translate3d(var(--xm-sway), 0, 0) rotate(40deg); }
}

@media (max-width: 840px) {
    .xm-flake {
        scale: .75;
    }
}

/*#endregion */

/*#region Scene band (full width, transparent; the season background shows through) */

.xm-band {
    position: relative;
    overflow: hidden;
    /* tall enough that the star (top of the scene) always lands below the two-line title:
       title bottom ≈ 70px + 2 × 1.2 × 4.6vw, star glow ≈ 0.657 × scene width (42vw) above the bottom */
    min-height: clamp(640px, calc(100px + 38.6vw), 960px);
    color: #4A4A4A;
}

/* /christmas: the band starts at the top of the page, under the site header */
.xm-band--hero {
    min-height: clamp(720px, 46vw, 940px);
}

.xm-stars {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Landscape layers: far ridge, caravan, mid hills, near hills + snow */
.xm-land {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

    .xm-land svg {
        position: absolute;
        left: 0;
        bottom: 0;
        display: block;
        width: 100%;
    }

.xm-land__far {
    height: 260px;
}

.xm-land__mid {
    height: 170px;
}

.xm-land__near {
    height: 96px;
}

/* sits on the mid hills' plateau (ridge ≈120px up); feet tucked behind the hill */
.xm-land .xm-caravan {
    left: auto;
    right: 7%;
    bottom: 112px;
    width: 340px;
    height: auto;
}

.xm-band__scene {
    position: absolute;
    left: .5vw;
    /* the scene's base sits on the near snow line */
    bottom: 18px;
    z-index: 2;
    width: clamp(460px, 42vw, 900px);
}

.xm-nativity {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.xm-band__content {
    position: relative;
    z-index: 3;
    padding-top: 70px;
    padding-bottom: 40px;
}

.xm-band--hero .xm-band__content {
    padding-top: 180px;
}

.xm-band__text {
    max-width: min(820px, 50vw);
    margin: 0 auto;
    text-align: center;
}

.xm-title {
    display: block;
    font-size: clamp(48px, 4.6vw, 86px);
    line-height: 1.2;
    font-weight: 700;
    /* deep pine green: stronger contrast on the light sky than grey (≈8.7:1), pairs with the red button */
    color: #164a35;
    text-wrap: balance;
}

.xm-band--hero .xm-title {
    font-size: clamp(60px, 6.2vw, 116px);
}

.xm-verse {
    display: block;
    /* narrow enough to stay clear of the star beside it */
    max-width: max(300px, 30vw);
    margin: 22px auto 0;
    font-size: 22px;
    line-height: 1.8;
    font-weight: 500;
    color: #7a4f06;
    text-wrap: balance;
}

    .xm-verse cite {
        display: block;
        margin-top: 2px;
        font-style: normal;
        font-size: 15px;
        color: #4A4A4A;
    }

.xm-btn {
    display: inline-block;
    min-width: 260px;
    height: 60px;
    margin-top: 34px;
    padding: 0 40px;
    border-radius: 50px;
    background-color: #c8372d;
    color: #fff;
    font-size: 22px;
    line-height: 60px;
    font-weight: 700;
    text-align: center;
}

    .xm-btn:hover {
        background-color: #b02e25;
    }

/* Secondary action: pine outline on a frosted fill */
.xm-btn--ghost {
    background-color: rgba(255, 255, 255, .72);
    color: #164a35;
    box-shadow: inset 0 0 0 2px #164a35;
}

    .xm-btn--ghost:hover {
        background-color: #ffffff;
    }

/*#endregion */

/*#region Homepage in the season */

/* First screen: starts under the absolutely positioned site header */
.xm-band--home {
    min-height: clamp(700px, 50vw, 960px);
}

    .xm-band--home .xm-band__content {
        padding-top: 150px;
    }

.xm-eyebrow {
    display: inline-block;
    margin: 0 0 18px;
    padding: 6px 18px;
    border-radius: 50px;
    background-color: rgba(200, 55, 45, .1);
    color: #a02a22;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
}

.xm-band--home .xm-title {
    font-size: clamp(46px, 4.8vw, 90px);
}

.xm-lead {
    max-width: 34em;
    margin: 20px auto 0;
    font-size: 21px;
    line-height: 1.75;
    font-weight: 500;
    color: #4A4A4A;
    text-wrap: balance;
}

.xm-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 34px;
}

    .xm-actions .xm-btn {
        min-width: 220px;
        margin-top: 0;
    }

.xm-home-picks {
    padding-top: 55px;
}

/* exactly four picks: 4 → 2 → 1 columns so the row never breaks 3 + 1 */
@media (max-width: 1060px) {
    .xm-home-picks .xm-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.xm-more {
    margin-top: 40px;
}

    .xm-more .xm-btn {
        margin-top: 0;
    }

/* The library intro, compact after the Christmas sections */
.xm-library.HpSection1 {
    min-height: 0;
    padding: 80px 0 70px;
    background: none;
}

    .xm-library .centerMe {
        position: static;
        transform: none;
    }

    .xm-library .BigTitle h2 {
        font-size: clamp(28px, 2.6vw, 40px);
        line-height: 1.5;
    }

.xm-season a:focus-visible {
    outline: 3px solid #c8372d;
    outline-offset: 3px;
}

/*#endregion */

/*#region Landing page sections */

.xm-types {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding-top: 36px;
    padding-bottom: 36px;
}

    .xm-types .ProductCategory {
        display: inline-block;
        margin: 0;
    }

        .xm-types .ProductCategory:hover {
            opacity: .85;
        }

.xm-section {
    padding: 45px 0 70px;
}

/* translucent so the season background and snow show through */
.xm-section--tint {
    background-color: rgba(214, 228, 240, .45);
}

.xm-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-top: 35px;
}

    .xm-grid .RelatedProductDiv {
        display: flex;
        flex-direction: column;
        width: auto;
        margin: 0;
    }

        .xm-grid .RelatedProductDiv .GreyBG {
            flex: 1;
        }

.xm-outro {
    padding: 60px 0 80px;
}

.xm-empty {
    display: block;
    padding: 48px 15px 80px;
    text-align: center;
    font-size: 18px;
    color: #4A4A4A;
}

/*#endregion */

/*#region Responsive */

@media (max-width: 1200px) {
    .xm-band__scene {
        width: 38vw;
    }
}

@media (max-width: 1060px) {
    .xm-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .xm-band__scene {
        width: 36vw;
    }

    .xm-verse {
        font-size: 19px;
    }

    .xm-land .xm-caravan {
        width: 270px;
        right: 4%;
        bottom: 113px;
    }
}

@media (max-width: 840px) {
    .xm-band,
    .xm-band--hero,
    .xm-band--home {
        min-height: 0;
    }

    .xm-band__content {
        padding-top: 40px;
        padding-bottom: 24px;
    }

    .xm-band--home .xm-band__content {
        padding-top: 110px;
    }

    .xm-band--home .xm-title {
        font-size: clamp(32px, 9vw, 42px);
    }

    .xm-lead {
        font-size: 18px;
    }

    .xm-eyebrow {
        font-size: 15px;
    }

    .xm-band--hero .xm-band__content {
        padding-top: 120px;
    }

    .xm-band__text,
    .xm-verse {
        max-width: none;
    }

    .xm-band__scene {
        position: relative;
        left: auto;
        bottom: auto;
        width: 100%;
        max-width: 520px;
        margin: 0 auto 10px;
    }

    .xm-land__far {
        height: 170px;
    }

    .xm-land__mid {
        height: 110px;
    }

    .xm-land__near {
        height: 70px;
    }

    .xm-land .xm-caravan {
        display: none;
    }

    .xm-title {
        font-size: 42px;
    }

    .xm-band--hero .xm-title {
        font-size: 52px;
    }

    .xm-verse {
        font-size: 18px;
    }

    .xm-btn {
        min-width: 220px;
        height: 54px;
        line-height: 54px;
        font-size: 19px;
    }

    .xm-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .xm-title {
        font-size: 36px;
    }

    .xm-band--hero .xm-title {
        font-size: 44px;
    }

    .xm-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .xm-snowfall::before {
        animation: none;
    }

    /* flakes stay where they are (spread out by their negative delays) instead of falling */
    .xm-flake,
    .xm-flake__sway {
        animation-play-state: paused;
    }
}

/*#endregion */