/* =============================================
   CLUB SIREN — corals.css  (vine system v3)

   Vines live inside #scroll-container as an
   absolutely-positioned layer that spans the
   full page from below the hero to the ocean
   floor. They tile vertically via background-
   image: repeat-y and are always fully visible
   — no scroll-triggered opacity or scaling.

   Tier layout (left and right sides mirror each other):
     .vine--sparse  green   vine-left/right.svg      160 px wide
     .vine--dense   orange  vine-dense-left/right.svg 190 px wide
     .vine--lush    purple  dense SVGs + hue-rotate   190 px wide

   Depth stagger — within the vine layer each tier
   starts lower, so you see more vines as you go deeper:
     sparse (green)  → visible for the full underwater length
     dense  (orange) → joins 25% of the way down
     lush   (purple) → joins 50% of the way down

   X-offset — each tier is nudged inward from the edge
   so all three stems appear as separate, distinct plants:
     sparse  left: 0 / right: 0
     dense   left: 22px / right: 22px
     lush    left: 44px / right: 44px
   ============================================= */

/* ---- Container: absolute within #scroll-container ---- */
#vine-layer {
  position: absolute;
  top: 110vh;        /* start a bit below the hero / water surface */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;        /* behind glass-panel sections (z-index: auto, DOM order) */
  pointer-events: none;
  overflow: hidden;
}

/* ---- Individual vine strips ---- */
.vine {
  position: absolute;
  top: 0;
  bottom: 0;
  background-repeat: repeat-y;
  background-position: left top;
}

/* ── Depth stagger: override top per tier ── */
.vine--dense { top: 25%; }
.vine--lush  { top: 50%; }

/* ── Left side ── */
.vine--left { left: 0; }

.vine--sparse.vine--left {
  left: 0;
  width: 160px;
  background-image: url('../assets/svg/vine-left.svg');
  background-size: 160px auto;
  filter: drop-shadow(0 0 8px rgba(0,255,130,0.22))
          drop-shadow(0 0 20px rgba(0,180,80,0.10));
}

.vine--dense.vine--left {
  left: 22px;        /* offset so orange stem is distinct from green */
  width: 190px;
  background-image: url('../assets/svg/vine-dense-left.svg');
  background-size: 190px auto;
  filter: drop-shadow(0 0 10px rgba(255,160,0,0.26))
          drop-shadow(0 0 24px rgba(220,100,0,0.13));
}

.vine--lush.vine--left {
  left: 44px;        /* offset so purple stem is distinct from orange */
  width: 190px;
  background-image: url('../assets/svg/vine-dense-left.svg');
  background-size: 190px auto;
  filter: hue-rotate(252deg) saturate(1.3) brightness(1.05)
          drop-shadow(0 0 12px rgba(160,0,255,0.30))
          drop-shadow(0 0 28px rgba(100,0,200,0.16));
}

/* ── Right side ── */
.vine--right { right: 0; }

.vine--sparse.vine--right {
  right: 0;
  width: 160px;
  background-image: url('../assets/svg/vine-right.svg');
  background-size: 160px auto;
  filter: drop-shadow(0 0 8px rgba(0,255,130,0.22))
          drop-shadow(0 0 20px rgba(0,180,80,0.10));
}

.vine--dense.vine--right {
  right: 22px;       /* offset so orange stem is distinct from green */
  width: 190px;
  background-image: url('../assets/svg/vine-dense-right.svg');
  background-size: 190px auto;
  filter: drop-shadow(0 0 10px rgba(255,160,0,0.26))
          drop-shadow(0 0 24px rgba(220,100,0,0.13));
}

.vine--lush.vine--right {
  right: 44px;       /* offset so purple stem is distinct from orange */
  width: 190px;
  background-image: url('../assets/svg/vine-dense-right.svg');
  background-size: 190px auto;
  filter: hue-rotate(252deg) saturate(1.3) brightness(1.05)
          drop-shadow(0 0 12px rgba(160,0,255,0.30))
          drop-shadow(0 0 28px rgba(100,0,200,0.16));
}

/* ---- All three vine tiers on mobile — slimmed down so all colours show ---- */
@media (max-width: 600px) {
  /* Restore dense + lush (previously hidden) */
  .vine--dense,
  .vine--lush { display: block; }

  /* Green (sparse) — outermost, hugs the edge */
  .vine--sparse.vine--left  { left: 0;    width: 38px; background-size: 38px auto; }
  .vine--sparse.vine--right { right: 0;   width: 38px; background-size: 38px auto; }

  /* Orange (dense) — one step inward */
  .vine--dense.vine--left   { left: 7px;  width: 38px; background-size: 38px auto; }
  .vine--dense.vine--right  { right: 7px; width: 38px; background-size: 38px auto; }

  /* Purple (lush) — innermost, same slim width */
  .vine--lush.vine--left    { left: 14px; width: 38px; background-size: 38px auto; }
  .vine--lush.vine--right   { right: 14px; width: 38px; background-size: 38px auto; }
}