/* ================================================================
   VIDEO EXPERIENCE — app.css
   Tema bianco
   Font: Cormorant Garamond (editoriale) + Inter (UI)
   ================================================================ */

/* ── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
}

ul { list-style: none; }

img { display: block; max-width: 100%; }

/* ── Variables ──────────────────────────────────────────────────── */
:root {
  --bg:        #eef4fb;
  --bg-muted:  #dceaf6;
  --ink:       #00365f;
  --ink-mid:   rgba(0, 54, 95, 0.75);
  --ink-light: rgba(0, 54, 95, 0.45);
  --ink-xlight:rgba(0, 54, 95, 0.15);
  --white:     #FFFFFF;
  --hover:     #ff6900;

  --font-ed: 'Roboto', sans-serif;
  --font-ui: 'Roboto', sans-serif;

  --ease:   cubic-bezier(0.75, 0, 0.25, 1);
  --ease-o: cubic-bezier(0.25, 0, 0, 1);
  --t:      0.6s;
  --t-fast: 0.28s;
}

/* ── SVG visibility override — previene che CSS del tema nascondano le icone ── */
#video-experience svg {
  display: inline-block !important;
  overflow: visible;
  max-width: none;
  max-height: none;
}

/* ── Base ───────────────────────────────────────────────────────── */
html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.absolute-footer, html {
    background-color: #eef4fb !important;
}
li {
    margin-bottom: 0em !important;
}

/* ── Root container ─────────────────────────────────────────────── */
#video-experience {
  position: fixed;
  inset: 0;
  background: var(--bg) url('https://www.piscinecastiglione.it/wp-content/uploads/2024/08/sfondo_logo-1.png') center / cover no-repeat;
  overflow: hidden;
  transition: opacity var(--t) var(--ease);
}

#video-experience.ve-exiting {
  opacity: 0;
  pointer-events: none;
}

/* ── Screens ────────────────────────────────────────────────────── */
.ve-screen {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  background: transparent;  /* sfondo dall'#video-experience */
  animation: ve-screen-in var(--t) var(--ease) both;
}

@keyframes ve-screen-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Header comune ──────────────────────────────────────────────── */
.ve-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.75rem 2.5rem;
  pointer-events: none;
}

.ve-counter {
  font-family: var(--font-ui);
  font-size: 0.84rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--ink-mid);
}

/* ═══════════════════════════════════════════════════════════════
   FASE 1 — Video player sequenziale
   ═══════════════════════════════════════════════════════════════ */

.ve-screen-fase1 {
  background: transparent;
}

/* Contenitore video */
.ve-player-wrap {
  position: relative;
  width: 100%;
  flex: 1;
  background: transparent;
  overflow: hidden;
}

.ve-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  cursor: pointer;
}

/* Progress bar sottile dentro il player (solo visuale, non interattiva) */
.ve-progress-track {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--ink-xlight);
  z-index: 5;
}

.ve-progress-fill {
  height: 100%;
  width: 0;
  background: var(--ink);
  transition: width 0.15s linear;
}

/* ── Buffer spinner ── */
@keyframes ve-spin {
  to { transform: rotate(360deg); }
}

.ve-buffer-spinner {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

.ve-buffer-spinner::after {
  content: '';
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: rgba(255, 255, 255, 0.9);
  animation: ve-spin 0.75s linear infinite;
}

.ve-player-wrap.ve-buffering .ve-buffer-spinner {
  opacity: 1;
}

/* Overlay play/pause */
.ve-play-state {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
  z-index: 4;
}

.ve-play-state.ve-show-play {
  opacity: 1;
  pointer-events: auto;
}

.ve-play-icon {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  border: 1.5px solid var(--ink-light);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast);
}

.ve-play-icon:hover {
  background: rgba(255, 255, 255, 0.98);
  transform: scale(1.06);
}

.ve-play-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: var(--ink);
  margin-left: 0.2rem;
}

/* Indicatori fase 1 (dot di progresso) */
.ve-phase-dots {
  position: absolute;
  top: 1.75rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 10;
}

.ve-phase-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--ink-mid);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: background var(--t-fast), transform var(--t-fast);
}

.ve-phase-dot.is-done {
  background: var(--ink);
}

.ve-phase-dot.is-current {
  background: var(--hover);
  transform: scale(1.4);
}

/* ── Overlay domanda ────────────────────────────────────────────── */
.ve-question-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0);
  transition: background var(--t) var(--ease);
}

.ve-question-overlay[hidden] { display: none; }

.ve-question-overlay.ve-visible {
  background: rgba(255, 255, 255, 0.97);
}

.ve-question-box {
  width: 100%;
  max-width: 780px;
  padding: 3rem 3.5rem;
  transform: translateY(1.5rem);
  opacity: 0;
  transition:
    transform var(--t) var(--ease),
    opacity var(--t) var(--ease);
}

.ve-question-overlay.ve-visible .ve-question-box {
  transform: translateY(0);
  opacity: 1;
}

.ve-question-text {
  font-family: var(--font-ed);
  font-style: bold;
  font-weight: 400;
  font-size: clamp(1.92rem, 3.36vw, 3.12rem);
  color: var(--ink);
  line-height: 1.3;
  max-width: 52ch;
  margin-bottom: 1.5rem;
}

.ve-options {
  border-top: 1px solid var(--ink-xlight);
}

.ve-option {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--ink-xlight);
  cursor: pointer;
  transition: gap var(--t-fast) var(--ease);
}

.ve-option:hover {
  gap: 2rem;
}

.ve-option.ve-option-selected {
  opacity: 0.35;
  pointer-events: none;
}

.ve-option-num {
  font-size: 0.78rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  color: var(--ink-mid);
  flex-shrink: 0;
  transition: color var(--t-fast);
}

