/* ==========================================================================
   PAGINA BRAND EDITORIALE - css/brand_page.css
   Incluso da htmlFragments/top_v2.php solo quando $variables['brand_page'] è valorizzato.
   Tutte le classi hanno prefisso bp- per non collidere con style_v2.css.
   Palette del sito: magenta #950A46, barre scure #1D2124, fondo alternato #F7F7F7.
   ========================================================================== */

.bp-crumbbar .bp-h1,
.bp-hero,
.bp-databar,
.bp-section,
.bp-final {
    font-family: 'Mulish', sans-serif;
}

/* ---------- barra scura + H1 ---------- */
.bp-crumbbar {
    background: #1D2124;   /* lo shop lo mette inline; qui in CSS, altrimenti breadcrumb e H1 bianchi su bianco */
}
.bp-crumbbar .breadcrumb {
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .78;
    margin-bottom: 6px !important;
}
.bp-h1 {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
    color: #FFFFFF;
}
/* 2026-09-30: breadcrumb cliccabile come nello shop. Tutte le voci sono link: bianchi e senza sottolineatura
   anche in hover, come .breadcrumb-container li a di style_v2.css (qui ripetuto per non dipendere solo da quella).
   L'ultima voce (il marchio, aria-current="page") resta bianca e in grassetto come la vecchia voce .active. */
.bp-crumbbar .breadcrumb-item a,
.bp-crumbbar .breadcrumb-item a:hover,
.bp-crumbbar .breadcrumb-item a:focus {
    color: #FFFFFF;
    text-decoration: none;
}
.bp-crumbbar .breadcrumb-item[aria-current="page"],
.bp-crumbbar .breadcrumb-item[aria-current="page"] a {
    color: #FFFFFF;
    font-weight: 700;
}

