/* ============================================
   Cinematic Scroll Storytelling
   ============================================ */

/* --- Scroll Progress Indicator --- */
.ss-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, #C9A86A, #0a341d, #C9A86A);
  z-index: 10000;
  pointer-events: none;
  will-change: transform;
}

/* --- Chapter Markers --- */
.ss-chapter {
  position: relative;
}

/* --- Reveal Animations --- */
.ss-fade-up {
  opacity: 0;
  transform: translateY(40px);
  will-change: transform, opacity;
}
.ss-fade-up.ss-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.ss-fade-in {
  opacity: 0;
  will-change: opacity;
}
.ss-fade-in.ss-visible {
  opacity: 1;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.ss-scale-reveal {
  opacity: 0;
  transform: scale(0.92);
  will-change: transform, opacity;
}
.ss-scale-reveal.ss-visible {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.ss-blur-reveal {
  opacity: 0;
  filter: blur(8px);
  will-change: opacity, filter;
}
.ss-blur-reveal.ss-visible {
  opacity: 1;
  filter: blur(0);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
              filter 1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Text Stagger --- */
.ss-line {
  overflow: hidden;
  display: block;
}
.ss-line-inner {
  display: block;
  transform: translateY(100%);
  will-change: transform;
}
.ss-line.ss-visible .ss-line-inner {
  transform: translateY(0);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Parallax Layers --- */
.ss-parallax {
  will-change: transform;
  pointer-events: none;
}
.ss-parallax-depth-0 { z-index: 0; }
.ss-parallax-depth-1 { z-index: 1; }
.ss-parallax-depth-2 { z-index: 2; }
.ss-parallax-depth-3 { z-index: 3; }

/* --- Image Zoom --- */
.ss-img-zoom {
  overflow: hidden;
}
.ss-img-zoom img,
.ss-img-zoom .aspect-ratio-bg {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* --- Mask Reveal --- */
.ss-mask-reveal {
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
}
.ss-mask-reveal.ss-visible {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Card Lift --- */
.ss-card-lift {
  will-change: transform;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ss-card-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(10, 52, 29, 0.12);
}

/* --- Pin Section --- */
.ss-pin {
  position: relative;
  overflow: hidden;
}
.ss-pin-spacer {
  pointer-events: none;
}

/* --- Floating Elements Container --- */
.ss-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.ss-atmosphere > * {
  position: absolute;
  pointer-events: none;
}

/* --- Leaves --- */
.ss-leaf {
  width: 18px;
  height: 10px;
  border-radius: 50% 0 50% 0;
  opacity: 0.4;
  will-change: transform;
}
.ss-leaf-1 { background: #5a7a4a; }
.ss-leaf-2 { background: #8a9a6a; }
.ss-leaf-3 { background: #c9a86a; }

/* --- Mist --- */
.ss-mist-layer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40vh;
  background: linear-gradient(0deg, rgba(248,244,236,0.15) 0%, transparent 100%);
  pointer-events: none;
  z-index: 2;
  will-change: transform, opacity;
}

.ss-mist-layer-2 {
  position: fixed;
  top: 20%;
  left: -10%;
  width: 120%;
  height: 30vh;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04) 30%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.04) 70%, transparent);
  pointer-events: none;
  z-index: 1;
  will-change: transform;
}

/* --- Light Rays --- */
.ss-light-ray {
  position: fixed;
  top: -20%;
  left: 30%;
  width: 2px;
  height: 80vh;
  background: linear-gradient(180deg, rgba(201,168,106,0.08), transparent);
  pointer-events: none;
  z-index: 1;
  transform-origin: top center;
  will-change: transform, opacity;
}
.ss-light-ray:nth-child(2) { left: 55%; height: 60vh; width: 1px; background: linear-gradient(180deg, rgba(201,168,106,0.05), transparent); }
.ss-light-ray:nth-child(3) { left: 70%; height: 70vh; width: 3px; background: linear-gradient(180deg, rgba(248,244,236,0.06), transparent); }

/* --- Birds --- */
.ss-bird {
  position: fixed;
  font-size: 10px;
  color: rgba(90, 80, 70, 0.2);
  pointer-events: none;
  z-index: 1;
  will-change: transform;
}

/* --- Fireflies (at night) --- */
.ss-firefly {
  position: fixed;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(201, 168, 106, 0.6);
  box-shadow: 0 0 6px 2px rgba(201, 168, 106, 0.3);
  pointer-events: none;
  z-index: 1;
  will-change: transform, opacity;
}

/* --- Stars (at night) --- */
.ss-star {
  position: fixed;
  width: 1.5px;
  height: 1.5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  pointer-events: none;
  z-index: 0;
  will-change: opacity;
}

/* --- Moon --- */
.ss-moon {
  position: fixed;
  top: 15%;
  right: 10%;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(255,250,240,0.3), rgba(255,250,240,0.05));
  box-shadow: 0 0 40px 10px rgba(255,250,240,0.05);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  will-change: opacity;
}

/* --- Cursor Glow --- */
.ss-cursor-glow {
  position: fixed;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,106,0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* --- Glass cards gradient border animation --- */
.ss-glass-border {
  position: relative;
}
.ss-glass-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(201,168,106,0.08), transparent, rgba(201,168,106,0.04));
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
  z-index: -1;
}
.ss-glass-border:hover::before {
  opacity: 1;
}

/* --- Chapter label animation --- */
.ss-chapter-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #C9A86A;
  position: relative;
}
.ss-chapter-label::before {
  content: '';
  width: 24px;
  height: 1px;
  background: #C9A86A;
}

/* --- Room card stagger --- */
.ss-room-stagger {
  opacity: 0;
  transform: translateY(30px);
}
.ss-room-stagger.ss-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Experience parallax mountain layers (via JS) --- */
.ss-exp-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center bottom;
  will-change: transform;
}

/* --- Smooth image zoom containers --- */
.ss-zoom-container {
  overflow: hidden;
}

/* --- Ambient background shift --- */
.ss-ambient-bg {
  transition: background-color 2s ease;
}

/* --- Water reflection shimmer --- */
.ss-water-shimmer {
  position: relative;
  overflow: hidden;
}
.ss-water-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.03) 30%,
    rgba(255,255,255,0.06) 50%,
    rgba(255,255,255,0.03) 70%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: ssWaterShimmer 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ssWaterShimmer {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(50%); }
}