.ve-option:hover .ve-option-num {
  color: var(--hover);
}

.ve-option-text {
  font-size: 1.14rem;
  font-weight: 300;
  color: var(--ink);
  transition: transform var(--t-fast) var(--ease), color var(--t-fast);
}

.ve-option:hover .ve-option-text {
  transform: translateX(0.25rem);
  color: var(--hover);
}

/* ═══════════════════════════════════════════════════════════════
   AVATAR SELECTION
   ═══════════════════════════════════════════════════════════════ */

.ve-screen-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
}

.ve-avatar-inner {
  width: 100%;
  max-width: 1100px;
}

.ve-avatar-heading {
  font-family: var(--font-ed);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.68rem, 2.64vw, 2.52rem);
  color: var(--ink);
  text-align: center;
  margin-bottom: 1rem;
  letter-spacing: 0.01em;
}

.ve-avatar-subheading {
  font-size: 0.84rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mid);
  text-align: center;
  margin-bottom: 0.75rem;
}

.ve-avatar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--ink-xlight);
  gap: 1px;
  background: var(--ink-xlight);
}

.ve-avatar-card {
  background: var(--bg);
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: background var(--t) var(--ease);
}

/* Immagine di sfondo */
.ve-avatar-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--card-bg, none);
  background-size: cover;
  background-position: center;
  z-index: 0;
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}

/* Overlay arancio 75% */
.ve-avatar-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 105, 0, 0.75);
  z-index: 1;
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}

.ve-avatar-card:hover::before,
.ve-avatar-card.ve-selected::before {
  opacity: 1;
}

.ve-avatar-card:hover::after,
.ve-avatar-card.ve-selected::after {
  opacity: 1;
}

.ve-avatar-card-inner {
  position: relative;
  z-index: 2;
}

.ve-avatar-card-inner {
  padding: 2.5rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-height: 220px;
}

.ve-avatar-index {
  font-size: 0.78rem;
  font-weight: 300;
  letter-spacing: 0.18em;
  color: var(--ink-mid);
  transition: color var(--t) var(--ease);
}

.ve-avatar-card:hover .ve-avatar-index,
.ve-avatar-card.ve-selected .ve-avatar-index {
  color: rgba(255, 255, 255, 0.45);
}

.ve-avatar-label {
  font-family: var(--font-ed);
  font-style: normal;
  font-weight: 400;
  font-size: 1.56rem;
  line-height: 1.45;
  color: var(--ink);
  flex: 1;
  transition: color var(--t) var(--ease);
}

.ve-avatar-card:hover .ve-avatar-label,
.ve-avatar-card.ve-selected .ve-avatar-label {
  color: #FFFFFF;
}

.ve-avatar-cta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.86rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--ink-mid);
  opacity: 0;
  transform: translateX(-0.5rem);
  transition:
    opacity var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease),
    color var(--t) var(--ease);
}

.ve-avatar-card:hover .ve-avatar-cta {
  opacity: 1;
  transform: translateX(0);
  color: rgba(255, 255, 255, 0.6);
}

.ve-avatar-cta-arrow {
  display: inline-block;
  transition: transform var(--t-fast) var(--ease);
}

.ve-avatar-card:hover .ve-avatar-cta-arrow {
  transform: translateX(0.3rem);
}

/* ═══════════════════════════════════════════════════════════════
   FASE 3 — Indice video (Carousel)
   ═══════════════════════════════════════════════════════════════ */

.ve-screen-fase3-index {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* Header fase 3 (non absolute — occupa spazio) */
.ve-header-f3 {
  position: relative;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2.5rem;
  border-bottom: 1px solid var(--ink-xlight);
  flex-shrink: 0;
  background: var(--bg);
}

.ve-badge-avatar {
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mid);
}

.ve-watch-progress {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.ve-progress-dots-wrap {
  display: flex;
  gap: 0.35rem;
}

.ve-pdot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--ink-xlight);
  border: 1px solid var(--ink-light);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}

.ve-pdot:hover {
  transform: scale(1.35);
}

.ve-pdot.is-watched {
  background: var(--ink);
  border-color: var(--ink);
}

.ve-pdot.is-current {
  background: var(--hover);
  border-color: var(--hover);
  transform: scale(1.3);
}

.ve-watch-label {
  font-size: 0.78rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  color: var(--ink-mid);
  white-space: nowrap;
}

/* Carousel area */
.ve-carousel-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 2rem 0 1rem;
}

.ve-carousel-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  width: 100%;
  padding: 0 3rem;
  cursor: grab;
  user-select: none;
}

.ve-carousel-track.ve-dragging {
  cursor: grabbing;
}

/* Slides */
.ve-slide {
  flex-shrink: 0;
  cursor: pointer;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}

.ve-slide-center {
  width: min(52vw, 670px);
  z-index: 2;
}

.ve-slide-side {
  width: min(22vw, 280px);
  opacity: 0.4;
  z-index: 1;
}

.ve-slide-side:hover {
  opacity: 0.62;
}

.ve-slide-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg-muted);
  overflow: hidden;
}

/* Overlay blu fisso — garantisce contrasto per il titolo */
.ve-slide-thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 54, 95, 0.42);
  z-index: 1;
  pointer-events: none;
}

.ve-slide-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t) var(--ease);
}

.ve-slide-center:hover .ve-slide-thumb img {
  transform: scale(1.025);
}

/* Overlay "guarda" sul center slide */
.ve-slide-play-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 26, 24, 0);
  transition: background var(--t-fast) var(--ease);
  z-index: 4;
}

.ve-slide-center:hover .ve-slide-play-layer {
  background: rgba(26, 26, 24, 0.22);
}

