/* HERO MOSAIC BASE STYLES */
.mosaic.intro-hero-main .intro__inner .intro__entry {
  padding-top: 0;
}

/* MOSAIC BOX STYLES */
.mosaic-box {
  position: absolute;
  overflow: hidden;
  border-radius: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(3px);
  transition: transform 0.25s ease;
}

/*.mosaic-box:hover {
  transform: scale(1.03) translateY(-1px);
  z-index: 10;
}*/

/* PLACEHOLDER & IMAGE STYLES */
.mosaic-placeholder {
  width: 100%;
  height: 100%;
  position: relative;
  background: #f8f9fa;
  border-radius: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.mosaic-placeholder.error {
  background: #ff4444;
  opacity: 0.3;
}

.mosaic-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  opacity: 0;
  transform: translateY(10px) scale(0.95);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mosaic-image.loaded {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/*.mosaic-image:hover {
  transform: scale(1.02);
  transition: transform 0.25s ease;
}*/

/* MOBILE POSITIONS */
.mosaic-box[data-position="1"] { top: 246px; left: 336px; width: 59px; height: 33px; }
.mosaic-box[data-position="2"] { top: 175px; left: 163px; width: 168px; height: 95px; }
.mosaic-box[data-position="3"] { top: 56px; left: 0; width: 203px; height: 114px; }
.mosaic-box[data-position="4"] { top: 175px; left: 18px; width: 139px; height: 78px; }
.mosaic-box[data-position="5"] { top: 56px; left: 380px; width: 203px; height: 114px; }
.mosaic-box[data-position="6"] { top: 36px; left: 209px; width: 59px; height: 33px; }
.mosaic-box[data-position="7"] { top: 75px; left: 208px; width: 168px; height: 95px; }
.mosaic-box[data-position="8"] { top: 175px; left: 335px; width: 116px; height: 66px; }

/* ===== MOBILE ANIMATION DELAYS ===== */
.mosaic-box[data-position="1"] .mosaic-image { transition-delay: 0ms; }
.mosaic-box[data-position="2"] .mosaic-image { transition-delay: 100ms; }
.mosaic-box[data-position="3"] .mosaic-image { transition-delay: 200ms; }
.mosaic-box[data-position="4"] .mosaic-image { transition-delay: 300ms; }
.mosaic-box[data-position="5"] .mosaic-image { transition-delay: 400ms; }
.mosaic-box[data-position="6"] .mosaic-image { transition-delay: 500ms; }
.mosaic-box[data-position="7"] .mosaic-image { transition-delay: 600ms; }
.mosaic-box[data-position="8"] .mosaic-image { transition-delay: 700ms; }

/* TABLET STYLES */
@media (min-width: 768px) {
  .hero-mosaic {
    width: 50%;
    position: relative;
  }

  .mosaic-box {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    transition: transform 0.3s ease;
  }

  /*.mosaic-box:hover {
    transform: scale(1.05) translateY(-2px);
  }*/

  /* Tablet positions */
  .mosaic-box[data-position="1"] { top: 95px; left: 0; width: 308px; height: 174px; }
  .mosaic-box[data-position="2"] { top: 120px; left: 322px; width: 301px; height: 150px; }
  .mosaic-box[data-position="3"] { top: 280px; left: 258px; width: 301px; height: 150px; }
  .mosaic-box[data-position="4"] { top: 280px; left: 34px; width: 210px; height: 119px; }
  .mosaic-box[data-position="5"] { top: 86px; left: 636px; width: 266px; height: 184px; }
  .mosaic-box[data-position="6"] { top: 65px; left: 322px; width: 89px; height: 50px; }
  .mosaic-box[data-position="7"] { top: 388px; left: 569px; width: 89px; height: 50px; }
  .mosaic-box[data-position="8"] { top: 280px; left: 569px; width: 177px; height: 100px; }

  .mosaic-placeholder {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .mosaic-image {
    transform: translateY(20px) scale(0.9);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /*.mosaic-image:hover {
    transform: scale(1.02);
    transition: transform 0.3s ease;
  }*/

  /* Tablet animation delays */
  .mosaic-box[data-position="1"] .mosaic-image { transition-delay: 0ms; }
  .mosaic-box[data-position="2"] .mosaic-image { transition-delay: 200ms; }
  .mosaic-box[data-position="3"] .mosaic-image { transition-delay: 400ms; }
  .mosaic-box[data-position="4"] .mosaic-image { transition-delay: 600ms; }
  .mosaic-box[data-position="5"] .mosaic-image { transition-delay: 800ms; }
  .mosaic-box[data-position="6"] .mosaic-image { transition-delay: 1000ms; }
  .mosaic-box[data-position="7"] .mosaic-image { transition-delay: 1200ms; }
  .mosaic-box[data-position="8"] .mosaic-image { transition-delay: 1400ms; }
}

/* DESKTOP STYLES */
@media (min-width: 996px) {
  .hero-mosaic {
    width: 50%;
  }
  
  .mosaic.intro-hero-main .intro__inner {
    height: 460px !important;
    min-height: 460px !important;
  }

  /* Desktop positions */
  .mosaic-box[data-position="1"] { top: 74px; left: 0; width: 308px; height: 174px; }
  .mosaic-box[data-position="2"] { top: 106px; left: 318px; width: 255px; height: 144px; }
  .mosaic-box[data-position="3"] { top: 258px; left: 258px; width: 255px; height: 144px; }
  .mosaic-box[data-position="4"] { top: 258px; left: 34px; width: 210px; height: 119px; }
  .mosaic-box[data-position="5"] { top: 76px; left: 582px; width: 308px; height: 174px; }
  .mosaic-box[data-position="6"] { top: 48px; left: 318px; width: 89px; height: 50px; }
  .mosaic-box[data-position="7"] { top: 365px; left: 524px; width: 89px; height: 50px; }
  .mosaic-box[data-position="8"] { top: 258px; left: 524px; width: 177px; height: 100px; }
}