/* ════════════════════════════════════════════════════════════════════
   MISSION, VISION & VALUES — Hero
   Isolated component (see vision-hero.js). Full-bleed photographic
   composition of the Mission/Vision/Values gear artwork (Hero/mission-
   vision-values.*) with a single left-to-right scrim carrying the
   headline — one full-inset photo + one scrim, not a boxed image
   stitched against a separately-drawn background. Thin orbital rings
   and a few drifting embers are layered on top as the only "invented"
   decoration; everything else the eye reads as background comes from
   the photo itself.

   Motion contract: only transform / opacity are animated on anything
   that runs continuously. Width, height, margin, left and top are
   never transitioned.
   ════════════════════════════════════════════════════════════════════ */

.mvv-hero {
  --navy: #061B49;
  --navy-deep: #040F2C;
  --ink: #F4F6FB;
  --ink-dim: #AEB9D4;
  --accent: #FF7518;
  --accent-hot: #FFC24B;
  --accent-deep: #E23B1F;
  position: relative;
  min-height: 100vh;
  height: 100vh;
  min-height: 760px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--navy);
  color: var(--ink);
}

@media (max-width: 900px) {
  .mvv-hero { height: auto; min-height: 100svh; padding-bottom: 2.5rem; }
}

/* cursor-following spotlight — fixed-size glow translated via transform
   (GPU compositor only) so it never repaints on pointermove. Desktop-only:
   on touch devices :hover can stick after a tap, which would otherwise
   leave this large glow stranded on screen — hover:hover + pointer:fine
   keeps it out of the DOM entirely on touch (also skips the will-change
   compositor layer there). */
@media (hover: hover) and (pointer: fine) {
  .mvv-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 760px;
    height: 760px;
    margin: -380px 0 0 -380px;
    z-index: 4;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 194, 75, .08), transparent 70%);
    opacity: 0;
    transform: translate3d(var(--mx, 50%), var(--my, 40%), 0);
    transition: opacity .6s ease;
    pointer-events: none;
    will-change: transform, opacity;
    backface-visibility: hidden;
  }

  .mvv-hero:hover::after { opacity: 1; }
}

.mvv-hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* ══ full-bleed photo ══ */
.mvv-hero-visual { position: absolute; inset: 0; overflow: hidden; }

.mvv-hero-visual picture,
.mvv-hero-visual-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.mvv-hero-visual-img {
  object-fit: cover;
  object-position: 50% 30%;
  animation: mvvVisualFloat 6.5s ease-in-out infinite;
  transition: filter .5s ease;
  will-change: transform;
  backface-visibility: hidden;
}

@keyframes mvvVisualFloat {
  0%, 100% { transform: scale(1.045) translateY(0); }
  50% { transform: scale(1.045) translateY(-9px); }
}

/* subtle premium brighten when the hero itself is hovered — a stand-in
   for "gear hover" since the gears live inside one flat photo */
.mvv-hero:hover .mvv-hero-visual-img { filter: brightness(1.05) saturate(1.05); }

/* single scrim: dark-to-transparent left→right carries the headline,
   a faint top/bottom vignette adds depth. one element, one background. */
.mvv-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, var(--navy-deep) 0%, rgba(4, 15, 44, .96) 24%, rgba(4, 15, 44, .84) 38%, rgba(4, 15, 44, .5) 52%, rgba(4, 15, 44, .16) 66%, rgba(4, 15, 44, 0) 80%),
    linear-gradient(180deg, rgba(4, 15, 44, .4) 0%, transparent 16%, transparent 76%, rgba(4, 15, 44, .6) 100%);
}

/* thin orbital rings around the gear cluster in the photo, very slow spin */
.mvv-hero-orbit {
  position: absolute;
  left: 73%;
  top: 43%;
  width: min(56vw, 760px);
  height: min(56vw, 760px);
  transform: translate3d(-50%, -50%, 0);
  z-index: 2;
  pointer-events: none;
  opacity: .8;
}

.mvv-hero-orbit svg { display: block; width: 100%; height: 100%; }

.mvv-hero-orbit-spin {
  transform-origin: 450px 450px;
  animation: mvvOrbitSpin 42s linear infinite;
  will-change: transform;
}

@keyframes mvvOrbitSpin { to { transform: rotate(360deg); } }

.mvv-hero-particles { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }

.mvv-hero-particle {
  position: absolute;
  bottom: -6%;
  left: var(--px, 30%);
  width: var(--ps, 3px);
  height: var(--ps, 3px);
  border-radius: 50%;
  background: var(--pc, var(--accent-hot));
  box-shadow: 0 0 6px 1px var(--pc, var(--accent-hot));
  opacity: 0;
  animation: mvvParticleDrift var(--pd, 12s) ease-in var(--pdelay, 0s) infinite;
}

@keyframes mvvParticleDrift {
  0% { transform: translate(0, 0); opacity: 0; }
  8% { opacity: .75; }
  85% { opacity: .28; }
  100% { transform: translate(var(--pdx, 20px), -108vh); opacity: 0; }
}

/* ══ content ══ */
.mvv-hero-inner {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: calc(var(--nav-h) + 2rem) 1.75rem 4rem;
}

.mvv-hero-content {
  max-width: 620px;
}

.mvv-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--font-mono);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--accent-hot);
  opacity: 0;
}

.mvv-hero-eyebrow-line {
  width: 30px;
  height: 1.5px;
  background: linear-gradient(90deg, var(--accent), var(--accent-hot));
}

