/*
  Shared interior-page hero. Loaded after styles.css, interiors.css, and
  site-header.css so this treatment can stay isolated from the page content.
*/

.page-intro {
  position: relative;
  isolation: isolate;
  display: flex;
  /* Top-aligned, so the eyebrow and title sit at the same height on every interior page
     whatever the intro copy length. */
  align-items: flex-start;
  /* Tall enough that the longest interior intro still fits inside it at every
     width down to the mobile breakpoint, so the hero is the SAME height on every
     page rather than growing with the copy: Services and Team ran 4px to 48px
     taller than Contact and Resources before this. (Aaron, 2026-09-12.) */
  min-height: clamp(calc(570 * var(--u)), 39vw, calc(600 * var(--u)));
  padding-top: calc(var(--header-height) + var(--space-12));
  padding-bottom: clamp(var(--space-16), 6vw, var(--space-24));
  overflow: hidden;
  background: var(--slate);
}

.page-intro::before,
.page-intro::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

/* The slight overscan leaves room for a slow camera-like drift without ever
   exposing an edge. Visual weight stays on the right of the copy column. */
.page-intro::before {
  z-index: -2;
  inset: -3%;
  background: var(--midnight) url("assets/interior-header.jpg?v=20260911h") 62% center / cover no-repeat;
  filter: saturate(1) contrast(1.03);
  transform: scale(1.025);
  transform-origin: 72% 48%;
  animation: interior-scene-drift 24s ease-in-out infinite alternate;
  will-change: transform;
}

/* Three translucent veils do separate jobs: protect the copy, vignette the
   scene, and make the final pixels exactly slate for a seamless handoff. */
.page-intro::after {
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(10, 10, 20, 0.16) 0%,
      rgba(10, 10, 20, 0.02) 38%,
      rgba(8, 8, 17, 0.10) 56%,
      rgba(8, 8, 17, 0.28) 70%,
      rgba(8, 8, 17, 0.52) 80%,
      rgba(8, 8, 17, 0.76) 88%,
      rgba(8, 8, 17, 0.92) 94%,
      rgba(8, 8, 17, 0.98) 98%,
      var(--slate) 100%
    ),
    linear-gradient(
      102deg,
      rgba(10, 10, 20, 0.82) 0%,
      rgba(10, 10, 20, 0.68) 32%,
      rgba(10, 10, 20, 0.34) 50%,
      rgba(10, 10, 20, 0.1) 73%,
      rgba(10, 10, 20, 0.04) 100%
    ),
    radial-gradient(
      70% 115% at 88% 36%,
      rgba(123, 133, 215, 0.08) 0%,
      rgba(10, 10, 20, 0) 72%
    );
}

/* Every interior page starts its first section the same distance below the hero.
   Without this, Services sat at 48px (the .audience-panel rule) while Team,
   Contact, and Resources sat at the full 144px section padding, so the first
   heading landed ~100px lower on three pages out of four. */
.page-intro + .section { padding-top: var(--space-12); }

.page-intro > .container {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding-right: clamp(0px, 18vw, calc(260 * var(--u)));
}

.page-intro h1 {
  color: #fff;
}

.page-intro .why-aurora__intro {
  color: #d0d6e3;
  text-wrap: pretty;
}

.page-intro .audience-toggle {
  margin-bottom: 0;
}

@keyframes interior-scene-drift {
  from { transform: scale(1.025) translate3d(0, 0, 0); }
  to { transform: scale(1.055) translate3d(-0.7%, -0.45%, 0); }
}

@media (max-width: 640px) {
  .page-intro {
    /* Same reasoning as the desktop min-height: the longest intro (Team) needs
       622px at 390px wide, so a 600px box grew on that page only. */
    min-height: 660px;
    padding-top: calc(var(--header-height) + var(--space-10));
    padding-bottom: var(--space-16);
  }

  /* A height-led crop keeps the aurora visible on a narrow canvas. The
     stronger veil makes every possible line of shared page copy readable. */
  .page-intro::before {
    inset: -2%;
    background-size: auto 104%;
    background-position: 80% center;
    filter: saturate(1.1) contrast(1.02);
    opacity: 1;
    transform-origin: 80% 50%;
  }

  .page-intro::after {
    background:
      linear-gradient(
        to bottom,
        rgba(10, 10, 20, 0.12) 0%,
        rgba(10, 10, 20, 0.10) 48%,
        rgba(8, 8, 17, 0.30) 68%,
        rgba(8, 8, 17, 0.60) 80%,
        rgba(8, 8, 17, 0.85) 90%,
        rgba(8, 8, 17, 0.96) 97%,
        var(--slate) 100%
      ),
      linear-gradient(
        105deg,
        rgba(10, 10, 20, 0.7) 0%,
        rgba(10, 10, 20, 0.48) 58%,
        rgba(10, 10, 20, 0.12) 100%
      ),
      radial-gradient(
        90% 75% at 100% 16%,
        rgba(123, 133, 215, 0.12) 0%,
        rgba(10, 10, 20, 0) 72%
      );
  }

  .page-intro > .container {
    padding-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-intro::before {
    animation: none;
    transform: scale(1.025);
    will-change: auto;
  }
}