/* ==========================================================================
   TBG LANDS — IMMERSIVE SCROLL LAYER
   --------------------------------------------------------------------------
   Loaded AFTER css/tbg-nextlevel.css so it can refine the motion system
   without fighting it. This file adds:

     1. A richer, deeper brand palette + layered section backgrounds
     2. Scroll-scrubbed "position change" on every content section
        (the section glides up / scales in as it crosses the viewport)
     3. A stronger, blur-based reveal language (DeepSeek-harness feel)
     4. A floating chapter rail so long scrolls stay oriented
     5. Depth parallax on the split image sections

   Safety:
     - Never hides content: opacity never drops below a legible floor and
       every JS-driven state has a no-JS / reduced-motion fallback.
     - The hero video section is untouched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PALETTE — a touch deeper and warmer than the next-level layer
   -------------------------------------------------------------------------- */
:root {
  --im-teal-950: #041713;
  --im-teal-900: #062621;
  --im-teal-800: #0A362E;
  --im-teal-700: #10493F;
  --im-teal-600: #185E51;
  --im-teal-500: #217A68;
  --im-teal-400: #3D9E86;
  --im-gold-600: #A5822F;
  --im-gold-500: #C09B45;
  --im-gold-400: #D6B463;
  --im-gold-300: #E7D194;
  --im-cream: #F7F2E7;
  --im-sand: #FBF8F1;
  --im-ink: #16241F;

  --im-ease: cubic-bezier(.16, 1, .3, 1);
  --im-ease-soft: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   2. LAYERED SECTION BACKGROUNDS
   --------------------------------------------------------------------------
   Give the flatter light sections a real sense of place: a warm top wash,
   an emerald bloom, and a faint botanical/topo pattern. Applied as an
   isolated ::before so the existing gradient still shows through.
   -------------------------------------------------------------------------- */
#tbg-features,
#tbg-expertise,
#tbg-vision,
#tbg-gated,
#tbg-karjat {
  isolation: isolate;
}

/* Shared faint leaf-vein / contour pattern. */
#tbg-features::before,
#tbg-expertise::before,
#tbg-gated::before,
#tbg-karjat::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background-image:
    radial-gradient(circle at 100% 0%, rgba(33, 122, 104, .10), transparent 42%),
    radial-gradient(circle at 0% 100%, rgba(214, 180, 99, .12), transparent 46%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%231F7A66' stroke-opacity='.05' stroke-width='1'%3E%3Cpath d='M0 40h260M0 80h260M0 120h260M0 160h260M0 200h260M0 240h260'/%3E%3Cpath d='M40 0v260M80 0v260M120 0v260M160 0v260M200 0v260M240 0v260'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(125% 95% at 50% 45%, #000 30%, transparent 82%);
          mask-image: radial-gradient(125% 95% at 50% 45%, #000 30%, transparent 82%);
}

/* The dark Legacy band gets a slow-moving aurora so it breathes. */
#tbg-legacy {
  background:
    radial-gradient(120% 160% at 50% -10%, rgba(214, 180, 99, .20) 0%, rgba(214, 180, 99, 0) 55%),
    radial-gradient(90% 120% at 12% 110%, rgba(61, 158, 134, .28) 0%, rgba(61, 158, 134, 0) 60%),
    linear-gradient(120deg, var(--im-teal-950) 0%, var(--im-teal-800) 44%, var(--im-teal-600) 100%) !important;
}

/* Chairman quote: a warmer, deeper emerald field. */
#tbg-chairman > .elementor-container > .elementor-column > .elementor-widget-wrap {
  background: linear-gradient(135deg, var(--im-teal-900) 0%, var(--im-teal-700) 50%, var(--im-teal-600) 100%) !important;
}

/* --------------------------------------------------------------------------
   3. SCROLL-SCRUBBED POSITION CHANGE
   --------------------------------------------------------------------------
   js/immersive-scroll.js writes --im-p (0 → 1 as the section crosses the
   viewport) on each content section, plus --im-y / --im-s / --im-o.
   The container gently rises, settles and slightly scales — the "the page
   rearranges itself as you scroll" feel without ever moving a section out
   of reach.
   -------------------------------------------------------------------------- */
.tbg-scrub > .elementor-container {
  transform: translate3d(0, var(--im-y, 0px), 0);
  opacity: var(--im-o, 1);
  will-change: transform, opacity;
}

/* A little more travel on the two photo-split sections and less on the
   full-width bands, set by JS via --im-range. */