.ve-slide-play-btn {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.75);
  transition:
    opacity var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease),
    background var(--t-fast);
}

.ve-slide-center:hover .ve-slide-play-btn {
  opacity: 1;
  transform: scale(1);
}

.ve-slide-play-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

.ve-slide-play-btn svg {
  width: 1rem;
  height: 1rem;
  fill: white;
  margin-left: 0.15rem;
}

/* Overlay "già visto" — copre l'intera thumb con tinte inchiostro */
.ve-watched-mark {
  position: absolute;
  inset: 0;
  background: rgba(0, 54, 95, 0.62);
  display: flex;
  align-items: flex-start;   /* icona in alto */
  justify-content: center;
  padding-top: 0.6rem;
  z-index: 5;                /* sopra al play-layer (z-index 4) */
}

.ve-watched-mark svg {
    width: 1.5rem;
    height: 1.5rem;
    stroke: rgba(255, 255, 255, 0.9);
    stroke-width: 2;
}

/* Titolo sovrapposto al centro del thumb */
.ve-slide-meta {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0.75rem;
  z-index: 3;
  pointer-events: none;
}

.ve-slide-title {
  text-align: center;
  font-family: var(--font-ui);
  font-size: 1.2rem;
  font-weight: 400;
  color: #FFFFFF;
  letter-spacing: 0.02em;
  line-height: 1.35;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

.ve-slide-side .ve-slide-title {
  opacity: 0;
}

/* Animazione entrata slide center al cambio di video */
@keyframes ve-slide-from-right {
  from { transform: translateX(2.5rem); opacity: 0; }
  to   { transform: translateX(0);      opacity: 1; }
}

@keyframes ve-slide-from-left {
  from { transform: translateX(-2.5rem); opacity: 0; }
  to   { transform: translateX(0);       opacity: 1; }
}

.ve-slide-center[data-anim-dir="next"] {
  animation: ve-slide-from-right 0.42s var(--ease) both;
}

.ve-slide-center[data-anim-dir="prev"] {
  animation: ve-slide-from-left 0.42s var(--ease) both;
}

/* Nav carousel */
.ve-carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 1rem 2.5rem 1.5rem;
  border-top: 1px solid var(--ink-xlight);
  flex-shrink: 0;
}

.ve-nav-btn {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--ink-light);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color var(--t-fast),
    background var(--t-fast),
    transform var(--t-fast);
}

.ve-nav-btn:hover {
  border-color: var(--hover);
  background: var(--hover);
  transform: scale(1.05);
}

.ve-nav-btn svg {
  width: 0.9rem;
  height: 0.9rem;
  stroke: var(--ink);
  transition: stroke var(--t-fast);
}

.ve-nav-btn:hover svg {
  stroke: white;
}

.ve-nav-count {
  font-size: 0.86rem;
  font-weight: 300;
  letter-spacing: 0.18em;
  color: var(--ink-mid);
  min-width: 5.5ch;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   FASE 3 — Lista video
   ═══════════════════════════════════════════════════════════════ */

/* Pulsante toggle lista nell'header */
.ve-list-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mid);
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--ink-light);
  border-radius: 2rem;
  transition:
    color var(--t-fast),
    border-color var(--t-fast),
    background var(--t-fast);
}

.ve-list-btn:hover,
.ve-list-btn.is-active {
  color: var(--ink);
  border-color: var(--ink);
}

.ve-list-btn svg {
  width: 0.88rem;
  height: 0.88rem;
  stroke: currentColor;
  flex-shrink: 0;
}

/* Panel lista — scivola su dal basso */
.ve-list-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: var(--bg);
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.55s var(--ease);
}

.ve-list-panel.is-open {
  transform: translateY(0);
}

.ve-list-inner {
  padding: 4.5rem 2.5rem 2rem; /* top clearance per l'header */
}

/* Singolo item lista */
.ve-list-item {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--ink-xlight);
  cursor: pointer;
  transition: gap var(--t-fast) var(--ease);
}

.ve-list-item:first-child {
  border-top: 1px solid var(--ink-xlight);
}

.ve-list-item:hover {
  gap: 1.5rem;
}

.ve-list-item.is-active .ve-list-num {
  color: var(--hover);
}

.ve-list-num {
  font-size: 0.78rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  color: var(--ink-mid);
  flex-shrink: 0;
  min-width: 2ch;
  transition: color var(--t-fast);
}

.ve-list-item:hover .ve-list-num {
  color: var(--hover);
}

.ve-list-thumb {
  flex-shrink: 0;
  width: 7.5rem;
  aspect-ratio: 16 / 9;
  background: var(--bg-muted);
  overflow: hidden;
}

.ve-list-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t) var(--ease);
}

.ve-list-item:hover .ve-list-thumb img {
  transform: scale(1.04);
}

.ve-list-title {
  flex: 1;
  font-size: 1rem;
  font-weight: 300;
  color: var(--ink);
  line-height: 1.4;
  transition: color var(--t-fast);
}

.ve-list-item:hover .ve-list-title {
  color: var(--hover);
}

.ve-list-item.is-watched {
  background: rgba(0, 54, 95, 0.04);
  opacity: 0.65;
}

.ve-list-item.is-watched .ve-list-title {
  color: var(--ink-mid);
}

.ve-list-item.is-watched .ve-list-thumb {
  filter: grayscale(40%);
}

.ve-list-item.is-watched .ve-list-num {
  color: var(--ink-xlight);
}

/* Badge "visto" */
.ve-list-check {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ve-list-check svg {
  width: 0.72rem;
  height: 0.72rem;
  stroke: white;
}

/* Icona play (appare sull'hover) */
.ve-list-play {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--t-fast);
}

.ve-list-item:hover .ve-list-play {
  opacity: 1;
}

