/* Promo matrimonio: scena isolata dalle classi e dagli agganci della vecchia hero.
   Impaginazione: testo e scena formano un'unica inquadratura "sticky", ferma sotto
   l'intestazione. Mentre la pagina scende la camera si muove; poi la sezione successiva sale
   come un foglio e copre tutta l'inquadratura, che continua a muoversi fino alla copertura.
   Se il testo è più alto dello schermo (telefoni bassi) l'inquadratura scorre finché il suo
   bordo inferiore tocca il fondo dello schermo, e solo da lì resta ferma (js).
   Il blocco sticky si attiva solo dal JS (data-wm-sticky): senza JavaScript la pagina resta
   in flusso normale, senza spazi vuoti. */
.wm-film {
    --wm-scene: calc(var(--nh-stage) - var(--nh-header));   /* altezza dell'inquadratura */
    position: relative;
    background: #fff8f4;
}

/* Inquadratura ferma: corsa della camera dopo l'inquadratura (mezza schermata da sola,
   poi un'inquadratura intera che viene coperta) e sezione successiva che sale sopra. */
.wm-film[data-wm-sticky] { margin-bottom: calc(-1 * var(--wm-scene)); }
.wm-film[data-wm-sticky]::after {
    content: "";
    display: block;
    height: calc(var(--nh-stage) * .5 + var(--wm-scene));
}
.wm-film[data-wm-sticky] .wm-film__stage {
    position: -webkit-sticky;
    position: sticky;
    top: var(--nh-header);   /* corretto dal JS quando l'inquadratura supera lo schermo */
}

/* Sezione successiva: foglio con sfondo pieno che copre l'inquadratura ancora ferma */
.wm-film + section {
    position: relative;
    z-index: 2;
    background: #fff;
    border-radius: 32px 32px 0 0;
    box-shadow: 0 -18px 40px -26px rgba(75, 30, 45, .28);
}

.wm-film__stage {
    position: relative;
    min-height: var(--wm-scene);
    overflow: hidden;
}

/* Testo sopra la scena */
.wm-film__content {
    position: relative;
    z-index: 1;
}

/* Telefono e tablet: fascia chiara a tutta larghezza dietro il testo, che sfuma verso la scena */
.wm-film__copy {
    min-width: 0;
    margin: 0 calc(-1 * var(--nh-gutter));
    padding: clamp(24px, 5vw, 44px) var(--nh-gutter) 64px;
    /* piena fino all'ultima riga, sfuma solo nell'imbottitura inferiore */
    background: linear-gradient(180deg, rgba(255, 248, 244, .94) 0%, rgba(255, 248, 244, .9) calc(100% - 34px), rgba(255, 248, 244, 0) 100%);
}
.wm-film .sv-eyebrow { color: #96234b; }

.wm-film__title {
    font-size: clamp(2.25rem, 7vw, 3.75rem);
    line-height: 1.06;
    letter-spacing: -.04em;
    overflow-wrap: break-word;
}

/* Parole evidenziate: rosa pieno ovunque; riflesso animato dove il ritaglio sul testo è
   supportato, fermo con "riduci movimento", sospeso quando la scena è fuori schermo. */
.wm-film__shine { color: #a3264f; }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .wm-film__shine {
        display: inline-block;
        padding-bottom: .14em;
        margin-bottom: -.14em; /* spazio per i discendenti ("g") */
        background: linear-gradient(105deg, #a51d4f 0%, #d8577d 29%, #f3a3b3 49%, #b52959 72%, #a51d4f 100%);
        background-size: 220% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .wm-film__shine { animation: wm-shine 6s ease-in-out infinite alternate; }
    .nh-motion .wm-film:not([data-wm-moving]) .wm-film__shine { animation-play-state: paused; }
}

@keyframes wm-shine {
    from { background-position: 0% center; }
    to { background-position: 100% center; }
}

.wm-film__lead {
    margin-top: 22px;
    font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
    line-height: 1.5;
    color: #514a4d;
}

.wm-film__offers {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    margin: 24px 0;
    padding: 16px 0;
    border-top: 1px solid rgba(163, 38, 79, .16);
    border-bottom: 1px solid rgba(163, 38, 79, .16);
}

.wm-film__offers p { display: flex; align-items: center; gap: 10px; margin: 0; }
.wm-film__offers strong {
    display: block;
    color: #96234b;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.05em;
}

/* Solo il testo descrittivo: gli span interni del contatore (.nh-odo) restano in linea */
.wm-film__offers p > span {
    display: block;
    color: #514a4d;
    font-size: .8125rem;
    line-height: 1.45;
}

.wm-film__actions { margin-top: 24px; }
.wm-film__actions .nh-btn { white-space: normal; text-align: center; padding-top: 12px; padding-bottom: 12px; }

.wm-film__benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding: 0;
    margin: 24px 0 0;
    list-style: none;
}

.wm-film__benefits li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #514a4d;
    font-size: .8125rem;
    line-height: 1.4;
}

