/* =================================================================
   VIN AMERTA BALI - ADVANCED GSAP ANIMATIONS STYLESHEET
   Luxury Architectural Design & Build
   ================================================================= */

/* -----------------------------------------------------------------
   1. PERFORMANCE: HARDWARE ACCELERATION (Requirement 6)
   Ensure all animated elements use will-change: transform to avoid lag
   ----------------------------------------------------------------- */
.split-char,
.hero-slide,
.hero-slide img,
#hero-slider-wrap,
.project-gallery-item,
.project-gallery-track,
.project-image,
.real-project-image,
#real-modal-panel,
#real-modal-backdrop,
.reveal,
.custom-cursor,
#cursor-follower {
  will-change: transform;
}

/* -----------------------------------------------------------------
   2. CUSTOM CURSOR INTERACTION (Requirement 5)
   Sleek architectural cursor follower with blend mode
   ----------------------------------------------------------------- */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 9999px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: none) or (max-width: 1024px) {
  .custom-cursor {
    display: none !important;
  }
}

/* -----------------------------------------------------------------
   3. HERO SPLITTEXT CHARACTERS (Requirement 2)
   ----------------------------------------------------------------- */
.split-char {
  display: inline-block;
  transform-origin: 50% 100%;
}

/* Hero Parallax wrap reserve to avoid edge clipping */
#hero-slider-wrap {
  top: -10%;
  height: 120%;
}

/* -----------------------------------------------------------------
   4. PINNED HORIZONTAL PROJECT GALLERY (Requirement 3)
   ----------------------------------------------------------------- */
#portfolio-section {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.project-gallery-stage {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.project-gallery-track {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
}

.project-gallery-item {
  width: 100vw;
  min-width: 100vw;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* Smooth content container for ScrollSmoother */
#smooth-wrapper {
  overflow: hidden;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#smooth-content {
  overflow: visible;
  width: 100%;
}