:root {
  --ytvs-speed: 600ms; /* velocità transizione slide */
  --ytvs-bottom-mask: 0%; /* 0% = off; aumenta (es. 20%) per coprire bordo basso */
  --ytvs-text-speed: 500ms; /* animazione testi */
  --lift-y: 4px; /* quanto sale */
  --lift-dur: 180ms;
}
/* layout base */
.ytvs-wrap {
  position: relative;
  overflow: hidden;
  background: #000;
  width: 100%;
  max-width: 100vw
}
.ytvs-slides {
  position: relative;
  height: 100%
}
/* TRANSIZIONE SLIDE orizzontale */
.ytvs-slide {
  position: absolute;
  inset: 0;
  transform: translateX(100%);
  opacity: 0;
  transition: transform var(--ytvs-speed) ease, opacity var(--ytvs-speed) ease;
  will-change: transform, opacity;
}
.ytvs-slide.is-active {
  transform: translateX(0);
  opacity: 1;
  z-index: 2;
}
.ytvs-slide.is-prep-right {
  transform: translateX(100%);
}
.ytvs-slide.is-prep-left {
  transform: translateX(-100%);
}
.ytvs-slide.is-exit-left {
  transform: translateX(-100%);
}
.ytvs-slide.is-exit-right {
  transform: translateX(100%);
}
/* VIDEO COVER */
.ytvs-player {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.ytvs-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
/* Poster opzionale (se fornito) per evitare “frame vuoti” all’avvio */
.ytvs-poster {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}
/* Copertura inferiore (se vuoi mascherare eventuali controlli/bordi) */
.ytvs-bottom-cover {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--ytvs-bottom-mask);
  background: linear-gradient(to top, rgba(0, 0, 0, .9), rgba(0, 0, 0, .2), rgba(0, 0, 0, 0));
  pointer-events: none;
  opacity: 1;
  z-index: 3;
}
/* OVERLAY TESTI (sinistra) */
.ytvs-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(16px, 3.5vw, 48px);
  pointer-events: none;
  z-index: 4;
}
.ytvs-content {
  pointer-events: auto;
  max-width: min(900px, 42vw);
  margin-left: clamp(16px, 6vw, 80px);
  text-align: left;
  color: #fff;
}
@media (max-width: 768px) {
  .ytvs-content {
    max-width: 92vw;
    margin-left: clamp(12px, 4vw, 24px);
  }
}
/* Animazione ingresso testi */
.ytvs-slide .ytvs-title, .ytvs-slide .ytvs-text, .ytvs-slide .ytvs-btn {
  opacity: 0;
  transform: translate3d(24px, 0, 0)
}
@keyframes ytvsSlideFadeIn {
  from {
    opacity: 0;
    transform: translate3d(24px, 0, 0)
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0)
  }
}
.ytvs-slide.is-active .ytvs-title {
  animation: ytvsSlideFadeIn var(--ytvs-text-speed) ease both
}
.ytvs-slide.is-active .ytvs-text {
  animation: ytvsSlideFadeIn calc(var(--ytvs-text-speed) + 50ms) ease both;
  animation-delay: .08s
}
.ytvs-slide.is-active .ytvs-btn {
  animation: ytvsSlideFadeIn calc(var(--ytvs-text-speed) + 100ms) ease both;
  animation-delay: .16s
}
/* UI */
.ytvs-btn-container {
  text-align: right;
}
.ytvs-title {
  margin: 0 0 1rem;
  font-size: 4rem;
  line-height: 0.8;
  color: white;
  letter-spacing: 2px;
}
.ytvs-text {
  font-size: clamp(14px, 1.6vw, 18px);
  opacity: .9;
  margin-bottom: 1rem
}
.ytvs-btn {
  display: inline-block;
  padding: .8rem 1.2rem;
  background: #fff;
  color: #000;
  text-decoration: none;
  border-radius: 999px;
  font-weight: 600;
  transition: color 500ms ease, background-color 500ms ease;
  margin-top: 30px;
}
.ytvs-btn:after {
  content: "\f35a";
  font-family: "Fontawesome";
  display: inline-block;
  margin-left: 10px;
}
.ytvs-btn:hover {
  text-decoration: none;
  background: #a3322a;
  color: #fff;
  transition: color 500ms ease, background-color 500ms ease;
}
.ytvs-nav {
  position: relative;
  z-index: 5;
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: center;
  padding: 12px 16px;
  background: transparent;
  bottom: 100px;
}
.ytvs-nav-item {
  background: transparent;
  border: none;
  border-left: 3px solid white;
  color: #ddd;
  padding: .5rem .8rem;
  font-family: "Cardo";
  cursor: pointer;
  line-height: 1;
  font-size: 2rem;
  font-weight: 500;
  width: 20%;
  text-align: left;
  transition: transform var(--lift-dur) ease, box-shadow var(--lift-dur) ease;
}
.ytvs-nav-item.is-active {
  color: #a3322a;
  border-color: #a3322a;
}
.nav-mobile {
  display: none;
}
.ytvs-nav-item:hover {
  border-color: #888;
  color: #a3322a;
  transform: translateY(calc(var(--lift-y) * -1));
}
/* accessibilità */
@media (prefers-reduced-motion: reduce) {
  .ytvs-slide {
    transition: none !important;
  }
  .ytvs-slide .ytvs-title, .ytvs-slide .ytvs-text, .ytvs-slide .ytvs-btn {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/*   tablet */
@media screen and (max-width: 850px) {
  .ytvs-title {
    font-size: 2.8rem !important;
    line-height: 1;
  }
  .nav-desktop {
 
  }
  .nav-mobile {
 
  }
  .ytvs-nav-item {

      width: 30%;
  }
  .ytvs-nav {

  }
}/*   MOBILE */
@media screen and (max-width: 600px) {
  .ytvs-title {
    font-size: 2.8rem !important;
    line-height: 1;
  }
  .nav-desktop {
    display: none;
  }
  .nav-mobile {
    display: inline-block;
  }
  .ytvs-nav-item {
    border: 2px solid white;
    text-align: center;
    border-radius: 50%;
    font-size: 1.5rem;
    width: 30px;
    height: 30px;
    padding: 5px;
     
  }
  .ytvs-nav {
    bottom: 50px;
  }
}