body {
  background-color: #121212;
  background-image: linear-gradient(rgba(10, 10, 10, 0.85), rgba(18, 18, 18, 0.90)), url('fulmini-bg.jpeg');
  background-repeat: repeat;
  background-size: cover;
  color: #e5e5e5;
  margin: 0;
}

/* Canvas Sfondo Dinamico: Brillantini sotto a tutti gli elementi */
#cyberCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
  opacity: 0.65;
}

header, main, section, footer {
  position: relative;
  z-index: 10;
}

.album-modal {
  z-index: 50;
}

#lightbox {
  z-index: 100;
}

/* Watermark protettivo sopra le immagini */
.watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 5;
}

.watermark span {
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.25);
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0,0,0,0.9);
  transform: rotate(-20deg);
  white-space: nowrap;
}

/* =================================================== */
/* CAROSELLO AUTOMATICO FLUIDO CON ANIMAZIONE CSS      */
/* =================================================== */

.carousel-wrapper {
  overflow: hidden;
  width: 100%;
  position: relative;
  z-index: 20;
}

.carousel-track {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  animation: continuousScroll 25s linear infinite; /* Cambia 25s per regolare la velocità */
}

/* Mette in pausa lo scorrimento quando si passa il mouse o si tocca la foto */
.carousel-wrapper:hover .carousel-track,
.carousel-wrapper:active .carousel-track {
  animation-play-state: paused;
}

/* Animazione fluida continua da Destra verso Sinistra */
@keyframes continuousScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Card Carosello: Effetto 3D elegante e FISICAMENTE OPACO per coprire le particelle sotto */
.carousel-item {
  flex-shrink: 0;
  position: relative;
  z-index: 25;
  isolation: isolate;
  background-color: #121212 !important;
  border-radius: 0.85rem;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.85), 0 0 10px rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.carousel-item:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.95), 0 0 15px rgba(255, 255, 255, 0.15);
}

.carousel-item img {
  background-color: #121212;
  display: block;
}

/* =================================================== */
/* CARD DEI MATCH E PULSANTI                           */
/* =================================================== */

.match-card {
  background-color: #1a1a1a;
  border: 1px solid #00ff66;
  box-shadow: 0 4px 0px 0px #00993d, 0 8px 20px rgba(0,255,102,0.20);
  transition: all 0.15s ease;
  padding: 12px !important;
  position: relative;
  z-index: 10;
}

.match-card:hover {
  border-color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 0px 0px #cccccc, 0 12px 25px rgba(255,255,255,0.25);
}

/* Bottoni principali della Home */
.btn-mma { 
  background-color: #f5f5f5; 
  color: #000000; 
  font-weight: 800;
  border-bottom: 3px solid #b3b3b3;
  box-shadow: 0 3px 8px rgba(0,0,0,0.3);
  transition: all 0.1s ease;
}
.btn-mma:hover {
  background-color: #ffffff;
  border-color: #ffffff;
}
.btn-mma:active { transform: translateY(2px); border-bottom-width: 1px; }

.btn-k1 { 
  background-color: #262626; 
  color: #ffffff; 
  font-weight: 800;
  border: 1px solid #404040;
  border-bottom: 3px solid #0d0d0d;
  box-shadow: 0 3px 8px rgba(0,0,0,0.3);
  transition: all 0.1s ease;
}
.btn-k1:hover {
  background-color: #3b3b3b;
  border-color: #737373;
}
.btn-k1:active { transform: translateY(2px); border-bottom-width: 1px; }

.btn-video {
  background-color: #1a1a1a;
  color: #ffffff;
  font-weight: 800;
  border: 1px solid #333333;
  border-bottom: 3px solid #0a0a0a;
  box-shadow: 0 3px 8px rgba(0,0,0,0.3);
  transition: all 0.1s ease;
}
.btn-video:active { transform: translateY(2px); border-bottom-width: 1px; }

.section-divider {
  background: linear-gradient(90deg, transparent, #00ff66, transparent);
  height: 2px;
}

.photo-stack {
  position: relative;
  width: 64px;
  height: 42px;
  flex-shrink: 0;
}

.photo-stack img {
  position: absolute;
  width: 44px;
  height: 32px;
  object-fit: cover;
  border: 2px solid #00ff66;
  box-shadow: 0 3px 8px rgba(0,0,0,0.8);
}

.photo-stack img:nth-child(1) { transform: rotate(-10deg) translateX(-4px); z-index: 1; }
.photo-stack img:nth-child(2) { transform: rotate(8deg) translateX(4px); z-index: 2; }

/* =================================================== */
/* STILE POP-UP (MODAL)                                */
/* =================================================== */

.album-modal .bg-\[\#1a1a1a\] {
  background-color: #161616 !important;
  border: 1px solid #00ff66 !important;
  box-shadow: 0 0 30px rgba(0,255,102,0.15), 0 20px 40px rgba(0,0,0,0.9);
}

/* Bottoni standard dentro i pop-up */
.album-modal a.bg-\[\#262626\] {
  background-color: #262626 !important;
  color: #ffffff !important;
  border: 1px solid #404040 !important;
  border-bottom: 3px solid #0d0d0d !important;
  transition: all 0.1s ease;
}

.album-modal a.bg-\[\#262626\]:hover {
  background-color: #3b3b3b !important;
  border-color: #737373 !important;
}

/* Bottone Pacchetto Foto + Video */
.album-modal a.bg-white {
  background-color: #f5f5f5 !important;
  color: #000000 !important;
  border: 1px solid #ffffff !important;
  border-bottom: 3px solid #b3b3b3 !important;
  font-weight: 900 !important;
}

.album-modal a.bg-white:hover {
  background-color: #ffffff !important;
}

/* Badge dei prezzi */
.album-modal span.bg-black\/40,
.album-modal span.bg-black\/20 {
  background-color: rgba(0, 0, 0, 0.4) !important;
  color: #e5e5e5 !important;
}

/* Effetto Scroll Reveal */
.reveal-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-item.active {
  opacity: 1;
  transform: translateY(0);
}