.mhl {
    --mhl-bg: #061719;
    --mhl-bg-2: #0b2525;
    --mhl-gold: #d9b35a;
    --mhl-gold-soft: #a98645;
    --mhl-text: #f4ead2;
    --mhl-muted: #c7bda7;
    --mhl-ring-size: min(50vw, 600px, 67vh);
    --mhl-core-size: 40%;
    --mhl-door-size: clamp(76px, 6.4vw, 102px);
    position: relative;
    overflow: hidden;
    padding: clamp(22px, 3vw, 42px) clamp(18px, 3.5vw, 48px) clamp(30px, 4vw, 54px);
    border-radius: 28px;
    color: var(--mhl-text);
    background:
        radial-gradient(circle at 42% 42%, rgba(45, 113, 104, .24), transparent 32%),
        radial-gradient(circle at 50% 50%, rgba(14, 51, 52, .45), transparent 58%),
        linear-gradient(180deg, var(--mhl-bg-2), var(--mhl-bg));
    isolation: isolate;
}

.mhl::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 18% 18%, rgba(246, 210, 119, .35) 0 1px, transparent 1.6px),
        radial-gradient(circle at 73% 28%, rgba(246, 210, 119, .25) 0 1px, transparent 1.8px),
        radial-gradient(circle at 35% 72%, rgba(246, 210, 119, .18) 0 1px, transparent 1.6px);
    background-size: 190px 190px, 230px 230px, 280px 280px;
    opacity: .55;
}

.mhl__intro,
.mhl__main,
.mhl__stage,
.mhl__panel,
.mhl__mobile-nav {
    position: relative;
    z-index: 1;
}

.mhl__intro {
    text-align: center;
    max-width: 1380px;
    margin-inline: auto;
}

.mhl__hero-title {
    margin: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 400;
    line-height: 1.08;
    text-wrap: balance;
}

.mhl__hero-intro,
.mhl__hero-name {
    display: block;
}

.mhl__hero-intro {
    color: #efcf72;
    font-size: clamp(1.28rem, 1.9vw, 2.12rem);
    letter-spacing: .025em;
}

.mhl__hero-name {
    margin-top: .18em;
    color: var(--mhl-text);
    font-size: clamp(1.72rem, 2.65vw, 2.95rem);
    letter-spacing: .11em;
}

.mhl__tagline {
    margin: .62rem auto 0;
    max-width: 56rem;
    color: var(--mhl-muted);
    font-size: clamp(.94rem, 1.15vw, 1.08rem);
}

.mhl__main {
    max-width: 1380px;
    margin: clamp(10px, 1.5vw, 20px) auto 0;
}

.mhl__stage {
    min-height: calc(var(--mhl-ring-size) + 8px);
}

.mhl__sigil {
    width: var(--mhl-ring-size);
    height: var(--mhl-ring-size);
    max-width: 100%;
    margin: 0 auto;
    position: relative;
}

.mhl__core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--mhl-core-size);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(220, 181, 88, .25), 0 0 42px rgba(205, 167, 74, .12);
}

.mhl__core img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mhl__doors {
    position: absolute;
    inset: 0;
}

.mhl__door {
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(118px, 12vw, 164px);
    transform: translate(-50%, -50%);
    display: grid;
    justify-items: center;
    gap: .38rem;
    padding: .28rem .32rem .42rem;
    border-radius: 18px;
    color: var(--mhl-text);
    text-decoration: none;
    text-align: center;
    outline: none;
    z-index: 2;
    cursor: pointer;
}

.mhl__door-visual {
    width: var(--mhl-door-size);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    border: 2px solid rgba(217, 179, 90, .62);
    box-shadow: 0 0 0 5px rgba(217, 179, 90, .05), 0 8px 28px rgba(0,0,0,.28);
    background: rgba(15, 47, 47, .82);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, filter .25s ease;
}

.mhl__door-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--mhl-object-x, 50%) var(--mhl-object-y, 50%);
    display: block;
}

.mhl__placeholder {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.75rem;
    color: var(--mhl-gold);
}

.mhl__door-title {
    max-width: 164px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(.78rem, .92vw, .94rem);
    line-height: 1.16;
    text-wrap: balance;
    text-shadow: 0 2px 10px rgba(0,0,0,.7);
}

.mhl__door:hover .mhl__door-visual,
.mhl__door:focus-visible .mhl__door-visual,
.mhl__door.is-active .mhl__door-visual {
    transform: scale(1.09);
    border-color: rgba(244, 213, 137, .95);
    box-shadow: 0 0 0 6px rgba(217, 179, 90, .09), 0 0 30px rgba(217, 179, 90, .2), 0 10px 30px rgba(0,0,0,.28);
}

.mhl__door:hover .mhl__door-title,
.mhl__door.is-active .mhl__door-title {
    color: #fff2c8;
}

.mhl__door:focus-visible {
    outline: 2px solid rgba(244, 213, 137, .9);
    outline-offset: 4px;
}

.mhl__door:not(.is-active) {
    opacity: .9;
}

.mhl__panel {
    text-align: left;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
    padding-left: clamp(20px, 2vw, 34px);
    border-radius: 26px;
    isolation: isolate;
}

/* v0.10.3 — Active Category Background Artwork.
 * L'immagine editoriale della soglia attiva vive come layer atmosferico
 * indipendente dal medaglione e resta dietro a testo/CTA. */
.mhl__panel-artwork,
.mhl__panel-shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.mhl__panel-artwork {
    z-index: -3;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    opacity: 0;
    transform: scale(1.015);
    filter: saturate(.92) contrast(1.02);
    transition: opacity .28s ease, background-position .28s ease;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.34) 18%, #000 48%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.34) 18%, #000 48%, #000 100%);
}

.mhl__panel-artwork.is-visible {
    opacity: var(--mhl-panel-art-opacity, .60);
}

.mhl__panel-shade {
    z-index: -2;
    background:
        linear-gradient(90deg, rgba(4,18,19,.98) 0%, rgba(4,18,19,.90) 35%, rgba(4,18,19,.48) 72%, rgba(4,18,19,.25) 100%),
        linear-gradient(180deg, rgba(4,18,19,.18), rgba(4,18,19,.52));
}

.mhl__panel-kicker,
.mhl__panel-hook,
.mhl__panel-title,
.mhl__panel-copy,
.mhl__panel-cta {
    position: relative;
    z-index: 1;
}

.mhl__panel::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12%;
    bottom: 12%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(217,179,90,.62) 24%, rgba(217,179,90,.32) 76%, transparent);
    box-shadow: 0 0 20px rgba(217,179,90,.12);
}

.mhl__panel::after {
    content: "";
    position: absolute;
    inset: 8% -8% 8% -12%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle at 14% 50%, rgba(217,179,90,.055), transparent 56%);
}

