/* main.css - navbar hide/show styles */

.header {
  background-color: transparent;
  transition: transform 0.28s ease-in-out, opacity 0.28s ease-in-out, background-color 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, background-color;
  z-index: 1000001 !important; /* above preloader (999999) so hamburger+logo stay visible */
}

/* The animated shell: only this inner element is translated when hiding */
.header .header-shell {
  transition: transform 0.28s ease-in-out, opacity 0.28s ease-in-out;
  will-change: transform;
}

.header.header-hidden .header-shell {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* Keep center nav above the animated shell so the text remains visible */
.center-nav {
  z-index: 1002;
}

/* Always show the header shell — overrides the split-hero hide rule in main.1.css
   (body.has-split-hero:not(.split-hero-complete) #header .header-shell hides it) */
body.has-split-hero:not(.split-hero-complete) #header .header-shell {
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Slightly larger translate on small screens to ensure full hide */
@media (max-width: 1199px) {
  .header.header-hidden .header-shell { transform: translateY(-120%); }
}

/* Optional compatibility rule for older code that toggles .header.scrollUp */
.header.scrollUp .header-shell { transform: translateY(-100%); opacity: 0; pointer-events: none; }

/* Stronger override to beat rules that target #header with higher specificity */
#header.header-hidden .header-shell {
  transform: translateY(-120%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Center logo (absolute centered) */
.center-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1003;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.centerChromeLogo {
  max-height: 56px;
  width: auto;
  display: block;
}

@media (max-width: 767px) {
  .centerChromeLogo { max-height: 44px; }
}

/* Navbar background when scrolled past threshold */
.header.scrolled {
  border:none;
/*  background-color: rgba(0,0,0,0.96);*/
}

/* Left/Right svg icons styling */
.nav-icon-left, .nav-icon-right { display: block; }
.nav-icon-left rect { fill: #fff; }
.nav-icon-right path { stroke: #fff; }
.logo { display: flex; align-items: center; }
.shell-right { margin-right: 8px; }

/* ── nav-centering-fix (moved from inline <style> in index.html) ── */
#header {
  --header-art-height: 36px;
  --header-edge-gap: 8px;
}

#header .container-fluid.container-xl {
  position: relative;
}

#header .header-shell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 64px;
  padding-inline: var(--header-edge-gap);
  line-height: 0;
  z-index: 11020;
}

#header .nav-icon-left,
#header .nav-icon-right {
  flex: 0 0 auto;
  display: flex !important;
  align-items: center;
  min-height: var(--header-art-height);
  margin: 0;
  padding: 0;
  line-height: 0;
}

#header .nav-icon-left {
  justify-content: flex-start;
  transform: scale(0.3);
  transform-origin: left center;
}

#header .nav-icon-right {
  justify-content: flex-end;
  margin-left: auto;
  transform: scale(0.625);
  transform-origin: right center;
  display: none !important;
}

#header .center-logo {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--header-art-height);
  pointer-events: none;
  z-index: 1003;
  margin: 0;
  padding: 0;
}

#header .centerChromeLogo,
#header .nav-icon-left svg,
#header .nav-icon-right svg {
  display: block !important;
  height: var(--header-art-height) !important;
  width: auto !important;
  max-height: none !important;
  margin: 0;
  padding: 0;
  overflow: visible !important;
}

#header .centerChromeLogo {
  transform: scale(1.25);
  transform-origin: center center;
}

/* strip button chrome so only the SVG/image defines the visual box */
#header .nav-icon-left > button,
#header .nav-icon-right > button,
#header .logo > button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  position: relative;
  z-index: 11030;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* keep an accessible visible focus ring for keyboard users */
#header .nav-icon-left > button:focus-visible,
#header .nav-icon-right > button:focus-visible,
#header .logo > button:focus-visible {
  outline: 2px solid rgba(255,255,255,0.9) !important;
  outline-offset: 2px !important;
}

@media (max-width: 1199px) {
  #header {
    --header-art-height: 30px;
    --header-edge-gap: 6px;
  }

  #header .center-nav {
    display: none !important;
  }
}

@media (max-width: 767px) {
  #header {
    --header-art-height: 30px;
    --header-edge-gap: 6px;
  }
}


  /* Ensure nav overlay itself shows on mobile even if GSAP inline styles lag */
  #mobile-nav.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  /* NOTE: circle and item overrides intentionally removed – GSAP owns those
     properties via inline style. !important here would cancel GSAP animation. */


/* Desktop nav links are handled by the mobile overlay (#mobile-nav) on all sizes */
#header .navmenu {
  display: none !important;
}

#header .hamburger,
#header .mobile-nav-toggle,
#header .nav-icon-left {
  display: flex !important;
}

#header .nav-icon-left > button,
#header #hamburger {
  position: relative;
  z-index: 11020;
}

