/* Enhanced Parallax Cards - Clean Collage Display */

/* Main parallax container */
.parallax-main {
  width: 100%;
  min-height: 100vh;
  padding: 0;
  margin-top: 0;
}

/* Card containers - full screen */
.parallax-card-container {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  margin-top: 0;
}

/* Cards - no background, no overflow hidden */
.parallax-card {
  width: 90vw;
  height: 90vh;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible;
  background: transparent !important;
  padding: 0;
  margin-top: 0;
}

/* Remove the black gradient overlay */
.parallax-card::before {
  display: none !important;
}



/* Image container - full coverage within 100vw card */
.parallax-image-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Image inner - proper sizing and transitions */
.parallax-image-inner {
  position: relative;
  width: 75vw;
  max-width: none;
  height: auto;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
  backface-visibility: hidden;
  text-align: center;
}

/* Images - full fit with scaling for consistency */
.parallax-image-inner img {
  width: 100vw;
  height: 100vh;
  max-height: none;
  object-fit: cover;
  object-position: center;
  display: block;
  background: white;
  border-radius: 0;
  margin: 0 auto;
}

/* Special case for ikosim image which needs full display */
.parallax-image-inner img[src*="ikosim"] {
  object-fit: contain;
  max-height: none;
  height: 100vh;
}

/* Enhanced Animation Performance */
.parallax-card,
.parallax-image-inner {
  will-change: transform;
  backface-visibility: hidden;
  perspective: 1000px;
  transform: translateZ(0);
}

/* Smoother transitions */
.parallax-card {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.parallax-image-inner {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Remove hover effects that might interfere */
.parallax-card:hover .parallax-image-inner {
  transform: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .parallax-card-container {
    height: 100vh;
    position: sticky;
  }

  .parallax-card {
    height: 100vh;
    border-radius: 0;
    background: transparent !important;
    overflow: visible;
  }

  .parallax-image-container {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .parallax-image-inner {
    width: 100vw;
    max-width: none;
    height: auto;
    text-align: center;
  }

  .parallax-image-inner img {
    width: 100vw;
    height: 100vh;
    max-height: none;
    object-fit: cover;
    background: white;
    margin: 0 auto;
  }
  
  .parallax-image-inner img[src*="ikosim"] {
    object-fit: contain;
    max-height: none;
    height: 100vh;
  }
}

@media (max-width: 480px) {
  .parallax-image-container {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    background: transparent;
  }

  .parallax-image-inner {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }

  .parallax-image-inner img {
    object-fit: cover;
    background: white;
  }
}

/* Disable parallax on reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .parallax-card,
  .parallax-image-inner {
    transform: none !important;
    transition: none !important;
  }
  
  .parallax-card-container {
    position: relative !important;
  }
}

/* Smooth scrolling for better experience */
html {
  scroll-behavior: smooth;
}

/* GPU acceleration for better performance */
.parallax-card-container,
.parallax-card,
.parallax-image-container,
.parallax-image-inner {
  transform: translateZ(0);
  will-change: transform;
}