/*PALETTE
azzurro chiaro: #90b8b8 144 184 184
azzurro scuro: #007982 0 121 130 
rosa chiaro: #e899e0
rosa scuro: #de5b7b
*/



body {
	font-family: "PT Serif", serif;
  font-weight: 400;
  font-style: normal;
  color:#fff;
  background-color: #000;
}

.alternatetxtcolor {
  color:#e899e0;
  font-weight: 500;
}

h1, h2, h3, h4, h5 {
  color:#de5b7b;
  font-weight: 500;
  font-family: "Cinzel Decorative", serif;
  font-style: normal;
  text-shadow:
    1px 1px 0 #fff,   /* luce */
    2px 2px 0 #000;   /* ombra */
}

a {
	color: #007982;
	text-decoration: none;
}

a:hover {
	color: #90b8b8;
}

.socialico {
	font-size: 5rem;
}

.bg-concerts {
  background-image: url('../images/bg-concerts.png');
  background-position: auto 0;
  background-repeat: no-repeat;
  background-size: cover;
}

.gotop {
  position: fixed;
  bottom:1rem;
  right: 1rem;
  z-index: 99;
}

.navbar {
  border-bottom: 4px solid #de5b7b;
  opacity: 0.8;
  z-index: 1050;
  transition: all 0.8s ease-in-out; /* Transizione fluida */
}

.navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .show>.nav-link {
    color: #90b8b8;
}

.navbar.navbar-fixed {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.9) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    
    /* Animazione slide-down */
    transform: translateY(-100%); /* Inizia nascosta sopra */
    animation: slideDown 0.4s ease-out forwards; /* Animazione in entrata */
}

/* Keyframe per l'animazione di discesa */
@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Animazione di uscita quando si rimuove la classe */
.navbar.navbar-fixed.slide-up {
    animation: slideUp 0.3s ease-in forwards;
}

@keyframes slideUp {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(-100%);
        opacity: 0;
    }
}

/*VIDEO*/
header {
  position: relative;
  background-color: black;
  height: 95vh;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
}

header video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

header .container {
  position: relative;
  z-index: 2;
}

header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 1;
}

/* Media Query for devices withi coarse pointers and no hover functionality */

/* This will use a fallback image instead of a video for devices that commonly do not support the HTML5 video element */

@media (pointer: coarse) and (hover: none) {
  header {
    /*background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;*/
    background-color: #000;
  }

  header video {
    display: block;
    left:36%;
  }
}

/*FINE VIDEO*/



