/* =========================================
   CAMEL EXPEDITION — Cinematic Parallax Lab
   Multi-plane scroll + mouse parallax scene
   ========================================= */

/* ---- The stage: a tall section you scroll THROUGH ----
   The scene is `sticky` so it stays pinned while you scroll the
   height of `.pl-stage`. The extra height is the "scroll runway"
   that drives the parallax. */
.pl-stage {
  position: relative;
  height: 260vh;              /* scroll runway — longer = slower, more cinematic */
  background: #0d0f13;
}

.pl-scene {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  perspective: 1px;           /* enables optional 3D depth on children if desired */
}

/* Base sky gradient — always visible behind every plane */
.pl-sky {
  position: absolute;
  inset: -10% 0 0 0;          /* bleed at top so parallax never reveals an edge */
  background:
    radial-gradient(120% 80% at 70% 15%, #cfe3f2 0%, #a9c6de 30%, #7fa2bd 55%, #4a6274 100%);
  z-index: 0;
}

@media (prefers-color-scheme: dark) {
  .pl-sky {
    background:
      radial-gradient(120% 80% at 70% 12%, #2a3b52 0%, #1c2a3d 40%, #131c29 70%, #0d0f13 100%);
  }
}

/* ---- A parallax plane ----
   data-depth in the HTML controls how far it travels (0 = static,
   1 = moves fastest / feels closest). Set via JS transform. */
.pl-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 118%;                /* oversized so edges never peek during travel */
  height: 118%;
  /* Parallax offsets arrive as CSS vars from parallax.js */
  transform: translate(calc(-50% + var(--pl-x, 0px)), calc(-50% + var(--pl-y, 0px))) scale(var(--pl-scale, 1));
  will-change: transform;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
}

/* ---- Bottom-anchored strip (foreground grass, ripples, flags) ----
   A wide, short band pinned to the bottom edge. Sits at its natural
   height rather than filling the screen, so it frames without hiding. */
.pl-layer--band {
  top: auto;
  bottom: var(--band-bottom, -1%);
  height: auto;
  width: 132%;
  transform-origin: center bottom;
  transform: translate(calc(-50% + var(--pl-x, 0px)), var(--pl-y, 0px)) scale(var(--pl-scale, 1));
}
.pl-layer.pl-layer--band img {
  position: static;
  inset: auto;
  width: 100%;
  height: auto;
  object-fit: initial;
}

/* The actual asset image inside each plane (transparent PNG / animated WebP) */
.pl-layer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--img-pos, center bottom);
  display: block;
}

/* ---- Placeholder shown until you drop in a real asset ----
   When the <img> fails to load (file not there yet), JS adds
   `.pl-layer--empty` and you see this labeled dashed box so you
   can still feel the depth/motion. */
.pl-layer--empty {
  border: 1px dashed rgba(184,150,62,0.35);
  background: linear-gradient(
    180deg,
    rgba(184,150,62,0.04),
    rgba(184,150,62,0.10)
  );
}
.pl-layer--empty img { display: none; }
.pl-layer--empty::after {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  font-family: 'Jost', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(212,175,122,0.75);
  background: rgba(13,15,19,0.55);
  padding: 6px 14px;
  border: 1px solid rgba(184,150,62,0.25);
  white-space: nowrap;
}

/* ---- Subject layer (a cut-out like the snow leopard) ----
   Unlike full-bleed scenery, a subject must be CONTAINED and sized,
   not stretched to cover. Tune `--subject-h` (height) and
   `--subject-y` (vertical position) to place it on the slope. */
.pl-layer--subject img {
  position: absolute;
  left: 50%;
  top: var(--subject-y, 56%);
  transform: translate(-50%, -50%);
  width: auto;
  max-width: none;
  height: var(--subject-h, 58vh);
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 26px 42px rgba(0,0,0,0.5));
}

/* Idle "wind" drift for organic layers (trees, flags, grass) until
   you replace them with an animated WebP. Pure CSS, cheap. */
.pl-layer--sway {
  animation: pl-sway 6.5s ease-in-out infinite alternate;
  transform-origin: 50% 100%;
}
@keyframes pl-sway {
  0%   { filter: none; }
  100% { transform: translate(-50%, -50%) rotate(0.4deg) scale(1.008); }
}

/* Atmospheric haze band that sits between mid and far planes for depth */
.pl-haze {
  position: absolute;
  left: 0; right: 0;
  bottom: 18%;
  height: 40%;
  background: linear-gradient(to top, rgba(230,238,245,0.35), transparent);
  z-index: 4;
  pointer-events: none;
  mix-blend-mode: screen;
}
@media (prefers-color-scheme: dark) {
  .pl-haze { background: linear-gradient(to top, rgba(120,150,180,0.18), transparent); }
}

/* Cinematic vignette + top gradient for text legibility */
.pl-vignette {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,0.45) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, transparent 22%, transparent 60%, rgba(0,0,0,0.55) 100%);
}

/* ---- Scene copy ---- */
.pl-copy {
  position: absolute;
  z-index: 9;
  left: 0; right: 0;
  bottom: 12%;
  text-align: center;
  padding: 0 24px;
  color: #F5F2ED;
  will-change: transform, opacity;
}
.pl-copy .t-label { color: var(--gold-light, #D4AF7A); }
.pl-copy h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: clamp(2.6rem, 6vw, 5.5rem);
  line-height: 1.05;
  margin: 14px 0 10px;
  text-shadow: 0 2px 30px rgba(0,0,0,0.5);
}
.pl-copy p {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  max-width: 520px;
  margin: 0 auto;
  color: rgba(245,242,237,0.82);
  text-shadow: 0 1px 16px rgba(0,0,0,0.6);
}

/* Scroll hint styles are defined in home.css (animated mouse + chevron version) */
/* @keyframes pl-bob is also defined in home.css */

/* ---- Sound toggle ---- */
.pl-sound {
  position: fixed;
  bottom: 32px;
  left: 32px;
  z-index: 995;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: rgba(13,15,19,0.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(184,150,62,0.4);
  border-radius: 40px;
  color: #F5F2ED;
  font-family: 'Jost', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.pl-sound:hover { border-color: var(--gold-light, #D4AF7A); }
.pl-sound i { color: var(--gold-light, #D4AF7A); font-size: 0.95rem; }

/* Equalizer bars shown when audio is playing */
.pl-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.pl-eq span {
  width: 2px; height: 4px;
  background: var(--gold-light, #D4AF7A);
  animation: pl-eq 0.9s ease-in-out infinite;
}
.pl-eq span:nth-child(2){ animation-delay: 0.2s; }
.pl-eq span:nth-child(3){ animation-delay: 0.4s; }
.pl-eq span:nth-child(4){ animation-delay: 0.1s; }
.pl-sound[data-playing="false"] .pl-eq span { animation-play-state: paused; height: 4px; }
@keyframes pl-eq { 0%,100%{ height: 3px; } 50%{ height: 12px; } }

/* Accessibility: honor reduced-motion — kill drift + parallax easing */
@media (prefers-reduced-motion: reduce) {
  .pl-layer--sway,
  .pl-scrollhint,
  .pl-eq span { animation: none !important; }
}

/* Mobile: shrink runway a touch so it isn't an endless scroll */
@media (max-width: 768px) {
  .pl-stage { height: 200vh; }
  .pl-sound { bottom: 88px; left: 16px; padding: 10px 14px; }
}