.wm-film__benefits i { width: 16px; color: #96234b; text-align: center; }
.wm-film__phone { margin: 18px 0 0; color: #514a4d; font-size: .875rem; line-height: 1.5; }

.wm-film__visual {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    isolation: isolate;
    background: #f7e9df;
    pointer-events: none;
}

/* Si trasforma il DIV: il display:contents dei picture condivisi è innocuo.
   Solo transform per frame: nessun filtro (sfocatura già nelle immagini). */
.wm-film__plane {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: var(--wm-focus-x) var(--wm-focus-y);
    transform: scale(var(--wm-base-scale));
}

.wm-film__plane { overflow: hidden; }   /* ritaglio del piano (dimensioni dal JS) */

.wm-film .wm-film__plane img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: var(--wm-focus-x) var(--wm-focus-y);
}

.wm-film[data-wm-moving] .wm-film__plane { will-change: transform; }

@media (min-width: 960px) {
    /* PC: il testo è centrato nella prima schermata, a sinistra, sulla zona schiarita */
    .wm-film__copy {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 47%;
        max-width: 560px;
        min-height: var(--wm-scene);
        margin: 0;
        padding: 40px 0;
        background: none;
    }
    .wm-film__title { font-size: clamp(2.25rem, 3.65vw, 3.75rem); }
    /* Velatura chiara a sinistra, dietro il testo */
    .wm-film__content::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        left: calc(50% - 50vw);
        width: 100vw;
        bottom: 0;
        background: linear-gradient(90deg, rgba(255, 248, 244, .98) 0%, rgba(255, 248, 244, .93) 30%, rgba(255, 248, 244, .72) 44%, rgba(255, 248, 244, 0) 64%);
        pointer-events: none;
    }
}

/* Schermi bassi: testo compattato perché l'inquadratura ferma lo contenga per intero */
@media (min-width: 960px) and (max-height: 820px) {
    .wm-film__copy { padding: 12px 0; }
    .wm-film__title { font-size: clamp(2rem, 6.4vh, 3.25rem); }
    .wm-film__lead { margin-top: 12px; font-size: 1rem; }
    .wm-film__offers { margin: 14px 0; padding: 10px 0; }
    .wm-film__offers strong { font-size: 1.75rem; }
    .wm-film__actions { margin-top: 14px; }
    .wm-film__benefits { margin-top: 14px; }
    .wm-film__phone { margin-top: 8px; }
}

@media (max-width: 959px) and (max-height: 860px) {
    .wm-film__copy { padding-top: 14px; padding-bottom: 34px; }
    .wm-film .sv-eyebrow { margin-bottom: 6px; }
    .wm-film__title { font-size: clamp(1.75rem, 8.2vw, 2.75rem); }
    .wm-film__lead { margin-top: 12px; font-size: 1rem; line-height: 1.45; }
    .wm-film__offers { margin: 14px 0; padding: 10px 0; gap: 8px 20px; }
    .wm-film__offers strong { font-size: 1.625rem; }
    .wm-film__actions { margin-top: 14px; }
    .wm-film__benefits { margin-top: 12px; }
    .wm-film__phone { margin-top: 8px; }
}

/* Telefoni e tablet in orizzontale (600–959 px): impaginazione da PC, testo a sinistra sulla
   velatura e scena visibile a destra; il testo è compattato perché entri nell'inquadratura. */
@media (orientation: landscape) and (min-width: 600px) and (max-width: 959px) {
    .wm-film__copy {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 60%;
        max-width: 560px;
        min-height: var(--wm-scene);
        margin: 0;
        padding: 14px 0 18px;
        background: none;
    }
    .wm-film__content::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        left: calc(50% - 50vw);
        width: 100vw;
        bottom: 0;
        background: linear-gradient(90deg, rgba(255, 248, 244, .98) 0%, rgba(255, 248, 244, .94) 46%, rgba(255, 248, 244, .7) 60%, rgba(255, 248, 244, 0) 80%);
        pointer-events: none;
    }
    .wm-film__title { font-size: clamp(1.625rem, 3.9vw, 2.5rem); }
    .wm-film__lead { margin-top: 10px; font-size: .9375rem; line-height: 1.45; }
    .wm-film__offers { margin: 12px 0; padding: 8px 0; gap: 6px 20px; }
    .wm-film__offers strong { font-size: 1.5rem; }
    .wm-film__actions { margin-top: 12px; }
}

/* Telefoni in orizzontale (schermo basso): restano titolo, sconti e pulsanti;
   i vantaggi e il numero di telefono seguono nella sezione successiva e nella barra. */
@media (orientation: landscape) and (max-width: 959px) and (max-height: 520px) {
    .wm-film__copy { padding: 8px 0 10px; }
    .wm-film .sv-eyebrow { margin-bottom: 4px; font-size: .8125rem; }
    .wm-film__title { font-size: clamp(1.375rem, 3.4vw, 1.875rem); line-height: 1.08; }
    .wm-film__lead { margin-top: 6px; font-size: .875rem; line-height: 1.4; }
    .wm-film__copy { width: max(60%, 440px); }
    .wm-film__offers { flex-wrap: nowrap; gap: 14px; margin: 8px 0; padding: 6px 0; }
    .wm-film__offers p { gap: 8px; }
    .wm-film__offers strong { font-size: 1.25rem; }
    .wm-film__offers p > span { font-size: .75rem; line-height: 1.3; }
    .wm-film__actions { margin-top: 8px; }
    .wm-film__actions .nh-btn { padding-top: 8px; padding-bottom: 8px; min-height: 0; font-size: .875rem; }
    .wm-film__benefits,
    .wm-film__phone { display: none; }
}

/* Telefoni molto bassi (fino a 380 px): l'etichetta ripete le briciole di pane e lascia il posto al testo */
@media (orientation: landscape) and (max-width: 959px) and (max-height: 380px) {
    .wm-film .sv-eyebrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .wm-film .wm-film__plane {
        transform: scale(var(--wm-base-scale)) !important;
        will-change: auto;
    }
}

/* Spaziatura dei contenuti sui Safari precedenti al supporto di flex-gap. */
@supports not (inset: 0) {
    .wm-film__offers > p { margin: 0 24px 16px 0; }
    .wm-film__benefits > li { margin: 0 18px 8px 0; }
    .wm-film__benefits i { margin-right: 8px; }
}