.zu-divider {
  height: 3rem;
  background: linear-gradient(to bottom, #90b8b8, #007982);
  /* Per maggiore compatibilità con alcuni browser, puoi anche usare: */
  background: -webkit-linear-gradient(top, #90b8b8, #007982); /* Safari 5.1-6, Chrome 10-25 */
  background: -moz-linear-gradient(top, #90b8b8, #007982); /* Firefox 3.6-15 */
  background: -o-linear-gradient(top, #90b8b8, #007982); /* Opera 11.1-12 */
  border: solid rgba(0, 0, 0, .15);
  border-width: 1px 0;
  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

@media (min-width: 992px) {
  .rounded-lg-3 { border-radius: .3rem; }
}

.fw-mbold {
    font-weight: 400!important;
}

.rounded-5 {
    border-radius: 1rem !important;
}

.bg-sep {
  background: linear-gradient(to bottom, #90b8b8, #007982);
  /* Per maggiore compatibilità con alcuni browser, puoi anche usare: */
  background: -webkit-linear-gradient(top, #90b8b8, #007982); /* Safari 5.1-6, Chrome 10-25 */
  background: -moz-linear-gradient(top, #90b8b8, #007982); /* Firefox 3.6-15 */
  background: -o-linear-gradient(top, #90b8b8, #007982); /* Opera 11.1-12 */
}

.zuframe {
	  border: 0; 
	  width: 78%; 
	  height: 753px;
}

.zuframesq {
    border: 0; 
    width: 90%;
  aspect-ratio: 1 / 1;
}

@media(max-width:845px) {
  
	.zuframe {
	  border: 0; 
	  width: 99%; 
	  height: 753px;
	}

}


/* PHOTO GALLERY  */
.img-gall {
  padding:0;
  margin: 0;
}

.rowcolnospace {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.masonry-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            grid-auto-rows: 10px;
            gap: 0;
        }
        
        .masonry-item {
            overflow: hidden;
            cursor: pointer;
            transition: transform 0.3s ease;
        }
        
        .masonry-item:hover {
            transform: scale(1.02);
            z-index: 10;
            position: relative;
        }
        
        .masonry-item img {
            width: 100%;
            height: auto;
            display: block;
            object-fit: cover;
        }
        
        /* Responsive breakpoints */
        @media (max-width: 768px) {
            .masonry-gallery {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (max-width: 480px) {
            .masonry-gallery {
                grid-template-columns: 1fr;
            }
        }






/* BTN DARK E LIGHT... */
.btn-dark {
  background-color: #007982;
  color: #e899e0;
}

.btn-dark:hover {
  background-color: #90b8b8;
  color: #de5b7b;
}

.btn-outline-secondary {
  background-color: #e899e0;
  color: #007982;
}

.btn-outline-secondary:hover {
  background-color: #de5b7b;
  color: #90b8b8;
}


.full-width {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}




/* ANIMALO */

/* Classi base per nascondere gli elementi inizialmente */
.fade-in,
.slide-up,
.slide-down,
.slide-left,
.slide-right,
.zoom-in,
.zoom-out,
.rotate-in,
.flip-in {
    opacity: 0;
    transition: all 0.8s ease-out;
    transform-origin: center;
}

/* Animazioni di entrata */
.fade-in.animate {
    opacity: 1;
}

.slide-up {
    transform: translateY(50px);
}
.slide-up.animate {
    opacity: 1;
    transform: translateY(0);
}

.slide-down {
    transform: translateY(-50px);
}
.slide-down.animate {
    opacity: 1;
    transform: translateY(0);
}

.slide-left {
    transform: translateX(50px);
}
.slide-left.animate {
    opacity: 1;
    transform: translateX(0);
}

.slide-right {
    transform: translateX(-50px);
}
.slide-right.animate {
    opacity: 1;
    transform: translateX(0);
}

.zoom-in {
    transform: scale(0.8);
}
.zoom-in.animate {
    opacity: 1;
    transform: scale(1);
}

.zoom-out {
    transform: scale(1.2);
}
.zoom-out.animate {
    opacity: 1;
    transform: scale(1);
}

.rotate-in {
    transform: rotate(-10deg) scale(0.9);
}
.rotate-in.animate {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.flip-in {
    transform: rotateY(90deg);
}
.flip-in.animate {
    opacity: 1;
    transform: rotateY(0deg);
}

/* Varianti con ritardo per effetti a cascata */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* Durate diverse */
.duration-fast { transition-duration: 0.4s; }
.duration-slow { transition-duration: 1.2s; }
.duration-very-slow { transition-duration: 1.6s; }

/* Easing diversi */
.ease-bounce { transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.ease-elastic { transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); }


/*
MANUALE ANIMAZIONI
Classi disponibili:

fade-in - Appare con fade
slide-up - Scivola dal basso
slide-down - Scivola dall'alto
slide-left - Scivola da destra
slide-right - Scivola da sinistra
zoom-in - Ingrandimento
zoom-out - Rimpicciolimento
rotate-in - Rotazione con zoom
flip-in - Rotazione 3D

Modificatori:

delay-1 a delay-5 - Ritardi crescenti
duration-fast/slow/very-slow - Velocità diverse
ease-bounce/elastic - Effetti di rimbalzo

Personalizzazioni:

Cambia threshold: 0.1 per controllare quando attivare l'animazione
Modifica rootMargin per anticipare/ritardare l'attivazione
Commenta entry.target.classList.remove('animate') se vuoi che l'animazione avvenga solo una volta

*/