.mhl__panel-kicker {
    margin: 0 0 .7rem;
    color: var(--mhl-gold);
    font-size: .75rem;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.mhl__panel-hook {
    margin: 0 0 .85rem;
    max-width: 34rem;
    color: #f3dfaa;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.02rem, 1.35vw, 1.28rem);
    font-style: italic;
    line-height: 1.38;
    text-wrap: balance;
}

.mhl__panel-hook[hidden] {
    display: none !important;
}

.mhl__panel-title {
    margin: 0;
    max-width: 18ch;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.55rem, 2.25vw, 2.45rem);
    line-height: 1.08;
    text-wrap: balance;
}

.mhl__panel-copy {
    margin: .9rem 0 0;
    color: var(--mhl-muted);
    max-width: 34rem;
    font-size: clamp(.96rem, 1vw, 1.06rem);
    line-height: 1.6;
}

.mhl__panel-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.05rem;
    min-height: 44px;
    padding: .72rem 1.15rem;
    border: 1px solid rgba(217, 179, 90, .7);
    border-radius: 999px;
    color: var(--mhl-text);
    text-decoration: none;
    background: rgba(217, 179, 90, .07);
}

.mhl__panel-cta:hover,
.mhl__panel-cta:focus-visible {
    background: rgba(217, 179, 90, .14);
    outline: 2px solid transparent;
}

.mhl__panel-cta[hidden] {
    display: none !important;
}

.mhl__flip-side,
.mhl__mobile-nav,
.mhl__mobile-index {
    display: none;
}

.mhl.is-enhanced .mhl__door {
    transition: opacity .2s ease;
}

/* Desktop/laptop: Sigillo compatto a sinistra, pannello stabile a destra. */
@media (min-width: 980px) {
    .mhl__main {
        display: grid;
        grid-template-columns: minmax(0, 1.5fr) minmax(300px, .9fr);
        align-items: center;
        gap: clamp(30px, 4vw, 72px);
    }

    .mhl__stage {
        min-width: 0;
    }

    .mhl__sigil {
        margin-left: auto;
        margin-right: 0;
    }

    .mhl__panel {
        padding-right: clamp(0px, 2vw, 24px);
    }
}

/* Desktop compatto/tablet landscape: ancora due colonne, ma più raccolte. */
@media (min-width: 821px) and (max-width: 1100px) {
    .mhl {
        --mhl-ring-size: min(56vw, 520px, 63vh);
        --mhl-door-size: clamp(72px, 7.2vw, 92px);
        --mhl-core-size: 39%;
    }

    .mhl__door {
        width: clamp(112px, 14vw, 146px);
    }
}

/* Mobile v0.7 — Corona Laterale del Sigillo. */
@media (max-width: 979px) {
    .mhl__main {
        display: block;
        margin-top: 0;
    }

    .mhl__panel {
        text-align: center;
        align-items: center;
        justify-content: flex-start;
        min-height: 0;
        margin-top: .45rem;
        padding: 1.15rem .35rem 0;
    }

    .mhl__panel::before,
    .mhl__panel::after {
        display: none;
    }

    .mhl__panel-kicker {
        display: none;
    }

    .mhl__panel-hook {
        margin: 0 0 .55rem;
        max-width: 31rem;
        font-size: clamp(1rem, 4.25vw, 1.18rem);
        line-height: 1.35;
    }

    .mhl__panel-title {
        max-width: 18ch;
        margin-inline: auto;
    }

    .mhl__panel-copy {
        margin: .72rem auto 0;
        max-width: 32rem;
    }
}

