/* =============================================================================
   Aegis Compliance — Hero (Patriotic Cinematic)
   Inspired by Booz Allen's hero treatment. Pure CSS + SVG, no media deps.
   ========================================================================== */

.hero-cinematic {
  position: relative;
  min-height: 92vh;
  background: var(--navy-900);
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
}

/* === Layer 1: deep gradient base === */
.hero-cinematic::before {
  content: '';
  position: absolute; inset: 0; z-index: -5;
  background:
    radial-gradient(ellipse 80% 60% at 30% 30%, rgba(44, 91, 160, 0.28) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 70%, rgba(107, 31, 43, 0.22) 0%, transparent 55%),
    linear-gradient(135deg, #050D1F 0%, #0A1A33 50%, #132B52 100%);
}

/* === Layer 2: shutter / stripe slats (the marquee patriotic move) === */
.hero-cinematic__stripes {
  position: absolute; inset: 0; z-index: -4;
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent 60px,
    rgba(250, 250, 247, 0.018) 60px,
    rgba(250, 250, 247, 0.018) 61px
  );
  pointer-events: none;
}
.hero-cinematic__shutter {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%; transform: translateX(-50%);
  width: 110%;
  z-index: -3;
  display: flex;
  pointer-events: none;
  opacity: 0.55;
}
.hero-cinematic__slat {
  flex: 1;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(250, 250, 247, 0.02) 50%,
    transparent 100%);
  border-right: 1px solid rgba(250, 250, 247, 0.025);
  position: relative;
  transform: skewX(-8deg);
  animation: slat-glow 8s var(--ease) infinite;
}
.hero-cinematic__slat:nth-child(odd)  { animation-delay: 0s; }
.hero-cinematic__slat:nth-child(even) { animation-delay: 1.2s; }
.hero-cinematic__slat:nth-child(3n)   { animation-delay: 2.4s; }
.hero-cinematic__slat:nth-child(4n)   { animation-delay: 3.6s; }

@keyframes slat-glow {
  0%, 100% { background: linear-gradient(180deg, transparent 0%, rgba(250,250,247,0.015) 50%, transparent 100%); }
  50%      { background: linear-gradient(180deg, transparent 0%, rgba(44,91,160,0.10) 50%, transparent 100%); }
}

/* === Layer 3: star field (50 stars representing the union) === */
.hero-cinematic__stars {
  position: absolute; inset: 0; z-index: -2;
  pointer-events: none;
  opacity: 0.45;
}

/* === Layer 4: bottom flag-stripe accent === */
.hero-cinematic__flag-rule {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  z-index: 2;
  display: flex;
}
.hero-cinematic__flag-rule span {
  flex: 1;
  height: 100%;
}
.hero-cinematic__flag-rule span:nth-child(1) { background: var(--oxblood); }
.hero-cinematic__flag-rule span:nth-child(2) { background: var(--paper); }
.hero-cinematic__flag-rule span:nth-child(3) { background: var(--navy-700); }
.hero-cinematic__flag-rule span:nth-child(4) { background: var(--paper); }
.hero-cinematic__flag-rule span:nth-child(5) { background: var(--oxblood); }

/* === Layer 5: light shafts (subtle volumetric light) === */
.hero-cinematic__light {
  position: absolute;
  top: -10%; bottom: -10%;
  width: 200px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(250, 250, 247, 0.04) 30%,
    rgba(250, 250, 247, 0.05) 50%,
    rgba(250, 250, 247, 0.04) 70%,
    transparent 100%);
  transform: skewX(-12deg);
  filter: blur(8px);
  animation: light-drift 18s linear infinite;
}
.hero-cinematic__light--a { left: 12%; animation-delay: 0s; }
.hero-cinematic__light--b { left: 62%; animation-delay: -9s; }

@keyframes light-drift {
  0%   { opacity: 0; transform: translateX(-200px) skewX(-12deg); }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(200px) skewX(-12deg); }
}

/* === Hero content === */
.hero-cinematic__inner {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: var(--max-w-content);
  margin: 0 auto;
  padding: var(--space-9) var(--space-5) var(--space-10);
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: var(--space-7);
  align-items: center;
}

.hero-cinematic__copy { max-width: 720px; }
.hero-cinematic__eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-300);
  margin-bottom: var(--space-5);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.hero-cinematic__eyebrow::before {
  content: '';
  width: 36px; height: 1px;
  background: var(--oxblood);
}

