/* ==========================================================================
   OFT — Hero background video overlay (v2 style, Meraki-inspired)
   Layered on top of site.css. Keeps original OFT palette (#0d1017 + #f2701c)
   but adds a fixed atmospheric video behind everything and a serif display
   font in the hero copy.
   ========================================================================== */

/* Fraunces for serif display */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500&display=swap');

/* ---- Fixed background video ---- */
.has-hero-video { position: relative; }
.has-hero-video body,
body.has-hero-video { background: transparent; }

.site-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: #0d1017; /* fallback while video buffers */
  pointer-events: none;
}
.site-bg__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* subtle grade to match OFT palette */
  filter: saturate(1.05) contrast(1.02) brightness(0.95);
  will-change: transform;
  transform: translateZ(0);
}
.site-bg__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1400px 700px at 22% 30%, rgba(13,16,23,0.20) 0%, rgba(13,16,23,0.62) 65%, rgba(13,16,23,0.82) 100%),
    linear-gradient(180deg, rgba(13,16,23,0.25) 0%, rgba(13,16,23,0.55) 45%, rgba(13,16,23,0.92) 100%);
}

/* Respect reduced motion — replace video with poster still */
@media (prefers-reduced-motion: reduce){
  .site-bg__video { display: none; }
  .site-bg { background: #0d1017 url('../img/hero-poster.jpg') center/cover no-repeat; }
}

/* ---- Make nav a glass bar over the video ---- */
body.has-hero-video .nav {
  background: linear-gradient(180deg, rgba(13,16,23,0.72), rgba(13,16,23,0.35));
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: sticky; top: 0; z-index: 20;
}

/* ---- Hero: transparent so video shows through, upgrade type ---- */
body.has-hero-video .hero {
  position: relative;
  padding-top: 96px;
  padding-bottom: 80px;
  background: transparent;
}
body.has-hero-video .hero::before {
  /* soft warm bloom behind title, doesn't obstruct the video */
  content: '';
  position: absolute;
  left: -6%;
  top: 10%;
  width: 62%;
  height: 80%;
  background: radial-gradient(closest-side, rgba(242,112,28,0.18), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
body.has-hero-video .hero > .container { position: relative; z-index: 1; }

body.has-hero-video .hero__eyebrow {
  color: rgba(242,112,28,0.95);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 20px;
  display: inline-flex; align-items: center; gap: 8px;
}
body.has-hero-video .hero__eyebrow::before {
  content: ''; display:inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent, #f2701c);
  box-shadow: 0 0 12px rgba(242,112,28,0.9);
}

body.has-hero-video .hero__title {
  font-family: 'Fraunces', 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(46px, 6.6vw, 92px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 24px;
  text-shadow: 0 4px 30px rgba(0,0,0,0.35);
}
body.has-hero-video .hero__title em,
body.has-hero-video .hero__title i {
  color: var(--accent, #f2701c);
  font-style: italic;
  font-weight: 400;
}

body.has-hero-video .hero__lede {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  color: rgba(255,255,255,0.82);
  max-width: 620px;
  margin: 0;
}
body.has-hero-video .hero__lede strong { color: #fff; font-weight: 600; }
body.has-hero-video .hero__lede em {
  color: var(--accent, #f2701c);
  font-style: normal;
  font-weight: 500;
}

/* Align card on the right — keep it, but glass it up */
body.has-hero-video .hero__align-card {
  background: rgba(21,26,36,0.55);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.55);
}
body.has-hero-video .hero__align-eyebrow {
  color: rgba(255,255,255,0.72);
}

/* ---- Sections BELOW the hero: give them their own dark surface so
        the fixed video doesn't fight for attention against dense UI ---- */
body.has-hero-video main {
  position: relative;
  z-index: 1;
}
body.has-hero-video .grid-wrap,
body.has-hero-video .trade,
body.has-hero-video .portfolio,
body.has-hero-video .marketplace,
body.has-hero-video .whitepaper,
body.has-hero-video .about {
  background: linear-gradient(180deg, rgba(13,16,23,0.55) 0%, rgba(13,16,23,0.92) 12%, rgba(13,16,23,0.98) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Sub-page heroes (marketplace, portfolio) — keep them transparent so the
   video peeks through the top of every page */
body.has-hero-video .hero.hero--sm {
  padding-top: 72px;
  padding-bottom: 40px;
  background: transparent;
}

/* Buttons — a touch more glow */
body.has-hero-video .btn--primary {
  box-shadow: 0 8px 24px -8px rgba(242,112,28,0.55);
}

/* Small tweak: connect wallet chip should stay legible over glass nav */
body.has-hero-video .net-chip {
  background: rgba(21,26,36,0.7);
  border: 1px solid rgba(255,255,255,0.08);
}

/* Version toggle badge (tiny link back to v1) */
.version-flag {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 30;
  background: rgba(21,26,36,0.85);
  backdrop-filter: blur(10px);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 8px 12px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform .2s ease, background .2s ease;
}
.version-flag:hover {
  background: rgba(242,112,28,0.85);
  color: #fff;
  transform: translateY(-1px);
}
.version-flag::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #f2701c; box-shadow: 0 0 8px rgba(242,112,28,0.9);
}

/* Mobile — video stays but scrim gets darker for legibility */
@media (max-width: 720px){
  .site-bg__scrim {
    background:
      linear-gradient(180deg, rgba(13,16,23,0.35) 0%, rgba(13,16,23,0.85) 40%, rgba(13,16,23,0.98) 100%);
  }
  body.has-hero-video .hero { padding-top: 72px; padding-bottom: 48px; }
  body.has-hero-video .hero__title { font-size: clamp(38px, 10vw, 56px); }
}

/* ==========================================================================
   Inner-page background fix
   On non-home pages there is no hero, so the off-center video + radial scrim
   showed as a lopsided bright "box" in the left margin. On inner pages, cover
   the video with an even, symmetric dark wash so the page background is calm
   and uniform across the full width.
   ========================================================================== */
body.is-inner .site-bg__video { opacity: 0.10; }
body.is-inner .site-bg__scrim {
  background:
    linear-gradient(180deg, rgba(13,16,23,0.90) 0%, rgba(13,16,23,0.95) 100%),
    #0d1017;
}

/* A touch more breathing room at the top of inner content pages. */
body.is-inner .trade { padding-block-start: 44px; }
body.is-inner #page-portfolio .container,
body.is-inner #page-marketplace .container { padding-top: 16px; }