:root{
--accent:#00b0ff;
--btn-bg:#00b0ff;
--btn-bg-hover:#0090d1;
--panel-bg:rgba(0,0,0,0.55);
--panel-bg-white: rgba(255, 255, 255, 0.55);
}
*{box-sizing:border-box}

/*body {
  margin: 0;
  background: linear-gradient(to bottom, #0b1c2c, #152f4a);
  font-family: "Segoe UI", sans-serif;
  color: #fff;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}*/

.container {
  position: relative;
  width: 60vw;
  height: 70vh;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 0 30px rgba(0,0,0,0.7);
}

/* --- SLIDES --- */
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-size: cover;
  background-position: center;
  transition: opacity 0.8s;
  pointer-events: none; /* preveniamo click su slide non attiva */
}
.slide.active {
  opacity: 1;
  z-index: 2;
  pointer-events: auto; /* solo la slide attiva è cliccabile */
}

/* --- TESTO SOVRAPPOSO --- */
.caption {
  position: absolute;
  bottom: 80px;
  right: -100%;
  /*background: rgba(0,0,0,0.55);*/
  background:var(--panel-bg-white);
  padding: 25px 30px;
  border-radius: 14px;
  max-width: 55%;
  box-shadow: 0 0 15px rgba(0,0,0,0.3);
  transition: transform 1s ease, opacity 1s ease, right 1s ease;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}
.caption.visible {
  right: 50px;
  opacity: 1;
  pointer-events: auto;
}
.caption h2 {
  margin: 0 0 10px;
  font-size: 1.5rem;
  /*color: #00b0ff;*/
  display: flex;
  align-items: center;
  gap: 10px;
}
.caption p {
  margin: 0 0 15px;
  font-size: 1.1rem;
}
/*.caption a {
  text-decoration: none;
  color: #fff;
  background: #00b0ff;
  padding: 10px 18px;
  border-radius: 6px;
  font-weight: bold;
  transition: background 0.3s, transform 0.2s;
  cursor: pointer;
}*/
.caption a:hover {
  background: #0090d1;
  transform: scale(1.05);
}

/* Override pulsanti bootstrap */
.btn-outline-primary.fg_blu_sito {
  color: #1b5278;
  border-color: #1b5278;
}

.btn-outline-primary.fg_blu_sito:hover {
  background-color: #1b5278;
  color: white;
}

.slider-caption {
  width: 100%;
  text-align: center;
}


/* --- FRECCE --- */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  padding: 10px 15px;
  border-radius: 50%;
  z-index: 20;
  transition: background 0.3s, transform 0.2s;
}
.arrow:hover {
  background: rgba(0,0,0,0.8);
  transform: translateY(-50%) scale(1.1);
}
.arrow.left { left: 10px; }
.arrow.right { right: 10px; }

/* --- EFFETTI --- */
.fade-enter { animation: fadeIn 1s ease forwards; }
.fade-exit { animation: fadeOut 1s ease forwards; }
@keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} }
@keyframes fadeOut { from {opacity: 1;} to {opacity: 0;} }

.push-enter { animation: pushIn 0.8s ease forwards; }
.push-exit { animation: pushOut 0.8s ease forwards; }
@keyframes pushIn { from {transform: translateX(100%);} to {transform: translateX(0);} }
@keyframes pushOut { from {transform: translateX(0);} to {transform: translateX(-100%);} }

.flip-enter { animation: flipIn 1s ease forwards; transform-origin: left center; }
.flip-exit { animation: flipOut 1s ease forwards; transform-origin: right center; }
@keyframes flipIn { from {transform: rotateY(-90deg);} to {transform: rotateY(0);} }
@keyframes flipOut { from {transform: rotateY(0);} to {transform: rotateY(90deg);} }

.zoomrotate-enter { animation: zoomRotateIn 1s ease forwards; }
.zoomrotate-exit { animation: zoomRotateOut 1s ease forwards; }
@keyframes zoomRotateIn { from {transform: scale(1.5) rotate(30deg); opacity: 0;} to {transform: scale(1) rotate(0); opacity: 1;} }
@keyframes zoomRotateOut { from {transform: scale(1) rotate(0); opacity: 1;} to {transform: scale(0.8) rotate(-30deg); opacity: 0;} }

.tiles {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr);
  position: absolute;
  inset: 0;
  z-index: 5;
}
.tile {
  width: 100%;
  height: 100%;
  background-size: 90vw 90vh;
  background-repeat: no-repeat;
  opacity: 0;
}
.tile.show { animation: tileShow 0.6s ease forwards; }
@keyframes tileShow {
  from {transform: scale(0) rotate(45deg); opacity: 0;}
  to {transform: scale(1) rotate(0deg); opacity: 1;}
}

/* Media Queries per dispositivi mobili */
@media (max-width: 767px) {
  .container  {width: 100%; max-width: calc(100vw - 20px); margin: 0 auto; height: 30vh;}
  .caption    {bottom: 1px; padding: 5px 5px;}
  .caption h2 {font-size: 0.5rem;}
  .caption p  {font-size: 0.5rem;}
  .caption a  {font-size: 0.5rem;}
}