html, body {
  background-color: #652120;
}
html::-webkit-scrollbar {
      display: none; /* Chrome, Safari e Edge */
    }
body::-webkit-scrollbar {
      display: none; /* Chrome, Safari e Edge */
    }

html, body {
	width: 100vw;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: linear-gradient(
    to bottom,
    #652120 0vh,
    #652120 90vh,
    #652120 90vh,
    #1F1D1C 110vh,
    #1F1D1C 110vh,
    #1F1D1C 200vh
  );
  position: relative;
  z-index: 0;
overscroll-behavior: none;
	scroll-behavior: smooth;
}
body > *:last-child {
  margin-bottom: 0;
}

body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle, rgba(0, 0, 0, 0) 60%, rgba(255, 255, 255, 0.9) 100%),
    url('https://www.transparenttextures.com/patterns/fresh-snow.png');
  filter: invert(1) brightness(0.5);
  background-repeat: repeat;
  background-size: cover;
  opacity: 0.5;
  pointer-events: none;
  z-index: -1;
}



#topHalf {
  display: flex;
  justify-content: center;   /* centraliza horizontal */
  align-items: center;       /* centraliza vertical */
}


#logoContainer {
  height: auto; /* permite que o conteúdo cresça verticalmente */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#logo {
  border-radius: 50%;
  border: 2px solid rgba(200, 0, 0, 0.6);
  object-fit: cover;
box-shadow: 0 0 200px 40px rgba(0, 0, 0, 8); /* sombra maior e mais difusa */

  transition: width 0.5s ease, height 0.5s ease;
}

/* Para telas maiores que 1000px */
@media (min-width: 700px) {
  #logo {
    width: calc(min(100vw, 100vh) * 0.3535);
    height: calc(min(100vw, 100vh) * 0.3535);
  }
	#logoContainer{
		margin-top: 0%;
	}
}

/* Para telas menores que 1000px */
@media (max-width: 699px) {
  #logo {
    width: calc(min(100vw, 100vh) * 0.5535);
    height: calc(min(100vw, 100vh) * 0.5535);
  }
	#logoContainer{
		margin-top: 10%;
	}
}


#audioVisualizer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  height: 30px;
}

.bar {
  width: 6px;
  height: 100%;
  background: white;
  animation: sound 1s infinite;
  animation-delay: calc(var(--i) * 0.1s);
}

.bar:nth-child(1) { --i: 1; }
.bar:nth-child(2) { --i: 2; }
.bar:nth-child(3) { --i: 3; }
.bar:nth-child(4) { --i: 4; }
.bar:nth-child(5) { --i: 5; }

@keyframes sound {
  0% { height: 20%; }
  50% { height: 100%; }
  100% { height: 20%; }
}



:root {
  --container-size: min(100vw, 100vh);
}

#logoContainer {
  width: var(--container-size);
  margin-left: auto;
  margin-right: auto;
	margin-bottom: 100px
}

#scrollHint {
  position: fixed;
  bottom: 0px;
  width: 100%;
  /* Para centralizar um fixed com largura variável: */
  color: white;
  font-size: 1.2rem;
  text-align: center;
  z-index: 900;
  pointer-events: none;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  background: linear-gradient(0deg, black, transparent);
  height: 200px;
  padding-top: 100px;
}

#scrollHint span,
#scrollHint .arrow-down {
  display: block;
  animation: bounce 1s infinite;
}

.arrow-down {
  font-size: 2rem;
  margin-top: 5px;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

#scrollHint.hidden {
  opacity: 0;
  visibility: hidden;
}






