/* =====================================================================
   Variante home "Alloro" — prime due schermate storiche, aggiornate.
   Caricato SOLO nella home, dopo bf.css (invariato).
   Senza JS / touch / movimento ridotto: striscia orizzontale nativa.
   Desktop con mouse (classe .is-pinned aggiunta da home-rev.js): sezione
   agganciata con position: sticky, la striscia avanza con lo scorrimento verticale.
   ===================================================================== */

/* ---------- Schermata 1: apertura e film nella schermata ---------- */
.bh-hero { position: relative; overflow: hidden; }
.bh-hero__ui { display: grid; justify-items: center; gap: var(--s3); transition: opacity 1s var(--ease), visibility 0s linear 0s; }
.bh-hero.is-playing .bh-hero__ui { opacity: 0; visibility: hidden; transition: opacity 1s var(--ease), visibility 0s linear 1s; }
.bh-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; z-index: 1; }
.bh-hero__close { position: absolute; top: 16px; right: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border: 1px solid rgba(255,255,255,.75); background: rgba(0,0,0,.7); color: #fff; font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; }
.bh-hero__close:hover { background: #fff; color: #000; }
.bh-hero .bf-ctrl { border-radius: 40px; padding-right: 12px; }
.bh-hero .bf-ctrl:focus-visible { outline-offset: 6px; }
/* Il comando "Scorri per entrare" ricorda la freccia animata storica: lieve oscillazione, disattivata con movimento ridotto */
.bh-ctrl--scroll .bf-chev { animation: bh-nudge 2.4s var(--ease) infinite; }
@keyframes bh-nudge { 0%, 70%, 100% { transform: translateY(-3px) rotate(45deg); } 85% { transform: translateY(3px) rotate(45deg); } }

/* ---------- Schermata 2: titolo "Power Marine" + V bianca + archivio ---------- */
.bh-gal { position: relative; background: var(--paper); }
.bh-gal__sticky { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; background: #000; }
.bh-gal__strip, .bh-gal__text { min-width: 0; }
.bh-gal__text { background: var(--paper); padding: clamp(40px, 6vh, 88px) var(--gutter) clamp(28px, 4vh, 56px); text-align: center; position: relative; z-index: 1; }
.bh-gal__inner { max-width: 780px; margin: 0 auto; }
.bh-gal h2 { color: #111; margin-bottom: var(--s2); }
.bh-gal__lead { color: #000; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); line-height: 1.4; margin-bottom: 10px; }
.bh-gal__excerpt { color: var(--text-2); max-width: 66ch; margin: 0 auto; }
.bh-gal__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 32px; margin-top: var(--s2); }
.bh-skip { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--text-2) !important; font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; text-decoration: underline; text-underline-offset: .35em; }
.bh-skip:hover { color: #000 !important; }

/* Striscia: altezza come nella storica (metà schermo su desktop, quasi tutto lo schermo su mobile) */
.bh-gal__strip { position: relative; display: flex; flex-direction: column; background: #000; }
.bh-gal__vee { position: absolute; top: -1px; left: 0; width: 100%; height: clamp(28px, 10.1vw, 150px); fill: var(--paper); z-index: 2; pointer-events: none; }
.bh-gal__track { list-style: none; margin: 0; padding: 0; height: clamp(300px, 62svh, 560px); flex: none; display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #555 #000; }
.bh-gal__track:focus { outline: none; }
.bh-gal__item { flex: none; height: 100%; aspect-ratio: var(--ar); scroll-snap-align: start; }
.bh-gal__item a { display: block; height: 100%; position: relative; }
.bh-gal__item .pm-pic { width: 100%; height: 100%; }
.bh-gal__item img { filter: saturate(.9); transition: filter var(--dur), transform var(--dur-slow) var(--ease); }
.bh-gal__item a:hover img { filter: none; }
.bh-gal__item a:focus-visible { outline: 3px solid var(--focus-on-dark); outline-offset: -6px; }
.bh-gal__item a:focus-visible::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 6px rgba(0,0,0,.6); pointer-events: none; }

/* Barra comandi sotto la striscia: indicazione di scorrimento, avanzamento, contatore, frecce */
.bh-gal__bar { display: flex; align-items: center; gap: 12px 16px; padding: 10px var(--gutter); background: #000; color: var(--on-dark); flex-wrap: wrap; }
.bh-gal__hint { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark); margin-right: auto; min-height: var(--tap); }
.bh-gal__hint-icon { width: 22px; height: 34px; border: 1.5px solid currentColor; border-radius: 11px; position: relative; flex: none; }
.bh-gal__hint-icon::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: currentColor; animation: bh-wheel 1.8s var(--ease) infinite; }
@keyframes bh-wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
.bh-hint--wheel { display: none; }
.is-pinned .bh-hint--wheel { display: inline; }
.is-pinned .bh-hint--touch { display: none; }
.bh-gal__progress { flex: 1 1 60px; max-width: 420px; height: 3px; background: #333; position: relative; overflow: hidden; }
.bh-gal__progress span { position: absolute; inset: 0; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: var(--red); }
.bh-gal__count { min-width: 9ch; text-align: center; font-variant-numeric: tabular-nums; color: #fff; font-size: .9375rem; }
.bh-gal__bar .bf-circle[aria-disabled="true"] { opacity: .35; cursor: default; }
.bh-gal__bar .bf-circle[aria-disabled="true"]:hover { background: rgba(0,0,0,.45); color: #fff; }
@media (max-width: 560px) {
  .bh-gal__hint { flex: 1 1 100%; margin-right: 0; }
  .bh-gal__progress { flex: 1 1 auto; }
}

/* ---------- Modalità agganciata (desktop con mouse, movimento non ridotto) ---------- */
.bh-gal.is-pinned .bh-gal__sticky { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow: hidden; }
.bh-gal.is-pinned .bh-gal__strip { min-height: 0; overflow: hidden; }
.bh-gal.is-pinned .bh-gal__track { flex: 1 1 auto; height: auto; min-height: 0; overflow: visible; width: max-content; scroll-snap-type: none; will-change: transform; transform: translate3d(var(--x, 0px), 0, 0); }

/* ---------- Movimento ridotto: stessa sequenza, nessuna animazione decorativa ---------- */
@media (prefers-reduced-motion: reduce) {
  .bh-hero__ui, .bh-hero.is-playing .bh-hero__ui { transition: none; }
  .bh-ctrl--scroll .bf-chev, .bh-gal__hint-icon::after { animation: none; }
  .bh-gal__track { scroll-behavior: auto; }
}

/* Indice di sezione (B finale) compatto durante le prime due schermate: solo pallini, etichette al passaggio o al focus */
.bh-rail-compact .bf-rail { background: transparent; }
.bh-rail-compact .bf-rail a { min-width: var(--tap); padding: 0 12px; gap: 0; }
.bh-rail-compact .bf-rail a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bh-rail-compact .bf-rail a::before { width: 10px; height: 10px; background: rgba(0,0,0,.45); border-color: #fff; }
.bh-rail-compact .bf-rail a[aria-current]::before { background: var(--red); border-color: var(--red); }
.bh-rail-compact .bf-rail:hover, .bh-rail-compact .bf-rail:focus-within { background: rgba(12,12,13,.86); }
.bh-rail-compact .bf-rail:hover a span, .bh-rail-compact .bf-rail:focus-within a span { position: static; width: auto; height: auto; clip: auto; margin-left: 10px; }

/* =====================================================================
   VERSIONE 2 — correzioni del cliente (slide 1–4)
   ===================================================================== */

/* ---------- Slide 1: apertura che riempie esattamente l'area visibile iniziale ----------
   --bh2-top = altezza reale di banner + header (misurata da home-v2.js; fallback 96px).
   lvh: l'apertura copre anche l'area liberata quando le barre mobili si ritraggono (nessun salto);
   il padding inferiore (lvh - svh) mantiene la freccia dentro l'area inizialmente visibile. */
:root { --bh2-top: 96px; }
.bh2-hero { min-height: calc(100vh - var(--bh2-top)); padding: 0 var(--gutter); display: block; place-content: initial; }
@supports (height: 100lvh) {
  .bh2-hero { min-height: calc(100lvh - var(--bh2-top)); padding-bottom: calc(100lvh - 100svh); }
}
.bh2-hero__ui { min-height: inherit; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 0; padding: clamp(16px, 4vh, 48px) 0 clamp(12px, 3vh, 32px); }
@supports (height: 100lvh) { .bh2-hero__ui { min-height: calc(100svh - var(--bh2-top)); } }
.bh2-hero__center { flex: 1 1 auto; display: grid; place-content: center; justify-items: center; gap: clamp(12px, 3vh, 28px); text-align: center; }
.bh2-hero__ctrls { margin-top: 0; }
.bh2-hero .bf-hero__title img { width: min(332px, 64vw, 38vh); height: auto; }
.bh2-hero .bf-hero__lead { font-size: clamp(1rem, .9rem + .6vw, 1.5rem); }

/* Freccia di scorrimento: centrata, sotto "Guarda il film", senza testo visibile (nome accessibile) */
.bh2-arrow { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: #fff; text-decoration: none; margin-top: clamp(8px, 2vh, 24px); }
.bh2-arrow__icon { position: relative; width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.85); display: grid; place-items: center; transition: background var(--dur), color var(--dur); }
.bh2-arrow__icon span { width: 14px; height: 14px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); animation: bh2-arrow 1.8s var(--ease) infinite; }
@keyframes bh2-arrow { 0%, 100% { transform: translateY(-5px) rotate(45deg); opacity: .65; } 50% { transform: translateY(4px) rotate(45deg); opacity: 1; } }
.bh2-arrow:hover .bh2-arrow__icon { background: #fff; color: #000; }
.bh2-arrow:focus-visible { outline: 3px solid var(--focus-on-dark); outline-offset: 4px; }

/* ---------- Slide 2: nessun vuoto oltre l'ultima foto ---------- */
.bh-gal__track { overscroll-behavior-x: none; }           /* niente rimbalzo che mostri il fondo oltre l'ultima foto */
.bh-gal__item .pm-pic { background-color: var(--ph); }

/* ---------- Slide 3: categoria = fotografia (con box titoli contenuto) + modelli ---------- */
.bh2-cat { position: relative; isolation: isolate; background: var(--night); }
.bh2-cat__photo { position: relative; isolation: isolate; overflow: hidden; min-height: min(62svh, 620px); display: grid; place-items: center; text-align: center; background: var(--black); contain: paint; }
@media (max-width: 760px) { .bh2-cat__photo { min-height: 46svh; } }
.bh2-cat__img { position: absolute; inset: 0; z-index: 0; }
.bh2-cat__shade { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at center, rgba(0,0,0,.66) 0%, rgba(0,0,0,.5) 55%, rgba(0,0,0,.55) 100%); }
@media (max-width: 760px) { .bh2-cat__shade { background: rgba(0,0,0,.6); } }
.bh2-cat__title { position: relative; z-index: 2; padding: var(--s5) var(--gutter); max-width: 900px; }
.bh2-cat__title h2 { color: #fff; font-size: clamp(2.25rem, 1.4rem + 4.5vw, 5.5rem); text-transform: uppercase; letter-spacing: .05em; font-weight: 300; overflow-wrap: anywhere; }
.bh2-cat__title p { color: #fff; font-size: 1.125rem; margin-top: 10px; }

/* Box titoli: SOLO dentro la fotografia della categoria; nascosto dove la foto non lo contiene */
:root { --bh2-index-w: 236px; --bh2-index-left: 24px; }
.bh2-index { display: none; }
@media (min-width: 1024px) and (min-height: 640px) {
  .bh2-cat__photo { min-height: max(min(62svh, 620px), 480px); }
  .bh2-index { display: block; position: absolute; z-index: 3; left: var(--bh2-index-left); top: 50%; transform: translateY(-50%); width: var(--bh2-index-w); max-height: calc(100% - 32px); overflow: hidden; background: rgba(12,12,13,.72); padding: 6px 0; }
  .bh2-index ol { list-style: none; margin: 0; padding: 0; }
  .bh2-index a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px 0 12px; color: var(--on-dark); text-decoration: none; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
  .bh2-index a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1px solid currentColor; flex: none; }
  .bh2-index a:hover, .bh2-index a[aria-current] { color: #fff; }
  .bh2-index a[aria-current]::before { background: var(--red); border-color: var(--red); }
  /* il titolo della categoria non entra mai sotto il box: margini laterali simmetrici */
  .bh2-cat__title { max-width: calc(100% - 2 * (var(--bh2-index-left) + var(--bh2-index-w) + 16px)); }
}

/* Modelli: gruppo centrato, margini laterali simmetrici (oltre l'ingombro del box titoli su desktop) */
.bh2-models { --pad: var(--gutter); background: var(--night); padding: var(--s4) var(--pad) var(--s5); }
@media (min-width: 1024px) { .bh2-models { --pad: max(var(--gutter), calc(var(--bh2-index-left) + var(--bh2-index-w) + 16px)); } }
.bh2-models__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; max-width: 1360px; margin: 0 auto var(--s2); min-height: 48px; }
.bh2-models__count { font-size: var(--fs-label); letter-spacing: var(--track); text-transform: uppercase; color: var(--on-dark-2); }
.bh2-models__ctrl { display: flex; gap: 10px; }
.bh2-models__ctrl .bf-circle[aria-disabled="true"] { opacity: .35; cursor: default; }
.bh2-models__ctrl .bf-circle[aria-disabled="true"]:hover { background: rgba(0,0,0,.45); color: #fff; }
.bh2-models__track { list-style: none; margin: 0 auto; padding: 4px 0 12px; max-width: 1360px; display: flex; gap: var(--s3); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 0; scrollbar-width: thin; scrollbar-color: #555 transparent; }
/* centratura sicura: margini automatici sulla prima e sull'ultima card centrano il gruppo quando c'è spazio;
   quando la striscia scorre valgono 0 (nessuno spazio extra all'inizio o alla fine, nessun taglio) */
.bh2-models__item:first-child { margin-left: auto; }
.bh2-models__item:last-child { margin-right: auto; }
.bh2-models__item { flex: 0 0 clamp(220px, 21vw, 300px); scroll-snap-align: start; }
@media (max-width: 760px) { .bh2-models__track { gap: var(--s2); } .bh2-models__item { flex-basis: min(74%, 300px); } }
@media (max-width: 360px) { .bh2-models__item { flex-basis: 80%; } }
.bh2-models__item .bf-tile:focus-within { outline-offset: 2px; }
.bh2-models__dots { display: flex; justify-content: center; gap: 8px; margin-top: var(--s2); }
.bh2-models__dots span { width: 8px; height: 8px; border-radius: 50%; background: #555; transition: background var(--dur); }
.bh2-models__dots span.is-on { background: var(--red); }
.bh2-models__all { max-width: 1360px; margin: var(--s3) auto 0; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .bh2-arrow__icon span { animation: none; transform: translateY(-3px) rotate(45deg); }
  .bh2-models__track { scroll-behavior: auto; }
}
/* Fine della striscia raggiungibile e stabile: l'ultima foto si aggancia al bordo destro. Senza questo,
   in Firefox il ri-aggancio dopo il caricamento delle immagini riportava l'ultima foto al bordo sinistro
   (fine della gallery non più visibile). */
.bh-gal__item:last-child, .bh2-models__item:last-child { scroll-snap-align: end; }