.hero-cinematic__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.5vw, 76px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--paper);
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}
.hero-cinematic__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--navy-100);
  display: block;
}

.hero-cinematic__lede {
  font-family: var(--font-serif);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
  color: var(--ink-200);
  margin: 0 0 var(--space-6);
  max-width: 540px;
}

.hero-cinematic__ctas {
  display: flex; gap: var(--space-3); flex-wrap: wrap;
  margin-bottom: var(--space-7);
}
.hero-cinematic__ctas .btn {
  border-color: var(--paper);
  color: var(--paper);
}
.hero-cinematic__ctas .btn:hover { background: var(--paper); color: var(--brand); }
.hero-cinematic__ctas .btn--solid {
  background: var(--paper);
  color: var(--brand);
  border-color: var(--paper);
}
.hero-cinematic__ctas .btn--solid:hover {
  background: transparent;
  color: var(--paper);
  border-color: var(--paper);
}

.hero-cinematic__sectors {
  display: flex; gap: var(--space-5); flex-wrap: wrap;
  padding-top: var(--space-5);
  border-top: 1px solid rgba(250, 250, 247, 0.14);
}
.hero-cinematic__sectors .sector-stat {
  font-family: var(--font-sans);
  color: var(--ink-200);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: flex; flex-direction: column; gap: 4px;
}
.hero-cinematic__sectors .sector-stat strong {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  color: var(--paper);
  letter-spacing: -0.01em;
  text-transform: none;
}

/* === Seal column === */
.hero-cinematic__seal-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-cinematic__seal {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.5));
  animation: seal-rise 1.4s var(--ease) both;
}
@keyframes seal-rise {
  0%   { opacity: 0; transform: translateY(20px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 900px) {
  .hero-cinematic { min-height: auto; padding: var(--space-7) 0; }
  .hero-cinematic__inner { grid-template-columns: 1fr; padding: var(--space-7) var(--space-5); }
  .hero-cinematic__seal-wrap { order: -1; }
  .hero-cinematic__seal { max-width: 280px; }
  .hero-cinematic__sectors { gap: var(--space-4); }
  .hero-cinematic__sectors .sector-stat strong { font-size: 22px; }
}

/* === Sector reveal (the "transition" — Federal · Local · Commercial) === */
.sector-reveal {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.sector-reveal__rule {
  height: 4px;
  background: linear-gradient(90deg,
    var(--oxblood) 0%, var(--oxblood) 33.33%,
    var(--paper) 33.33%, var(--paper) 66.66%,
    var(--navy-700) 66.66%, var(--navy-700) 100%);
}
.sector-reveal__inner {
  max-width: var(--max-w-content);
  margin: 0 auto;
  padding: var(--space-8) var(--space-5);
}
.sector-reveal__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  margin-bottom: var(--space-7);
  align-items: end;
}
.sector-reveal__head .eyebrow { color: var(--oxblood); }
.sector-reveal__head h2 {
  font-size: clamp(32px, 4vw, 56px);
  letter-spacing: -0.02em;
  margin: var(--space-3) 0 0;
  text-wrap: balance;
}
.sector-reveal__head p {
  font-size: var(--fs-lead);
  color: var(--fg-2);
  line-height: 1.45;
  margin: 0;
}
@media (max-width: 800px) {
  .sector-reveal__head { grid-template-columns: 1fr; }
}


/* === Video hero layer (real DC architecture footage) ===
   Sits beneath the hero copy. Toggle via AEGIS_CONFIG.videoHero in site.js. */
.hero-cinematic__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 900ms var(--ease);
}
.hero-cinematic.video-active .hero-cinematic__video { opacity: 1; }
.hero-cinematic__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* duotone-lean: desaturate toward the brand's B&W imagery rule */
  filter: grayscale(65%) brightness(0.9) contrast(1.05);
}
/* Navy protection scrim — keeps hero text at WCAG AA+ contrast over footage */
.hero-cinematic__video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(10,26,51,0.93) 0%, rgba(10,26,51,0.82) 55%, rgba(10,26,51,0.62) 100%);
}
/* When footage is playing, quiet the synthetic atmospherics */
.hero-cinematic.video-active .hero-cinematic__stars,
.hero-cinematic.video-active .hero-cinematic__shutter,
.hero-cinematic.video-active .hero-cinematic__light--a,
.hero-cinematic.video-active .hero-cinematic__light--b { display: none; }
/* Keep copy and flag rule above the footage */
.hero-cinematic__inner, .hero-cinematic__flag-rule { position: relative; z-index: 1; }