@media (max-width: 820px) {
    /*
     * v0.8 — Mobile Full-Bleed
     * Il fondale del Sigillo esce dalla content width di Gutenberg/tema e
     * raggiunge i bordi reali del viewport. Il respiro non viene più creato
     * dal contenitore esterno, ma dai singoli contenuti interni.
     */
    body:has(.mhl) {
        overflow-x: clip;
    }

    /*
     * v0.9 — Wrapper Neutralization
     * I soli wrapper che contengono esclusivamente lo shortcode vengono
     * marcati dal JS e resi visivamente neutri sul mobile. In questo modo
     * la superficie full-bleed del Sigillo non appare più più grande della
     * scatola WordPress/tema che la ospita.
     */
    .mhl-shell-neutral {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        outline: 0 !important;
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        filter: none !important;
        overflow: visible !important;
    }

    .mhl-shell-neutral::before,
    .mhl-shell-neutral::after {
        content: none !important;
        display: none !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .mhl {
        --mhl-door-size: clamp(68px, 19vw, 92px);
        --mhl-mobile-index-width: clamp(144px, 40vw, 170px);
        --mhl-mobile-gutter-left: max(clamp(20px, 5vw, 26px), env(safe-area-inset-left));
        --mhl-mobile-gutter-right: max(clamp(20px, 5vw, 26px), env(safe-area-inset-right));
        box-sizing: border-box;
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        border-radius: 0;
        padding: 20px 0 30px;
        min-height: 0;
        overflow: hidden;
        box-shadow: none;
        overscroll-behavior-x: contain;
    }

    .mhl__intro {
        box-sizing: border-box;
        text-align: left;
        max-width: 100%;
        margin: 0;
        padding-left: var(--mhl-mobile-gutter-left);
        padding-right: var(--mhl-mobile-gutter-right);
    }

    .mhl__hero-title {
        max-width: 23ch;
    }

    .mhl__hero-intro {
        font-size: clamp(1.12rem, 5vw, 1.5rem);
        line-height: 1.17;
    }

    .mhl__hero-name {
        margin-top: .24em;
        font-size: clamp(1.52rem, 7vw, 2.05rem);
        letter-spacing: .075em;
        line-height: 1.04;
    }

    .mhl__tagline {
        margin: .55rem 0 0;
        max-width: 28rem;
        font-size: clamp(.92rem, 3.8vw, 1rem);
        line-height: 1.45;
    }

    .mhl__stage {
        position: relative;
        height: clamp(330px, 92vw, 390px);
        min-height: 0;
        margin-top: .55rem;
        overflow: visible;
    }

    .mhl__sigil {
        position: absolute;
        top: 50%;
        width: clamp(430px, 118vw, 520px);
        height: clamp(430px, 118vw, 520px);
        max-width: none;
        margin: 0;
        transform: translateY(-50%);
        touch-action: pan-y pinch-zoom;
        user-select: none;
        -webkit-user-select: none;
    }

    .mhl[data-side="right"] .mhl__sigil {
        left: 43%;
        right: auto;
    }

    .mhl[data-side="left"] .mhl__sigil {
        right: 43%;
        left: auto;
    }

    .mhl__sigil::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 62%;
        aspect-ratio: 1;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        border: 1px solid rgba(217, 179, 90, .42);
        box-shadow:
            0 0 0 9px rgba(217, 179, 90, .025),
            inset 0 0 24px rgba(217, 179, 90, .04),
            0 0 26px rgba(217, 179, 90, .07);
        pointer-events: none;
        z-index: 0;
    }

    .mhl__core {
        width: 56%;
        z-index: 1;
        box-shadow:
            0 0 0 1px rgba(220, 181, 88, .34),
            0 0 38px rgba(205, 167, 74, .13);
    }

    .mhl__doors {
        z-index: 2;
    }

    .mhl__door {
        width: 100px;
        min-width: 0;
        gap: 0;
        padding: 0;
        border-radius: 50%;
        transition:
            left .32s cubic-bezier(.2,.82,.22,1),
            top .32s cubic-bezier(.2,.82,.22,1),
            transform .32s cubic-bezier(.2,.82,.22,1),
            opacity .24s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .mhl.is-dragging .mhl__door {
        transition: none !important;
    }

    .mhl.is-mobile-settling .mhl__door {
        transition:
            left .27s cubic-bezier(.18,.86,.22,1),
            top .27s cubic-bezier(.18,.86,.22,1),
            transform .27s cubic-bezier(.18,.86,.22,1),
            opacity .22s ease;
    }

    .mhl__door-title {
        display: none !important;
    }

    .mhl__door-visual {
        box-shadow:
            0 0 0 4px rgba(217, 179, 90, .045),
            0 8px 24px rgba(0,0,0,.32);
    }

    .mhl__door.is-active .mhl__door-visual {
        transform: scale(1.08);
        border-color: rgba(244, 213, 137, 1);
        box-shadow:
            0 0 0 6px rgba(217, 179, 90, .09),
            0 0 28px rgba(217, 179, 90, .25),
            0 10px 28px rgba(0,0,0,.3);
    }

    .mhl__door.is-activating .mhl__door-visual {
        animation: mhl-mobile-active-pop .38s cubic-bezier(.18,.88,.24,1);
    }

    /* I cinque nomi sono l'indice diretto sul lato opposto alla corona. */
    .mhl__mobile-index {
        display: grid;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 8;
        width: var(--mhl-mobile-index-width);
        gap: 2px;
    }

    .mhl[data-side="right"] .mhl__mobile-index {
        left: var(--mhl-mobile-gutter-left);
        right: auto;
    }

    .mhl[data-side="left"] .mhl__mobile-index {
        right: var(--mhl-mobile-gutter-right);
        left: auto;
    }

    .mhl__mobile-index .mhl__quick {
        display: flex;
        align-items: center;
        gap: .45rem;
        min-height: 46px;
        width: 100%;
        padding: .3rem .15rem;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: rgba(244,234,210,.73);
        font-family: Georgia, 'Times New Roman', serif;
        font-size: clamp(.76rem, 3.2vw, .94rem);
        line-height: 1.08;
        cursor: pointer;
        transition: color .18s ease, text-shadow .18s ease, transform .14s ease;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .mhl[data-side="right"] .mhl__mobile-index .mhl__quick {
        flex-direction: row-reverse;
        justify-content: flex-end;
        text-align: right;
    }

    .mhl[data-side="left"] .mhl__mobile-index .mhl__quick {
        justify-content: flex-start;
        text-align: left;
    }


    .mhl__quick-label {
        white-space: nowrap;
    }

    .mhl__quick-dot {
        flex: 0 0 auto;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: rgba(217,179,90,.4);
        box-shadow: 0 0 0 3px rgba(217,179,90,.025);
    }

    .mhl__mobile-index .mhl__quick.is-active {
        color: #fff2c8;
        text-shadow: 0 0 12px rgba(217,179,90,.2);
    }

    .mhl__mobile-index .mhl__quick:active {
        transform: scale(.975);
    }

    .mhl__mobile-index .mhl__quick.is-active .mhl__quick-dot {
        width: 9px;
        height: 9px;
        background: var(--mhl-gold);
        box-shadow: 0 0 12px rgba(217,179,90,.55);
    }

    .mhl__mobile-index .mhl__quick:focus-visible {
        outline: 2px solid rgba(244,213,137,.86);
        outline-offset: 2px;
    }

    .mhl__flip-side {
        display: inline-grid;
        place-items: center;
        position: absolute;
        bottom: 10px;
        z-index: 9;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 1px solid rgba(217, 179, 90, .4);
        background: rgba(4, 20, 21, .62);
        color: rgba(244,234,210,.82);
        font-size: .92rem;
        box-shadow: 0 5px 18px rgba(0,0,0,.2);
    }

    .mhl[data-side="right"] .mhl__flip-side {
        left: var(--mhl-mobile-gutter-left);
        right: auto;
    }

    .mhl[data-side="left"] .mhl__flip-side {
        right: var(--mhl-mobile-gutter-right);
        left: auto;
    }

    .mhl__panel {
        box-sizing: border-box;
        min-height: 0;
        margin-top: 0;
        padding: .9rem var(--mhl-mobile-gutter-right) 0 var(--mhl-mobile-gutter-left);
    }

    .mhl__panel-hook {
        font-size: clamp(1.03rem, 4.6vw, 1.22rem);
    }

    .mhl__panel-title {
        font-size: clamp(1.55rem, 7vw, 2rem);
        line-height: 1.06;
    }

    .mhl__panel-copy {
        font-size: clamp(.96rem, 4vw, 1.04rem);
        line-height: 1.52;
    }

    /* Un solo CTA: quello configurato dall'autore. Su telefono assume
     * l'aspetto del pulsante-invito della v0.10.1 senza duplicare il link. */
    .mhl__panel-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        max-width: calc(100vw - 52px);
        min-width: min(11.5rem, calc(100vw - 52px));
        min-height: 48px;
        margin: 1.2rem auto .25rem;
        padding: .72rem 1.05rem;
        border: 1px solid color-mix(in srgb, var(--mhl-gold), transparent 22%);
        border-radius: 999px;
        background:
            linear-gradient(135deg, rgba(217,179,90,.13), rgba(217,179,90,.045)),
            rgba(4,18,19,.78);
        color: var(--mhl-text);
        font-family: Georgia, 'Times New Roman', serif;
        font-size: clamp(.78rem, 3.25vw, .9rem);
        font-weight: 700;
        letter-spacing: .055em;
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        box-shadow:
            0 8px 24px rgba(0,0,0,.26),
            0 0 0 1px rgba(255,255,255,.025) inset,
            0 0 22px color-mix(in srgb, var(--mhl-gold), transparent 84%);
        animation: mhl-mobile-enter-invite 4.2s ease-in-out 1.1s infinite;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .mhl__panel-cta:active {
        transform: translateY(1px) scale(.985);
        background:
            linear-gradient(135deg, rgba(217,179,90,.21), rgba(217,179,90,.08)),
            rgba(4,18,19,.88);
    }

    .mhl__panel-cta:focus-visible {
        outline: 2px solid var(--mhl-gold);
        outline-offset: 3px;
    }

    .mhl__panel-artwork {
        opacity: 0;
        -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.18) 0%, #000 28%, #000 78%, rgba(0,0,0,.42) 100%);
        mask-image: linear-gradient(180deg, rgba(0,0,0,.18) 0%, #000 28%, #000 78%, rgba(0,0,0,.42) 100%);
    }

    .mhl__panel-artwork.is-visible {
        opacity: var(--mhl-panel-art-opacity, .60);
    }

    .mhl__panel-shade {
        background:
            linear-gradient(180deg, rgba(4,18,19,.62) 0%, rgba(4,18,19,.46) 36%, rgba(4,18,19,.50) 72%, rgba(4,18,19,.72) 100%),
            radial-gradient(circle at 50% 48%, rgba(4,18,19,.06), rgba(4,18,19,.38) 78%);
    }

    .mhl__panel.is-refreshing .mhl__panel-hook,
    .mhl__panel.is-refreshing .mhl__panel-title,
    .mhl__panel.is-refreshing .mhl__panel-copy,
    .mhl__panel.is-refreshing .mhl__panel-cta {
        animation: mhl-mobile-panel-refresh .24s ease-out both;
    }

    .mhl__panel.is-refreshing .mhl__panel-title { animation-delay: .025s; }
    .mhl__panel.is-refreshing .mhl__panel-copy { animation-delay: .045s; }
    .mhl__panel.is-refreshing .mhl__panel-cta { animation-delay: .065s; }

    /* La vecchia barra mobile è eliminata nella regia v0.7. */
    .mhl__mobile-nav {
        display: none !important;
    }
}

@media (max-width: 359px) {
    .mhl {
        --mhl-mobile-index-width: 144px;
    }

    .mhl__hero-intro {
        font-size: clamp(1.02rem, 5.4vw, 1.28rem);
    }

    .mhl__hero-name {
        font-size: clamp(1.38rem, 7.2vw, 1.78rem);
    }

    .mhl__stage {
        height: 322px;
    }

    .mhl__sigil {
        width: 420px;
        height: 420px;
    }

    .mhl__mobile-index .mhl__quick {
        min-height: 42px;
        font-size: .75rem;
        gap: .38rem;
    }
}

@media (min-width: 360px) and (max-width: 389px) {
    .mhl {
        --mhl-mobile-index-width: 152px;
    }
}

@media (min-width: 390px) and (max-width: 429px) {
    .mhl {
        --mhl-mobile-index-width: 164px;
    }
}

@media (min-width: 430px) and (max-width: 820px) {
    .mhl {
        --mhl-mobile-index-width: 170px;
    }
}

@keyframes mhl-mobile-active-pop {
    0% { transform: scale(1.03); }
    58% { transform: scale(1.16); }
    100% { transform: scale(1.08); }
}

@keyframes mhl-mobile-panel-refresh {
    0% { opacity: .18; transform: translateY(5px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes mhl-mobile-enter-invite {
    0%, 72%, 100% {
        box-shadow:
            0 8px 24px rgba(0,0,0,.26),
            0 0 0 1px rgba(255,255,255,.025) inset,
            0 0 22px color-mix(in srgb, var(--mhl-gold), transparent 84%);
    }
    82% {
        box-shadow:
            0 8px 24px rgba(0,0,0,.26),
            0 0 0 1px rgba(255,255,255,.035) inset,
            0 0 32px color-mix(in srgb, var(--mhl-gold), transparent 70%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mhl__panel-cta { animation: none !important; }
    .mhl *,
    .mhl *::before,
    .mhl *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
    }
}

/* ========================================================================== 
   v0.10 — Unified Seasonal Canvas + ponte Mystikamentis Novità
   ========================================================================== */

/* L'intera homepage diventa una sola superficie full-bleed. I contenuti
 * interni restano centrati e leggibili; è soltanto il fondale a raggiungere
 * i bordi del viewport. */
body.mhl-page-active {
    overflow-x: clip;
}

.mhl-shell-neutral {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
    overflow: visible !important;
}

.mhl-shell-neutral::before,
.mhl-shell-neutral::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.mhl {
    --mhl-season-primary: var(--accent-primary, #d9b35a);
    --mhl-season-secondary: var(--accent-secondary, #87bca8);
    box-sizing: border-box;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
}

/* La stagione è decisa dal sistema globale del sito. Homepage Lab la legge
 * attraverso le stesse variabili senza introdurre un secondo calendario. */
body.mystika-season-ready .mhl {
    --mhl-gold: var(--accent-gold, #d9b35a);
    --mhl-text: var(--text-main, #f4ead2);
    --mhl-muted: var(--text-muted, #c7bda7);
    --mhl-season-primary: var(--accent-primary, #d9b35a);
    --mhl-season-secondary: var(--accent-secondary, #87bca8);
    background:
        radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--mhl-season-primary), transparent 84%), transparent 34%),
        radial-gradient(circle at 84% 42%, color-mix(in srgb, var(--mhl-season-secondary), transparent 89%), transparent 38%),
        radial-gradient(circle at 50% 68%, rgba(12, 55, 53, .22), transparent 48%),
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--bg-gradient-top, #0b2525) 72%, #082321 28%),
            color-mix(in srgb, var(--bg-main, #061719) 84%, #041719 16%)
        );
}

body.mystika-season-ready .mhl::before {
    opacity: .48;
    background-image:
        radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--mhl-season-primary), transparent 58%) 0 1px, transparent 1.7px),
        radial-gradient(circle at 73% 28%, color-mix(in srgb, var(--mhl-season-secondary), transparent 68%) 0 1px, transparent 1.8px),
        radial-gradient(circle at 35% 72%, color-mix(in srgb, var(--mhl-gold), transparent 78%) 0 1px, transparent 1.6px);
}

/* La sezione Novità è il secondo atto della stessa scena, non una card. */
.mhl__novita {
    position: relative;
    z-index: 1;
    max-width: 1380px;
    margin: clamp(44px, 5vw, 76px) auto 0;
    padding: clamp(48px, 6vw, 84px) clamp(20px, 4vw, 64px) clamp(10px, 2vw, 24px);
    text-align: center;
}

.mhl__novita::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(560px, 72vw);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--mhl-gold), transparent 38%), transparent);
    box-shadow: 0 0 18px color-mix(in srgb, var(--mhl-season-primary), transparent 82%);
}

.mhl__novita::after {
    content: "";
    position: absolute;
    inset: 12% 8% -12%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--mhl-season-primary), transparent 92%), transparent 42%),
        radial-gradient(circle at 50% 86%, color-mix(in srgb, var(--mhl-season-secondary), transparent 95%), transparent 48%);
}

.mhl__novita-inner {
    max-width: 780px;
    margin-inline: auto;
}

.mhl__novita-symbol {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    border: 1px solid color-mix(in srgb, var(--mhl-gold), transparent 46%);
    border-radius: 50%;
    color: var(--mhl-gold);
    box-shadow:
        0 0 22px color-mix(in srgb, var(--mhl-season-primary), transparent 82%),
        inset 0 0 18px color-mix(in srgb, var(--mhl-gold), transparent 93%);
}

.mhl__novita-symbol::before {
    content: var(--mystika-novita-symbol, "✦");
    font-size: 1.08rem;
    line-height: 1;
}

.mhl__novita-eyebrow,
.mhl__novita-meta,
.mhl__novita-kind {
    letter-spacing: .14em;
    text-transform: uppercase;
}

.mhl__novita-eyebrow {
    margin: 0;
    color: var(--mhl-gold);
    font-size: clamp(.72rem, .9vw, .82rem);
    font-weight: 600;
}

.mhl__novita-title {
    margin: .55rem 0 0;
    color: var(--mhl-text);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.8rem, 3.2vw, 3rem);
    font-weight: 400;
    line-height: 1.08;
    text-wrap: balance;
    text-shadow: 0 0 20px color-mix(in srgb, var(--mhl-season-primary), transparent 80%);
}

