/* Shared, project-configurable case-study hero color system. */
.case-study-hero-gradient {
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    linear-gradient(
      var(--case-hero-text-angle, 90deg),
      var(--case-hero-text-start, rgba(4,4,4,.94)) 0%,
      var(--case-hero-text-mid, rgba(4,4,4,.76)) var(--case-hero-text-stop, 38%),
      var(--case-hero-text-soft, rgba(4,4,4,.28)) var(--case-hero-fade-start, 55%),
      transparent var(--case-hero-fade-end, 73%)
    ),
    radial-gradient(
      ellipse 72% 118% at 16% 50%,
      var(--case-hero-accent-inner, rgba(0,0,0,.1)) 0%,
      var(--case-hero-accent-outer, rgba(0,0,0,.04)) 43%,
      transparent 76%
    ),
    linear-gradient(0deg, var(--case-hero-bottom, rgba(0,0,0,.52)) 0%, transparent 28%);
}

/* Shared private-review marker. It documents the editorial freeze without
   changing the approved case-study composition or interaction architecture. */
.case-study-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0 0 .85rem;
  padding: .46rem .72rem;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 999px;
  color: rgba(255,255,255,.86);
  background: rgba(0,0,0,.18);
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

/* Power in Motion — deep plum → rich magenta → campaign pink. */
.power-page {
  --case-hero-text-start: rgba(20, 3, 14, .94);
  --case-hero-text-mid: rgba(31, 4, 21, .82);
  --case-hero-text-soft: rgba(56, 5, 35, .3);
  --case-hero-text-stop: 39%;
  --case-hero-fade-start: 54%;
  --case-hero-fade-end: 71%;
  --case-hero-accent-inner: rgba(162, 14, 91, .16);
  --case-hero-accent-outer: rgba(225, 45, 137, .055);
  --case-hero-bottom: rgba(23, 2, 15, .48);
  --case-hero-mobile-soft: rgba(42, 4, 27, .42);
  --case-hero-mobile-mid: rgba(45, 5, 29, .72);
  --case-hero-mobile-bottom: rgba(18, 2, 12, .97);
}

/* The Collection — midnight navy → automotive blue. */
.collection-page {
  --case-hero-text-start: rgba(3, 10, 24, .95);
  --case-hero-text-mid: rgba(5, 22, 48, .82);
  --case-hero-text-soft: rgba(12, 43, 80, .27);
  --case-hero-text-stop: 39%;
  --case-hero-fade-start: 54%;
  --case-hero-fade-end: 72%;
  --case-hero-accent-inner: rgba(20, 64, 114, .11);
  --case-hero-accent-outer: rgba(72, 117, 168, .035);
  --case-hero-bottom: rgba(3, 10, 23, .46);
  --case-hero-mobile-mid: rgba(7, 28, 58, .72);
  --case-hero-mobile-bottom: rgba(3, 11, 27, .98);
}

/* Bodyby.AI — charcoal green → electric lime. */
.bodyby-page {
  --case-hero-text-start: rgba(3, 10, 5, .96);
  --case-hero-text-mid: rgba(9, 25, 9, .84);
  --case-hero-text-soft: rgba(31, 62, 17, .25);
  --case-hero-text-stop: 40%;
  --case-hero-fade-start: 55%;
  --case-hero-fade-end: 73%;
  --case-hero-accent-inner: rgba(77, 128, 24, .08);
  --case-hero-accent-outer: rgba(171, 226, 28, .025);
  --case-hero-bottom: rgba(3, 10, 5, .5);
  --case-hero-mobile-mid: rgba(11, 31, 10, .72);
  --case-hero-mobile-bottom: rgba(3, 10, 5, .98);
}

/* FUTR PROOF — deep ocean → restrained teal. The accent remains local to copy. */
.futr-page {
  --case-hero-text-start: rgba(2, 16, 24, .96);
  --case-hero-text-mid: rgba(3, 32, 43, .84);
  --case-hero-text-soft: rgba(5, 67, 78, .27);
  --case-hero-text-stop: 40%;
  --case-hero-fade-start: 55%;
  --case-hero-fade-end: 73%;
  --case-hero-accent-inner: rgba(11, 113, 122, .11);
  --case-hero-accent-outer: rgba(53, 166, 163, .035);
  --case-hero-bottom: rgba(2, 18, 27, .5);
  --case-hero-mobile-soft: rgba(4, 56, 66, .35);
  --case-hero-mobile-mid: rgba(3, 35, 45, .78);
  --case-hero-mobile-bottom: rgba(2, 15, 23, .98);
}

/* Reserved palette for a future approved Concrete Beach case study. */
[data-case-gradient="concrete-beach"] {
  --case-hero-text-start: rgba(24, 17, 9, .95);
  --case-hero-text-mid: rgba(48, 31, 13, .82);
  --case-hero-text-soft: rgba(101, 63, 20, .25);
  --case-hero-accent-inner: rgba(154, 99, 32, .09);
  --case-hero-accent-outer: rgba(210, 155, 74, .03);
  --case-hero-bottom: rgba(24, 16, 8, .48);
}

@media (max-width: 760px) {
  .case-study-status { max-width: 280px; font-size: .51rem; letter-spacing: .09em; }
  .case-study-hero-gradient {
    background:
      linear-gradient(
        180deg,
        transparent 0%,
        transparent 25%,
        var(--case-hero-mobile-soft, var(--case-hero-text-soft, rgba(0,0,0,.22))) 42%,
        var(--case-hero-mobile-mid, rgba(0,0,0,.7)) 67%,
        var(--case-hero-mobile-bottom, rgba(0,0,0,.98)) 82%,
        var(--case-hero-mobile-bottom, rgba(0,0,0,.98)) 100%
      ),
      radial-gradient(
        ellipse 110% 72% at 18% 72%,
        var(--case-hero-accent-inner, rgba(0,0,0,.08)) 0%,
        var(--case-hero-accent-outer, rgba(0,0,0,.03)) 42%,
        transparent 72%
      );
  }
}

@media (prefers-contrast: more) {
  .case-study-hero-gradient::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.28), transparent 72%);
  }
}