/* Palette nero/verde per la sezione "birre trentine": il trattino
   dell'eyebrow segue lo stesso verde del testo invece dell'amber globale. */
.signature .eyebrow::before { background: var(--green); }

/*
 * Scena pseudo-3D per le birre trentine / di casa (La Bionda, Lagorai).
 * CSS transform + perspective, nessun WebGL. Colore guidato da --accent,
 * impostato via JS (trentine-3d.js) in base a data-accent di ogni slide.
 */
.trentine-scene {
  /* Sfondo verde pieno: la bottiglia (ora ritagliata, senza sfondo) risalta
     in primo piano. --accent resta per il rim-light e i dettagli prodotto,
     sovrascritto per-slide da trentine-3d.js in base a data-accent. */
  --accent: #4a7c59;
  position: relative;
  border-radius: 24px;
  /* Gradiente verde intensificato del 15% (velo aggiuntivo sopra il
     gradiente di base) su richiesta esplicita. */
  background:
    radial-gradient(ellipse at 50% 30%, rgba(74,124,89,0.15) 0%, transparent 100%),
    radial-gradient(ellipse at 50% 30%, var(--green-light) 0%, var(--green) 55%, var(--green-deep) 100%);
  padding: 56px 24px 40px;
  overflow: hidden;
}

.trentine-stage {
  position: relative;
  width: 100%;
  height: clamp(420px, 46vw, 620px);
  perspective: 1200px;
  touch-action: pan-y;
  /* Senza questo, la slide successiva/precedente (leggermente traslata di
     lato per l'effetto "sbircia") sborda nella colonna di testo a destra
     come una filigrana: la contiene entro i confini della colonna bottiglia. */
  overflow: hidden;
}

.trentine-track {
  position: relative;
  height: 100%;
  transform-style: preserve-3d;
}

.trentine-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1), opacity 0.6s cubic-bezier(0.16,1,0.3,1), filter 0.6s ease;
  will-change: transform, opacity;
  cursor: grab;
}
.trentine-slide:active { cursor: grabbing; }
.trentine-slide[data-pos="hidden"] { opacity: 0; pointer-events: none; }

.trentine-slide-visual {
  /* Bottiglia ritagliata (sfondo rimosso), molto grande in primo piano
     sullo sfondo verde della scena. */
  position: relative;
  width: clamp(260px, 38vw, 460px);
  height: clamp(440px, 60vw, 680px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.trentine-slide-visual img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 30px 34px color-mix(in srgb, var(--accent) 55%, transparent));
  border-radius: 8px;
}
.trentine-slide[data-pos="center"] .trentine-slide-visual img {
  animation: trentine-idle-rotate 9s ease-in-out infinite;
}
.trentine-scene:not(.in-view) .trentine-slide-visual img { animation-play-state: paused; }

@keyframes trentine-idle-rotate {
  0%, 100% { transform: rotateY(-6deg); }
  50% { transform: rotateY(6deg); }
}

/* Rim light colorato dietro il prodotto attivo */
.trentine-slide[data-pos="center"] .trentine-slide-visual::before {
  content: "";
  position: absolute;
  inset: -18% -30%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 65%, transparent) 0%, transparent 70%);
  filter: blur(6px);
  z-index: -1;
}