.mhl__novita-latest {
    margin-top: clamp(26px, 3vw, 38px);
}

.mhl__novita-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: .48rem;
    margin: 0;
    color: var(--mhl-gold);
    font-size: clamp(.7rem, .86vw, .8rem);
    font-weight: 600;
}

.mhl__novita-kind {
    margin: .7rem 0 0;
    color: color-mix(in srgb, var(--mhl-season-secondary), var(--mhl-text) 30%);
    font-size: clamp(.68rem, .82vw, .78rem);
}

.mhl__novita-latest-title {
    margin: .72rem auto 0;
    max-width: 24ch;
    color: color-mix(in srgb, var(--mhl-gold), var(--mhl-text) 18%);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.38rem, 2.25vw, 2.15rem);
    font-weight: 400;
    line-height: 1.15;
    text-wrap: balance;
}

.mhl__novita-excerpt,
.mhl__novita-fallback {
    max-width: 64ch;
    margin: 1rem auto 0;
    color: var(--mhl-muted);
    font-size: clamp(.98rem, 1.15vw, 1.08rem);
    line-height: 1.72;
    text-wrap: pretty;
}

.mhl__novita-fallback {
    margin-top: 1.2rem;
}

.mhl__novita-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin-top: 1.35rem;
    padding: .72rem 1.25rem;
    border: 1px solid color-mix(in srgb, var(--mhl-gold), transparent 30%);
    border-radius: 999px;
    color: var(--mhl-text);
    background: color-mix(in srgb, var(--mhl-season-primary), transparent 94%);
    text-decoration: none;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .08em;
}

