/* --- FINÁLNÍ CSS PRO BANNER (VŠECHNY EFEKTY) --- */

/* 1. ZÁKLADNÍ NASTAVENÍ A ZTMAVENÍ */
#carousel .item.active {
  position: relative;
  overflow: hidden;
}
ol.carousel-indicators {
  display: none;
}
.carousel-inner > .item > img {
  filter: brightness(0.7);
} /* Ztmavení původního obrázku */

/* 2. TEXTY */
.extended-banner-texts {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  text-align: center;
  z-index: 5;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.extended-banner-title,
.extended-banner-perex {
  color: #fff !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7) !important;
  pointer-events: auto;
}

/* 3. ODKAZY/BRÁNY S OBRÁZKEM A EFEKTY */
.split-banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.split-banner-link {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.5%;
  display: block;
  overflow: hidden;
  cursor: pointer;
  background-size: 200% 100%; /* Klíčový trik pro zobrazení poloviny obrázku */
  transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1),
    background-size 0.4s ease-out;
  filter: brightness(0.7); /* Aplikujeme ztmavení i na naše brány */
  background-blend-mode: multiply;
}
.split-banner-link.left {
  left: 0;
  background-position: left center;
}
.split-banner-link.right {
  right: 0;
  background-position: right center;
}
.split-banner-link:hover {
  background-color: rgba(0, 0, 0, 0.3);
  background-size: 210% 110%;
}

/* 4. VÁŠ PŮVODNÍ KÓD PRO ŠIPKY A SMOKE (zůstává funkční) */
.hover-arrow-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  border-top: 3px solid rgba(255, 255, 255, 0.9);
  border-right: 3px solid rgba(255, 255, 255, 0.9);
  opacity: 0;
  transform-origin: center;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.split-banner-link.right .hover-arrow-icon {
  transform: translate(-75%, -50%) rotate(45deg) scale(0.7);
}
.split-banner-link.right:hover .hover-arrow-icon {
  opacity: 1;
}
.split-banner-link.left .hover-arrow-icon {
  transform: translate(-25%, -50%) rotate(-135deg) scale(0.7);
}
.split-banner-link.left:hover .hover-arrow-icon {
  opacity: 1;
}
.split-banner-link::before,
.split-banner-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0) translateX(-50%);
}
.split-banner-link.left::before,
.split-banner-link.left::after {
  background: radial-gradient(
    circle,
    rgba(140, 78, 179, 0.6) 0%,
    rgba(140, 78, 179, 0) 70%
  );
}
.split-banner-link.right::before,
.split-banner-link.right::after {
  background: radial-gradient(
    circle,
    rgba(80, 247, 226, 0.6) 0%,
    rgba(80, 247, 226, 0) 70%
  );
}
@keyframes smoke-animation {
  0% {
    transform: scale(0.6) translate(-50%, 20%);
    opacity: 0;
  }
  50% {
    transform: scale(1) translate(-60%, -60%);
    opacity: 0.75;
  }
  100% {
    transform: scale(1.6) translate(-70%, -120%);
    opacity: 0;
  }
}
.split-banner-link:hover::before,
.split-banner-link:hover::after {
  opacity: 1;
  animation-name: smoke-animation;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.split-banner-link:hover::before {
  animation-duration: 5s;
}
.split-banner-link:hover::after {
  animation-duration: 4s;
  animation-delay: -2s;
}

/* 5. LOGO A RIPPLE EFEKT */
.gate-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%) scale(0.3); /* Menší počáteční velikost */
  opacity: 0;
  filter: blur(5px); /* Rozmazané na začátku */
  /* Delší a dynamičtější animace */
  transition: opacity 0.5s ease 0.5s,
    transform 0.7s cubic-bezier(0.23, 1, 0.32, 1) 0.5s, filter 0.7s ease 0.5s;
}
.gate-logo img {
  max-width: 250px;
}
.ripple-particle {
  position: absolute;
  width: 20px;
  height: 20px;
  background: radial-gradient(
    circle,
    rgba(51, 255, 196, 0.7) 0%,
    rgba(0, 0, 0, 0) 60%
  );
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: ripple-animation 1s ease-out forwards;
  z-index: 4;
}
@keyframes ripple-animation {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -150%) scale(10);
    opacity: 0;
  }
}

/* 6. ANIMAČNÍ STAV ".is-opening" */
#carousel.is-opening .split-banner-link.left {
  transform: translateX(-100%);
}
#carousel.is-opening .split-banner-link.right {
  transform: translateX(100%);
}
#carousel.is-opening .gate-logo {
  opacity: 1;
  transform: translate(-50%, -50%) scale(3.5); /* Mnohem větší finální velikost */
  filter: blur(0); /* Zaostření na konci */
}
#carousel.is-opening .extended-banner-texts {
  opacity: 0;
}

/* 7. VÁŠ PŮVODNÍ KÓD PRO MOBILNÍ ŠIPKY (zůstává funkční) */
@media screen and (max-width: 767px) {
  .hover-arrow-icon {
    opacity: 1;
    transition: none;
    border: none;
    width: 45px;
    height: 45px;
  }
  .split-banner-link.left .hover-arrow-icon,
  .split-banner-link.right .hover-arrow-icon {
    transform: none;
    top: auto;
    bottom: 20px;
  }
  .hover-arrow-icon::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(30, 30, 30, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  .hover-arrow-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 15px;
    border-top: 2px solid rgba(255, 255, 255, 0.85);
    border-right: 2px solid rgba(255, 255, 255, 0.85);
  }
  .split-banner-link.right .hover-arrow-icon {
    right: 20px;
    left: auto;
  }
  .split-banner-link.right .hover-arrow-icon::after {
    transform: translate(-75%, -50%) rotate(45deg);
  }
  .split-banner-link.left .hover-arrow-icon {
    left: 20px;
    right: auto;
  }
  .split-banner-link.left .hover-arrow-icon::after {
    transform: translate(-25%, -50%) rotate(-135deg);
  }
}

/* --- POZADÍ DŽUNGLE POD BANNEREM --- */

.homepage-box.before-carousel {
  /* Vložíme obrázek na pozadí a přes něj tmavý gradient */
  background-image: linear-gradient(
      rgba(13, 13, 15, 0.85),
      rgba(13, 13, 15, 0.85)
    ),
    url("https://www.getmyswag.cz/user/documents/upload/Brand/jungle%20bg-min.png");

  /* Zajistíme, aby se obrázek vždy přizpůsobil */
  background-size: cover;
  background-position: center bottom; /* Ukáže spíše spodek obrázku */
  padding: 0; /* Zruší případný vnitřní padding */
}