/* ============================================
   IMMERSIVE LAYER (homepage + explore)
   Fixed crossfading gallery background, dark
   scrim and glassmorphic sections. Apple-style
   scroll where the backdrop shifts per section.
   Perf-conscious: only a few elements use real
   backdrop-blur; the many small cards use a
   translucent fill over the scrim (reads as glass
   without per-card compositing on mobile).
   ============================================ */

/* Transparent so the fixed page-background photo (refine.css body::before)
   shows through; html carries the dark fallback canvas. */
body.immersive { background: transparent; }

/* Full-bleed: hero runs to the very top behind the floating nav, no insets. */
body.immersive .page { padding-top: 0; }
body.immersive .navbar { background: transparent; border-bottom-color: transparent; }
body.immersive .navbar.scrolled {
  background: rgba(10, 15, 18, 0.58);
  border-bottom-color: var(--hairline);
  -webkit-backdrop-filter: blur(10px) saturate(1.34) contrast(1.05);
  backdrop-filter: blur(10px) saturate(1.34) contrast(1.05);
}

/* — Float the immersive page sections over the fixed background — */
body.immersive .values-section,
body.immersive .assoc-section,
body.immersive .packages-section,
body.immersive .adventures-section,
body.immersive .dest-section,
body.immersive .sr-section,
body.immersive .plan-section,
body.immersive .why-section,
body.immersive .how-section,
body.immersive .testimonial-section,
body.immersive .faq-section { background: transparent; }

/* — Cheap glass for the many small cards (translucent fill, no blur) — */
body.immersive .why-item,
body.immersive .sr-card,
body.immersive .product-card,
body.immersive .faq-item,
body.immersive .testimonial-card,
body.immersive .assoc-badge,
body.immersive .dest-chip,
body.immersive .see-all-link {
  background: rgba(13, 20, 17, 0.62);
  border-color: rgba(255, 255, 255, 0.10);
}
body.immersive .sr-tag,
body.immersive .filter-pill { background: rgba(13, 20, 17, 0.45); }

/* — Real frosted glass on the hero conversion elements — */
body.immersive .plan-card {
  background: rgba(11, 18, 20, 0.42) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.32) contrast(1.05);
  backdrop-filter: blur(8px) saturate(1.32) contrast(1.05);
  border-color: rgba(255, 255, 255, 0.24);
}
body.immersive .plan-field input,
body.immersive .plan-field select { background: rgba(6, 12, 10, 0.6); }

/* Keep the testimonial/adventure overlays readable over imagery */
body.immersive .testimonial-section,
body.immersive .adventures-section { position: relative; }

/* Subtle top vignette so the navbar always reads */
body.immersive::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 120px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6,16,12,0.7) 0%, transparent 100%);
}

/* — Scroll progress bar — */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 2100; pointer-events: none; background: transparent;
}
.scroll-progress span {
  display: block; height: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--grad-brand);
  box-shadow: 0 0 10px rgba(30, 200, 160, 0.55);
}

/* ============================================
   NEON GLASS FLOW (homepage)
   The stacked sections fuse into one continuous
   frosted column: an even, tight vertical rhythm
   kills the empty space between sections, a
   translucent fill (cheap — no per-section blur)
   closes the gaps into one sheet of glass, and a
   glowing brand seam stitches every join.
   ============================================ */

/* Even, tight rhythm — removes the extra space between sections. */
body.immersive .values-section,
body.immersive .assoc-section,
body.immersive .packages-section,
body.immersive .adventures-section,
body.immersive .dest-section,
body.immersive .sr-section,
body.immersive .plan-section,
body.immersive .why-section,
body.immersive .how-section,
body.immersive .testimonial-section,
body.immersive .faq-section {
  padding-top: var(--s8);
  padding-bottom: var(--s8);
  position: relative;
  /* Continuous frosted column — translucent fill over the scrim reads as one
     pane of glass, so adjacent sections butt together with no void between. */
  background: rgba(9, 15, 12, 0.36);
}

/* Glowing neon seam at every join — the "flow" line stitching the panes. */
body.immersive .values-section::before,
body.immersive .assoc-section::before,
body.immersive .packages-section::before,
body.immersive .adventures-section::before,
body.immersive .dest-section::before,
body.immersive .sr-section::before,
body.immersive .plan-section::before,
body.immersive .why-section::before,
body.immersive .how-section::before,
body.immersive .testimonial-section::before,
body.immersive .faq-section::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(100%, var(--max-w));
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(30, 200, 160, 0.75) 28%,
    rgba(91, 180, 240, 0.75) 72%,
    transparent 100%);
  box-shadow: 0 0 16px rgba(30, 200, 160, 0.45);
  pointer-events: none;
  z-index: 1;
}

/* Neon hero headline — gradient accent line with an electric halo. */
body.immersive .hero-title {
  text-shadow:
    0 2px 30px rgba(0, 0, 0, 0.45),
    0 0 26px rgba(30, 200, 160, 0.30),
    0 0 52px rgba(91, 180, 240, 0.18);
}
.hero-accent {
  background: linear-gradient(120deg, #1ec8a0 0%, #5bb4f0 58%, #a98bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(30, 200, 160, 0.55));
}

/* Neon lift on the glass cards — border ignites, soft brand glow blooms. */
body.immersive .why-item,
body.immersive .sr-card,
body.immersive .product-card,
body.immersive .faq-item,
body.immersive .dest-chip {
  transition:
    transform var(--duration-slow) var(--ease),
    border-color var(--duration-slow) var(--ease),
    box-shadow var(--duration-slow) var(--ease);
}
body.immersive .why-item:hover,
body.immersive .sr-card:hover,
body.immersive .product-card:hover,
body.immersive .dest-chip:hover {
  border-color: rgba(30, 200, 160, 0.55);
  box-shadow:
    inset 0 0 0 1px rgba(30, 200, 160, 0.22),
    0 12px 34px rgba(30, 200, 160, 0.16);
}