/* ── Area ─── */

.area {
  width: 100%;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.area--contrast:nth-child(odd of .area--contrast) {
  background: var(--color-contrast, #f9fafb);
}

.area--tight {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.area--white {
  background: #ffffff;
}

/* ── Area Inverse ─── */

.area--inverse .heading--area,
.area--inverse h1,
.area--inverse h2,
.area--inverse h3,
.area--inverse h4,
.area--inverse h5,
.area--inverse h6 {
  color: var(--color-primary-text, #ffffff);
}

.area--inverse .heading--brand {
  background: none;
  -webkit-text-fill-color: var(--color-primary-text, #ffffff);
  color: var(--color-primary-text, #ffffff);
}

.area--inverse .heading--brand::after {
  background: var(--color-primary-text, #ffffff);
}

.area--inverse p,
.area--inverse li {
  color: var(--color-primary-text, #ffffff);
}

.area--inverse a {
  color: var(--color-primary-text, #ffffff);
  opacity: 1;
}

.area--inverse a:hover {
  opacity: 0.85;
}

.area--inverse .u-text-muted {
  color: color-mix(in srgb, var(--color-primary-text, #ffffff) 70%, transparent);
}

/* ── Area Parallax (3D Perspective) ─── */

/* Make body the scroll container with 3D perspective — the orangeable pattern */
html:has(.area--para) {
  overflow: hidden;
}

body:has(.area--para) {
  perspective: 1px;
  transform-style: preserve-3d;
  overflow-x: hidden;
  overflow-y: auto;
  height: 100vh;
}

/* Keep nav pinned when body is the scroll container */
body:has(.area--para) .nav--horizontal {
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Pass 3D context through intermediate elements to .area--para */
body:has(.area--para) .layout {
  transform-style: preserve-3d;
}

.area--para {
  position: relative;
  transform-style: preserve-3d;
  min-height: 50vh;
  padding-top: 2rem;
  padding-bottom: 6rem;
}

.area--para ~ .area--para,
.area--para + .area--para {
  margin-top: 0;
}

/* Combined overlay + background image on one element so they share the same 3D transform */
.area--para::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9)),
    var(--para-bg, none);
  background-size: auto, cover;
  background-position: 0 0, center;
  background-repeat: repeat, no-repeat;
  z-index: -1;
  transform: translateZ(-1px) scale(2);
  pointer-events: none;
}

.area--para .container {
  position: relative;
  z-index: 1;
}

/* Subsequent sections sit at z=0 plane and cover the parallax background */
body:has(.area--para) .area--para ~ .area,
body:has(.area--para) .area--para ~ footer {
  position: relative;
  z-index: 1;
}

.area--para .share__button svg {
  fill: #ffffff;
  stroke: #ffffff;
}

.area--para .share__button:hover {
  background: rgba(255, 255, 255, 0.15);
}