/* ---------- elementi comuni ---------- */
.bp-kicker {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #950A46;
    margin: 0 0 12px;
}
.bp-sec {
    font-size: clamp(22px, 2.4vw, 29px);
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.2;
    color: #222222;
    margin: 0 0 12px;
}
.bp-sec-head {
    max-width: 80ch;
    margin-bottom: 28px;
}
.bp-section {
    padding-top: 56px;
    padding-bottom: 56px;
}
.bp-alt {
    background: #F7F7F7;
    border-top: 1px solid #E3E3E3;
    border-bottom: 1px solid #E3E3E3;
}
.bp-prose {
    font-size: 16.5px;
    line-height: 1.6;
    color: #565C63;
    max-width: 72ch;
}
.bp-prose p { margin: 0 0 14px; }
.bp-prose p:last-child { margin-bottom: 0; }
.bp-prose strong { color: #222222; font-weight: 700; }
.bp-prose a,
.bp-lede a,
.bp-ed-text a {
    color: #950A46;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.bp-prose a:hover,
.bp-lede a:hover,
.bp-ed-text a:hover {
    background: #FBEEF3;
}

/* bottoni: si appoggiano a .btn-primary / .btn-secondary di style_v2.css */
.bp-btn {
    border-radius: 5px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .02em;
    padding: 9px 18px;
}
.bp-btn-lg {
    padding: 14px 28px;
    font-size: 15px;
}
.bp-btn-light {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: #FFFFFF;
    --bs-btn-hover-color: #1D2124;
    --bs-btn-hover-bg: #FFFFFF;
    --bs-btn-hover-border-color: #FFFFFF;
    --bs-btn-active-color: #1D2124;
    --bs-btn-active-bg: #FFFFFF;
    --bs-btn-active-border-color: #FFFFFF;
}
.bp-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ---------- hero ---------- */
.bp-hero {
    background: #F7F7F7;
    border-bottom: 1px solid #E3E3E3;
    padding-top: 40px;
    padding-bottom: 40px;
}
.bp-hero-intro {
    font-size: 15px;
    line-height: 1.55;
    color: #565C63;
    max-width: 60ch;
    margin: 0 0 14px;
}
.bp-hero-h2 {
    font-size: clamp(26px, 3.2vw, 36px);
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #222222;
    margin: 0 0 14px;
}
.bp-lede {
    font-size: 17.5px;
    line-height: 1.6;
    color: #565C63;
    max-width: 56ch;
    margin: 0 0 22px;
}
.bp-lede strong { color: #222222; font-weight: 800; }

.bp-shots {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 10px;
}
.bp-shots-1 { grid-template-columns: 1fr; }
.bp-shots-2 { grid-template-columns: 1fr 1fr; }
.bp-shots-3 .bp-shot:first-child { grid-row: span 2; }
.bp-shot {
    margin: 0;
    background: #FFFFFF;
    border: 1px solid #E3E3E3;
    box-shadow: 0 0 7px rgba(185, 185, 185, .4);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.bp-shot a {
    display: block;
    flex: 1;
}
.bp-shot img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    aspect-ratio: 3 / 4;
    padding: 8px;
    display: block;
}
.bp-shot figcaption {
    font-size: 10.5px;
    letter-spacing: .06em;
    color: #84898F;
    padding: 6px 8px;
    border-top: 1px solid #E3E3E3;
    text-transform: uppercase;
    font-weight: 800;
}

/* ---------- databar ---------- */
.bp-databar {
    background: #191B19;
    color: #FFFFFF;
    padding-top: 24px;
    padding-bottom: 24px;
}
.bp-databar-item b {
    display: block;
    font-size: 25px;
    font-weight: 900;
    line-height: 1.15;
}
.bp-databar-item:first-child b { color: #F2A8C4; }
.bp-databar-item span {
    font-size: 12.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .66);
}

/* ---------- griglia prodotti (card di style_v2.css) ---------- */
.bp-griglia {
    background: #F7F7F7;
}
.bp-griglia .bp-sec-head { margin-bottom: 0; }

/* ---------- profilo stock ---------- */
.bp-datalist {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    border-top: 1px solid #E3E3E3;
}
.bp-datalist li {
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #E3E3E3;
    font-size: 14.5px;
}
.bp-datalist span { color: #84898F; }
.bp-datalist b { font-weight: 700; text-align: right; color: #222222; }

/* ---------- editoriale ---------- */
.bp-ed-text p {
    font-size: 17px;
    line-height: 1.72;
    color: #565C63;
    margin: 0 0 18px;
}
.bp-ed-text p:last-child { margin-bottom: 0; }
.bp-ed-shot {
    display: block;
    text-decoration: none;
    background: #FFFFFF;
    border: 1px solid #E3E3E3;
    box-shadow: 0 0 7px rgba(185, 185, 185, .4);
    transition: .16s;
    height: 100%;
}
.bp-ed-shot:hover {
    box-shadow: 0 0 12px rgba(149, 10, 70, .18);
    border-color: #D8B9C8;
}
.bp-ed-shot img {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    padding: 10px;
    display: block;
}
.bp-ed-shot-wide img { aspect-ratio: 4 / 3; }
.bp-ed-shot span {
    display: block;
    border-top: 1px solid #E3E3E3;
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #84898F;
}
.bp-ed-shot:hover span { color: #950A46; }

/* ---------- categorie ---------- */
.bp-cat {
    display: block;
    text-decoration: none;
    background: #FFFFFF;
    border: 1px solid #E3E3E3;
    padding: 15px 18px;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #222222;
    transition: .15s;
}
.bp-cat:hover {
    border-color: #950A46;
    color: #950A46;
}

/* ---------- come si acquista ---------- */
.bp-flow-step {
    background: #FFFFFF;
    border: 1px solid #E3E3E3;
    padding: 20px;
    height: 100%;
}
.bp-flow-num {
    display: block;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .1em;
    color: #950A46;
    margin-bottom: 10px;
}
.bp-flow-step h3 {
    font-size: 16px;
    font-weight: 800;
    color: #222222;
    margin: 0 0 8px;
}
.bp-flow-step p {
    font-size: 14.5px;
    line-height: 1.55;
    color: #565C63;
    margin: 0;
}
.bp-flow-nota { margin-top: 24px; }

/* ---------- FAQ ---------- */
.bp-faq { max-width: none; }   /* a tutta larghezza su desktop (richiesta utente) */
.bp-faq details {
    border-bottom: 1px solid #E3E3E3;
    padding: 16px 0;
}
.bp-faq summary {
    cursor: pointer;
    font-weight: 800;
    font-size: 16.5px;
    color: #222222;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 18px;
}
.bp-faq summary::-webkit-details-marker { display: none; }
.bp-faq summary::after {
    content: "+";
    color: #950A46;
    font-weight: 900;
    font-size: 20px;
    line-height: 1;
}
.bp-faq details[open] summary::after { content: "–"; }
.bp-faq details p {
    margin: 10px 0 0;
    font-size: 15.5px;
    line-height: 1.6;
    color: #565C63;
    max-width: none;
}

/* ---------- CTA finale ---------- */
.bp-final {
    background: #1D2124;
    color: #FFFFFF;
    text-align: center;
}
.bp-final .bp-sec { color: #FFFFFF; }
.bp-final p {
    color: rgba(255, 255, 255, .74);
    max-width: 64ch;
    margin: 0 auto 22px;
    font-size: 16.5px;
}

/* ---------- archivio ---------- */
.bp-archivio {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 880px;
}
.bp-archivio li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 0;
    border-bottom: 1px solid #E3E3E3;
}
.bp-archivio a {
    color: #222222;
    font-weight: 700;
    text-decoration: none;
}
.bp-archivio a:hover { color: #950A46; }
.bp-archivio span {
    color: #84898F;
    font-size: 13.5px;
}

/* ---------- responsive ----------
   Sotto 992px il testo dell'hero e le foto vanno una sotto l'altra: le 3 foto passano
   in fila (3 colonne uguali) per non allungare l'hero con una foto a tutta larghezza.
   I gutter delle row sono g-4 sotto lg (margine -0.75rem, minore del padding px-8 di 1rem
   su mobile): con g-5 la row sporgerebbe dal contenitore e la pagina scorrerebbe in orizzontale. */
@media (max-width: 991.98px) {
    .bp-hero { padding-top: 30px; padding-bottom: 30px; }
    .bp-section { padding-top: 42px; padding-bottom: 42px; }
    .bp-shots,
    .bp-shots-3 { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .bp-shots-2 { grid-template-columns: repeat(2, 1fr); }
    .bp-shots-1 { grid-template-columns: 1fr; }
    .bp-shots-3 .bp-shot:first-child { grid-row: auto; }
    .bp-shot img { padding: 4px; }
    .bp-shot figcaption { font-size: 9.5px; padding: 5px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 575.98px) {
    .bp-h1 { font-size: 20px; }
    .bp-hero-h2 { font-size: 24px; }
    .bp-lede { font-size: 16px; }
    .bp-ed-text p { font-size: 16px; }
    .bp-databar-item b { font-size: 21px; }
    .bp-datalist li { flex-direction: column; gap: 2px; }
    .bp-datalist b { text-align: left; }
    .bp-btn-lg { width: 100%; text-align: center; }
    .bp-archivio li { flex-direction: column; gap: 2px; }
}

/* ---------- slider ultimi arrivi (stesso schema di slider-related-product_v2.php) ---------- */
.bp-slider { background: #F7F7F7; }
.bp-slider .bp-sec-head { margin-bottom: 0; }
.bp-slider-row .slick-dots { bottom: -10px; }

/* ---------- box di debug, piccolo e fisso (BRAND_PAGE_DEBUG in functions/brand_page_functions.php) ---------- */
.bp-debug {
    position: fixed;
    left: 8px;
    bottom: 8px;
    z-index: 9999;
    max-width: min(360px, calc(100vw - 16px));
    background: rgba(29, 33, 36, .92);
    color: #D8D8D8;
    font: 11px/1.4 Consolas, Menlo, monospace;
    border-left: 3px solid #950A46;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
    word-break: break-all;
}
.bp-debug b { color: #FFFFFF; font-weight: 700; }
.bp-debug .bp-dbg-ok { color: #4CD68A; }
.bp-debug .bp-dbg-no { color: #F28AB0; }
.bp-debug .bp-dbg-head { padding: 4px 8px; cursor: pointer; white-space: nowrap; user-select: none; }
.bp-debug .bp-dbg-arrow { opacity: .6; font-size: 9px; margin-left: 4px; }
.bp-debug.bp-dbg-open .bp-dbg-arrow { display: inline-block; transform: rotate(180deg); }
.bp-debug .bp-dbg-body { display: none; padding: 4px 8px 6px; border-top: 1px solid rgba(255, 255, 255, .12); }
.bp-debug.bp-dbg-open .bp-dbg-body { display: block; }
.bp-debug a { color: #F2A8C4; text-decoration: underline; }
.bp-debug .bp-dbg-key { opacity: .6; font-size: 10px; }

/* ---------- condizione della merce ---------- */
.bp-cond {
    background: #FFFFFF;
    border: 1px solid #E3E3E3;
    border-top: 3px solid #1D2124;
    padding: 20px;
    height: 100%;
}
.bp-cond-ev { border-top-color: #950A46; }
.bp-cond h3 {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #222222;
    margin: 0 0 8px;
}
.bp-cond p {
    font-size: 14.5px;
    line-height: 1.55;
    color: #565C63;
    margin: 0;
}
.bp-cond-note { margin-top: 28px; max-width: 76ch; }

/* ---------- corpo piu' stretto (richiesta utente 2026-09-16) ----------
   Su desktop il contenuto occupa circa il 76% della larghezza (84% fra 992 e 1400px), centrato: si agisce sul
   padding dei contenitori cosi' gli sfondi (barra scura, bande grigie bp-alt) restano a tutta larghezza.
   Sotto 992px resta il padding px-8 del sito. */
@media (min-width: 992px) {
    .container-fluid.bp-crumbbar, .container-fluid.bp-hero, .container-fluid.bp-databar,
    .container-fluid.bp-section, .container-fluid.bp-slider, .container-fluid.bp-griglia {
        padding-left: 8% !important;
        padding-right: 8% !important;
    }
}
@media (min-width: 1400px) {
    .container-fluid.bp-crumbbar, .container-fluid.bp-hero, .container-fluid.bp-databar,
    .container-fluid.bp-section, .container-fluid.bp-slider, .container-fluid.bp-griglia {
        padding-left: 12% !important;
        padding-right: 12% !important;
    }
}

/* ---------- editoriale "In evidenza": mosaico + tipografia (2026-09-18) ----------
   Sinistra: kicker + H2 + 2 paragrafi (il primo un po' piu' grande, da attacco). Destra: mosaico di 3 foto, una grande
   verticale (3:4) su due righe e le altre due impilate accanto, alte insieme quanto la grande: il blocco e' alto circa
   0,8 volte la sua larghezza (prima "una larga + due sotto" arrivava a 1,4), quindi si bilancia con il testo.
   Le colonne sono centrate in verticale dal partial (align-items-lg-center). */
.bp-ed .bp-ed-head { margin-bottom: 22px; }
.bp-ed .bp-ed-head .bp-sec { margin-bottom: 0; }
.bp-ed .bp-ed-text { max-width: none; }
.bp-ed .bp-ed-text p { margin-bottom: 18px; }
.bp-ed .bp-ed-text p:first-child {
    font-size: 18px;
    line-height: 1.6;
    color: #2B2F33;
}
.bp-ed .bp-ed-text p:last-child { margin-bottom: 0; }

.bp-ed-mosaic {
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-template-rows: 1fr 1fr;
    gap: 14px;
}
.bp-ed-mosaic .bp-ed-shot {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    overflow: hidden;
}
.bp-ed-mosaic .bp-ed-shot img {
    width: 100%;
    padding: 8px;
    object-fit: contain;
}
/* la grande detta l'altezza del mosaico */
.bp-ed-mosaic .bp-ed-shot-big { grid-row: 1 / span 2; }
.bp-ed-mosaic .bp-ed-shot-big img {
    aspect-ratio: 3 / 4;
    height: auto;
}
/* le piccole riempiono la loro meta' senza imporre un'altezza propria */
.bp-ed-mosaic .bp-ed-shot-small img {
    aspect-ratio: auto;
    flex: 1 1 0;
    height: 0;
    min-height: 0;
}
.bp-ed-mosaic .bp-ed-shot span {
    flex: 0 0 auto;
    padding: 7px 10px;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 2 foto: due colonne uguali; 1 foto: una sola, non troppo larga */
.bp-ed-mosaic-2 { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
.bp-ed-mosaic-2 .bp-ed-shot-big { grid-row: auto; }
.bp-ed-mosaic-1 { grid-template-columns: 1fr; grid-template-rows: auto; max-width: 360px; margin-left: auto; margin-right: auto; }
.bp-ed-mosaic-1 .bp-ed-shot-big { grid-row: auto; }

@media (max-width: 991.98px) {
    .bp-ed-mosaic { max-width: 520px; margin-left: auto; margin-right: auto; gap: 10px; }
    .bp-ed .bp-ed-text p:first-child { font-size: 17px; }
}

/* ---------- hero: mosaico delle 3 foto su desktop (2026-09-18) ----------
   Prima anche le due foto piccole avevano il formato 3:4, quindi impilate rendevano il blocco alto circa 1,2 volte la sua
   larghezza (piu' di 700px, contro i 350-400 del testo). Ora la foto grande (3:4, su due righe) detta l'altezza e le due
   piccole riempiono ognuna la sua meta': il blocco e' alto circa 0,8 volte la larghezza. Stessa composizione del blocco
   editoriale. Sotto 992px restano le regole di prima (3 foto in fila). */
@media (min-width: 992px) {
    .bp-shots-3 {
        grid-template-columns: 3fr 2fr;
        grid-template-rows: 1fr 1fr;
        gap: 14px;
    }
    .bp-shots-3 .bp-shot { min-height: 0; }
    .bp-shots-3 .bp-shot:first-child { grid-row: 1 / span 2; }
    .bp-shots-3 .bp-shot:first-child img { height: auto; }
    .bp-shots-3 .bp-shot:not(:first-child) a {
        position: relative;
        flex: 1 1 0;
        min-height: 0;
    }
    .bp-shots-3 .bp-shot:not(:first-child) img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
    }
    .bp-shot figcaption {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .bp-hero .bp-lede { max-width: 62ch; }
}

/* ==========================================================================
   ANIMAZIONI E DECORAZIONI VETTORIALI (2026-09-29)
   Solo aggiunte: lo stato a riposo di ogni elemento resta quello delle regole sopra (colori, font, misure, layout).
   - Tutto cio' che nasconde o anima l'ingresso sta sotto .bp-anim, classe messa su <html> dallo script inline di
     top_v2.php solo con IntersectionObserver e senza prefers-reduced-motion (e tolta dopo 3 s se js/brand_page.js
     non parte): senza JS o con reduced-motion la pagina e' esattamente quella statica.
   - js/brand_page.js assegna le classi bp-reveal (blocco intero), bp-stagger (figli in sequenza, indice in --bp-i),
     bp-kick (kicker) e aggiunge bp-in quando l'elemento entra nel viewport. Hero e barra scura animano al load.
     Gli elementi gia' nel viewport all'avvio non vengono nascosti (niente lampeggio above the fold).
   - Decorazioni SVG (aria-hidden) nei partial: .bp-hero-deco (hero), .bp-final-deco (CTA finale),
     .bp-flow-line (come si acquista). Assolute, dietro al contenuto, non spostano nulla.
   - Le micro-interazioni hover valgono anche senza bp-anim, ma solo con (hover: hover) e senza reduced-motion.
   - Animazioni continue solo su transform / opacity / stroke-dashoffset.
   ========================================================================== */

/* ---------- contenitori decorati ----------
   overflow:hidden taglia le decorazioni ai bordi (niente scroll orizzontale su mobile). Nessun contenuto sporge:
   le row interne hanno margini negativi minori o uguali al padding del contenitore. */
.bp-hero,
.bp-final,
.bp-databar,
.bp-crumbbar {
    position: relative;
    overflow: hidden;
}
.bp-hero-deco,
.bp-final-deco {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    display: block;
    overflow: hidden;
}
.bp-hero > .row,
.bp-databar > .row,
.bp-final > :not(.bp-final-deco) {
    position: relative;
    z-index: 1;
}
.bp-final-deco .bp-blob,
.bp-final-deco .bp-orbit,
.bp-hero-deco .bp-dot {
    transform-box: fill-box;
    transform-origin: center;
}
/* su mobile l'hero e' alto e stretto (lo slice ingrandisce il disegno): decorazione piu' leggera, niente anelli */
@media (max-width: 991.98px) {
    .bp-hero-deco { opacity: .6; }
    .bp-hero-deco .bp-deco-rings { display: none; }
}

/* ---------- come si acquista: linea dei passi (solo lg+) ----------
   Il wrapper non ha padding/bordi: il margine negativo della row passa fuori come prima (spaziature invariate).
   top = gutter verticale della row g-3 (1rem) + bordo (1px) + padding card (20px) + meta' riga del numero (~9px). */
.bp-flow-wrap { position: relative; }
.bp-flow-wrap > .bp-flow {
    position: relative;
    z-index: 1;
}
.bp-flow-line {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(1rem + 29px);
    width: 100%;
    height: 2px;
    z-index: 0;
    display: block;
    opacity: .35;
    pointer-events: none;
    overflow: visible;
}
@media (max-width: 991.98px) {
    .bp-flow-line { display: none; }
}

/* ---------- barra di lettura (creata da js/brand_page.js solo con bp-anim) ---------- */
.bp-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 10000;
    pointer-events: none;
}
.bp-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #950A46, #F2A8C4);
    transform-origin: 0 50%;
    transform: scaleX(0);
    will-change: transform;
}

/* ---------- keyframes ----------
   Quelle d'ingresso hanno solo il "from": arrivano al valore normale dell'elemento (es. la breadcrumb resta a .78). */
@keyframes bp-fade-up {
    from { opacity: 0; transform: translateY(18px); }
}
@keyframes bp-fade-up-sm {
    from { opacity: 0; transform: translateY(6px); }
}
@keyframes bp-fade {
    from { opacity: 0; }
}
@keyframes bp-track-in {
    from { opacity: 0; letter-spacing: .32em; }
}
/* le foto si scoprono dal basso; l'inset finale negativo non taglia l'ombra (7px) e a fine animazione si torna a nessun clip */
@keyframes bp-clip-up {
    from { -webkit-clip-path: inset(100% -12px -12px -12px); clip-path: inset(100% -12px -12px -12px); }
    to   { -webkit-clip-path: inset(-12px -12px -12px -12px); clip-path: inset(-12px -12px -12px -12px); }
}
@keyframes bp-img-settle {
    from { transform: scale(1.06); }
}
@keyframes bp-draw {
    from { stroke-dashoffset: 1; }
    to   { stroke-dashoffset: 0; }
}
/* tratteggio 6 8 = periodo 14: -280 e' 20 periodi, il loop non scatta */
@keyframes bp-stitch {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -280; }
}
@keyframes bp-float {
    from { transform: translateY(0); }
    to   { transform: translateY(-14px); }
}
@keyframes bp-drift {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(90px, 36px) scale(1.08); }
}
@keyframes bp-drift-b {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(-100px, -40px) scale(1.1); }
}
@keyframes bp-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes bp-sweep {
    0%        { transform: translateX(-100%); }
    70%, 100% { transform: translateX(340%); }
}
@keyframes bp-line-in {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* ---------- ingresso al load: barra scura + hero (above the fold, senza observer) ---------- */
.bp-anim .bp-crumbbar .breadcrumb {
    animation: bp-fade-up .6s cubic-bezier(.2, .7, .2, 1) both;
}
.bp-anim .bp-crumbbar .bp-h1 {
    animation: bp-fade-up .7s cubic-bezier(.2, .7, .2, 1) .12s both;
}
/* filo magenta che si stende sotto la barra e poi resta (esiste solo con bp-anim) */
.bp-anim .bp-crumbbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: #950A46;
    transform-origin: 0 50%;
    pointer-events: none;
    animation: bp-line-in 1.1s cubic-bezier(.6, 0, .2, 1) .15s both;
}

/* hero: kicker (track-in da 768px in su, vedi sotto), poi intro, H2, lede, bottoni */
.bp-anim .bp-hero .bp-kicker {
    animation: bp-fade .7s ease both;
}
.bp-anim .bp-hero-intro {
    animation: bp-fade-up .7s cubic-bezier(.2, .7, .2, 1) .09s both;
}
.bp-anim .bp-hero-h2 {
    animation: bp-fade-up .75s cubic-bezier(.2, .7, .2, 1) .18s both;
}
.bp-anim .bp-hero .bp-lede {
    animation: bp-fade-up .75s cubic-bezier(.2, .7, .2, 1) .27s both;
}
.bp-anim .bp-hero .bp-cta-row {
    animation: bp-fade-up .75s cubic-bezier(.2, .7, .2, 1) .36s both;
}
/* fill backwards: finita l'animazione torna il valore normale (nessun clip, nessun transform) e l'hover sulle foto funziona */
.bp-anim .bp-hero .bp-shot {
    animation: bp-clip-up .85s cubic-bezier(.7, 0, .2, 1) .2s backwards;
}
.bp-anim .bp-hero .bp-shot img {
    animation: bp-img-settle .9s cubic-bezier(.2, .7, .2, 1) .2s backwards;
}
.bp-anim .bp-hero .bp-shot:nth-child(2),
.bp-anim .bp-hero .bp-shot:nth-child(2) img { animation-delay: .34s; }
.bp-anim .bp-hero .bp-shot:nth-child(3),
.bp-anim .bp-hero .bp-shot:nth-child(3) img { animation-delay: .48s; }

/* ---------- decorazione dell'hero ----------
   Senza bp-anim e' statica e visibile (anelli gia' disegnati): lo stato di partenza sta solo nelle animazioni. */
.bp-anim .bp-hero-deco .bp-stitch {
    animation: bp-stitch 40s linear infinite;
}
.bp-anim .bp-hero-deco .bp-ring {
    stroke-dasharray: 1;
    animation: bp-draw 1.6s cubic-bezier(.3, .6, .2, 1) .3s both;
}
.bp-anim .bp-hero-deco .bp-ring-2 { animation-delay: .55s; }
.bp-anim .bp-hero-deco .bp-ring-3 { animation-delay: .8s; }
.bp-anim .bp-hero-deco .bp-dot {
    animation: bp-float 7s ease-in-out infinite alternate;
}
.bp-anim .bp-hero-deco .bp-dot:nth-child(2) { animation-duration: 6s;   animation-delay: -2s; }
.bp-anim .bp-hero-deco .bp-dot:nth-child(3) { animation-duration: 8.5s; animation-delay: -4s; }
.bp-anim .bp-hero-deco .bp-dot:nth-child(4) { animation-duration: 6.5s; animation-delay: -1s; }
.bp-anim .bp-hero-deco .bp-dot:nth-child(5) { animation-duration: 9s;   animation-delay: -3s; }
/* parallax: js/brand_page.js scrive il transform inline sui gruppi, qui la morbidezza (e il ritorno a 0 in uscita) */
.bp-anim .bp-hero-deco [data-bp-depth] {
    transition: transform .6s ease-out;
    will-change: transform;
}

/* ---------- decorazione della CTA finale ---------- */
.bp-anim .bp-final-deco .bp-blob-a {
    animation: bp-drift 22s ease-in-out infinite alternate;
}
.bp-anim .bp-final-deco .bp-blob-b {
    animation: bp-drift-b 28s ease-in-out infinite alternate;
}
.bp-anim .bp-final-deco .bp-orbit-1 {
    animation: bp-spin 60s linear infinite;
}
.bp-anim .bp-final-deco .bp-orbit-2 {
    animation: bp-spin 80s linear infinite reverse;
}

/* ---------- databar: filo luminoso che attraversa il bordo superiore ---------- */
.bp-anim .bp-databar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    height: 1px;
    background: linear-gradient(90deg, rgba(242, 168, 196, 0), #F2A8C4, rgba(242, 168, 196, 0));
    transform: translateX(-100%);
    pointer-events: none;
    animation: bp-sweep 6s cubic-bezier(.45, 0, .25, 1) 1s infinite;
}

/* ---------- reveal on scroll ----------
   Lo stato nascosto non ha transizione (sparisce subito quando il JS aggiunge la classe, solo sotto la piega);
   la transizione c'e' solo verso lo stato visibile, che torna a opacity 1 / transform none. */
.bp-anim .bp-reveal {
    opacity: 0;
    transform: translateY(18px);
}
.bp-anim .bp-reveal.bp-in {
    opacity: 1;
    transform: none;
    transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}

/* stagger: animano i figli diretti (colonne, li, details, foto), non il contenitore; l'hover-lift sta sugli elementi
   interni (.bp-flow-step, .bp-cond, .bp-cat), cosi' il ritardo dello stagger non rallenta l'hover */
.bp-anim .bp-stagger > * {
    opacity: 0;
    transform: translateY(16px);
}
.bp-anim .bp-stagger.bp-in > * {
    opacity: 1;
    transform: none;
    transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
    transition-delay: calc(var(--bp-i, 0) * 90ms);
}
/* le foto del mosaico hanno gia' una transizione di hover (ombra e bordo, .16s): la si conserva, senza ritardo */
.bp-anim .bp-ed-mosaic.bp-stagger.bp-in > .bp-ed-shot {
    transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .16s, border-color .16s;
    transition-delay: calc(var(--bp-i, 0) * 90ms), calc(var(--bp-i, 0) * 90ms), 0s, 0s;
}

/* kicker delle sezioni: su desktop le lettere si stringono fino al .12em normale; su mobile solo dissolvenza
   (lo spaziamento largo potrebbe mandare a capo un kicker lungo e far saltare il testo sotto) */
.bp-anim .bp-kick {
    opacity: 0;
}
.bp-anim .bp-kick.bp-in {
    opacity: 1;
    animation: bp-fade .7s ease both;
}
@media (min-width: 768px) {
    .bp-anim .bp-hero .bp-kicker,
    .bp-anim .bp-kick.bp-in {
        animation: bp-track-in .9s cubic-bezier(.2, .7, .2, 1) both;
    }
}

/* linea dei passi: si disegna da sinistra quando il wrapper entra (il wrapper non sbiadisce, riceve solo bp-in).
   Non si usa il dashoffset perche' il dasharray serve gia' al tratteggio. */
.bp-anim .bp-flow-line {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
}
.bp-anim .bp-flow-wrap.bp-in .bp-flow-line {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
    transition: -webkit-clip-path 1.4s cubic-bezier(.6, 0, .2, 1) .15s, clip-path 1.4s cubic-bezier(.6, 0, .2, 1) .15s;
}

/* ---------- micro-interazioni (anche senza bp-anim) ---------- */
@media (prefers-reduced-motion: no-preference) {
    /* FAQ: la risposta entra morbida; il segno fa un giro intero (a riposo identico: il "–" ruotato di 180 gradi
       potrebbe spostarsi in verticale di un paio di px, perche' il trattino non sta al centro della riga) */
    .bp-faq details[open] p {
        animation: bp-fade-up-sm .35s ease-out both;
    }
    .bp-faq summary::after {
        display: inline-block;
        transition: transform .3s ease;
    }
    .bp-faq details[open] summary::after {
        transform: rotate(360deg);
    }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    /* card dei passi e schede condizione: si sollevano (il bordo superiore delle schede resta il suo) */
    .bp-flow-step,
    .bp-cond {
        transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }
    .bp-flow-step:hover,
    .bp-cond:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 24px rgba(149, 10, 70, .10);
    }
    .bp-flow-num {
        transform-origin: left center;
        transition: transform .25s ease;
    }
    .bp-flow-step:hover .bp-flow-num {
        transform: scale(1.15);
    }

    /* categorie: fondo rosa che entra da sinistra + freccia; a riposo entrambi invisibili */
    .bp-cat {
        position: relative;
        overflow: hidden;
        z-index: 0;
    }
    .bp-cat::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        background: #FBEEF3;
        transform: scaleX(0);
        transform-origin: 0 50%;
        transition: transform .35s cubic-bezier(.2, .7, .2, 1);
        pointer-events: none;
    }
    .bp-cat:hover::before {
        transform: scaleX(1);
    }
    .bp-cat::after {
        content: "\2192";
        position: absolute;
        right: 18px;
        top: 50%;
        color: #950A46;
        opacity: 0;
        transform: translate(-8px, -50%);
        transition: opacity .25s ease, transform .25s ease;
        pointer-events: none;
    }
    .bp-cat:hover::after {
        opacity: 1;
        transform: translate(0, -50%);
    }

    /* foto: zoom lieve dentro la cornice; didascalie sopra la foto ingrandita (fondo bianco = quello della cornice) */
    .bp-ed-shot { overflow: hidden; }
    .bp-shot img,
    .bp-ed-shot img {
        transition: transform .6s cubic-bezier(.2, .7, .2, 1);
    }
    .bp-shot:hover img,
    .bp-ed-shot:hover img {
        transform: scale(1.04);
    }
    .bp-shot figcaption,
    .bp-ed-shot span {
        position: relative;
        z-index: 1;
        background: #FFFFFF;
    }

    /* bottoni: riflesso che attraversa il bottone all'hover (all'uscita torna indietro senza transizione) */
    .bp-btn {
        position: relative;
        overflow: hidden;
    }
    .bp-btn::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 60%;
        background: linear-gradient(105deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, .35) 50%, rgba(255, 255, 255, 0) 80%);
        transform: translateX(-110%);
        pointer-events: none;
    }
    .bp-btn:hover::after {
        transform: translateX(180%);
        transition: transform .7s ease;
    }

    /* archivio: sottolineatura magenta che si stende */
    .bp-archivio a {
        background-image: linear-gradient(#950A46, #950A46);
        background-repeat: no-repeat;
        background-position: 0 100%;
        background-size: 0% 1px;
        transition: background-size .3s ease;
    }
    .bp-archivio a:hover {
        background-size: 100% 1px;
    }
}

/* ---------- reduced-motion: tutto fermo e visibile (vale anche se la preferenza cambia a pagina aperta) ---------- */
@media (prefers-reduced-motion: reduce) {
    .bp-anim .bp-reveal,
    .bp-anim .bp-stagger > *,
    .bp-anim .bp-kick {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
    .bp-anim .bp-crumbbar .breadcrumb,
    .bp-anim .bp-crumbbar .bp-h1,
    .bp-anim .bp-hero .bp-kicker,
    .bp-anim .bp-hero-intro,
    .bp-anim .bp-hero-h2,
    .bp-anim .bp-hero .bp-lede,
    .bp-anim .bp-hero .bp-cta-row,
    .bp-anim .bp-hero .bp-shot,
    .bp-anim .bp-hero .bp-shot img,
    .bp-hero-deco *,
    .bp-final-deco * {
        animation: none !important;
        transition: none !important;
    }
    .bp-anim .bp-crumbbar::after,
    .bp-anim .bp-databar::before,
    .bp-progress {
        display: none !important;
    }
    .bp-anim .bp-flow-line {
        -webkit-clip-path: none !important;
        clip-path: none !important;
        transition: none !important;
    }
}