/* === MUSIC PAGE LAYOUT === */

.music-container {
  margin-top: 80px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  width: 90%;
  max-width: 1200px;
  padding-bottom: 50px;
}


/* === IFRAME STYLES FOR MUSIC PAGE === */
.bg-text {
	/* Glassmorphism základ */
	background: rgba(0, 0, 0, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(14px);
	position: relative;
	border-radius: 7px;
	width: 330px;
	/* Šírka dlaždice */
	/* Nastavenie obsahu - pre embedy musíme nastaviť blok */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	overflow: hidden;
	/* Dôležité pre zaoblenie odlesku */
	box-shadow: 0 0 25px rgba(0, 0, 0, 0.4);
	transition: transform 0.25s ease, background 0.25s ease;
	color: white;
	/* Animácia */
	opacity: 0;
	animation-name: slideInRightBounce;
	animation-duration: 1.2s;
	animation-fill-mode: forwards;
	animation-timing-function: ease-out;
}

.bg-text:hover {
	background-color: rgba(0, 0, 0, 0.2);
	transform: scale(1.03);
	/* Jemné zväčšenie */
}

.txt {
	text-align: left;
	padding: 10px 16px;
	width: 100%;
}

.bg-text iframe {
	width: 100%;
	/* Iframe zaberá celú šírku dlaždice */
	display: block;
	height: 300px;
}

/* === REFLECTION OVERLAY === */
.reflection-overlay {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  height: 80px;

  background: linear-gradient(to top, rgba(255, 255, 255, 0.1), transparent);
  transform: skewY(-8deg);
  transform-origin: bottom left;

  pointer-events: none;
}

/* === ENTRY ANIMATION === */
@keyframes slideInRightBounce {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  60% {
    opacity: 1;
    transform: translateX(-15px);
  }
  80% {
    transform: translateX(5px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* === STAGGERING === */
.music-container > div:nth-of-type(1) { animation-delay: 0.1s; }
.music-container > div:nth-of-type(2) { animation-delay: 0.3s; }
.music-container > div:nth-of-type(3) { animation-delay: 0.5s; }
.music-container > div:nth-of-type(4) { animation-delay: 0.7s; }
.music-container > div:nth-of-type(5) { animation-delay: 0.9s; }
.music-container > div:nth-of-type(6) { animation-delay: 1.1s; }
.music-container > div:nth-of-type(7) { animation-delay: 1.3s; }
.music-container > div:nth-of-type(8) { animation-delay: 1.5s; }
.music-container > div:nth-of-type(9) { animation-delay: 1.7s; }