.mhl__novita-cta:hover,
.mhl__novita-cta:focus-visible {
    color: var(--mhl-text);
    background: color-mix(in srgb, var(--mhl-season-primary), transparent 88%);
    box-shadow: 0 0 24px color-mix(in srgb, var(--mhl-season-primary), transparent 84%);
    outline: 2px solid transparent;
}

@media (max-width: 820px) {
    .mhl__novita {
        margin-top: 34px;
        padding: 48px clamp(20px, 5vw, 26px) 6px;
    }

    .mhl__novita::before {
        width: min(320px, 72vw);
    }

    .mhl__novita-symbol {
        width: 44px;
        height: 44px;
    }

    .mhl__novita-title {
        font-size: clamp(1.7rem, 7vw, 2.15rem);
    }

    .mhl__novita-meta {
        font-size: .7rem;
        gap: .38rem;
    }

    .mhl__novita-kind {
        font-size: .68rem;
        line-height: 1.45;
    }

    .mhl__novita-latest-title {
        font-size: clamp(1.38rem, 6vw, 1.78rem);
    }

    .mhl__novita-excerpt,
    .mhl__novita-fallback {
        font-size: clamp(.96rem, 4vw, 1.03rem);
        line-height: 1.58;
    }
}


/* ==========================================================================\n   v0.11.0 — SEASONAL HOMEPAGE ATMOSPHERE\n   Il calendario resta di competenza del sistema globale Mystikamentis.\n   Homepage Lab interpreta soltanto lo stato già presente sul body, oppure\n   applica una preview locale scelta dal backend.\n   ========================================================================== */