.ve-list-play svg {
  width: 0.75rem;
  height: 0.75rem;
  fill: var(--ink);
}

/* ═══════════════════════════════════════════════════════════════
   FASE 3 — Video player
   ═══════════════════════════════════════════════════════════════ */

.ve-screen-fase3-player {
  display: flex;
  flex-direction: column;
  background: transparent;
}

.ve-screen-fase3-player .ve-player-wrap {
  flex: 1;
}

/* Topbar portrait-only: logo + titolo sopra al video */
.ve-f3-topbar {
  display: none; /* nascosta di default, visibile solo in portrait via media query */
}

.ve-player-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 1rem;
  background: var(--bg);
  border-top: 1px solid var(--ink-xlight);
  flex-shrink: 0;
}

.ve-back-btn {
  display: flex;
  line-height: 1.6rem;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.94rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  color: var(--ink-mid);
  transition: color var(--t-fast), gap var(--t-fast);
}

.ve-back-btn:hover {
  color: var(--hover);
  gap: 0.7rem;
}

.ve-back-btn svg {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
  flex-shrink: 0;
}

.ve-playing-title {
  font-size: 0.94rem;
  font-weight: 300;
  letter-spacing: 0.03em;
  color: var(--ink-mid);
}

/* Overlay fine video */
.ve-end-overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0);
  transition: background var(--t) var(--ease);
}

.ve-end-overlay[hidden] { display: none; }

.ve-end-overlay.ve-visible {
  background: white;
}

.ve-end-box {
  text-align: center;
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity var(--t) var(--ease) 0.15s,
    transform var(--t) var(--ease) 0.15s;
}

.ve-end-overlay.ve-visible .ve-end-box {
  opacity: 1;
  transform: translateY(0);
}

.ve-end-title {
  font-family: var(--font-ed);
  font-style: normal;
  font-weight: 400;
  font-size: 0.96rem;
  color: var(--ink);
  margin-bottom: 0rem;
}

.ve-end-sub {
  font-size: 2rem;
  font-weight: bold;
  color: var(--ink-mid);
  margin-bottom: 2rem;
}

.ve-end-cta {
  display: inline-flex;
  align-items: center;
  /* reset stili default browser per <button> */
  font: inherit;
  line-height: normal;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  /* stili visivi */
  font-size: 0.96rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: #333;
  background: #d9d9d9;
  padding: 0.875rem 2.25rem;
  border: none;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}

.ve-end-cta:hover {
  background: #c4c4c4;
  color: #111;
}

/* ── Carousel end overlay ── */
.ve-end-box {
  max-width: 860px;
  width: 90%;
  padding: 0 1rem;
  min-width: 0;   /* permette al flex child di ridursi — non aggiungere overflow:hidden qui */
}

.ve-end-all-watched {
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--ink-mid);
  padding: 1.5rem 0 2rem;
}

/* Azioni fine video: due pulsanti affiancati */
.ve-end-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.ve-end-cta-preventivo {
  display: inline-flex;
  align-items: center;
  font-size: 0.96rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: #FFFFFF;
  background: var(--hover);
  padding: 0.875rem 2.25rem;
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--t-fast);
}

.ve-end-cta-preventivo:hover {
    background: lightblue;
    color: white;
}

.ve-end-carousel {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overflow-y: visible;
  width: 100%;
  padding: 1rem 0.25rem 1.25rem;
  margin: 1.25rem 0 1.75rem;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  text-align: left;
  box-sizing: border-box;
  /* Firefox — scrollbar sottile */
  scrollbar-width: thin;
  scrollbar-color: var(--ink) var(--ink-xlight);
}

/* WebKit — scrollbar orizzontale stilata */
.ve-end-carousel::-webkit-scrollbar {
  height: 3px;
}
.ve-end-carousel::-webkit-scrollbar-track {
  background: var(--ink-xlight);
  border-radius: 99px;
}
.ve-end-carousel::-webkit-scrollbar-thumb {
  background: var(--ink);
  border-radius: 99px;
  transition: background var(--t-fast);
}
.ve-end-carousel::-webkit-scrollbar-thumb:hover {
  background: var(--hover);
}

.ve-end-card {
  flex-shrink: 0;
  width: 10rem;
  cursor: pointer;
}

.ve-end-card-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-muted);
  margin-bottom: 0.45rem;
}

.ve-end-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t) var(--ease);
}

.ve-end-card:hover .ve-end-card-thumb img { transform: scale(1.05); }

.ve-end-card-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.22);
  opacity: 0;
  transition: opacity var(--t-fast);
}

.ve-end-card:hover .ve-end-card-play { opacity: 1; }

.ve-end-card-play svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: white;
}

.ve-end-card-check {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ve-end-card-check svg {
  width: 0.6rem;
  height: 0.6rem;
  stroke: white;
}

.ve-end-card-title {
  font-size: 0.75rem;
  font-weight: 300;
  color: var(--ink);
  line-height: 1.3;
}

/* ── Tasto Richiesta di preventivo nella player bar ── */
.ve-preventivo-btn {
  display: inline-flex;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: white;
  border: none;
  padding: 0.5rem 1.1rem;
  text-decoration: none;
  white-space: nowrap;
  background-color: var(--hover);
}

.ve-preventivo-btn:hover {
  background: lightblue;
  color: white;
}

/* ═══════════════════════════════════════════════════════════════
   BARRA CONTROLLI — stile Sutro
   Overlay inside .ve-player-wrap, visibile al hover
   ═══════════════════════════════════════════════════════════════ */

/* Gradient scuro in basso sul player (crea contrasto per i controlli) */
.ve-player-wrap::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 42%;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.55) 100%
  );
  pointer-events: none;
  z-index: 4;
  opacity: 1;
}