.stars {
  width: 3px;
  height: 3px;
  position: absolute;
  background: white;
  box-shadow:
    2vw 5vh 2px white, 7vw 12vh 1px white, 12vw 18vh 2px white, 18vw 3vh 1px white,
    25vw 22vh 2px white, 30vw 8vh 1px white, 35vw 19vh 2px white, 40vw 26vh 1px white,
    45vw 9vh 2px white, 50vw 34vh 1px white, 55vw 14vh 2px white, 60vw 27vh 1px white,
    65vw 6vh 2px white, 70vw 30vh 1px white, 75vw 12vh 2px white, 80vw 20vh 1px white,
    85vw 5vh 2px white, 90vw 18vh 1px white, 95vw 10vh 2px white,
    5vw 80vh 1px white, 10vw 90vh 2px white, 15vw 70vh 1px white, 20vw 88vh 2px white,
    27vw 72vh 1px white, 34vw 95vh 2px white, 42vw 83vh 1px white, 48vw 77vh 2px white,
    54vw 85vh 1px white, 61vw 68vh 2px white, 67vw 91vh 1px white, 74vw 73vh 2px white,
    81vw 97vh 1px white, 89vw 86vh 2px white, 96vw 79vh 1px white;
  animation: twinkle 8s infinite linear;
}

.shooting-star {
  position: fixed;
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg, white, transparent);
  opacity: 0;
  animation: shoot linear infinite;
  z-index: -4;
}

/* Cada estrela com top, delay e duração diferentes */
.shooting-star:nth-child(1) {
  top: -20%;
  left: -120px;
  animation-delay: 0s;
  animation-duration: 3.5s;
}

.shooting-star:nth-child(2) {
  top: 15%;
  left: -100px;
  animation-delay: 1.2s;
  animation-duration: 4s;
}

.shooting-star:nth-child(3) {
  top: 30%;
  left: -130px;
  animation-delay: 2.7s;
  animation-duration: 3s;
}

.shooting-star:nth-child(4) {
  top: 55%;
  left: -110px;
  animation-delay: 3.9s;
  animation-duration: 4.5s;
}

.shooting-star:nth-child(5) {
  top: 70%;
  left: -150px;
  animation-delay: 5.1s;
  animation-duration: 3.8s;
}

.shooting-star:nth-child(6) {
  top: 15%;
  left: -140px;
  animation-delay: 6.4s;
  animation-duration: 4.2s;
}

.shooting-star:nth-child(7) {
  top: 35%;
  left: -90px;
  animation-delay: 7.7s;
  animation-duration: 3.6s;
}

/* Mantém a animação padrão, mas com mais inclinação */
@keyframes shoot {
  0% {
    transform: translateX(0) translateY(0) rotate(30deg);
    opacity: 1;
  }
  100% {
    transform: translateX(120vw) translateY(60vh) rotate(30deg);
    opacity: 0;
  }
}


@keyframes twinkle {
  0%,
  100% {
    opacity: 0.6;
  }
  50% {
    opacity: 0.2;
  }
}


/* Additional twinkling stars with different animation timing */
.stars::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 1px;
  background: white;
  box-shadow: 8vw 12vh 2px white, 16vw 18vh 1px white, 24vw 25vh 2px white,
    33vw 15vh 1px white, 41vw 28vh 2px white, 49vw 35vh 1px white,
    57vw 22vh 2px white, 65vw 42vh 1px white, 73vw 28vh 2px white,
    81vw 48vh 1px white, 89vw 32vh 2px white, 97vw 45vh 1px white,
    3vw 68vh 2px white, 11vw 75vh 1px white, 19vw 82vh 2px white,
    27vw 88vh 1px white, 35vw 72vh 2px white, 43vw 85vh 1px white,
    51vw 92vh 2px white, 59vw 78vh 1px white;
  animation: twinkle 6s infinite linear reverse;
}




#schedule {
  max-width: 1000px;
  width: 90%; 
    padding-top: 50px;
  height: 80%;
}

#schedule h2 {
  font-size: 28px;
  margin-bottom: 20px;
}

.schedule-item {
  background: rgb(109 51 51 / 53%);
  margin-bottom: 12px;
  padding: 10px 15px;
  border-radius: 8px;
  text-align: left;
}

.schedule-time {
  font-weight: 600;
  font-size: 18px;
}