/* Locks the underlying page in place while the mobile nav overlay is open, so iOS
   Safari can't rubber-band/momentum-scroll content out from under the fixed nav
   (same WebKit fixed-position lag that #preloader works around via body.preloader-lock). */
body.mobile-nav-lock {
  position: fixed;
  inset: 0;
  width: 100%;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
}

#mobile-nav {
  --mobile-nav-orange: #ffffff;
  position: fixed;
  z-index: 11000;
  inset: 0;
  display: block !important;
  width: 100vw;
  height: var(--mobile-nav-viewport-height, 100vh);
  height: var(--mobile-nav-viewport-height, 100dvh);
  min-height: 100vh;
  min-height: 100dvh;
  /* Extend the hit area underneath the iOS notch/home-indicator safe areas
     instead of stopping at them, so no gap is left at the edges — same
     technique used by #preloader (see index.html's preloader-critical style). */
  margin: calc(env(safe-area-inset-top) * -1) calc(env(safe-area-inset-right) * -1) calc(env(safe-area-inset-bottom) * -1) calc(env(safe-area-inset-left) * -1);
  padding-top: calc(5.25rem + env(safe-area-inset-top));
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left);
  box-sizing: border-box;
  overflow: hidden;
  /* Opaque backdrop, same as #preloader — full-screen coverage must not depend
     on the .mobile-nav__circle animation reaching every corner. The circle is
     purely a decorative fade-in for the nav links, not the coverage mechanism. */
  background: var(--mobile-nav-orange, #000000);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  /* Opening fades the backdrop in slowly (0.5s, see .active below); closing
     removes it over 0.6s after the GSAP circle/links exit animation runs. */
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

#mobile-nav.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.5s ease;
}

#mobile-nav .mobile-nav__circle {
  position: absolute;
  top: -5rem;
  left: -5rem;
  z-index: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  /* Rendered white on screen via the sitewide `.mobile-nav__circle { filter:
     invert(1); }` rule (see index.html's inline <style>) — this raw value must
     stay black so it inverts to match the white #mobile-nav backdrop. */
  background: #000000;
  border: none;
  outline: none;
  box-shadow: 0 22px 82px rgba(0, 0, 0, 0.25);
  transform: scale(0);
  transform-origin: 50% 50%;
  will-change: transform;
  pointer-events: none;
}

#mobile-nav.active .mobile-nav__circle {
  /* No !important: GSAP animates transform via inline style. This rule is only
     reached when GSAP is absent (fallback path sets inline directly). */
  transform: scale(var(--circle-open-scale, 1));
}

#mobile-nav .center-nav {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(100lvh - 5.25rem - env(safe-area-inset-bottom, 0px));
  padding: 0rem 1.5rem 6rem 5rem;
  z-index: 1;
}

#mobile-nav ul {
  width: min(92vw, 28rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

#mobile-nav li {
  width: 100%;
  /* opacity and transform are owned by GSAP — do not set them here */
}

#mobile-nav a,
#mobile-nav a:focus {
  display: inline-flex;
  align-items: center;
  width: 100%;
  color: #0a0a0a;
  text-decoration: none;
  font-size: 1.15rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  transition: color 0.18s ease, transform 0.18s ease;
}

#mobile-nav a:hover,
#mobile-nav a:focus {
  color: #000000;
  transform: translateX(0.25rem);
}

.tier-model {
  position: relative;
  overflow: hidden;
}

.tier-model[data-poster] {
  aspect-ratio: 16 / 9;
}

.tier-model .tier-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 2;
  transition: opacity 180ms ease;
}

.tier-model .tier-model-fallback {
  position: absolute;
  inset: 0;
  margin: 0;
  display: none;
  z-index: 1;
  background: #000;
}

.tier-model .tier-model-fallback img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.tier-model[data-model-loaded="false"] .tier-model-fallback,
.tier-model[data-model-paused="true"] .tier-model-fallback {
  display: block;
}

.tier-model[data-model-loaded="false"] .tier-canvas {
  display: none;
}

html[data-tier="low"] .tier-model[data-min-tier="medium"] .tier-canvas,
html[data-tier="low"] .tier-model[data-min-tier="high"] .tier-canvas {
  display: none !important;
}

html[data-tier="low"] .tier-model .tier-canvas {
  display: none !important;
}

html[data-tier="low"] .tier-model[data-min-tier="low"] .tier-canvas {
  display: block !important;
}

html[data-tier="low"] .tier-model .tier-model-fallback {
  display: block;
}

html[data-tier="low"] .tier-model[data-min-tier="low"] .tier-model-fallback {
  display: none;
}

html[data-tier="medium"] .tier-model[data-min-tier="high"] .tier-canvas {
  display: none !important;
}

