/* Scene02 - Side-by-side images with graffiti fade-in */
/* Scene container with black background */
.scene02 {
  position: relative;
  width: 100vw;
  min-height: 200vh; /* Scrollable space for fade effects */
  background-color: #000;
  overflow: hidden;
}

/* Black background overlay - covers Scene01 when Scene02 appears */
.scene02__background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  z-index: 199; /* Just below images container, above Scene01 */
  pointer-events: none;
}

/* Container for side-by-side images */
/* Only becomes fixed when Scene02 enters viewport */
.scene02__images-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 2rem;
  z-index: 200; /* Higher than Scene01 to appear on top */
  pointer-events: none;
}

/* Individual image container - left side */
.scene02__image-wrapper {
  position: relative;
  width: 50%;
  max-width: 600px;
  height: 80vh;
  overflow: hidden;
}

/* Base images (without graffiti) */
.scene02__base-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Graffiti overlay - fades in on top of base image */
.scene02__graffiti-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-out;
  pointer-events: none;
}

.scene02__graffiti-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Text overlay - same style as Scene01 text boxes */
.scene02__text {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 201; /* Above images container */
  
  padding: 1.5rem 2rem;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 300;
  color: white;
  text-align: center;
  line-height: 1.4;
  letter-spacing: 0.02em;
  
  max-width: 700px;
  
  /* Initial state - hidden, slightly below */
  opacity: 0;
  transform: translateX(-50%) translateY(calc(-50% + 20px));
  transition: opacity 1s ease-out, transform 1s ease-out;
  pointer-events: none;
}

/* Responsive - stack images vertically on mobile */
@media (max-width: 768px) {
  .scene02__images-container {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
  }
  
  .scene02__image-wrapper {
    width: 100%;
    max-width: 100%;
    height: 40vh;
  }
  
  .scene02__text {
    font-size: 1.2rem;
    padding: 1.2rem 1.5rem;
    max-width: 90%;
  }
}