/* ═══════════════════════════════════════════════════════════════
   BHARAT PETROLEUM CORPORATION LIMITED — CASE STUDY
   SITE INTEGRATION LAYER
   Loaded after the global design system (tokens.css + styles.css)
   and after the project's own main.css (the supplied experience).

   This layer does two things:
     1. Re-maps the supplied experience's design tokens onto the
        AV OS global design system (palette, type, container, motion)
        so it reads as a native case study, not a pasted microsite.
     2. Re-asserts the global chrome components (.btn/.progress) whose
        styles the project's monolithic main.css would otherwise
        override, and repositions the in-page chapter nav to sit
        beneath the fixed global site-nav.
   All content, imagery and interactions in the supplied experience
   are preserved; only its visual skin is re-themed.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1 · Re-map the supplied tokens onto the global design system ── */
:root {
  /* palette — global AV OS tokens */
  --navy: #080F22;          /* global site background  */
  --ink: #0E1A3C;           /* global t-dark panel     */
  --ink-2: #0E1A3C;
  --blue: #2E5AAC;          /* global t-light accent   */
  --blue-lit: #1E4390;
  --az: #6EA8FF;            /* global dark accent      */
  --az-hi: #9CC2FF;
  --paper: #F7F5EF;         /* global t-light bg       */
  --paper-2: #ECE8DE;
  --text: #0C1330;          /* global t-light text     */
  --text-2: #59617A;        /* global t-light muted    */
  --on-dark: #EFF0EA;       /* global t-dark text      */
  --on-dark-2: #96A0BE;     /* global t-dark muted     */
  --line-dark: rgba(148, 170, 230, 0.14);
  --line-light: rgba(12, 19, 48, 0.12);

  /* the supplied experience uses --yellow as its dark-section accent */
  --yellow: #6EA8FF;

  /* type — Inter Tight (the site's voice) replaces Helvetica Neuve */
  --sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI",
          "Helvetica Neue", Arial, sans-serif;
  --mono: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI",
          "Helvetica Neue", Arial, sans-serif;
  --t-disp: clamp(2.4rem, 6vw, 5.4rem);
  --t-h3: clamp(1.6rem, 3vw, 2.9rem);
  --t-lede: clamp(1.12rem, 1.02rem + 0.5vw, 1.4rem);
  --t-body: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --t-mono: 0.66rem;

  /* layout — align the content column with the global container */
  --edge: clamp(20px, 4.5vw, 72px);
  --maxw: min(1280px, 100% - 2 * var(--edge));
  --gap: clamp(20px, 3.4vw, 56px);
  --sec: clamp(76px, 11vh, 128px);

  /* motion — global easings */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.24s; --t-mid: 0.6s; --t-slow: 1.1s;
}