/* --------------------------------------------------------------------------
   4. STRONGER REVEAL LANGUAGE
   --------------------------------------------------------------------------
   Overrides the base reveal transitions with a heavier blur + depth move.
   These only run on elements already carrying [data-tbg-reveal], so the
   inline engine keeps full control of when they fire.
   -------------------------------------------------------------------------- */
[data-tbg-reveal] {
  transition:
    opacity 1.1s var(--im-ease) var(--d, 0s),
    transform 1.25s var(--im-ease) var(--d, 0s),
    filter 1.05s var(--im-ease) var(--d, 0s),
    clip-path 1.2s var(--im-ease) var(--d, 0s);
}

[data-tbg-reveal].tbg-rv-hide {
  opacity: 0;
  filter: blur(16px);
}
[data-tbg-reveal="up"].tbg-rv-hide {
  transform: perspective(1000px) rotateX(9deg) translateY(64px);
}
[data-tbg-reveal="left"].tbg-rv-hide {
  transform: perspective(1100px) translateX(-78px) rotateY(-9deg);
}
[data-tbg-reveal="right"].tbg-rv-hide {
  transform: perspective(1100px) translateX(78px) rotateY(9deg);
}
[data-tbg-reveal="scale"].tbg-rv-hide {
  transform: scale(.82) translateY(28px);
}
[data-tbg-reveal="clip"].tbg-rv-hide {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.16) translateY(20px);
  filter: blur(12px);
}

/* Second-wave reveals auto-tagged by JS on loose content elements. */
.tbg-imm {
  opacity: 0;
  transform: translateY(34px);
  filter: blur(10px);
  transition:
    opacity 1s var(--im-ease) var(--im-d, 0s),
    transform 1.1s var(--im-ease) var(--im-d, 0s),
    filter .9s var(--im-ease) var(--im-d, 0s);
  will-change: opacity, transform, filter;
}
.tbg-imm.tbg-imm-in {
  opacity: 1;
  transform: none;
  filter: blur(0);
  will-change: auto;
}
.tbg-imm[data-imm="left"] { transform: translateX(-40px); }
.tbg-imm[data-imm="right"] { transform: translateX(40px); }
.tbg-imm[data-imm="scale"] { transform: scale(.92); }

/* Heading underline draw-in already lives in tbg-nextlevel.css (including the
   centring carve-out for #tbg-expertise), so it is intentionally not repeated
   here — duplicating it would fight that centred variant. */

/* --------------------------------------------------------------------------
   5. DEPTH PARALLAX ON THE SPLIT IMAGE SECTIONS
   -------------------------------------------------------------------------- */
[data-imm-parallax] {
  will-change: transform;
  transform: translate3d(0, var(--im-py, 0px), 0);
}

/* --------------------------------------------------------------------------
   6. FLOATING CHAPTER RAIL
   --------------------------------------------------------------------------
   A quiet vertical dot rail on the right edge for long-scroll orientation.
   Built by JS from the section ids. Desktop only.
   -------------------------------------------------------------------------- */
#tbg-rail {
  position: fixed;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 14px 10px;
  border-radius: 999px;
  background: rgba(6, 38, 33, .34);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
          backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(214, 180, 99, .18);
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility .5s ease, transform .5s var(--im-ease);
}
#tbg-rail.is-visible {
  opacity: 1;
  visibility: visible;
}
#tbg-rail a {
  position: relative;
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(214, 180, 99, .55);
  background: transparent;
  transition: transform .4s var(--im-ease), background-color .4s ease, border-color .4s ease;
}
#tbg-rail a::after {
  content: attr(data-label);
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  white-space: nowrap;
  font-family: "Raleway", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #F4EFE2;
  background: rgba(6, 38, 33, .82);
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid rgba(214, 180, 99, .22);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease, transform .35s var(--im-ease);
}
#tbg-rail a:hover {
  transform: scale(1.25);
  background: var(--im-gold-400);
  border-color: var(--im-gold-400);
}
#tbg-rail a:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
#tbg-rail a.is-active {
  background: var(--im-gold-400);
  border-color: var(--im-gold-400);
  box-shadow: 0 0 0 4px rgba(214, 180, 99, .16);
}

@media (max-width: 1200px) {
  #tbg-rail { display: none; }
}

/* --------------------------------------------------------------------------
   7. REDUCED MOTION — keep layout, drop movement
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tbg-scrub > .elementor-container {
    transform: none !important;
    opacity: 1 !important;
  }
  .tbg-imm {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  [data-tbg-reveal],
  [data-tbg-reveal].tbg-rv-hide {
    filter: none !important;
  }
  #tbg-rail { display: none; }
}