/* =====================================================================
   FrolliAMOci — PROMOZIONI STAGIONALI (Home del cliente + anteprima del retrobottega)
   Altezza = frazione del display (1/4 · 1/3 · 1/2 · intero) · scroll-snap senza JavaScript ·
   light-box con invito «tocca», musica, attesa, effetto d'ingresso.
   Il contenuto HTML del professionista vive dentro .spr__slide (contain + isolation): non esce dalla sua immagine.
   Lomazzi Federico (c) 2026
   ===================================================================== */

.home__promos { display: grid; gap: var(--space-3, 12px); margin-bottom: var(--space-3, 12px); }

.spr {
    --spr-frac: .3334;
    --spr-ink: #FFF8EF;
    --spr-cta: #FFE7C2;
    position: relative;
    isolation: isolate;
    border-radius: var(--radius-xl, 24px);
    overflow: hidden;
    background: #2B1710;
    box-shadow: 0 14px 40px rgba(43, 23, 16, 0.22);
    color: var(--spr-ink);
}
.spr--h-quarter { --spr-frac: .25; }
.spr--h-third   { --spr-frac: .3334; }
.spr--h-half    { --spr-frac: .5; }
.spr--h-full    { --spr-frac: 1; border-radius: 0; margin-inline: calc(var(--page-gutter, 16px) * -1); }
@media (min-width: 1024px) { .spr--h-full { margin-inline: 0; border-radius: var(--radius-xl, 24px); } }

.spr__track {
    display: flex;
    height: calc(100vh * var(--spr-frac));
    height: calc(100svh * var(--spr-frac));
    min-height: 168px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}
.spr__track::-webkit-scrollbar { display: none; }
.spr__track:focus-visible { outline: 3px solid var(--spr-cta); outline-offset: -3px; }

.spr__slide {
    position: relative;
    flex: 0 0 100%;
    height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
    isolation: isolate;
    contain: layout paint;          /* anche un position:fixed scritto nel CSS della promozione resta dentro l'immagine */
    transform: translateZ(0);
}
.spr__media { position: absolute; inset: 0; z-index: -2; }
.spr__img { width: 100%; height: 100%; object-fit: cover; display: block; animation: spr-kenburns 18s ease-in-out infinite alternate; }
.spr__slide::after {   /* velatura per leggere il testo */
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, rgba(20, 10, 6, 0) 35%, rgba(20, 10, 6, 0.72) 100%);
}

.spr__panel {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: grid; gap: 6px; justify-items: start;
    max-height: 100%;
    padding: clamp(14px, 3.5vw, 28px);
    padding-bottom: clamp(44px, 6vw, 52px);   /* spazio per puntini e pulsanti */
    overflow: auto;
}
.spr:not(.spr--multi) .spr__panel { padding-bottom: clamp(16px, 3.5vw, 28px); }
.spr__title {
    margin: 0;
    font-family: var(--font-display, var(--font-ui, system-ui, sans-serif));
    font-weight: 900;
    font-size: clamp(1.25rem, 2.2vw + 0.9rem, 2.6rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
    max-width: 22ch;
}
.spr__body { max-width: 52ch; font-size: clamp(0.9rem, 0.4vw + 0.8rem, 1.05rem); line-height: 1.45; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45); }
.spr__body > :first-child { margin-top: 0; }
.spr__body > :last-child { margin-bottom: 0; }
.spr-html a { color: var(--spr-cta); }
.spr-html img { max-width: 100%; height: auto; }
.spr__cta {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 4px;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--spr-cta);
    color: #2B1710;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    transition: transform .18s ease;
}
.spr__cta:hover { transform: translateY(-1px); }
.spr__cta:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.spr__cta .icon { width: 1rem; height: 1rem; }