/* Contenitore controlli — singola riga: [play][mute][======track======][time] */
.ve-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 6;
  padding: 0.375rem 0.875rem 0.875rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

/* Visibile (JS aggiunge/rimuove questa classe) */
.ve-controls.ve-ctrl-visible {
  opacity: 1;
}

.ve-ctrl-btn {
  flex-shrink: 0;
  width: 2.125rem;
  height: 2.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  border-radius: 25%;
  background: rgba(255, 255, 255, 0);
  transition: background var(--t-fast);
}

.ve-ctrl-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
}

.ve-ctrl-btn svg {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
}

/* Progress bar — flex: 1 per riempire lo spazio nella riga */
.ve-ctrl-track {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.25);
  position: relative;
  cursor: pointer;
  border-radius: 2px;
  transition: height var(--t-fast) var(--ease);
}

.ve-ctrl-track:hover { height: 5px; }

.ve-ctrl-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0;
  background: #FFFFFF;
  border-radius: inherit;
  transition: width 0.15s linear;
  pointer-events: none;
}

/* Pallino cursore sulla track */
.ve-ctrl-thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: #FFFFFF;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s linear;
}

.ve-ctrl-track:hover .ve-ctrl-thumb { opacity: 1; }

/* Timer nella barra controlli */
.ve-ctrl-time {
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.8);
  margin-left: 0.5rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Overlay espansione intro → schermo intero */
.ve-expand-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 50;
  pointer-events: none;
  clip-path: inset(50%);   /* nascosto di default (punto al centro) */
  transition: clip-path 0.75s cubic-bezier(0.75, 0, 0.25, 1);
}

/* ═══════════════════════════════════════════════════════════════
   SIDE NAVIGATION (prev/next con thumbnail hover — fase 3 player)
   ═══════════════════════════════════════════════════════════════ */

.ve-side-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  pointer-events: none;   /* il container non blocca i click sul video */
  transition: opacity var(--t) var(--ease);
}

/* Mostra side nav quando il mouse è sul player */
.ve-player-wrap:hover .ve-side-nav { opacity: 1; }

.ve-side-nav .ve-side-arrow {
  pointer-events: auto;   /* solo la freccia è cliccabile */
  cursor: pointer;
  flex-shrink: 0;
}

.ve-side-prev {
  left: 0.875rem;
  flex-direction: row;          /* [freccia] [thumb →] */
}

.ve-side-next {
  right: 0.875rem;
  flex-direction: row-reverse;  /* visivamente: [← thumb] [freccia] */
}

/* Freccia circolare */
.ve-side-arrow {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--ink-light);
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}

.ve-side-nav:hover .ve-side-arrow {
  border-color: var(--hover);
  background: #FFFFFF;
  transform: scale(1.08);
}

.ve-side-arrow svg {
  width: 0.9rem;
  height: 0.9rem;
  stroke: var(--ink);
}

/* Thumbnail preview — compare al hover della freccia */
.ve-side-thumb-box {
  background: var(--bg);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  width: 16rem;
  pointer-events: none;
  opacity: 0;
  transform: translateX(0);
  transition: opacity var(--t-fast) var(--ease);
}

.ve-side-arrow:hover + .ve-side-thumb-box {
  opacity: 1;
}

.ve-side-thumb-box img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.ve-side-thumb-label {
  padding: 0.3rem 0.5rem;
  font-size: 0.65rem;
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-top: 1px solid var(--ink-xlight);
}

/* ── Barra navigazione sopra il player (prev / next con anteprima) ── */
.ve-player-nav-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.875rem;
  border-bottom: 1px solid var(--ink-xlight);
  flex-shrink: 0;
  background: var(--bg);
  min-height: 3.25rem;
}

.ve-player-nav-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
  overflow: hidden;
  max-width: 45%;
}

.ve-player-nav-item--right {
  flex-direction: row-reverse;
}

.ve-nav-top-arrow {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--ink-light);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--t-fast), background var(--t-fast);
}

.ve-player-nav-item:hover .ve-nav-top-arrow {
  border-color: var(--hover);
  background: var(--hover);
}

.ve-nav-top-arrow svg {
  width: 0.875rem;
  height: 0.875rem;
  stroke: var(--ink);
  transition: stroke var(--t-fast);
}

.ve-player-nav-item:hover .ve-nav-top-arrow svg {
  stroke: white;
}

.ve-nav-top-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  transform: translateX(-0.5rem);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  overflow: hidden;
}

.ve-nav-top-info--right {
  transform: translateX(0.5rem);
  flex-direction: row-reverse;
}

.ve-player-nav-item:hover .ve-nav-top-info {
  opacity: 1;
  transform: translateX(0);
}

.ve-nav-top-info img {
  width: 4.5rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

.ve-nav-top-label {
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--ink-mid);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 14rem;
  transition: color var(--t-fast);
}

.ve-player-nav-item:hover .ve-nav-top-label {
  color: var(--hover);
}

/* ═══════════════════════════════════════════════════════════════
   INTRO — Schermata di benvenuto
   ═══════════════════════════════════════════════════════════════ */

.ve-screen-intro {
  align-items: center;
  justify-content: center;
  background-image: url('https://www.piscinecastiglione.it/wp-content/uploads/2024/08/sfondo_logo-1.png');
  background-size: cover;
  background-position: center;
}

.ve-intro-layout {
  display: grid;
  grid-template-columns: 1fr 2.8fr 1fr;
  align-items: center;
  gap: 3rem;
  width: 100%;
  max-width: 1400px;
  padding: 0 3.5rem;
}