.schedule-show {
  font-size: 16px;
  margin-top: 3px;
  color: #ddd;
}


@keyframes pulseBeat {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.015);
  }
  50% {
    transform: scale(0.985);
  }
  75% {
    transform: scale(1.01);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes pulseGlow {
  0% {
    filter: drop-shadow(0 0 20px rgba(200, 0, 0, 0.6));
  }
  50% {
    filter: drop-shadow(0 0 60px rgba(255, 0, 0, 1));
  }
  100% {
    filter: drop-shadow(0 0 20px rgba(200, 0, 0, 0.6));
  }
}
@keyframes pulseGlow2 {
  0% {
    filter: 
      drop-shadow(0 0 0px #aa0000)
    drop-shadow(0 0 5px #aa0000)
    drop-shadow(0 0 10px #aa0000);
  }
  50% {
    filter: 
    drop-shadow(0 0 5px #ff0000)
    drop-shadow(0 0 10px #ff0000)
    drop-shadow(0 0 20px #ff0000);
  }
  100% {
    filter: 
      drop-shadow(0 0 0px #aa0000)
    drop-shadow(0 0 5px #aa0000)
    drop-shadow(0 0 10px #aa0000);
  }
}

.neon-text {
  color: #ff0000!important;
  filter:
    drop-shadow(0 0 5px #ff0000)
    drop-shadow(0 0 10px #ff0000)
    drop-shadow(0 0 20px #ff0000);
  font-weight: bold;
  font-size: 3rem;
  font-family: 'Arial Black', Arial, sans-serif;
	 animation: pulseGlow2 2s infinite ease-in-out;
}


#logo {
  border-radius: 50%;
  border: 2px solid rgba(200, 0, 0, 0.6);
  object-fit: cover;
  box-shadow: 0 0 200px 40px rgba(0, 0, 0, 0.8);
  animation: pulseBeat 3s infinite ease-in-out, pulseGlow 1.5s infinite ease-in-out;
  transition: transform 0.2s ease;
  transform-origin: center;
}



.indicativo {
  font-size: 28px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(94,14,16,1.00); /* tom de vermelho para algo "ao vivo" */
}

.programa {
  font-size: 40px;
  font-weight: 700;
  margin-top: 10px;
  color: #ffffff;
}

.musica {
  font-size: 28px;
  font-style: italic;
  font-weight: 400;
  color: #ddd;
  margin: 5px 0;
}

.artista {
  font-size: 18px;
  font-weight: 300;
  color: #aaa;
  margin-top: 2px;
}





  /* Background para o splash */
  #splash {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    color: red;
    font-size: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(
      to bottom,
      #652120 0vh,
      #652120 90vh,
      #652120 90vh,
      #1F1D1C 110vh,
      #1F1D1C 110vh,
      #1F1D1C 200vh
    );
	   padding-bottom: env(safe-area-inset-bottom);
  }

  #splash::before {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 200vh;
    background-image: 
      radial-gradient(circle, rgba(0, 0, 0, 0) 60%, rgba(255, 255, 255, 0.9) 100%),
      url('https://www.transparenttextures.com/patterns/fresh-snow.png');
    filter: invert(1) brightness(0.5);
    background-repeat: repeat;
    background-size: cover;
    opacity: 0.5;
    pointer-events: none;
    z-index: -1;
  }

  #splash img {
    margin-bottom: 40px;
    border-radius: 100%;
  }

.loader {
  --s: 64px;
  width: var(--s);
  aspect-ratio: 2;
  --_g: rgb(255 92 92) 90%, #0000;
  background: 
    radial-gradient(farthest-side at bottom,var(--_g)) 0    calc(50% - var(--s)/16),
    radial-gradient(farthest-side at top   ,var(--_g)) 0    calc(50% + var(--s)/16),
    radial-gradient(farthest-side at bottom,var(--_g)) 50%  calc(50% - var(--s)/16),
    radial-gradient(farthest-side at top   ,var(--_g)) 50%  calc(50% + var(--s)/16),
    radial-gradient(farthest-side at bottom,var(--_g)) 100% calc(50% - var(--s)/16),
    radial-gradient(farthest-side at top   ,var(--_g)) 100% calc(50% + var(--s)/16);
  background-size: 25% 25%;
  background-repeat: no-repeat;
  animation: l13 1s infinite linear;
}
@keyframes l13 {
    16.67% {background-position:0 0,0 100%,50% calc(50% - var(--s)/8),50% calc(50% + var(--s)/16),100% calc(50% - var(--s)/16),100% calc(50% + var(--s)/16)}
    33.33% {background-position:0 0,0 100%,50% 0,50% 100%,100% calc(50% - var(--s)/16),100% calc(50% + var(--s)/16)}
    50%    {background-position:0 0,0 100%,50% 0,50% 100%,100% 0,100% 100%}
    66.67% {background-position:0 calc(50% - var(--s)/16),0 calc(50% + var(--s)/16),50% 0,50% 100%,100% 0,100% 100%}
    83.33% {background-position:0 calc(50% - var(--s)/16),0 calc(50% + var(--s)/16),50% calc(50% - var(--s)/16),50% calc(50% + var(--s)/16),100% 0,100% 100%}
}


#weekSchedule {
  padding-bottom: 10px;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden; /* deixa a altura visível para evitar scroll interno */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

#weekSchedule::-webkit-scrollbar {
      display: none; /* Chrome, Safari e Edge */
    }

.daySchedule {
	height: 100%;
	text-align: center;
  flex: 0 0 400px;
  scroll-snap-align: center;
  margin: 30px 10px;
  background: rgba(109, 51, 51, 0.5);
  padding: 20px;
  border-radius: 8px;
  color: white;
  transition: transform 0.3s ease;
  overflow-y: hidden; /* esconde scroll vertical dentro do item */
}

.daySchedule.current {
  transform-origin: top center;
  z-index: 10;
  margin: 0 10px;
}
.daySchedule>h2 {
	margin-bottom: 30px		
}	
.daySchedule.current>h2 {
	font-size: 2rem;
	color: white!important;
		
}




#install-popup {
      display: none;
      position: absolute;
      top: 40vh;
	  width: 100%;
      color: white;
      padding: 15px 25px;
      border-radius: 8px;
      font-family: sans-serif;
      z-index: 999;
    }
	 .blur{
		 position: fixed;
		 z-index: 999;
		 width: 100%;
		 height: 100vh;
		 background-color: rgba(0,0,0,0.60);
		 backdrop-filter: blur(8px);
		 pointer-events: none;
		 
	 }


#openMenuBtn {
	position: fixed;
	top: 20px;
	left: 20px;
	z-index: 600;
	background-color: #652120;
	color: white;
	border: none;
	padding: 10px 15px;
	font-size: 18px;
	cursor: pointer;
	border-radius: 5px;
}

#sideMenu {
    position: fixed;
    top: 0;
    left: -60vw;      /* Escondido fora da tela pela largura total */
    width: 60vw;      /* Agora 60% da largura da viewport */
    height: 100%;
    background-color: #652120;
    color: white;
    z-index: 500;
    transition: left 0.3s ease;
    padding: 20px;
    box-sizing: border-box;
}

#sideMenu.open {
    left: 0;          /* Mostrar menu */
}

#closeMenuBtn {
	background: none;
	border: none;
	color: white;
	font-size: 30px;
	cursor: pointer;
	margin-bottom: 20px;
}

#sideMenu nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

#sideMenu nav ul li a {
	text-align: center;
	color: white;
	text-decoration: none;
	display: block;
	padding: 10px 0;
	font-size: 30px;
}
#sideMenu nav ul li {
    
	border-bottom: 1px solid #1e1e1e;
}
#sideMenu nav ul li:hover {
    background-color: #4A1817;
}