/* ==========================================================================
   Angadi Mart — 3D Parallax & Cinematic Scroll Engine Styles
   Technique: 2D Illustrations with Hardware-Accelerated 3D Web Depth & Perspective
   ========================================================================== */

:root {
  --perspective: 1200px;
  --transition-smooth: cubic-bezier(0.16, 1, 0.3, 1);
}

/* 3D World Viewport Container */
.kerala-world-container {
  position: relative;
  width: 100%;
  height: 650vh; /* Expansive scroll journey */
  background-color: #6AA4F4;
  overflow: clip;
}

/* Sticky Camera Stage that stays fixed while user scrolls through the 14 scenes */
.camera-stage {
  position: sticky;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  perspective: var(--perspective);
  perspective-origin: 50% 50%;
  overflow: hidden;
  transform-style: preserve-3d;
}

/* 3D Camera Rig: Moves through Z-axis, rotates slightly with mouse and scroll */
.camera-rig {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
  pointer-events: none;
}

/* World Layers: Separated into true 3D spatial depth */
.world-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  pointer-events: auto;
  will-change: transform, opacity;
}

/* Specific Depth Layer Settings */

/* Layer 1: Kerala Sky */
.layer-sky {
  z-index: 10;
  transform: translateZ(-800px) scale(1.67);
}

.sky-svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Layer 2: Moving Clouds */
.layer-clouds {
  z-index: 20;
  transform: translateZ(-600px) scale(1.5);
}

.cloud-floating {
  animation: cloudDrift 65s linear infinite alternate;
}

@keyframes cloudDrift {
  0% { transform: translateX(-40px); }
  100% { transform: translateX(60px); }
}

/* Layer 3: Distant Hills & Silhouette Palms */
.layer-distant-hills {
  z-index: 30;
  bottom: 0;
  height: 55%;
  top: auto;
  transform: translateZ(-400px) scale(1.33);
}

/* Layer 4: Alappuzha Backwaters Water Surface */
.layer-backwater {
  z-index: 40;
  bottom: 0;
  height: 52%;
  top: auto;
  transform: translateZ(-200px) scale(1.17);
}

/* Subtle Shimmering Water Ripples */
.water-ripples {
  animation: waterRippleShimmer 4s ease-in-out infinite alternate;
}

@keyframes waterRippleShimmer {
  0% { transform: translateX(0) scaleY(1); opacity: 0.8; }
  50% { transform: translateX(12px) scaleY(1.05); opacity: 0.95; }
  100% { transform: translateX(-8px) scaleY(0.98); opacity: 0.85; }
}

/* Layer 5: Kettuvallam (Houseboat) */
.layer-houseboat {
  z-index: 50;
  bottom: 12%;
  left: 12%;
  width: 580px;
  height: 330px;
  top: auto;
  transform: translateZ(-100px) scale(1.08);
}

/* Gentle Bobbing Boat Physics */
.boat-bobbing {
  animation: boatFloatPhysics 6s ease-in-out infinite;
  transform-origin: 50% 85%;
}