.mvv-hero-heading {
  margin-top: 1.1rem;
  font-family: var(--font-display);
  text-transform: none;
  font-size: clamp(2.6rem, 4.6vw, 4.3rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.01em;
  opacity: 0;
}

.mvv-hero-heading .line { display: block; }
.mvv-hero-heading .ink { color: var(--ink); }
.mvv-hero-heading .accent {
  color: var(--accent);
  filter: drop-shadow(0 0 26px rgba(255, 117, 24, .32));
}

.mvv-hero-desc {
  margin-top: 1.3rem;
  max-width: 46ch;
  font-size: 1.06rem;
  line-height: 1.75;
  color: var(--ink-dim);
  padding: .95rem 1.3rem;
  background: linear-gradient(165deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03));
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 1rem;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .12);
  opacity: 0;
}

.mvv-hero-rule {
  width: 62px;
  height: 3px;
  border-radius: 2px;
  margin-top: 1.6rem;
  background: linear-gradient(90deg, var(--accent), var(--accent-hot));
  opacity: 0;
}

/* ── Mission / Vision / Values mini features ── */
.mvv-hero-pillars {
  display: flex;
  align-items: stretch;
  gap: 1.6rem;
  margin-top: 2.6rem;
  opacity: 0;
}

.mvv-hero-pillar {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  text-decoration: none;
  color: var(--ink);
  transition: transform .35s cubic-bezier(.16, .84, .44, 1);
}

.mvv-hero-pillar:hover { transform: translateY(-3px) scale(1.03); }

.mvv-hero-pillar-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .05);
  color: var(--ink);
  transition: border-color .35s ease, box-shadow .35s ease, color .35s ease, background .35s ease;
}

.mvv-hero-pillar-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.mvv-hero-pillar:hover .mvv-hero-pillar-icon {
  color: var(--accent-hot);
  border-color: rgba(255, 194, 75, .55);
  background: rgba(255, 117, 24, .12);
  box-shadow: 0 0 0 5px rgba(255, 117, 24, .1), 0 0 18px rgba(255, 194, 75, .3);
}

.mvv-hero-pillar-text { display: flex; flex-direction: column; gap: .18rem; }

.mvv-hero-pillar-label {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 700;
  text-transform: none;
  transition: color .3s ease;
}

.mvv-hero-pillar:hover .mvv-hero-pillar-label { color: var(--accent-hot); }

.mvv-hero-pillar-sub {
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.mvv-hero-pillar-div {
  width: 1px;
  align-self: stretch;
  background: rgba(255, 255, 255, .14);
}

@media (max-width: 560px) {
  .mvv-hero-pillars { flex-wrap: wrap; row-gap: 1.4rem; column-gap: 1.2rem; }
  .mvv-hero-pillar-div { display: none; }
}

/* ── bottom curved transition ── */
.mvv-hero-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 3;
  height: clamp(60px, 9vw, 110px);
  pointer-events: none;
}

.mvv-hero-wave svg { display: block; width: 100%; height: 100%; }

.mvv-hero-wave-line {
  stroke: var(--accent);
  stroke-width: 2;
  opacity: .55;
}

.mvv-hero-wave-fill { fill: var(--surface, #fff); }

@media (max-width: 900px) {
  .mvv-hero-wave { display: none; }
}

/* ══ tablet ══ */
@media (max-width: 1100px) {
  .mvv-hero-orbit { left: 70%; width: min(64vw, 620px); height: min(64vw, 620px); }
}

/* ══ mobile: text stacks centered over the same full-bleed photo, no
   separate boxed card — matches the homepage / leadership hero ══ */
@media (max-width: 900px) {
  .mvv-hero-visual-img { object-position: 62% 28%; animation-duration: 7s; }

  .mvv-hero-scrim {
    background:
      linear-gradient(180deg, rgba(4, 15, 44, .78) 0%, rgba(4, 15, 44, .4) 24%, rgba(4, 15, 44, .3) 44%, rgba(4, 15, 44, .58) 66%, rgba(4, 15, 44, .95) 100%),
      linear-gradient(90deg, rgba(4, 15, 44, .5) 0%, transparent 45%, transparent 60%, rgba(4, 15, 44, .35) 100%);
  }

  .mvv-hero-orbit { left: 50%; top: 38%; width: 92%; height: 92%; opacity: .45; }

  .mvv-hero-particles { display: none; }

  .mvv-hero-inner { padding: calc(var(--nav-h) + 1.6rem) 1.25rem 2.5rem; }

  .mvv-hero-content { max-width: none; text-align: center; }

  .mvv-hero-eyebrow { justify-content: center; }

  .mvv-hero-desc { margin-left: auto; margin-right: auto; }

  .mvv-hero-rule { margin-left: auto; margin-right: auto; }

  .mvv-hero-pillars { justify-content: center; }
}

/* ══ entrance state hooks (see vision-hero.js) ══ */
.mvv-illu-light {
  animation: mvvSparkPulse 3.2s ease-in-out infinite;
  will-change: opacity;
}
.mvv-illu-light:nth-child(3n) { animation-duration: 2.4s; }
.mvv-illu-light:nth-child(4n) { animation-duration: 4.1s; animation-delay: -1s; }

@keyframes mvvSparkPulse {
  0%, 100% { opacity: .3; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .mvv-hero-visual-img, .mvv-hero-orbit-spin, .mvv-hero-particle, .mvv-illu-light {
    animation: none !important;
  }
  .mvv-hero:hover .mvv-hero-visual-img { filter: none; }
}