html[data-tier="medium"] .tier-model[data-min-tier="high"] .tier-model-fallback {
  display: block;
}

html[data-tier="medium"] .tier-model[data-min-tier="medium"] .tier-canvas {
  opacity: 0.92;
  filter: saturate(0.92) contrast(0.96);
}

html[data-tier="high"] .tier-model[data-min-tier="medium"] .tier-canvas,
html[data-tier="high"] .tier-model[data-min-tier="high"] .tier-canvas {
  opacity: 1;
  filter: none;
}

/* ── Mobile touch devices: suppress 3D canvases, surface static fallback images ── */
@media (hover: none) and (pointer: coarse) and (max-width: 767px) {
  .tier-model .tier-canvas {
    display: none !important;
  }
  .tier-model .tier-model-fallback {
    display: block;
  }
}
/* ──────────────────────────────────────────────────────────────────────── */

/* Universal video play button shell: frame around host + centered play icon */
.playbtn-host {
  position: relative;
  border: none;
  border-radius: 14px;
  overflow: hidden;
}

/* vkGrid keeps media edges clean without the playbtn host frame. */
.vkGrid .playbtn-host {
  border: 0;
  border-radius: 0;
}

.vkGrid .playbtn-host > video,
.vkGrid .playbtn-host video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vkGrid .playbtn-host > .dynamic-video-controls-wrap {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  display: block !important;
}

.vkGrid .playbtn-host > .dynamic-video-controls-wrap > video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

/* Roadmap videos drop their rounded corners while actively playing. */
.roadmapCon [data-roadmap-playing="1"] {
  border-radius: 0 !important;
}

.roadmapCon [data-roadmap-playing="1"] > video,
.roadmapCon [data-roadmap-playing="1"] > .dynamic-video-controls-wrap > video {
  border-radius: 0 !important;
}

@media (max-width: 1200px) {
  .vkGrid .playbtn-host > video,
  .vkGrid .playbtn-host video {
    object-fit: contain;
  }

  .vkGrid .playbtn-host > .dynamic-video-controls-wrap > video {
    object-fit: contain;
  }
}

.playbtn-host > video,
.playbtn-host video {
  display: block;
  width: 100%;
  height: auto;
}

/* Keep runtime-injected control wrappers locked to the host box. */
.playbtn-host > .dynamic-video-controls-wrap {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
}

.playbtn-host > .dynamic-video-controls-wrap > video,
.playbtn-host > .dynamic-video-controls-wrap video {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.playbtn-host .playbtn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 66px;
  height: 66px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08));
  backdrop-filter: blur(12px) saturate(135%);
  -webkit-backdrop-filter: blur(12px) saturate(135%);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  cursor: pointer;
  z-index: 8;
  appearance: none;
  -webkit-appearance: none;
}

.playbtn-host .playbtn:hover,
.playbtn-host .playbtn:focus-visible {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.12));
  outline: 0;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.playbtn-host .overlay-icon {
  width: 42px;
  height: 42px;
  display: block;
  pointer-events: none;
}

@media (max-width: 768px) {
  .playbtn-host .playbtn {
    width: 33px;
    height: 33px;
  }

  .playbtn-host .overlay-icon {
    width: 21px;
    height: 21px;
  }
}

/* Add mobile two-column layout for .roadmapCon .vkRow and .nl-vkRow */
@media (max-width: 767px) {
  .roadmapCon .vkRow,
  .roadmapCon .nl-vkRow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .roadmapCon .vkRow > *,
  .roadmapCon .nl-vkRow > * {
    width: 100%;
    box-sizing: border-box;
  }
}

.bf-2025-intro-text{
  background-color: var(--wb-star-bg-black);
  position: relative;
  z-index:500;
}

/* ── Hero title overlay ── */
.hero-title-overlay {
  position: absolute;
  bottom: 16%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 10;
  pointer-events: none;
  white-space: nowrap;
}

/* Keep hero video visible when split-hero canvases/fallback are not mounted.
   main.1.css defaults .msvideo-source to hidden for split mode bootstrap. */
#landingVideoHeroSplit #ms-master-video.msvideo-source {
  opacity: 1 !important;
  visibility: visible !important;
  display: block;
}

.hero-title-main {
  margin: 0;
  font-size: clamp(1rem, 2.2vw, 1.6rem);
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0,0,0,0.55);
}

.hero-title-sub {
  margin: 0.35em 0 0;
  font-size: clamp(0.75rem, 1.4vw, 1rem);
  font-weight: 300;
  color: rgba(255,255,255,0.82);
  letter-spacing: 0.12em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

@media (max-width: 1199px) {
  .heroContent {
    padding: 40px 20px 20px 20px;
    border-radius:24px;
  }

  #heroContent > .container {
    position: relative;
    z-index: 1;
  }
}