.mhl {
    --mhl-atmo-primary: var(--mhl-season-primary, #d9b35a);
    --mhl-atmo-secondary: var(--mhl-season-secondary, #87bca8);
    --mhl-atmo-gold: var(--mhl-gold, #d9b35a);
    --mhl-atmo-bg-top: #0b2525;
    --mhl-atmo-bg-bottom: #061719;
    --mhl-atmo-text: var(--mhl-text, #f4ead2);
    --mhl-atmo-muted: var(--mhl-muted, #c7bda7);
    --mhl-atmo-particle-a: 217, 179, 90;
    --mhl-atmo-particle-b: 135, 188, 168;
    --mhl-atmo-ambient-cut: 84%;
    --mhl-atmo-secondary-cut: 89%;
    --mhl-atmo-particle-opacity: .58;
    --mhl-atmo-haze-opacity: .62;
    --mhl-atmo-mobile-particle-opacity: .24;
    --mhl-atmo-mobile-haze-opacity: .38;
    --mhl-atmo-panel-rgb: 4, 18, 19;
}

.mhl[data-atmosphere-intensity="subtle"] {
    --mhl-atmo-ambient-cut: 91%;
    --mhl-atmo-secondary-cut: 94%;
    --mhl-atmo-particle-opacity: .32;
    --mhl-atmo-haze-opacity: .38;
    --mhl-atmo-mobile-particle-opacity: .13;
    --mhl-atmo-mobile-haze-opacity: .24;
}

.mhl[data-atmosphere-intensity="marked"] {
    --mhl-atmo-ambient-cut: 72%;
    --mhl-atmo-secondary-cut: 80%;
    --mhl-atmo-particle-opacity: .82;
    --mhl-atmo-haze-opacity: .82;
    --mhl-atmo-mobile-particle-opacity: .34;
    --mhl-atmo-mobile-haze-opacity: .52;
}

/* Profili stagionali. Mantengono la grammatica cromatica del CSS globale. */
.mhl.mhl-atmo--spring {
    --mhl-atmo-primary: #ff9fc8;
    --mhl-atmo-secondary: #9df2b5;
    --mhl-atmo-gold: #f0c77d;
    --mhl-atmo-bg-top: #241323;
    --mhl-atmo-bg-bottom: #09070d;
    --mhl-atmo-text: #fff0f7;
    --mhl-atmo-muted: #d9aebe;
    --mhl-atmo-panel-rgb: 34, 16, 32;
    --mhl-atmo-particle-a: 255, 185, 215;
    --mhl-atmo-particle-b: 225, 255, 205;
    --mystika-novita-symbol: "✿";
}

.mhl.mhl-atmo--summer {
    --mhl-atmo-primary: #f4d66f;
    --mhl-atmo-secondary: #8cff9d;
    --mhl-atmo-gold: #ffd36e;
    --mhl-atmo-bg-top: #142015;
    --mhl-atmo-bg-bottom: #030806;
    --mhl-atmo-text: #efffed;
    --mhl-atmo-muted: #b5d8aa;
    --mhl-atmo-panel-rgb: 13, 31, 19;
    --mhl-atmo-particle-a: 255, 225, 125;
    --mhl-atmo-particle-b: 190, 255, 170;
    --mystika-novita-symbol: "☀";
}

.mhl.mhl-atmo--autumn {
    --mhl-atmo-primary: #e5863f;
    --mhl-atmo-secondary: #c45c33;
    --mhl-atmo-gold: #e0b066;
    --mhl-atmo-bg-top: #281208;
    --mhl-atmo-bg-bottom: #0b0503;
    --mhl-atmo-text: #fff1df;
    --mhl-atmo-muted: #d6a582;
    --mhl-atmo-panel-rgb: 34, 15, 8;
    --mhl-atmo-particle-a: 220, 115, 45;
    --mhl-atmo-particle-b: 165, 75, 35;
    --mystika-novita-symbol: "❧";
}

.mhl.mhl-atmo--winter {
    --mhl-atmo-primary: #b9e2ff;
    --mhl-atmo-secondary: #82b8ff;
    --mhl-atmo-gold: #d8c48a;
    --mhl-atmo-bg-top: #0e1a2a;
    --mhl-atmo-bg-bottom: #03070d;
    --mhl-atmo-text: #eef8ff;
    --mhl-atmo-muted: #a8c7dc;
    --mhl-atmo-panel-rgb: 8, 18, 30;
    --mhl-atmo-particle-a: 235, 248, 255;
    --mhl-atmo-particle-b: 185, 226, 255;
    --mystika-novita-symbol: "❄";
}

.mhl.mhl-atmo--halloween {
    --mhl-atmo-primary: #d69cff;
    --mhl-atmo-secondary: #ff873d;
    --mhl-atmo-gold: #d7a25f;
    --mhl-atmo-bg-top: #1a0a24;
    --mhl-atmo-bg-bottom: #07030b;
    --mhl-atmo-text: #f3e8ff;
    --mhl-atmo-muted: #c7a4d8;
    --mhl-atmo-panel-rgb: 19, 8, 26;
    --mhl-atmo-particle-a: 226, 156, 255;
    --mhl-atmo-particle-b: 255, 135, 61;
    --mystika-novita-symbol: "☾";
}

/* Natale: scelta esplicita — ROSSO BRILLANTE + ORO. */
.mhl.mhl-atmo--christmas {
    --mhl-atmo-primary: #ff3038;
    --mhl-atmo-secondary: #ffd84f;
    --mhl-atmo-gold: #ffc433;
    --mhl-atmo-bg-top: #50070c;
    --mhl-atmo-bg-bottom: #120204;
    --mhl-atmo-text: #fff8e9;
    --mhl-atmo-muted: #f4cfaa;
    --mhl-atmo-panel-rgb: 45, 6, 8;
    --mhl-atmo-particle-a: 255, 48, 56;
    --mhl-atmo-particle-b: 255, 216, 79;
    --mystika-novita-symbol: "★";
}

.mhl.mhl-atmo--spring-equinox {
    --mhl-atmo-primary: #ffb8dc;
    --mhl-atmo-secondary: #b7f7c6;
    --mhl-atmo-gold: #f4d58d;
    --mhl-atmo-bg-top: #261527;
    --mhl-atmo-bg-bottom: #09070d;
    --mhl-atmo-text: #fff3fa;
    --mhl-atmo-muted: #dfb7c8;
    --mhl-atmo-panel-rgb: 36, 18, 35;
    --mhl-atmo-particle-a: 255, 194, 226;
    --mhl-atmo-particle-b: 210, 255, 220;
    --mystika-novita-symbol: "❀";
}

.mhl.mhl-atmo--summer-solstice {
    --mhl-atmo-primary: #ffe07a;
    --mhl-atmo-secondary: #a8ffae;
    --mhl-atmo-gold: #ffe18a;
    --mhl-atmo-bg-top: #1b2513;
    --mhl-atmo-bg-bottom: #030806;
    --mhl-atmo-text: #f5fff1;
    --mhl-atmo-muted: #bfdcaf;
    --mhl-atmo-panel-rgb: 18, 35, 17;
    --mhl-atmo-particle-a: 255, 229, 132;
    --mhl-atmo-particle-b: 194, 255, 174;
    --mystika-novita-symbol: "☼";
}

.mhl.mhl-atmo--autumn-equinox {
    --mhl-atmo-primary: #ee9950;
    --mhl-atmo-secondary: #cf6840;
    --mhl-atmo-gold: #e8bc70;
    --mhl-atmo-bg-top: #2e160a;
    --mhl-atmo-bg-bottom: #0b0503;
    --mhl-atmo-text: #fff2df;
    --mhl-atmo-muted: #dca988;
    --mhl-atmo-panel-rgb: 39, 18, 9;
    --mhl-atmo-particle-a: 236, 146, 73;
    --mhl-atmo-particle-b: 193, 91, 49;
    --mystika-novita-symbol: "❦";
}

.mhl.mhl-atmo--winter-solstice {
    --mhl-atmo-primary: #d7efff;
    --mhl-atmo-secondary: #9cc7ff;
    --mhl-atmo-gold: #e0cf99;
    --mhl-atmo-bg-top: #102035;
    --mhl-atmo-bg-bottom: #03070d;
    --mhl-atmo-text: #f3faff;
    --mhl-atmo-muted: #b6d1e4;
    --mhl-atmo-panel-rgb: 10, 23, 38;
    --mhl-atmo-particle-a: 242, 250, 255;
    --mhl-atmo-particle-b: 205, 229, 255;
    --mystika-novita-symbol: "✧";
}

.mhl.mhl-atmosphere-ready {
    --mhl-gold: var(--mhl-atmo-gold);
    --mhl-text: var(--mhl-atmo-text);
    --mhl-muted: var(--mhl-atmo-muted);
    --mhl-season-primary: var(--mhl-atmo-primary);
    --mhl-season-secondary: var(--mhl-atmo-secondary);
    background:
        radial-gradient(circle at 14% 10%, color-mix(in srgb, var(--mhl-atmo-primary), transparent var(--mhl-atmo-ambient-cut)), transparent 34%),
        radial-gradient(circle at 86% 33%, color-mix(in srgb, var(--mhl-atmo-secondary), transparent var(--mhl-atmo-secondary-cut)), transparent 38%),
        radial-gradient(circle at 50% 74%, color-mix(in srgb, var(--mhl-atmo-gold), transparent 94%), transparent 48%),
        linear-gradient(180deg, var(--mhl-atmo-bg-top), var(--mhl-atmo-bg-bottom)) !important;
}

.mhl.mhl-atmosphere-ready::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: var(--mhl-atmo-haze-opacity);
    background:
        radial-gradient(ellipse at 18% 68%, color-mix(in srgb, var(--mhl-atmo-primary), transparent 91%), transparent 44%),
        radial-gradient(ellipse at 82% 18%, color-mix(in srgb, var(--mhl-atmo-secondary), transparent 93%), transparent 40%),
        linear-gradient(110deg, transparent 16%, color-mix(in srgb, var(--mhl-atmo-primary), transparent 97%) 44%, transparent 72%);
    mix-blend-mode: screen;
}

/* Natale riceve una presenza più netta: brillante, celebrativa, ma non kitsch. */
.mhl.mhl-atmosphere-ready.mhl-atmo--christmas {
    background:
        radial-gradient(circle at 17% 13%, color-mix(in srgb, #ff3038, transparent var(--mhl-atmo-ambient-cut)), transparent 36%),
        radial-gradient(circle at 82% 18%, color-mix(in srgb, #ffd84f, transparent var(--mhl-atmo-secondary-cut)), transparent 34%),
        radial-gradient(circle at 50% 82%, color-mix(in srgb, #ff4b3f, transparent 90%), transparent 46%),
        linear-gradient(180deg, #50070c 0%, #210306 58%, #120204 100%) !important;
}

.mhl.mhl-atmo--christmas .mhl__hero-intro,
.mhl.mhl-atmo--christmas .mhl__panel-kicker,
.mhl.mhl-atmo--christmas .mhl__novita-eyebrow,
.mhl.mhl-atmo--christmas .mhl__novita-meta {
    color: #ffd84f;
    text-shadow: 0 0 14px rgba(255, 216, 79, .34), 0 0 26px rgba(255, 48, 56, .20);
}

.mhl.mhl-atmo--christmas .mhl__hero-name,
.mhl.mhl-atmo--christmas .mhl__novita-title {
    text-shadow: 0 0 18px rgba(255, 48, 56, .40), 0 0 34px rgba(255, 216, 79, .20);
}

/* Anche il Sigillo e il pannello respirano la palette corrente senza cambiare geometria. */
.mhl.mhl-atmosphere-ready .mhl__hero-intro,
.mhl.mhl-atmosphere-ready .mhl__panel-kicker {
    color: var(--mhl-atmo-gold);
}

.mhl.mhl-atmosphere-ready .mhl__panel-hook {
    color: color-mix(in srgb, var(--mhl-atmo-gold), var(--mhl-atmo-text) 34%);
}

.mhl.mhl-atmosphere-ready .mhl__panel-shade {
    background:
        linear-gradient(90deg, rgba(var(--mhl-atmo-panel-rgb), .98) 0%, rgba(var(--mhl-atmo-panel-rgb), .90) 35%, rgba(var(--mhl-atmo-panel-rgb), .48) 72%, rgba(var(--mhl-atmo-panel-rgb), .25) 100%),
        linear-gradient(180deg, rgba(var(--mhl-atmo-panel-rgb), .18), rgba(var(--mhl-atmo-panel-rgb), .52));
}

.mhl.mhl-atmosphere-ready .mhl__panel::before {
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--mhl-atmo-gold), transparent 38%) 24%, color-mix(in srgb, var(--mhl-atmo-gold), transparent 68%) 76%, transparent);
    box-shadow: 0 0 20px color-mix(in srgb, var(--mhl-atmo-primary), transparent 86%);
}

.mhl.mhl-atmosphere-ready .mhl__panel-cta {
    border-color: color-mix(in srgb, var(--mhl-atmo-gold), transparent 28%);
    background: color-mix(in srgb, var(--mhl-atmo-primary), transparent 93%);
}

.mhl.mhl-atmosphere-ready .mhl__panel-cta:hover,
.mhl.mhl-atmosphere-ready .mhl__panel-cta:focus-visible {
    background: color-mix(in srgb, var(--mhl-atmo-primary), transparent 86%);
    box-shadow: 0 0 24px color-mix(in srgb, var(--mhl-atmo-primary), transparent 84%);
}

.mhl.mhl-atmosphere-ready .mhl__core {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--mhl-atmo-gold), transparent 72%), 0 0 42px color-mix(in srgb, var(--mhl-atmo-primary), transparent 88%);
}

.mhl.mhl-atmosphere-ready .mhl__door-visual {
    border-color: color-mix(in srgb, var(--mhl-atmo-gold), transparent 38%);
    background: rgba(var(--mhl-atmo-panel-rgb), .82);
}

.mhl.mhl-atmosphere-ready .mhl__door:hover .mhl__door-visual,
.mhl.mhl-atmosphere-ready .mhl__door:focus-visible .mhl__door-visual,
.mhl.mhl-atmosphere-ready .mhl__door.is-active .mhl__door-visual {
    border-color: color-mix(in srgb, var(--mhl-atmo-gold), white 18%);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--mhl-atmo-primary), transparent 91%), 0 0 30px color-mix(in srgb, var(--mhl-atmo-primary), transparent 78%), 0 10px 30px rgba(0,0,0,.28);
}

.mhl.mhl-atmosphere-ready::before {
    opacity: .52;
    background-image:
        radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--mhl-atmo-primary), transparent 58%) 0 1px, transparent 1.7px),
        radial-gradient(circle at 73% 28%, color-mix(in srgb, var(--mhl-atmo-secondary), transparent 68%) 0 1px, transparent 1.8px),
        radial-gradient(circle at 35% 72%, color-mix(in srgb, var(--mhl-atmo-gold), transparent 78%) 0 1px, transparent 1.6px);
}

.mhl__season-atmosphere {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: var(--mhl-atmo-particle-opacity);
}

.mhl__season-particle {
    --mhl-p-size: 6px;
    --mhl-p-x: 50%;
    --mhl-p-delay: 0s;
    --mhl-p-duration: 18s;
    position: absolute;
    left: var(--mhl-p-x);
    top: -8%;
    width: var(--mhl-p-size);
    height: calc(var(--mhl-p-size) * 1.55);
    border-radius: 70% 30% 70% 30%;
    background: rgba(var(--mhl-atmo-particle-a), .70);
    box-shadow: 0 0 12px rgba(var(--mhl-atmo-particle-a), .18);
    transform: rotate(18deg);
    animation: mhl-season-fall var(--mhl-p-duration) linear infinite;
    animation-delay: var(--mhl-p-delay);
}

.mhl__season-particle:nth-child(even) {
    background: rgba(var(--mhl-atmo-particle-b), .64);
    box-shadow: 0 0 12px rgba(var(--mhl-atmo-particle-b), .18);
}

.mhl__season-particle--1  { --mhl-p-x: 7%;  --mhl-p-size: 5px; --mhl-p-delay: -4s;  --mhl-p-duration: 21s; }
.mhl__season-particle--2  { --mhl-p-x: 14%; --mhl-p-size: 7px; --mhl-p-delay: -12s; --mhl-p-duration: 24s; }
.mhl__season-particle--3  { --mhl-p-x: 23%; --mhl-p-size: 4px; --mhl-p-delay: -8s;  --mhl-p-duration: 18s; }
.mhl__season-particle--4  { --mhl-p-x: 31%; --mhl-p-size: 8px; --mhl-p-delay: -17s; --mhl-p-duration: 26s; }
.mhl__season-particle--5  { --mhl-p-x: 39%; --mhl-p-size: 5px; --mhl-p-delay: -2s;  --mhl-p-duration: 20s; }
.mhl__season-particle--6  { --mhl-p-x: 47%; --mhl-p-size: 6px; --mhl-p-delay: -14s; --mhl-p-duration: 25s; }
.mhl__season-particle--7  { --mhl-p-x: 55%; --mhl-p-size: 4px; --mhl-p-delay: -10s; --mhl-p-duration: 19s; }
.mhl__season-particle--8  { --mhl-p-x: 62%; --mhl-p-size: 7px; --mhl-p-delay: -19s; --mhl-p-duration: 27s; }
.mhl__season-particle--9  { --mhl-p-x: 69%; --mhl-p-size: 5px; --mhl-p-delay: -7s;  --mhl-p-duration: 22s; }
.mhl__season-particle--10 { --mhl-p-x: 76%; --mhl-p-size: 8px; --mhl-p-delay: -15s; --mhl-p-duration: 25s; }
.mhl__season-particle--11 { --mhl-p-x: 83%; --mhl-p-size: 4px; --mhl-p-delay: -5s;  --mhl-p-duration: 18s; }
.mhl__season-particle--12 { --mhl-p-x: 89%; --mhl-p-size: 6px; --mhl-p-delay: -21s; --mhl-p-duration: 28s; }
.mhl__season-particle--13 { --mhl-p-x: 94%; --mhl-p-size: 5px; --mhl-p-delay: -9s;  --mhl-p-duration: 23s; }
.mhl__season-particle--14 { --mhl-p-x: 18%; --mhl-p-size: 4px; --mhl-p-delay: -23s; --mhl-p-duration: 29s; }

/* Estate: lucciole, non caduta verticale. */
.mhl.mhl-atmo--summer .mhl__season-particle,
.mhl.mhl-atmo--summer-solstice .mhl__season-particle {
    top: 18%;
    width: var(--mhl-p-size);
    height: var(--mhl-p-size);
    border-radius: 50%;
    background: rgba(var(--mhl-atmo-particle-a), .82);
    box-shadow: 0 0 12px rgba(var(--mhl-atmo-particle-a), .70), 0 0 24px rgba(var(--mhl-atmo-particle-a), .28);
    animation-name: mhl-season-firefly;
    animation-timing-function: ease-in-out;
}

.mhl.mhl-atmo--summer .mhl__season-particle:nth-child(even),
.mhl.mhl-atmo--summer-solstice .mhl__season-particle:nth-child(even) {
    top: 58%;
    background: rgba(var(--mhl-atmo-particle-b), .74);
    box-shadow: 0 0 12px rgba(var(--mhl-atmo-particle-b), .62), 0 0 24px rgba(var(--mhl-atmo-particle-b), .22);
}

/* Inverno: neve fine e rotonda. */
.mhl.mhl-atmo--winter .mhl__season-particle,
.mhl.mhl-atmo--winter-solstice .mhl__season-particle {
    width: calc(var(--mhl-p-size) * .58);
    height: calc(var(--mhl-p-size) * .58);
    border-radius: 50%;
    background: rgba(var(--mhl-atmo-particle-a), .72);
    box-shadow: 0 0 8px rgba(var(--mhl-atmo-particle-b), .28);
}

/* Halloween: pulviscolo viola/rame più lento, immerso nella foschia. */
.mhl.mhl-atmo--halloween .mhl__season-particle {
    width: calc(var(--mhl-p-size) * .70);
    height: calc(var(--mhl-p-size) * .70);
    border-radius: 50%;
    animation-name: mhl-season-drift;
    animation-timing-function: ease-in-out;
}

/* Natale: scintille rosso brillante + oro, non neve generica. */
.mhl.mhl-atmo--christmas .mhl__season-particle {
    top: 14%;
    width: calc(var(--mhl-p-size) * .78);
    height: calc(var(--mhl-p-size) * .78);
    border-radius: 50%;
    background: rgba(255, 48, 56, .86);
    box-shadow: 0 0 12px rgba(255, 48, 56, .70), 0 0 24px rgba(255, 48, 56, .26);
    animation-name: mhl-season-sparkle;
    animation-timing-function: ease-in-out;
}

.mhl.mhl-atmo--christmas .mhl__season-particle:nth-child(even) {
    top: 62%;
    background: rgba(255, 216, 79, .90);
    box-shadow: 0 0 12px rgba(255, 216, 79, .76), 0 0 26px rgba(255, 216, 79, .30);
}

.mhl[data-atmosphere-intensity="subtle"] .mhl__season-particle:nth-child(n+9) {
    display: none;
}

@keyframes mhl-season-fall {
    0%   { transform: translate3d(0, -8vh, 0) rotate(0deg); opacity: 0; }
    12%  { opacity: .78; }
    52%  { transform: translate3d(24px, 52vh, 0) rotate(150deg); }
    100% { transform: translate3d(-18px, 112vh, 0) rotate(320deg); opacity: 0; }
}

@keyframes mhl-season-firefly {
    0%, 100% { transform: translate3d(-12px, 0, 0) scale(.78); opacity: .18; }
    30%      { transform: translate3d(14px, -18px, 0) scale(1.12); opacity: .92; }
    62%      { transform: translate3d(30px, 22px, 0) scale(.90); opacity: .34; }
    82%      { transform: translate3d(2px, 30px, 0) scale(1.04); opacity: .72; }
}

@keyframes mhl-season-drift {
    0%, 100% { transform: translate3d(-18px, 12vh, 0) scale(.75); opacity: .18; }
    50%      { transform: translate3d(28px, 62vh, 0) scale(1.15); opacity: .68; }
}

@keyframes mhl-season-sparkle {
    0%, 100% { transform: translate3d(-8px, 0, 0) scale(.58); opacity: .12; }
    28%      { transform: translate3d(8px, 15vh, 0) scale(1.22); opacity: .95; }
    58%      { transform: translate3d(-12px, 36vh, 0) scale(.72); opacity: .28; }
    82%      { transform: translate3d(10px, 58vh, 0) scale(1.05); opacity: .78; }
}

@media (max-width: 820px) {
    /* Su telefono la stagione resta cromaticamente evidente ma quasi ferma. */
    .mhl__season-atmosphere {
        opacity: var(--mhl-atmo-mobile-particle-opacity);
    }

    .mhl__season-particle {
        animation: none !important;
        top: auto;
        bottom: var(--mhl-p-x);
        transform: none !important;
    }

    .mhl__season-particle:nth-child(n+6) {
        display: none;
    }

    .mhl.mhl-atmosphere-ready::after {
        mix-blend-mode: normal;
        opacity: var(--mhl-atmo-mobile-haze-opacity);
    }

    .mhl.mhl-atmosphere-ready .mhl__panel-shade {
        background:
            linear-gradient(180deg, rgba(var(--mhl-atmo-panel-rgb), .62) 0%, rgba(var(--mhl-atmo-panel-rgb), .46) 36%, rgba(var(--mhl-atmo-panel-rgb), .50) 72%, rgba(var(--mhl-atmo-panel-rgb), .72) 100%),
            radial-gradient(circle at 50% 48%, rgba(var(--mhl-atmo-panel-rgb), .06), rgba(var(--mhl-atmo-panel-rgb), .38) 78%);
    }

    .mhl.mhl-atmosphere-ready .mhl__panel-cta {
        background:
            linear-gradient(135deg, color-mix(in srgb, var(--mhl-atmo-primary), transparent 86%), color-mix(in srgb, var(--mhl-atmo-gold), transparent 95%)),
            rgba(var(--mhl-atmo-panel-rgb), .78);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mhl__season-particle {
        animation: none !important;
    }
}