/* ============================================================
   Celva Bio — Hero full-bleed video
   Black scrim over warm amber cell-field footage.
   ============================================================ */

/* shared media */
.hero-vid {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}
.hero-scrim {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* ============================================================
   Full-bleed hero
   ============================================================ */
body.v4 .v4-hero {
  background: #0B1D3A;
  border-bottom-color: rgba(255,255,255,0.1);
  color: var(--white);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
body.v4 .v4-hero > .hero-vid,
body.v4 .v4-hero > .hero-scrim,
body.v4 .v4-hero > .hero-grain {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
}
body.v4 .v4-hero > .hero-vid { object-fit: cover; }
body.v4 .v4-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background-image: url('../assets/hero/hero-desktop.jpg');
  background-size: cover; background-position: center;
}
body.v4 .v4-hero .hero-vid { z-index: 1; }
body.v4 .v4-hero .hero-scrim {
  z-index: 2;
  background:
    linear-gradient(105deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.25) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.5) 100%);
}
body.v4 .v4-hero .v4-sysbar,
body.v4 .v4-hero .v4-hero__grid,
body.v4 .v4-hero .v4-hero__ticker {
  position: relative; z-index: 3;
}

/* top system bar — transparent on the video */
body.v4 .v4-sysbar {
  background: rgba(11,29,58,0.45);
  border-bottom-color: rgba(255,255,255,0.12);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
body.v4 .v4-sysbar .v4-mono { color: rgba(255,255,255,0.7); }
body.v4 .v4-sysbar .v4-mono b { color: #fff; }
body.v4 .v4-sysbar__sep { background: rgba(255,255,255,0.3); }
body.v4 .v4-mono--ok { color: #7fe8a8 !important; }

/* grid becomes single-column — video IS the visual */
body.v4 .v4-hero__grid {
  grid-template-columns: minmax(0, 680px);
  gap: 0;
  padding-top: clamp(80px, 10vw, 140px);
  padding-bottom: clamp(80px, 10vw, 140px);
}
body.v4 .v4-hero__visual { display: none; }

/* text colors */
body.v4 .v4-section-tag .v4-mono { color: #7CA9D1; }
body.v4 .v4-hero__h1 { color: #fff; }
body.v4 .v4-hero__h1 em { color: #E8D9B8; } /* warm amber pulled from video */
body.v4 .v4-hero__sub { color: rgba(255,255,255,0.82); }
body.v4 .v4-hero__ctas .cta-link { color: #fff; }

/* pillars on dark */
body.v4 .v4-hero__pillars { border-top-color: rgba(255,255,255,0.18); }
body.v4 .v4-hero__pillars > div { border-right-color: rgba(255,255,255,0.12); }
body.v4 .v4-hero__pillars > div:first-child { padding-left: 0; }
body.v4 .v4-hero__pillars .v4-lbl { color: rgba(255,255,255,0.8); }
body.v4 .v4-pillar__n { color: #fff; }
body.v4 .v4-pillar__n sup { color: rgba(255,255,255,0.6); }
body.v4 .v4-pillar__l { color: rgba(255,255,255,0.8); }

/* ticker on dark */
body.v4 .v4-hero__ticker {
  background: rgba(11,29,58,0.55);
  border-top-color: rgba(255,255,255,0.14);
  backdrop-filter: blur(4px);
}
body.v4 .v4-ticker__row { color: rgba(255,255,255,0.7); }
body.v4 .v4-ticker__row span::after { background: rgba(255,255,255,0.3); }

/* film-grain overlay */
body.v4 .v4-hero .hero-grain {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.05;
  background-image: radial-gradient(rgba(255,255,255,0.22) 1px, transparent 1px),
                    radial-gradient(rgba(255,255,255,0.15) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 2px;
  mix-blend-mode: overlay;
}

/* Responsive */
@media (max-width: 900px) {
  body.v4 .v4-hero__grid { padding-top: 60px; padding-bottom: 60px; }
  body.v4 .v4-hero__h1 { font-size: clamp(2.6rem, 10vw, 4rem); }
  body.v4 .v4-hero__pillars { grid-template-columns: 1fr; gap: 16px; }
  body.v4 .v4-hero__pillars > div {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    padding-bottom: 14px;
  }
}

/* reduced motion — hide the video */
@media (prefers-reduced-motion: reduce) {
  .hero-vid { display: none; }
}