/* ═══════════════════════════════════════════════════════════════════════
   1165 · PAGINA MARCHIO (single-marchio.php) — caricato SOLO su quelle pagine.
   È lo stile della prova approvata da Dario il 16/09/2026. I token (--gold, --ink,
   --smoke, --sand, --ivory, --ff-*) e le classi comuni (.section-*, .reveal,
   .marquee-*, .btn-*) stanno in main.css: questo file ci si appoggia, non li ridefinisce.
   ═══════════════════════════════════════════════════════════════════════ */
/* ── Pagina marchio — stili di prova, stessi token del tema ── */

/* HERO fotografico a tutta pagina: foto che respira (zoom lento), raggio dorato, testo sopra */
.bp-hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.bp-hero-img{position:absolute;inset:0;background-position:78% 45%;background-size:cover;background-repeat:no-repeat;transform:scale(1.12) translate(9%,0);animation:bp-kenburns 22s ease-in-out infinite alternate;will-change:transform;filter:saturate(.85)}
@keyframes bp-kenburns{from{transform:scale(1.12) translate(9%,0)}to{transform:scale(1.22) translate(11%,-3%)}}
.bp-hero-veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,7,10,.96) 0%,rgba(8,7,10,.55) 45%,rgba(8,7,10,.25) 100%)}
.bp-hero-ray{position:absolute;top:-20%;left:62%;width:2px;height:140%;background:linear-gradient(to bottom,transparent,rgba(212,168,67,.55) 35%,rgba(212,168,67,.12) 75%,transparent);transform:rotate(-14deg);transform-origin:top center;animation:bp-ray 9s ease-in-out infinite;filter:blur(.6px)}
@keyframes bp-ray{0%,100%{opacity:.35;left:62%}50%{opacity:1;left:58%}}
.bp-hero .section-inner{position:relative;z-index:2;padding-top:clamp(120px,18vh,180px);padding-bottom:clamp(56px,8vh,96px);width:100%}
.bp-crumb{font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sand);margin-bottom:22px}
.bp-crumb a{color:var(--sand);text-decoration:none;border-bottom:1px solid rgba(212,168,67,.35);padding-bottom:2px}
.bp-crumb a:hover{color:var(--gold)}
.bp-crumb span{margin:0 8px;opacity:.5}
.bp-hero h1{font-family:var(--ff-display);font-weight:300;font-size:clamp(2.6rem,6.5vw,6rem);line-height:1.02;color:#fff;max-width:14ch;margin:0}
.bp-hero h1 em{font-style:italic;color:var(--gold)}
.bp-hero-lead{max-width:56ch;font-family:var(--ff-display);font-size:clamp(1.15rem,1.6vw,1.45rem);line-height:1.5;color:var(--ivory);margin-top:28px;font-weight:300}
.bp-hero-scroll{position:absolute;right:clamp(24px,5vw,64px);bottom:clamp(56px,8vh,96px);z-index:2;font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);writing-mode:vertical-rl;display:flex;align-items:center;gap:14px}
.bp-hero-scroll::after{content:'';width:1px;height:56px;background:linear-gradient(var(--gold),transparent);animation:scroll-pulse 2.2s ease-in-out infinite}

/* Riga di stacco che scorre (riusa il marquee del tema) */
.bp-marquee .marquee-item{gap:52px}

/* Sezioni */
.bp-sez{padding:clamp(64px,9vh,110px) 0;border-top:1px solid rgba(212,168,67,.1)}
.bp-sez.alt{background:var(--smoke)}
.bp-sez .section-title{margin-top:8px}
.bp-marchio{margin:0 0 22px;overflow:hidden;aspect-ratio:1;border:1px solid rgba(212,168,67,.15)}.bp-marchio img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02);transition:transform 1.6s var(--ease-out)}.bp-marchio:hover img{transform:scale(1.08)}
.bp-intro{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,72px);align-items:start;margin-top:36px}
.bp-intro p{font-size:1rem;line-height:1.8;color:var(--sand);margin:0 0 1.15em}
.bp-fatti{list-style:none;margin:0;padding:0;border-top:1px solid rgba(212,168,67,.18)}
.bp-fatti li{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid rgba(212,168,67,.12);font-size:.9rem;color:var(--ivory)}
.bp-fatti li span:first-child{font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sand);padding-top:3px;white-space:nowrap}
.bp-fatti li span:last-child{text-align:right}