.trentine-slide-fallback {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  border: 1px dashed rgba(250,246,238,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(250,246,238,0.5);
  font-size: 13px;
  text-align: center;
  padding: 12px;
}

/* Layout a due colonne stile "product page": bottiglia a sinistra,
   nome/descrizione/specifiche a destra. Le frecce ora sono ai bordi
   dell'intera scena (non solo dello stage). */
.trentine-columns {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) 1.1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
@media (max-width: 860px) {
  .trentine-columns { grid-template-columns: 1fr; }
}
.trentine-stage-col { display: flex; flex-direction: column; align-items: stretch; width: 100%; }

.trentine-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(250,246,238,0.25);
  background: rgba(10,9,8,0.4);
  color: var(--cream, #faf6ee);
  font-size: 20px;
  cursor: pointer;
  z-index: 5;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.trentine-arrow:hover { background: color-mix(in srgb, var(--accent) 40%, rgba(10,9,8,0.4)); border-color: var(--accent); }
.trentine-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.trentine-arrow-prev { left: 16px; }
.trentine-arrow-next { right: 16px; }
@media (max-width: 640px) {
  .trentine-arrow { width: 36px; height: 36px; font-size: 16px; }
  .trentine-arrow-prev { left: 6px; }
  .trentine-arrow-next { right: 6px; }
}

/* Caselle con il nome della birra al posto dei semplici pallini:
   stesso font (Montserrat) del resto della scheda prodotto. */
.trentine-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}
.trentine-dot {
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(250,246,238,0.75);
  background: rgba(250,246,238,0.05);
  border: 1px solid rgba(250,246,238,0.18);
  border-radius: 999px;
  padding: 10px 22px;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.trentine-dot:hover { border-color: var(--accent); color: var(--cream, #faf6ee); }
.trentine-dot[aria-selected="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--black, #0a0908);
  font-weight: 600;
}
.trentine-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.trentine-detail {
  color: var(--cream, #faf6ee);
  text-align: left;
}
.trentine-detail-panel[hidden] { display: none; }
.trentine-detail-tag { color: var(--accent); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.trentine-detail-name {
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  font-size: clamp(34px, 5.2vw, 60px);
  line-height: 1.02;
  margin: 10px 0 6px;
}
.trentine-detail-style { color: rgba(250,246,238,0.7); margin: 0 0 18px; }
.trentine-detail-desc { color: rgba(250,246,238,0.85); line-height: 1.7; margin: 0 0 28px; max-width: 46em; }

/* Specifiche in riga, numero grande + etichetta piccola, divise da linee
   verticali sottili — stile "scheda prodotto" invece che caselle piene. */
.trentine-detail-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 22px 0;
  text-align: left;
  margin-bottom: 28px;
}
.trentine-detail-specs div {
  padding: 0 22px;
  border-left: 1px solid rgba(250,246,238,0.18);
}
.trentine-detail-specs div:first-child { padding-left: 0; border-left: none; }
.trentine-spec-label {
  font-size: 11px;
  color: rgba(250,246,238,0.55);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.trentine-spec-value {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: clamp(18px, 2vw, 24px);
}

.trentine-detail-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cream, #faf6ee);
  color: var(--black, #0a0908);
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 14px 28px;
  border-radius: 999px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.trentine-detail-cta:hover { background: var(--accent); opacity: 1; transform: translateY(-1px); }

@media (max-width: 860px) {
  .trentine-detail { text-align: center; }
  .trentine-detail-specs { justify-content: center; }
  .trentine-detail-specs div:first-child { padding-left: 22px; border-left: 1px solid rgba(250,246,238,0.18); }
}
.trentine-spec-value { font-weight: 600; margin-top: 2px; }

@media (max-width: 640px) {
  .trentine-scene { padding: 40px 16px 28px; }
  .trentine-slide[data-pos="left"] { transform: translateX(-38%) scale(0.72) rotateY(18deg); }
  .trentine-slide[data-pos="right"] { transform: translateX(38%) scale(0.72) rotateY(-18deg); }
}

/* ============================================================
   Slide "cinema" — video reale in loop (La Bionda dell'Abbazia)
   Markup: .trentine-slide-visual.trentine-visual-cinema
     > video.trentine-cinema-video[data-src] (senza src iniziale)
     > img.trentine-cinema-fallback (poster reale, sempre presente)
   Il video viene caricato/riprodotto via JS (trentine-3d.js) solo
   quando la scena è in viewport e la slide è quella centrale.
   ============================================================ */
.trentine-visual-cinema {
  --parallax-y: 0px;
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.trentine-slide:not([data-pos="center"]) .trentine-visual-cinema {
  opacity: 0;
  transform: scale(0.94);
}
.trentine-slide[data-pos="center"] .trentine-visual-cinema {
  opacity: 1;
  transform: scale(1);
}

.trentine-cinema-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
  filter: drop-shadow(0 30px 34px color-mix(in srgb, var(--accent) 55%, transparent));
  opacity: 0;
  transition: opacity 0.5s ease;
}
.trentine-cinema-fallback {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  opacity: 1;
  transition: opacity 0.4s ease;
}
/* quando il video è pronto (readyState sufficiente), crossfade verso il video */
.trentine-visual-cinema.is-video-ready .trentine-cinema-video { opacity: 1; }
.trentine-visual-cinema.is-video-ready .trentine-cinema-fallback { opacity: 0; }


/* rim-light più marcato per la scena cinema (riusa il ::before esistente) */
.trentine-slide[data-pos="center"] .trentine-visual-cinema::before {
  inset: -22% -34%;
  filter: blur(10px);
  opacity: 0.95;
}

@media (min-width: 641px) {
  .trentine-visual-cinema {
    transform: translateY(var(--parallax-y));
  }
  .trentine-slide:not([data-pos="center"]) .trentine-visual-cinema {
    transform: scale(0.94) translateY(var(--parallax-y));
  }
  .trentine-slide[data-pos="center"] .trentine-visual-cinema {
    transform: scale(1) translateY(var(--parallax-y));
  }
}

/* ============================================================
   Slide "wow" 100% CSS/JS — Birra Lagorai (nessun video disponibile).
   Luce volumetrica rotante + micro-particelle (box-shadow statici,
   nessun elemento DOM generato via JS) + rotazione hover-driven via
   pointermove (gestita in trentine-3d.js) + riflesso (webkit).
   ============================================================ */
.trentine-visual-wow img {
  transition: transform 0.4s ease-out;
  -webkit-box-reflect: below 4px linear-gradient(transparent, rgba(250,246,238,0.16) 100%);
}
.trentine-visual-wow.is-hovering img {
  animation-play-state: paused;
}

/* luce volumetrica: sostituisce il rim-light standard sulla slide "wow" */
.trentine-slide[data-pos="center"] .trentine-visual-wow::before {
  content: "";
  position: absolute;
  inset: -30%;
  background: conic-gradient(from 200deg, transparent, color-mix(in srgb, var(--accent) 55%, transparent) 30%, transparent 60%);
  filter: blur(18px);
  z-index: -1;
  animation: trentine-volumetric-sweep 6s linear infinite;
}
.trentine-scene:not(.in-view) .trentine-visual-wow::before { animation-play-state: paused; }

@keyframes trentine-volumetric-sweep {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* micro-particelle (bollicine): box-shadow multipli statici, 3 gruppi
   sfalsati tramite l'elemento + ::before + ::after, nessun DOM dinamico */
.trentine-particles,
.trentine-particles::before,
.trentine-particles::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  pointer-events: none;
}
.trentine-particles {
  box-shadow:
    -46px 6px 0 0 color-mix(in srgb, var(--accent) 70%, white),
    -22px 24px 0 -1px color-mix(in srgb, var(--accent) 70%, white),
    10px -4px 0 0 color-mix(in srgb, var(--accent) 70%, white),
    34px 16px 0 -1px color-mix(in srgb, var(--accent) 70%, white);
  animation: trentine-bubble-rise 5s ease-in infinite;
}
.trentine-particles::before {
  box-shadow:
    -12px 30px 0 -1px color-mix(in srgb, var(--accent) 70%, white),
    18px 34px 0 0 color-mix(in srgb, var(--accent) 70%, white),
    44px -8px 0 -1px color-mix(in srgb, var(--accent) 70%, white);
  animation: trentine-bubble-rise 6.5s ease-in infinite;
  animation-delay: 1.4s;
}
.trentine-particles::after {
  box-shadow:
    -34px 40px 0 -1px color-mix(in srgb, var(--accent) 70%, white),
    2px 40px 0 0 color-mix(in srgb, var(--accent) 70%, white),
    26px -18px 0 -1px color-mix(in srgb, var(--accent) 70%, white);
  animation: trentine-bubble-rise 7s ease-in infinite;
  animation-delay: 2.8s;
}
@keyframes trentine-bubble-rise {
  0% { transform: translateY(0); opacity: 0.6; }
  85% { opacity: 0.3; }
  100% { transform: translateY(-140px); opacity: 0; }
}
.trentine-scene:not(.in-view) .trentine-particles,
.trentine-scene:not(.in-view) .trentine-particles::before,
.trentine-scene:not(.in-view) .trentine-particles::after {
  animation-play-state: paused;
}