/* :root { 
    --darkBlue: #0d2149;
    --cardPrimaryBlue: #437bbd;
    --cardPrimaryYellow: #fcc049;
    --cardPink:#ef6aa7; 
    --anotherBlue:#124273;
 } */


.slider-wrapper {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;

}


/* 1. Grid Layout & Responsiveness */
.slide-grid {
  display: grid;
  grid-template-columns: 1fr; /* Stacked by default */
  min-height: 80vh;
  overflow: hidden;
}

/* Optional: Center the text if it's a single slide to make it look intentional */
.single-slide .slide-grid {
  grid-template-columns: 1fr; /* Keep the grid, or change to 1fr to center */
}

@media (min-width: 769px) {
  .slider-wrapper { height: 100vh;}
  .slide-grid {
    grid-template-columns: 1fr 1fr; /* 2 Columns on Desktop */
  }
.slider-wrapper {height:80vh;}

.single-slide .slide-grid {
  grid-template-columns: 1fr 1fr; /* Keep the grid, or change to 1fr to center */
}

}

/* 2. Text Animation Styles */
.content-col {
  display: flex;
  align-items: center;
  justify-content: start;
  padding: 10%;
  opacity: 0;
  transform: translateX(-30px);
  transition: all 0.8s cubic-bezier(0.2, 1, 0.3, 1);
}

.parallax-wrapper {
    height: 60vh;  /* 80% of the screen height */
    overflow: hidden;
    display: flex;
}

/* 3. Image & Parallax Zoom Styles */
.image-col {
  position: relative;
  overflow: hidden;
  height: 60vh; /* Controlled height for mobile */
}

@media (min-width: 769px) {
  .image-col { height: 80vh;  }
.parallax-wrapper{height:80vh;  border-bottom-left-radius: 24px;border-top-left-radius: 24px;
}
}

@media (min-width:1025px){
  .parallax-wrapper{display: block;}
}

/* Ken Burns Keyframes */
@keyframes kenBurns {
  0% {
    transform: scale(1.05) translateY(0) translate(var(--move-x, 0), var(--move-y, 0));
  }
  100% {
    transform: scale(1.15) translateY(-2%) translate(var(--move-x, 0), var(--move-y, 0));
  }
}

.zoom-img {
  width: 110%; /* Slightly wider to prevent edge gaps during movement */
  height: 110%; 
  object-fit: cover;
  transform-origin: center center;
  will-change: transform;
  object-position: center;
  /* Initial state: Scale 1.2 and shifted up */
  transform: scale(1.2) translateY(-10%) translate(var(--move-x, 0), var(--move-y, 0));
  
  /* Use a separate transition for the "Enter" animation vs the "Mouse" movement */
/*   transition: transform 1.2s cubic-bezier(0.2, 1, 0.3, 1), 
              translate 0.1s ease-out; */ /* Smooths the mouse follow */

}

/* When the slide is active, we go to scale 1.05 (still slightly zoomed for parallax room) */
.slick-active .zoom-img {
 transform: scale(1.05) translateY(0) translate(var(--move-x, 0), var(--move-y, 0));
  animation: kenBurns 10s linear infinite alternate;
}


/* Ensure mouse parallax still feels responsive on top of the animation */
.zoom-img {
  transition: opacity 1s ease, transform 0.2s ease-out; 
}
/* 4. Slick Active States (The "Trigger") */
.slick-active .content-col {
  opacity: 1;
  transform: translateX(0);
}

/* The container that hides the text initially */
.reveal-mask {
  overflow: hidden;
  display: block;
}

.reveal-mask span, 
.reveal-mask h2, 
.reveal-mask p {
  display: block;
  transform: translateY(110%); /* Hidden below the mask */
  transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Staggered Delays */
.slick-active .reveal-mask span { transition-delay: 0.1s; }
.slick-active .reveal-mask h2   { transition-delay: 0.2s; }
.slick-active .reveal-mask p    { transition-delay: 0.3s; }

/* The Trigger */
.slick-active .reveal-mask span,
.slick-active .reveal-mask h2,
.slick-active .reveal-mask p {
  transform: translateY(0); /* Slides up into view */
}



/* Position Arrows in the middle of the screen */
.global-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0;
  z-index: 20;
  pointer-events: none; /* Allows mouse to pass through to images */
}

.global-nav button {
  pointer-events: auto; /* Re-enables clicking for buttons */
  background:rgba(255, 255, 255, 0.4);
  border: none;
  width: 60px;
  height: 60px;
  /* border-radius: 50%; */
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: transform 0.3s ease;
}

.global-nav button:hover {
  transform: scale(1.1);
}

/* Progress Bar at the very bottom edge */
.progress-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  z-index: 30;
}

.progress-bar {
  height: 100%;
  background: #124273; /* Contrast color */
  width: 0%;
}

/* Hide UI if only one slide exists */
.single-slide .global-nav,
.single-slide .progress-container {
  display: none !important;
}