/* ── Centro: immagine che si espande da entrambi i lati ── */
.ve-intro-center {
  z-index: 2;
}
video.ve-intro-video {
    opacity: .5;
}
.ve-intro-thumb-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  animation: ve-intro-expand 1.2s cubic-bezier(0.75, 0, 0, 1) both;
  background-color: #00365f;
}

@keyframes ve-intro-expand {
  from { clip-path: inset(0 26%); }
  to   { clip-path: inset(0 0%);  }
}

.ve-intro-thumb-wrap img,
.ve-intro-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* CTA sopra l'immagine — fade in dopo l'espansione */
.ve-intro-cta-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, transparent 55%);
  opacity: 0;
  animation: ve-intro-fade 0.5s var(--ease) both;
  animation-delay: 1s;
}

@keyframes ve-intro-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.ve-intro-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-ui);
  font-size: 0.98rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 0.7rem 1.4rem;
  backdrop-filter: blur(6px);
  transition:
    background var(--t-fast),
    border-color var(--t-fast),
    gap var(--t-fast);
}

.ve-intro-cta:hover {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.8);
  gap: 0.9rem;
}

.ve-intro-arrow {
  display: inline-block;
  transition: transform var(--t-fast) var(--ease);
}

.ve-intro-cta:hover .ve-intro-arrow {
  transform: translateX(0.25rem);
}

/* ── Colonna sinistra: slide da sinistra ── */
.ve-intro-left {
  opacity: 0;
  animation: ve-intro-from-left 0.7s var(--ease) both;
  animation-delay: 0.55s;
}

@keyframes ve-intro-from-left {
  from { opacity: 0; transform: translateX(-1.75rem); }
  to   { opacity: 1; transform: translateX(0); }
}

.ve-intro-eyebrow {
  font-size: 0.78rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-bottom: 0.875rem;
}

.ve-intro-brand {
  font-family: var(--font-ed);
  font-style: normal;
  font-weight: bold;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 2.1vw, 2.5rem);
  color: var(--ink);
  line-height: 1.2;
}

/* ── Colonna destra: slide da destra ── */
.ve-intro-right {
  opacity: 0;
  animation: ve-intro-from-right 0.7s var(--ease) both;
  animation-delay: 0.75s;
}

@keyframes ve-intro-from-right {
  from { opacity: 0; transform: translateX(1.75rem); }
  to   { opacity: 1; transform: translateX(0); }
}

.ve-intro-subtitle {
    text-transform: uppercase;
    font-family: var(--font-ed);
    font-style: normal;
    font-weight: bold;
    font-size: clamp(1.8rem, 1.8vw, 1.6rem);
    color: var(--ink);
    line-height: 1.35;
    margin-bottom: 0.875rem;
}

.ve-intro-desc {
  font-size: 0.94rem;
  font-weight: 300;
  color: var(--ink-mid);
  line-height: 1.6;
}

/* ── Preloader ───────────────────────────────────────────────────── */
#ve-preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  display: grid;
  grid-template-columns: 22vw 1fr 22vw;   /* colonne laterali strette */
  overflow: hidden;
}

/* ── Colonne laterali ── */
.ve-pre-col {
  overflow: hidden;
  position: relative;
}

/* Entrata: sinistra sale dal basso, destra scende dall'alto */
.ve-pre-col--left {
  animation: ve-col-from-bottom 0.85s cubic-bezier(0.75, 0, 0.25, 1) both;
}

.ve-pre-col--right {
  animation: ve-col-from-top 0.85s cubic-bezier(0.75, 0, 0.25, 1) both;
}

@keyframes ve-col-from-bottom {
  from { transform: translateY(100%); }
  to   { transform: translateY(0);    }
}

@keyframes ve-col-from-top {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0);     }
}

.ve-pre-col-inner {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ve-pre-col-inner img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

/* Scroll — parte dopo l'entrata */
.ve-pre-col--left .ve-pre-col-inner {
  animation: ve-scroll-up 7s linear 0.85s infinite;
}

.ve-pre-col--right .ve-pre-col-inner {
  animation: ve-scroll-down 7s linear 0.85s infinite;
}

@keyframes ve-scroll-up {
  from { transform: translateY(0);    }
  to   { transform: translateY(-50%); }
}

@keyframes ve-scroll-down {
  from { transform: translateY(-50%); }
  to   { transform: translateY(0);    }
}

/* ── Sezione centrale: brand + contatore ── */
.ve-pre-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 3rem 2rem;
  border-left:  1px solid var(--ink-xlight);
  border-right: 1px solid var(--ink-xlight);
  animation: ve-pre-center-in 0.6s var(--ease) 0.35s both;
}

@keyframes ve-pre-center-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.ve-pre-logo {
  width: auto;
  max-width: min(200px, 14vw);
  height: auto;
  display: block;
}

.ve-pre-counter {
  font-family: var(--font-ui);
  font-size: clamp(5rem, 11vw, 10rem);
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
}

/* Wrapper esterno: contiene le due cifre affiancate */
.ve-pre-num-wrap {
  display: inline-flex;
  align-items: baseline;
}

/* Wrapper singola cifra — clippa il numero durante la slot-machine */
.ve-digit-wrap {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  position: relative;
  height: 1.05em;
  min-width: 1.1ch;
}