/* --- Responsive --- */
@media (max-width: 767px) {
  .ss-atmosphere { display: none; }
  .ss-mist-layer { display: none; }
  .ss-mist-layer-2 { display: none; }
  .ss-light-ray { display: none; }
  .ss-bird { display: none; }
  .ss-firefly { display: none; }
  .ss-star { display: none; }
  .ss-moon { display: none; }
  .ss-cursor-glow { display: none !important; }
  .ss-fade-up { transform: translateY(20px); }
  .ss-leaf { display: none; }
}

@media (max-width: 480px) {
  .ss-progress { height: 1.5px; }
  .ss-chapter-label::before { width: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .ss-progress { display: none; }
  .ss-fade-up { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ss-fade-up.ss-visible { opacity: 1 !important; transform: none !important; }
  .ss-fade-in { opacity: 1 !important; transition: none !important; }
  .ss-fade-in.ss-visible { opacity: 1 !important; }
  .ss-scale-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ss-blur-reveal { opacity: 1 !important; filter: none !important; transition: none !important; }
  .ss-line-inner { transform: none !important; transition: none !important; }
  .ss-room-stagger { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ss-mask-reveal { clip-path: none !important; transition: none !important; }
  .ss-card-lift:hover { transform: none !important; box-shadow: none !important; }
  .ss-atmosphere { display: none; }
  .ss-cursor-glow { display: none !important; }
  .ss-mist-layer { display: none; }
  .ss-mist-layer-2 { display: none; }
  .ss-water-shimmer::after { animation: none !important; }
}