/**
 * Hero exploding images styles
 */

/* --- Hero Image Composition Base --- */
.hero-image-composition {
  position: relative;
  width: 100vw !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  aspect-ratio: 1800/1677;
  overflow: visible;
  max-width: none !important; /* Override any Breakdance container limits */
  box-sizing: border-box;
}

/* --- Text Elements Container & Styles --- */
.hero-image-composition .hero-text-container {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 1200px;
  z-index: 50;
  text-align: center;
}

.hero-image-composition .hero-h1 {
  color: #fff !important;
  text-align: center;
  font-size: clamp(48px, 8vw, 120px) !important;
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 25px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out,
    transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.hero-image-composition .hero-h2 {
  color: #fff !important;
  text-align: center;
  font-size: clamp(16px, 2.2vw, 24px) !important;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out,
    transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Visible state for text entrance animations */
.hero-image-composition .hero-h1.text-visible {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

.hero-image-composition .hero-h2.text-visible {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}

/* --- Image Composition Items (Scroll-Driven Animation) --- */
.hero-image-composition .composition-item {
  position: absolute;
  opacity: 1;
  will-change: transform;
}

.hero-image-composition .composition-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- Static Positioning for Image Items --- */
.hero-image-composition .laptop-background-img {
  width: 100%;
  top: 0%;
  left: 0%;
  z-index: 1;
}

.hero-image-composition .corex-dash {
  width: 18%;
  top: 46%;
  left: 18%;
  z-index: 5;
}

.hero-image-composition .lock-daily-execution {
  width: 20%;
  top: 70%;
  left: 12%;
  z-index: 6;
}

.hero-image-composition .coin-full {
  width: 10%;
  top: 75%;
  left: 16%;
  z-index: 7;
}

.hero-image-composition .get-user-top-recommend {
  width: 19%;
  top: 46%;
  left: 57%;
  z-index: 4;
}

.hero-image-composition .casino-games {
  width: 19%;
  top: 51%;
  left: 60%;
  z-index: 10;
}

.hero-image-composition .sportx-promo {
  width: 20%;
  top: 46%;
  left: 71%;
  z-index: 9;
}

.hero-image-composition .coin-blur {
  width: 18%;
  top: 65%;
  left: 64%;
  z-index: 20;
}

.hero-image-composition .coin-very-blurred {
  width: 15%;
  top: 35%;
  left: 32%;
  z-index: 3;
}

/* --- Mobile specific styles --- */
@media (max-width: 767px) {
  .hero-image-composition {
    position: relative;
    height: 100vh;
    min-height: 500px;
    aspect-ratio: auto;
    overflow: hidden;
  }

  .hero-image-composition .hero-text-container {
    top: 18%;
    width: 95%;
    z-index: 50; /* Higher z-index to ensure text is visible */
    position: relative; /* Ensure proper stacking context */
  }

  /* Hide all composition items on mobile except the mobile background */
  .hero-image-composition .composition-item:not(.mobile-background-img) {
    display: none !important; /* Force hiding */
  }

  /* Style the mobile background image */
  .hero-image-composition .mobile-background-img {
    display: block !important; /* Force display */
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }

  .hero-image-composition .mobile-background-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* Fix for Breakdance specific issues */
.breakdance .hero-image-composition {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}