.ve-pre-num {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

/* Numero entra dal basso */
@keyframes ve-num-enter {
  from { transform: translateY(115%); }
  to   { transform: translateY(0);    }
}

/* Numero esce verso l'alto */
@keyframes ve-num-leave {
  from { transform: translateY(0);     }
  to   { transform: translateY(-115%); }
}

.ve-pre-num.is-entering {
  animation: ve-num-enter 0.08s cubic-bezier(0.25, 0, 0, 1) both;
}

.ve-pre-num.is-leaving {
  animation: ve-num-leave 0.08s cubic-bezier(0.25, 0, 0, 1) both;
}

.ve-pre-pct {
  font-size: 0.38em;
  margin-left: 0.1em;
  color: var(--ink-mid);
  font-weight: 300;
}

/* ── Curtain exit: due rettangoli che si restringono ── */
.ve-pre-curtain {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background: var(--bg);
  transition: transform 0.85s cubic-bezier(0.75, 0, 0.25, 1);
}

.ve-pre-curtain--left {
  left: 0;
  transform-origin: left center;
}

.ve-pre-curtain--right {
  right: 0;
  transform-origin: right center;
}

.ve-pre-curtain.is-gone {
  transform: scaleX(0);
}

/* ── Responsive: mobile nasconde le colonne ── */
@media (max-width: 640px) {
  #ve-preloader {
    grid-template-columns: 1fr;
  }
  .ve-pre-col {
    display: none;
  }
  .ve-pre-center {
    border: none;
  }
}

/* ── Error state ────────────────────────────────────────────────── */
.ve-error {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-size: 1.05rem;
  font-weight: 300;
  color: var(--ink-mid);
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ve-slide-center {
    width: min(70vw, 480px);
  }

  .ve-slide-side {
    width: min(18vw, 160px);
  }

  .ve-question-box {
    padding: 3rem 5vw 2.5rem;
  }

  .ve-intro-layout {
    grid-template-columns: 1fr;
    max-width: 520px;
    padding: 2rem 2rem;
    gap: 1.5rem;
    text-align: center;
  }

  .ve-intro-cta-layer {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .ve-avatar-grid {
    grid-template-columns: 1fr;
  }

  .ve-carousel-track {
    padding: 0 1.5rem;
    gap: 1rem;
  }

  .ve-slide-center {
    width: 82vw;
  }

  .ve-slide-side {
    width: 12vw;
    opacity: 0.25;
  }

  .ve-header {
    padding: 1.25rem 1.5rem;
  }

  .ve-header-f3 {
    padding: 1.25rem 1.5rem;
  }

  .ve-player-bar {
    padding: 0.75rem 1.25rem;
  }
}

/* ════════════════════════════════════════════════════════════
   MOBILE — Breakpoint 768px
   ════════════════════════════════════════════════════════════ */

/* ── Tutti i mobile (portrait + landscape): niente thumbnail side nav ── */
@media (max-width: 768px) {
  .ve-side-thumb-box {
    display: none;
  }
}

/* ── Mobile portrait: controlli, side nav, avatar ── */
@media (max-width: 768px) and (orientation: portrait) {

  /* Controlli player sempre visibili */
  .ve-controls {
    opacity: 1;
  }

  /* Side nav: sempre visibile, spostata al 70% dall'alto */
  .ve-side-nav {
    opacity: 1;
    top: 70%;
    transform: translateY(-50%);
  }
  .ve-player-wrap:hover .ve-side-nav {
    opacity: 1;
  }

  /* Topbar portrait: logo + titolo sopra al video */
  .ve-f3-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    background: var(--bg);
    border-bottom: 1px solid var(--ink-xlight);
    flex-shrink: 0;
  }

  .ve-f3-topbar-logo {
    height: 1.75rem;
    width: auto;
    flex-shrink: 0;
  }

  .ve-f3-topbar-title {
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--ink);
    text-align: right;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0.02em;
  }

  /* Player bar: elementi in colonna invece che in riga */
  .ve-player-bar {
    flex-direction: column;
    align-items: center;  /* tutto centrato orizzontalmente */
    gap: 0.4rem;
    padding: 0.65rem 1rem;
  }

  /* Titolo spostato nella topbar: nascosto dalla barra */
  .ve-playing-title {
    display: none;
  }

  /* Torna all'indice: centrato */
  .ve-back-btn {
    justify-content: center;
  }

  .ve-preventivo-btn {
    width: 100%;
    justify-content: center;
    font-size: 0.78rem;
    padding: 0.45rem 0.75rem;
  }

  /* Avatar CTA sempre visibile (non solo al hover) */
  .ve-avatar-cta {
    opacity: 1;
    transform: translateX(0);
    color: var(--ink-mid);
  }
  .ve-avatar-card:hover .ve-avatar-cta-arrow {
    transform: none;
  }

  /* Avatar screen: colonna scrollabile, inner centrato con margin:auto */
  .ve-screen-avatar {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 1.25rem 1rem;
    overflow-y: auto;
  }

  .ve-avatar-inner {
    margin: auto 0;
    width: 100%;
  }

  .ve-avatar-subheading {
    margin-bottom: 0.3rem;
  }

  .ve-avatar-heading {
    font-size: clamp(1rem, 4vw, 1.4rem);
    margin-bottom: 0.875rem;
  }

  /* Portrait: 1 colonna verticale con gap visibile tra le card */
  .ve-avatar-grid {
    grid-template-columns: 1fr;
    row-gap: 0.625rem;
    background: transparent;
    border: none;
  }

  /* Card compatta in verticale */
  .ve-avatar-card-inner {
    padding: 0.875rem 1rem 0.75rem;
    min-height: 0;
    gap: 0.5rem;
  }

  /* Header fase3: badge e progress in colonna, list-btn in assoluto */
  .ve-header-f3 {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0.75rem 1.25rem;
    position: relative;
  }

  .ve-header-f3 .ve-list-btn {
    position: absolute;
    top: 50%;
    right: 1.25rem;
    transform: translateY(-50%);
  }

  .ve-avatar-index {
    font-size: 0.68rem;
  }

  .ve-avatar-label {
    font-size: 0.9rem;
    line-height: 1.3;
  }

  .ve-avatar-cta {
    font-size: 0.72rem;
    gap: 0.2rem;
  }

  /* ── Carosello fase3: lista verticale scrollabile ── */
  .ve-screen-fase3-index {
    overflow: hidden;
  }

  /* Contenitore scrollabile con hint gradiente in fondo */
  .ve-carousel-wrap {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    align-items: flex-start;
    padding: 1rem 1rem 0;
    position: relative;
  }

  /* Gradiente fade-out in fondo: suggerisce che c'è altro da scorrere */
  .ve-carousel-wrap::after {
    content: '';
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    height: 3rem;
    background: linear-gradient(to bottom, transparent, var(--bg));
    pointer-events: none;
    flex-shrink: 0;
  }

  /* Traccia verticale */
  .ve-carousel-track {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0 0 1rem;
    gap: 0.75rem;
    width: 100%;
  }

  /* Tutte le slide a piena larghezza */
  .ve-slide,
  .ve-slide-center,
  .ve-slide-side {
    width: 100%;
    flex-shrink: 0;
  }

  /* Slide laterali: mute, bordo sinistro neutro */
  .ve-slide-side {
    opacity: 0.55;
    border-left: 3px solid transparent;
  }

  /* Slide centrale (attiva): piena opacità, accento arancio a sinistra */
  .ve-slide-center {
    opacity: 1;
    border-left: 3px solid var(--hover);
  }

  /* Play button sempre visibile sulla slide attiva in portrait */
  .ve-slide-center .ve-slide-play-btn {
    opacity: 1;
    transform: scale(1);
  }
  .ve-slide-center .ve-slide-play-layer {
    background: rgba(26, 26, 24, 0.18);
  }

  /* Frecce nav + counter: ripristinati e visibili */
  .ve-carousel-nav {
    display: flex;
  }
}