@keyframes boatFloatPhysics {
  0% { transform: translateY(0px) rotate(0deg); }
  25% { transform: translateY(-7px) rotate(0.8deg); }
  50% { transform: translateY(2px) rotate(-0.5deg); }
  75% { transform: translateY(-5px) rotate(0.6deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

/* Layer 6: Vallam Kali (Chundan Snake Boat Race) */
.layer-snakeboat {
  z-index: 60;
  bottom: 18%;
  right: -80%; /* Glides into center during Scene 3 */
  width: 900px;
  height: 300px;
  top: auto;
  opacity: 0;
  transform: translateZ(-50px) scale(1.04);
}

/* Animated Oars & Spray */
.rower-splash {
  animation: splashPulse 1.2s ease-in-out infinite;
}

@keyframes splashPulse {
  0%, 100% { transform: scale(0.9); opacity: 0.6; }
  50% { transform: scale(1.15); opacity: 1; }
}

/* Layer 7: Maveli & Onam Pookalam */
.layer-maveli {
  z-index: 70;
  bottom: 8%;
  left: 50%;
  margin-left: -280px;
  width: 560px;
  height: 520px;
  top: auto;
  opacity: 0;
  transform: translateZ(50px) scale(0.95);
}

/* Drifting Flower Petals in 3D Space */
.petals-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.petal-drift {
  animation: petalSway 5s ease-in-out infinite alternate;
}

@keyframes petalSway {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(25px, -35px) rotate(45deg); }
}

/* Layer 8: Traditional Kerala Tharavadu House */
.layer-house {
  z-index: 80;
  bottom: 5%;
  left: 50%;
  margin-left: -400px;
  width: 800px;
  height: 550px;
  top: auto;
  opacity: 0;
  transform: translateZ(100px) scale(0.9);
}

/* Glowing Nilavilakku Lamp flicker */
.lamp-flicker {
  animation: lampFlameGaze 2.5s ease-in-out infinite alternate;
}

@keyframes lampFlameGaze {
  0% { filter: drop-shadow(0 0 8px rgba(255, 212, 59, 0.6)); }
  50% { filter: drop-shadow(0 0 16px rgba(255, 180, 0, 0.9)); }
  100% { filter: drop-shadow(0 0 10px rgba(255, 212, 59, 0.7)); }
}

/* Layer 9: Traditional Adukkala Kitchen (Transition into Store) */
.layer-kitchen {
  z-index: 90;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transform: translateZ(200px) scale(0.85);
}

/* Layer 10: Foreground Serene Water Lilies & Lotus */
.layer-lotus {
  z-index: 100;
  bottom: -15px;
  left: -20px;
  width: 360px;
  height: 260px;
  top: auto;
  transform: translateZ(280px);
}

/* Layer 11: Foreground Leaning Coconut Palm Tree */
.layer-foreground-palm {
  z-index: 110;
  top: -20px;
  left: -30px;
  width: 520px;
  height: 680px;
  transform: translateZ(350px);
  transform-origin: 0% 0%;
}

.palm-wind-sway {
  animation: palmWindSway 8s ease-in-out infinite alternate;
  transform-origin: 15% 10%;
}

@keyframes palmWindSway {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(1.2deg) translateY(-4px); }
  100% { transform: rotate(-0.8deg) translateY(2px); }
}

/* Story Narrative Overlay HUD (Overlays during the scroll journey) */
.story-narrative-hud {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 120;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

.scene-text-card {
  position: absolute;
  max-width: 620px;
  background: rgba(255, 253, 247, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(226, 178, 53, 0.4);
  border-radius: 20px;
  padding: 2.2rem 2.6rem;
  box-shadow: 0 20px 45px rgba(27, 42, 74, 0.18), 0 4px 12px rgba(226, 178, 53, 0.15);
  text-align: center;
  opacity: 0;
  transform: translateY(40px) scale(0.96);
  transition: opacity 0.7s var(--transition-smooth), transform 0.7s var(--transition-smooth);
  pointer-events: auto;
}

.scene-text-card.active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.scene-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem;
  background: rgba(45, 90, 39, 0.08);
  border: 1px solid rgba(45, 90, 39, 0.2);
  border-radius: 50px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: #2D5A27;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}

.scene-title {
  font-family: 'Outfit', sans-serif;
  font-size: 2.3rem;
  font-weight: 800;
  color: #1A2E16;
  line-height: 1.18;
  margin-bottom: 0.75rem;
  letter-spacing: -0.5px;
}

.scene-malayalam {
  font-family: 'Noto Sans Malayalam', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #CB4727;
  margin-bottom: 0.9rem;
}

.scene-description {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.05rem;
  line-height: 1.65;
  color: #4A4A4A;
  margin-bottom: 1.5rem;
}

.scene-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

/* Floating Journey Progress Indicator on Side */
.journey-dots-nav {
  position: fixed;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 150;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: rgba(255, 253, 247, 0.85);
  backdrop-filter: blur(12px);
  padding: 1rem 0.6rem;
  border-radius: 30px;
  border: 1px solid rgba(226, 178, 53, 0.3);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.journey-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #C4D3BD;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.journey-dot:hover,
.journey-dot.active {
  background: #2D5A27;
  transform: scale(1.4);
}

.journey-dot::after {
  content: attr(data-label);
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  background: #1A2E16;
  color: #FFFFFF;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.journey-dot:hover::after {
  opacity: 1;
}



/* Fast-Forward / Skip to Store Quick Button */
.skip-to-store-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.4rem;
  background: #CB4727;
  color: #FFFFFF;
  border: none;
  border-radius: 50px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(203, 71, 39, 0.4);
  transition: all 0.3s ease;
}

.skip-to-store-btn:hover {
  background: #B03A1D;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 14px 30px rgba(203, 71, 39, 0.5);
}

/* Responsive Overrides for Mobile & Tablet */
@media (max-width: 992px) {
  .layer-foreground-palm {
    width: 340px;
    height: 480px;
  }
  .layer-houseboat {
    width: 400px;
    height: 240px;
    bottom: 10%;
    left: 4%;
  }
  .layer-snakeboat {
    width: 600px;
    height: 200px;
  }
  .layer-house {
    width: 580px;
    height: 400px;
    margin-left: -290px;
  }
  .scene-text-card {
    padding: 1.6rem;
    max-width: 90%;
  }
  .scene-title {
    font-size: 1.7rem;
  }
  .journey-dots-nav {
    display: none; /* Cleaner on mobile */
  }
}

@media (max-width: 640px) {
  .layer-foreground-palm {
    width: 250px;
    height: 380px;
    top: -10px;
    left: -20px;
  }
  .layer-lotus {
    width: 220px;
    height: 160px;
  }
  .layer-houseboat {
    width: 320px;
    height: 190px;
    left: 2%;
    bottom: 8%;
  }
  .scene-text-card {
    padding: 1.3rem;
  }
  .scene-title {
    font-size: 1.45rem;
  }
  .scene-description {
    font-size: 0.92rem;
    line-height: 1.5;
  }
  .skip-to-store-btn {
    padding: 0.6rem 1.1rem;
    font-size: 0.8rem;
    bottom: 1rem;
    right: 1rem;
  }

}

/* Motion Sensitivity Compliance */
@media (prefers-reduced-motion: reduce) {
  .camera-rig,
  .world-layer,
  .boat-bobbing,
  .cloud-floating,
  .palm-wind-sway,
  .water-ripples,
  .lamp-flicker {
    animation: none !important;
    transition: none !important;
  }
  .kerala-world-container {
    height: auto !important;
  }
  .camera-stage {
    position: relative !important;
    height: 700px !important;
  }
}