/* mono labels take on the global label voice (tracked, 600) */
.mono {
  font-family: var(--mono);
  font-size: var(--t-mono);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.display { font-weight: 700; letter-spacing: -0.035em; }

/* dark-section accents should read as the global azure, not the site yellow */
.label, .hero__place, .finale__place, .metarow dt, .dn__tag--r,
.link__to, .bpv__val, .lb__tag, .viewer__tag, .film__count,
.topnav a.is-active, .topnav a.is-active i, .topbar__sig,
.hero__cta, .flow li + li::before, .bridge__step:last-child,
.bridge__arrow, .strategy__list .n, .contribution, .areas .n,
.chain-out .n, .foot__h, .foot__info dt, .bpv__cross i {
  color: var(--az) !important;
}
.bpv__cross i, .strategy__list li::before,
.vdot.is-on::after, .ftick.is-on::after,
.dn__handle, .dn__grip {
  background-color: var(--az);
}
.dn__grip { border-color: var(--az); }
.dn__grip::before { border-right-color: var(--az); }
.dn__grip::after  { border-left-color: var(--az); }
.hero__cta { border-bottom-color: rgba(110, 168, 255, 0.42); }
.hero__cta:hover { border-bottom-color: var(--az); }
.viewer__nav .vnav:hover, .bpv__bar .btn:hover, .film__ctrl .vnav:hover {
  border-color: var(--az); color: var(--az);
}
.hero__veil {
  background: linear-gradient(180deg,
    rgba(8, 15, 34, 0.78) 0%, rgba(8, 15, 34, 0.30) 34%, rgba(8, 15, 34, 0.92) 100%);
}
.finale__media::after {
  background: linear-gradient(180deg,
    rgba(8, 15, 34, 0.46) 0%, rgba(8, 15, 34, 0.30) 34%,
    rgba(8, 15, 34, 0.66) 72%, rgba(8, 15, 34, 0.92) 100%);
}
.topbar.is-solid { background: rgba(8, 15, 34, 0.90); }
.mobbar { background: rgba(8, 15, 34, 0.92); }
.dn__grip, .dn__tag, .closeups__grid figcaption,
.film__play, .lb__tag { color: #EFF0EA; }
.lb { background: rgba(5, 9, 20, 0.97); }

/* ── 2 · Re-assert the global chrome that main.css would collide with ── */

/* the global nav pill (site chromne) must keep its radius/pill and the
   CTA must stay a proper pill button, not the project's square controls */
.site-nav { z-index: 250; }
.site-nav__inner { border-radius: 999px; }

/* .btn re-assertion from the global design system, scoped to the site
   chrome (nav pill + mobile menu only) so the immersive project's own
   compact control buttons (blueprint zoom, viewers) keep their styling. */
.site-nav .btn {
  display: inline-flex; align-items: center; gap: 10px;
  border-radius: 999px; border: 1px solid transparent;
  padding: 17px 30px; min-width: 0; min-height: 0;
  font-family: var(--font); font-size: 15px; font-weight: 500;
  letter-spacing: 0.01em; color: inherit;
  background: transparent; cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
              border-color 0.35s var(--ease), transform 0.35s var(--ease),
              box-shadow 0.35s var(--ease);
  will-change: transform;
}
.site-nav .btn:active { transform: translateY(1px); }
.site-nav .btn--accent { background: var(--azure); color: var(--azure-ink); font-weight: 600; }
.site-nav .btn--accent:hover { background: var(--azure-hi); transform: translateY(-2px); box-shadow: 0 16px 40px -14px rgba(46, 90, 172, 0.5); }
.site-nav .btn--ghost { border-color: var(--cls, rgba(148,170,230,.3)); color: var(--chrome-text); background: transparent; }
.site-nav .btn--ghost:hover { border-color: var(--azure); color: var(--azure-hi); background: rgba(110,168,255,.08); transform: translateY(-2px); }
.site-nav .btn--small { padding: 12px 22px; font-size: 13.5px; }
.site-nav .btn--block { width: 100%; justify-content: center; padding: 18px; margin-top: 6px; }
.site-nav .btn__arrow { transition: transform 0.35s var(--ease); }
.site-nav .btn:hover .btn__arrow { transform: translateX(5px); }

/* the global scroll progress bar (#progress), reintrojected over the
   project's own static variant — main.js drives it via scaleX */
.progress {
  position: fixed; top: 0; left: 0; z-index: 260;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--azure), var(--azure-hi));
  transform-origin: 0 50%; transform: scaleX(0);
  box-shadow: 0 0 12px rgba(110, 168, 255, 0.6);
}
.progress i { display: none; }

/* the supplied experience's topbar becomes a secondary "chapter" rail
   that sits beneath the fixed global site-nav (which occupies ~14–66px) */
.topbar { top: 84px; }
@media (max-width: 860px) { .topbar { top: 78px; } }

/* content scoping: the immersive experience lives on a dark page; give it
   a single coherent dark backdrop and a quiet reading column */
@media (max-width: 640px) {
  .display { font-size: clamp(2.1rem, 11vw, 2.9rem); }
  .topbar__sig { display: block; }
}

/* ── GODMODE P1 · notch / home-indicator safe-area (mobile-only) ──
   env() is 0 where no inset exists, so desktop renders pixel-identical */
@media (max-width: 860px) {
  .mobbar { padding-bottom: calc(10px + var(--sab, 0px)); }
  body { padding-bottom: calc(52px + var(--sab, 0px)); }
}

/* ── GODMODE P1 · invisible touch-hit expansion (coarse pointers only;
   visuals, spacing and hierarchy untouched; DOM order sets overlap wins) ── */
@media (pointer: coarse) {
  /* chapter rail links 33px → 51px tall; ±4px sides stay in the 10px min gap */
  .topnav a { position: relative; }
  .topnav a::after {
    content: ""; position: absolute; top: -9px; bottom: -9px; left: -4px; right: -4px;
  }
  /* film view/frame ticks 26px → 44px tall; flex:1 row → vertical only */
  .vdot, .ftick { position: relative; }
  .vdot::before, .ftick::before {
    content: ""; position: absolute; left: 0; right: 0; top: -9px; bottom: -9px;
  }
  /* 40px square buttons (−/+ zoom, RESET, jump, ghost) → 44px.
     inset resolves against the 38px padding box (1px border), so −3px
     yields exactly 44px; control gaps are ≥8px (lightbox UI 14px),
     leaving a dead zone between neighbors. */
  .btn { position: relative; }
  .btn::after { content: ""; position: absolute; inset: -3px; }
  /* rail title link 37px → 45px tall; extensions stay inside bar padding/gaps */
  .topbar__mark { position: relative; }
  .topbar__mark::after {
    content: ""; position: absolute; left: -4px; right: -4px; top: -4px; bottom: -4px;
  }
  /* lightbox keeps its own scroll; never chains into the page */
  .lb { overscroll-behavior: contain; }
}