/* ACCENDI LA LUCE: la foto è al buio, il mouse è la torcia; su touch c'è l'interruttore */
.bp-luce{position:relative;margin-top:44px;aspect-ratio:16/8;overflow:hidden;border:1px solid rgba(212,168,67,.15);cursor:none;background:#000}
.bp-luce img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.bp-luce .buio{filter:brightness(.13) saturate(.4);transition:filter 1.4s var(--ease-out)}
.bp-luce .chiaro{-webkit-mask:radial-gradient(circle var(--r,0px) at var(--x,50%) var(--y,50%),#000 0%,rgba(0,0,0,.75) 45%,transparent 100%);mask:radial-gradient(circle var(--r,0px) at var(--x,50%) var(--y,50%),#000 0%,rgba(0,0,0,.75) 45%,transparent 100%);transition:-webkit-mask-size .3s,mask-size .3s}
.bp-luce.acceso .buio{filter:brightness(1) saturate(1)}
.bp-luce.acceso .chiaro{opacity:0}
.bp-luce-tag{position:absolute;left:clamp(18px,3vw,36px);bottom:clamp(18px,3vw,36px);z-index:3;font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:14px;pointer-events:none}
.bp-luce-tag i{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 16px rgba(212,168,67,.9);animation:point-pulse 2.4s ease-in-out infinite}
.bp-luce-btn{position:absolute;right:clamp(18px,3vw,36px);bottom:clamp(18px,3vw,36px);z-index:3;background:rgba(8,7,10,.7);border:1px solid rgba(212,168,67,.5);color:var(--ivory);font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;padding:12px 18px;cursor:pointer;backdrop-filter:blur(6px);transition:background .3s,color .3s}
.bp-luce-btn:hover,.bp-luce.acceso .bp-luce-btn{background:var(--gold);color:var(--ink)}
.bp-luce-cursore{position:absolute;z-index:4;width:18px;height:18px;border:1px solid var(--gold);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;opacity:0;box-shadow:0 0 24px rgba(212,168,67,.6)}
.bp-luce:hover .bp-luce-cursore{opacity:1}
@media (hover:none){.bp-luce{cursor:auto}.bp-luce-cursore{display:none}}

/* Perché: due colonne */
.bp-due{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);margin-top:36px}
.bp-due p{font-size:.95rem;line-height:1.75;color:var(--sand);margin:0 0 1.1em}
.bp-due h3{font-family:var(--ff-display);font-weight:400;font-size:1.35rem;color:#fff;margin:0 0 12px}

/* FAMIGLIE: schede fotografiche, la foto "si accende" al passaggio */
.bp-fam{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bp-fam li{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--smoke);isolation:isolate}
.bp-fam li:nth-child(1){grid-column:span 2;aspect-ratio:auto}
.bp-fam img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.55) saturate(.8);transform:scale(1.02);transition:transform 1.4s var(--ease-out),filter .9s var(--ease-out)}
.bp-fam li:hover img,.bp-fam li:focus-within img{transform:scale(1.1);filter:brightness(1) saturate(1)}
.bp-fam li::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(8,7,10,.92) 0%,rgba(8,7,10,.2) 55%,transparent 100%);z-index:1}
.bp-fam-txt{position:absolute;left:0;right:0;bottom:0;padding:22px;z-index:2;transform:translateY(26px);transition:transform .7s var(--ease-out)}
.bp-fam li:hover .bp-fam-txt,.bp-fam li:focus-within .bp-fam-txt{transform:translateY(0)}
.bp-fam i{font-style:normal;font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:6px}
.bp-fam b{font-family:var(--ff-display);font-weight:400;font-size:1.6rem;color:#fff;display:block;line-height:1.1}
.bp-fam small{display:block;font-size:.84rem;line-height:1.55;color:var(--sand);margin-top:8px;opacity:0;transition:opacity .6s .15s}
.bp-fam li:hover small,.bp-fam li:focus-within small{opacity:1}
.bp-fam a{position:absolute;inset:0;z-index:3;text-indent:-9999px}
.bp-nota{margin-top:22px;font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.1em;color:var(--sand);opacity:.8}


/* Numeri che salgono */
.bp-numeri{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:40px;border-top:1px solid rgba(212,168,67,.15);padding-top:32px}
.bp-num{font-family:var(--ff-display);font-weight:300;font-size:clamp(2.6rem,5vw,4.2rem);color:#fff;line-height:1}
.bp-num em{font-style:normal;color:var(--gold)}
.bp-num-l{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sand);margin-top:10px}

/* FAQ, CTA, altri marchi */
.bp-faq{margin-top:32px;max-width:78ch}
.bp-faq details{border-top:1px solid rgba(212,168,67,.15);padding:18px 0}
.bp-faq details:last-child{border-bottom:1px solid rgba(212,168,67,.15)}
.bp-faq summary{cursor:pointer;list-style:none;font-family:var(--ff-display);font-size:1.25rem;color:#fff;display:flex;justify-content:space-between;gap:16px}
.bp-faq summary::-webkit-details-marker{display:none}
.bp-faq summary::after{content:'+';color:var(--gold);font-family:var(--ff-mono)}
.bp-faq details[open] summary::after{content:'–'}
.bp-faq p{margin:12px 0 0;font-size:.93rem;line-height:1.7;color:var(--sand)}
.bp-cta{margin-top:40px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.bp-altri{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.bp-altri a{font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sand);text-decoration:none;border:1px solid rgba(212,168,67,.18);padding:9px 14px;transition:color .25s,border-color .25s}
.bp-altri a:hover{color:var(--gold);border-color:var(--gold)}
@media (max-width:860px){.bp-intro,.bp-due{grid-template-columns:1fr}.bp-fam{grid-template-columns:1fr 1fr}.bp-fam li:nth-child(1){grid-column:span 2;aspect-ratio:3/2}.bp-numeri{grid-template-columns:1fr 1fr}.bp-fam-txt{transform:none}.bp-fam small{opacity:1}.bp-fam img{filter:brightness(.8)}.bp-luce{aspect-ratio:4/3}.bp-hero-scroll{display:none}}
@media (prefers-reduced-motion:reduce){.bp-hero-img,.bp-hero-ray,.bp-luce-tag i{animation:none}}