/* ============================================================
   viaggio.css — "Il nostro viaggio" interactive road-trip timeline
   ============================================================ */

#viaggio-storia{background:var(--cream)}
#viaggio-storia .section-title{margin-bottom:2.75rem}

.viaggio-container{
  position:relative;
  width:100%;
}

/* ---- popup: thought bubble offset to the upper-right of the stop marker ---- */
.viaggio-popup{
  position:absolute;
  left:15%;
  bottom:269px; /* scene bottom:20% (90px) + car height (143px) + gap + 20px */
  transform:translateX(0) translateY(6px);
  width:320px;
  max-width:78vw;
  max-height:300px;
  overflow:visible;
  background:var(--white);
  border:2px solid #c8b89a;
  border-radius:60% 40% 55% 45% / 45% 55% 40% 60%;
  padding:1rem 1.2rem 1rem;
  box-shadow:0 4px 16px rgba(0,0,0,0.1);
  opacity:0;
  visibility:hidden;
  transition:opacity 0.35s ease, transform 0.35s ease;
  z-index:5;
}
.viaggio-popup.visible{
  opacity:1;
  visibility:visible;
  transform:translateX(0) translateY(0);
}
/* thought-bubble dots, trailing diagonally down-left from the bubble toward the stop marker */
.viaggio-popup::before,
.viaggio-popup::after,
.viaggio-popup-dot3{
  content:'';
  position:absolute;
  background:var(--white);
  border:2px solid #c8b89a;
  border-radius:50%;
}
.viaggio-popup::before{
  width:15px;
  height:15px;
  left:6px;
  bottom:-6px;
}
.viaggio-popup::after{
  width:10px;
  height:10px;
  left:-8px;
  bottom:-18px;
}
.viaggio-popup-dot3{
  width:6px;
  height:6px;
  left:-20px;
  bottom:-28px;
}
.viaggio-popup-close{
  position:absolute;
  top:6px;
  right:9px;
  background:none;
  border:none;
  font-size:16px;
  color:var(--ink-light);
  cursor:pointer;
  line-height:1;
  padding:4px;
}
.viaggio-popup-title{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:22px;
  color:var(--mauve-dark);
  margin:0 0 0.4rem;
  text-align:center;
}
.viaggio-popup-gallery{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  border-radius:40% 35% 45% 38% / 38% 45% 35% 40%;
  overflow:hidden;
  margin-bottom:0.8rem;
  cursor:pointer;
  background:var(--champagne);
}
.viaggio-popup-gallery img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.viaggio-photo-count{
  position:absolute;
  bottom:6px;
  right:8px;
  background:rgba(42,28,44,0.55);
  color:var(--cream);
  font-family:'Cinzel',serif;
  font-size:9px;
  letter-spacing:0.08em;
  padding:3px 8px;
  border-radius:20px;
}
.viaggio-popup-desc{
  font-family:'EB Garamond',serif;
  font-size:14.5px;
  line-height:1.55;
  color:var(--ink-light);
  margin:0;
  text-align:center;
}

/* ---- scene: road, world, car ---- */
.viaggio-scene{
  position:relative;
  width:100%;
  height:450px;
  border-radius:14px;
  overflow:hidden;
  background-color:var(--champagne-pale);
  background-image:url("../Grafiche/0 - strada e 2CV/strada.png");
  background-repeat:repeat-x;
  background-size:auto 100%;
  background-position:left center;
  box-shadow:0 4px 20px rgba(42,28,44,0.08);
}
.viaggio-world{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  min-width:6000px;
  transition:transform 0.9s cubic-bezier(0.65,0,0.35,1);
}
.viaggio-stop{
  position:absolute;
  bottom:26%;
  transform:translateX(-50%);
  cursor:pointer;
}
.viaggio-stop-sign{
  display:block;
  height:182px;
  width:auto;
  filter:drop-shadow(0 6px 10px rgba(42,28,44,0.2));
  transition:transform 0.2s ease;
}
.viaggio-stop:hover .viaggio-stop-sign{transform:translateY(-4px)}

.viaggio-car{
  position:absolute;
  left:15%;
  bottom:20%;
  transform:translateX(-50%);
  height:143px;
  width:auto;
  z-index:3;
  filter:drop-shadow(0 8px 14px rgba(42,28,44,0.25));
}
.viaggio-car.bouncing{animation:viaggio-bounce 0.45s ease-in-out infinite}
@keyframes viaggio-bounce{
  0%,100%{transform:translateX(-50%) translateY(0)}
  25%{transform:translateX(-50%) translateY(-9px)}
  50%{transform:translateX(-50%) translateY(0)}
  75%{transform:translateX(-50%) translateY(-5px)}
}

/* ---- controls: prev/next + progress dots ---- */
.viaggio-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.5rem;
  margin-top:1.85rem;
  flex-wrap:wrap;
}
.viaggio-nav-btn{
  background:transparent;
  border:0.75px solid var(--mauve-light);
  color:var(--mauve-dark);
  font-family:'Cinzel',serif;
  font-size:9.5px;
  letter-spacing:0.13em;
  text-transform:uppercase;
  padding:10px 18px;
  border-radius:4px;
  cursor:pointer;
  transition:all 0.2s;
}
.viaggio-nav-btn:hover:not(:disabled){background:var(--mauve-dark);border-color:var(--mauve-dark);color:var(--champagne)}
.viaggio-nav-btn:disabled{opacity:0.35;cursor:default}

.viaggio-dots{display:flex;gap:0.55rem}
.viaggio-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--champagne-dark);
  border:none;
  padding:0;
  cursor:pointer;
  transition:background 0.25s,transform 0.25s;
}
.viaggio-dot.active{background:var(--mauve-dark);transform:scale(1.3)}

@media (max-width:768px){
  .viaggio-scene{height:230px}
  .viaggio-car{height:72px}
  .viaggio-stop-sign{height:82px}
  .viaggio-popup{width:210px;bottom:154px} /* scene bottom:20% (46px) + car height (72px) + gap + 20px */
  .viaggio-controls{
    flex-direction:column;
    align-items:center;
    gap:8px;
  }
  .viaggio-nav-btn{
    font-size:8.5px;
    padding:9px 14px;
    width:80%;
    margin:0 auto;
  }
}