/* ── Mobile landscape ── */
@media (max-width: 900px) and (orientation: landscape) {

  /* Intro: ripristina layout 3 colonne (come desktop) */
  .ve-intro-layout {
    grid-template-columns: 1fr 2.8fr 1fr;
    max-width: 100%;
    text-align: left;
    padding: 0 2rem;
    gap: 1.5rem;
  }

  /* Side nav: sempre visibile senza hover */
  .ve-side-nav {
    opacity: 1;
  }
  .ve-player-wrap:hover .ve-side-nav {
    opacity: 1;
  }

  /* Controlli sempre visibili */
  .ve-controls {
    opacity: 1;
  }

  /* Fase 3 index: header e nav più compatti in altezza */
  .ve-header-f3 {
    padding: 0.5rem 1.5rem;
  }

  .ve-carousel-nav {
    padding: 0.375rem 1.5rem 0.5rem;
  }

  .ve-carousel-wrap {
    padding: 0.75rem 0 0.25rem;
  }

  /* Overlay domanda + fine video: scroll verticale se il contenuto supera l'altezza */
  .ve-question-overlay,
  .ve-f3-q-overlay,
  .ve-end-overlay {
    overflow-y: auto;
    align-items: flex-start;
  }

  .ve-question-box {
    padding: 1.5rem 1.25rem;
  }

  .ve-end-box {
    padding: 1.25rem 1rem;
    width: 90%;
    max-width: 860px;
    margin: 0 auto;
  }

  /* Avatar selection: layout orizzontale compatto con scroll */
  .ve-screen-avatar {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0.75rem 1rem;
    overflow-y: auto;
  }

  .ve-avatar-subheading {
    margin-bottom: 0.2rem;
  }

  .ve-avatar-heading {
    font-size: clamp(1rem, 3vw, 1.3rem);
    margin-bottom: 0.5rem;
  }

  /* 3 card affiancate ma compatte in altezza */
  .ve-avatar-card-inner {
    padding: 0.75rem 1rem 0.625rem;
    min-height: 0;
    gap: 0.35rem;
  }

  .ve-avatar-index {
    font-size: 0.68rem;
  }

  .ve-avatar-label {
    font-size: 0.85rem;
    line-height: 1.3;
  }

  .ve-avatar-cta {
    opacity: 1;
    transform: translateX(0);
    font-size: 0.72rem;
    gap: 0.2rem;
  }
}

/* ════════════════════════════════════════════════════════════
   SCHERMATA COMPLETAMENTO — tutti i video visti
   ════════════════════════════════════════════════════════════ */

.ve-screen-all-watched {
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 2rem;
  background-image: url('https://www.piscinecastiglione.it/wp-content/uploads/2024/08/sfondo_logo-1.png');
  background-size: cover;
  background-position: center;
}

.ve-aw-inner {
  max-width: 680px;
}

.ve-aw-eyebrow {
  font-size: 0.84rem;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-bottom: 1.25rem;
}

.ve-aw-heading {
  font-family: var(--font-ed);
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

.ve-aw-sub {
  font-size: 1.05rem;
  font-weight: 300;
  color: var(--ink-mid);
  line-height: 1.75;
  max-width: 52ch;
  margin: 0 auto 3rem;
}

.ve-aw-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.ve-aw-cta-primary {
  display: inline-flex;
  align-items: center;
  font-size: 0.96rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: #FFFFFF;
  background: var(--hover);
  padding: 0.875rem 2.25rem;
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--t-fast);
}

.ve-aw-cta-primary:hover {
    background: lightblue;
    color: white;
}

.ve-aw-cta-secondary {
  font-size: 0.96rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--ink-mid);
  background: transparent;
  padding: 1rem 1.5rem;
  border: 1px solid var(--ink-light);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}

.ve-aw-cta-secondary:hover {
  border-color: var(--ink);
  color: var(--ink);
}

@media (max-width: 768px) and (orientation: portrait) {
  .ve-screen-all-watched {
    padding: 2rem 1.25rem;
  }
}