/* === CONTAINER HOLDING ALL CARDS === */
.container {
  margin-top: 10px;
  margin-bottom: 40px;
  padding-bottom: 40px;
  background: rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}


/* === INTRO TEXT === */
.intro-text {
  width: 330px;
  text-align: justify;
  background: linear-gradient(to bottom, #cf85f8cf, #85f8eccf);
-webkit-background-clip: text;
color: transparent;
  font-size: 10px;
  line-height: 1.4;
  margin: 30px auto 20px auto;   /* priestor pod topbarom */
  opacity: 0.45;

  //background: rgba(255, 255, 255, 0.05);
  //border: 1px solid rgba(255, 255, 255, 0.08);
  //padding: 15px 18px;
  //border-radius: 10px;
  //backdrop-filter: blur(12px);

  animation: fadeIn 1s ease-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === CARD STYLE === */
.bg-text {
  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;
  height: 120px;
  width: 300px;
  padding: 12px 16px;

  display: flex;
  align-items: center;
  gap: 14px;

  box-shadow: 0 0 25px rgba(0,0,0,0.4);
  transition: transform 0.25s ease, background 0.25s ease;

  color: white;
  opacity: 0;

  animation-name: slideInRightBounce;
  animation-duration: 0.6s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}

.bg-text:hover {
  background-color: rgba(0,0,0, 0.2);
  font-weight: bold;
}

/* === CARD IMAGE === */
.bg-text img {
  border-radius: 7px;
  display: block;
}

/* === TEXT BLOCK === */
.txt {
  text-align: left;
  display: flex;
  flex-direction: column;
  align-content: space-between;
}

/* === 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;
}

/* === BLINK EFFECT IMAGE === */
.blink-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 330px;
  height: 140px;
  object-fit: cover;
  pointer-events: none;
  border-radius: 7px;

  opacity: 0;
  filter: blur(12px);
  transition: opacity 0.3s ease-out;
}

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

/* === STAGGERING === */
.container > a:nth-of-type(1) .bg-text { animation-delay: 0.1s; }
.container > a:nth-of-type(2) .bg-text { animation-delay: 0.3s; }
.container > a:nth-of-type(3) .bg-text { animation-delay: 0.5s; }