/* altezze piccole: titolo e pulsante; il testo completo è nel light-box */
.spr--h-quarter .spr__body { display: none; }
.spr--h-quarter .spr__title { font-size: clamp(1.05rem, 1.6vw + 0.8rem, 1.7rem); }
.spr--h-third .spr__body { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.spr--h-third .spr__body.spr-html--rich { display: block; -webkit-line-clamp: unset; max-height: 4.5em; }
.spr--h-full .spr__panel { top: 0; align-content: end; padding-bottom: calc(var(--bottom-nav-h, 64px) + var(--safe-bottom, 0px) + 56px); }
.spr--h-full .spr__title { font-size: clamp(2rem, 5vw + 1rem, 4.4rem); }
@media (min-width: 1024px) { .spr--h-full .spr__panel { padding-bottom: 72px; } }

/* comandi (solo con JavaScript) */
.spr__ui { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; pointer-events: none; }
.spr--h-full .spr__ui { bottom: calc(var(--bottom-nav-h, 64px) + var(--safe-bottom, 0px) + 12px); }
@media (min-width: 1024px) { .spr--h-full .spr__ui { bottom: 16px; } }
.spr__ui[hidden] { display: none; }
.spr__ui > * { pointer-events: auto; }
.spr__dots { display: flex; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(20, 10, 6, 0.42); backdrop-filter: blur(6px); }
.spr__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.55); cursor: pointer; transition: width .25s ease, background .25s; }
.spr__dot[aria-current="true"] { width: 22px; background: var(--spr-cta); }
.spr__dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.spr__nav, .spr__sound {
    display: grid; place-items: center;
    width: 36px; height: 36px;
    border: 0; border-radius: 50%;
    background: rgba(20, 10, 6, 0.42); color: #fff;
    backdrop-filter: blur(6px);
    cursor: pointer;
}
.spr__nav .icon, .spr__sound .icon { width: 1rem; height: 1rem; }
.spr__nav:focus-visible, .spr__sound:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.spr__sound { position: absolute; right: 12px; bottom: 0; }
.spr__sound-on { display: none; }
.spr__sound[aria-pressed="true"] .spr__sound-on { display: grid; }
.spr__sound[aria-pressed="true"] .spr__sound-off { display: none; }
.spr__sound[aria-pressed="true"] { background: var(--spr-cta); color: #2B1710; animation: spr-pulse 1.6s ease-in-out infinite; }
@media (hover: none) { .spr__nav { display: none; } }

/* ---------- invito «tocca» ---------- */
.sprinv {
    position: fixed; z-index: 90;
    left: 50%; bottom: calc(var(--bottom-nav-h, 64px) + var(--safe-bottom, 0px) + 16px);
    transform: translateX(-50%);
    display: flex; align-items: center; gap: 4px;
    padding: 6px;
    border-radius: 999px;
    background: #2B1710; color: #FFF8EF;
    box-shadow: 0 16px 40px rgba(43, 23, 16, 0.4);
    animation: spr-in-up .5s cubic-bezier(.2, .9, .3, 1.2) both;
    max-width: calc(100vw - 24px);
}
@media (min-width: 1024px) { .sprinv { bottom: 28px; } }
.sprinv__go {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 44px; padding: 8px 18px 8px 10px;
    border: 0; border-radius: 999px;
    background: linear-gradient(110deg, #FFE7C2 0%, #FFF6E6 45%, #FFE7C2 60%);
    background-size: 220% 100%;
    color: #2B1710; font: inherit; font-weight: 900; cursor: pointer;
    animation: spr-shine 2.4s linear infinite;
}
.sprinv__go:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.sprinv__go [data-invite-text] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 54vw; }
.sprinv__tap { white-space: nowrap; }
.sprinv__spark { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #2B1710; color: #FFE7C2; }
.sprinv__spark .icon { width: .95rem; height: .95rem; }
.sprinv__tap { font-weight: 700; opacity: .7; }
.sprinv__x { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: #FFF8EF; cursor: pointer; }
.sprinv__x .icon { width: .9rem; height: .9rem; }
.sprinv__wait { display: none; align-items: center; gap: 10px; padding: 8px 16px; font-weight: 800; }
.sprinv.is-waiting .sprinv__go, .sprinv.is-waiting .sprinv__x { display: none; }
.sprinv.is-waiting .sprinv__wait { display: flex; }
.sprinv__eq { display: flex; align-items: flex-end; gap: 3px; height: 18px; }
.sprinv__eq span { width: 4px; border-radius: 2px; background: #FFE7C2; animation: spr-eq .9s ease-in-out infinite alternate; }
.sprinv__eq span:nth-child(2) { animation-delay: .15s; } .sprinv__eq span:nth-child(3) { animation-delay: .3s; } .sprinv__eq span:nth-child(4) { animation-delay: .45s; }
.sprinv.is-leaving { animation: spr-out-down .35s ease both; }

/* ---------- light-box ---------- */
.sprlb {
    width: 100vw; height: 100vh; height: 100dvh;
    max-width: none; max-height: none;
    margin: 0; padding: 0; border: 0;
    background: transparent; color: #FFF8EF;
    overflow: hidden;
}
.sprlb::backdrop { background: rgba(20, 10, 6, 0.78); backdrop-filter: blur(8px); }
.sprlb[open] { display: grid; place-items: center; }
.sprlb__box {
    position: relative;
    width: min(100vw, 980px);
    height: min(100dvh, 860px);
    overflow: hidden;
    background: #2B1710;
}
@media (min-width: 760px) { .sprlb__box { width: min(92vw, 980px); height: min(88dvh, 860px); border-radius: 28px; box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55); } }
.sprlb .spr { height: 100%; border-radius: 0; box-shadow: none; margin: 0; }
.sprlb .spr__track { height: 100%; min-height: 0; }
.sprlb .spr__body { display: block; -webkit-line-clamp: unset; max-height: none; }
.sprlb .spr__panel { top: 0; align-content: end; padding-bottom: 64px; }
.sprlb .spr__title { font-size: clamp(2rem, 4vw + 1rem, 3.8rem); }
.sprlb .spr__ui { bottom: 16px; }
.sprlb__close {
    position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 5;
    display: grid; place-items: center;
    width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: rgba(20, 10, 6, 0.55); color: #fff; cursor: pointer; backdrop-filter: blur(6px);
}
.sprlb__close .icon { width: 1.1rem; height: 1.1rem; }
.sprlb__close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.sprlb--fade .sprlb__box { animation: spr-fade 1.1s ease both; }
.sprlb--zoom .sprlb__box { animation: spr-zoom 1s cubic-bezier(.2, .8, .2, 1) both; }
.sprlb--rise .sprlb__box { animation: spr-rise .9s cubic-bezier(.2, .9, .3, 1.1) both; }
.sprlb--blur .sprlb__box { animation: spr-blur 1.2s ease both; }
.sprlb.is-closing .sprlb__box { animation: spr-fade-out .35s ease both; }

@keyframes spr-kenburns { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes spr-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 231, 194, .6); } 50% { box-shadow: 0 0 0 8px rgba(255, 231, 194, 0); } }
@keyframes spr-shine { from { background-position: 200% 0; } to { background-position: -20% 0; } }
@keyframes spr-eq { from { height: 4px; } to { height: 18px; } }
@keyframes spr-in-up { from { opacity: 0; transform: translate(-50%, 24px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes spr-out-down { to { opacity: 0; transform: translate(-50%, 24px); } }
@keyframes spr-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes spr-fade-out { to { opacity: 0; transform: scale(.98); } }
@keyframes spr-zoom { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: scale(1); } }
@keyframes spr-rise { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spr-blur { from { opacity: 0; filter: blur(22px) saturate(1.4); } to { opacity: 1; filter: blur(0) saturate(1); } }

@media (prefers-reduced-motion: reduce) {
    .spr__img, .sprinv__go, .sprinv__eq span, .spr__sound[aria-pressed="true"] { animation: none; }
    .spr__track { scroll-behavior: auto; }
    .sprlb--fade .sprlb__box, .sprlb--zoom .sprlb__box, .sprlb--rise .sprlb__box, .sprlb--blur .sprlb__box { animation: spr-fade .2s ease both; }
}

/* anteprima nel retrobottega */
.spr-preview { display: grid; gap: var(--space-4, 16px); }
.spr-preview__phone { width: min(100%, 420px); margin-inline: auto; padding: 14px; border-radius: 40px; background: #1F1410; box-shadow: 0 30px 80px rgba(31, 20, 16, 0.35); }
.spr-preview__screen { position: relative; height: 760px; overflow: auto; border-radius: 28px; background: #FBF3EA; padding: 12px; --page-gutter: 12px; }
.spr-preview__screen .spr__track { height: calc(736px * var(--spr-frac)); }
.spr-preview__fake { display: grid; gap: 10px; margin-top: 12px; }
.spr-preview__fake span { display: block; height: 64px; border-radius: 18px; background: #F1E2D2; }
.spr-preview__fake span:first-child { height: 140px; }
/* l'anteprima vive nel retrobottega: i colori del retrobottega (titoli, link) non devono vincere su quelli della promozione */
.spr .spr__title, .pro .spr .spr__title { color: var(--spr-ink); }
.spr .spr__body, .pro .spr .spr__body { color: var(--spr-ink); }
.spr a.spr__cta, .pro .spr a.spr__cta { color: #2B1710; text-decoration: none; }