/*
 * About hero — a quiet, curved light treatment for the editorial copy.
 * The glow deliberately uses the existing brand tokens so it follows the
 * active theme without changing the hero image or the Home Hero treatment.
 */
.about-page.page-hero {
  --about-hero-glow: var(--copper);
  --about-hero-glow-soft: var(--olive);
  --about-hero-ring-opacity: .42;
  --about-hero-halo-opacity: .15;
}

@supports (color: color-mix(in srgb, red, red)) {
  .about-page.page-hero {
    --about-hero-glow: color-mix(in srgb, var(--copper) 72%, var(--olive));
    --about-hero-glow-soft: color-mix(in srgb, var(--olive) 68%, var(--copper));
  }
}

/*
 * A tall, partially off-canvas ellipse creates a C/parenthesis-like contour.
 * Keeping the hard edge as a border (rather than a rectangular shadow) makes
 * the light feel anchored to the hero and keeps it clear of the page copy.
 */
.about-page.page-hero::before,
.about-page.page-hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
  left: clamp(-19rem, -25vw, -9rem);
  top: 50%;
  width: clamp(25rem, 52vw, 50rem);
  height: min(132%, 52rem);
  border: 2px solid var(--about-hero-glow);
  border-left-color: transparent;
  border-radius: 50%;
  transform: translate3d(0, -50%, 0) rotate(-7deg);
  opacity: var(--about-hero-ring-opacity);
  will-change: transform, opacity;
}

.about-page.page-hero::before {
  filter: blur(1px);
  animation: about-hero-glow-in .9s cubic-bezier(.22, .61, .36, 1) both;
}

.about-page.page-hero::after {
  width: clamp(23rem, 47vw, 45rem);
  height: min(121%, 48rem);
  left: clamp(-17rem, -22vw, -8rem);
  border: 1px solid var(--about-hero-glow-soft);
  border-left-color: transparent;
  opacity: var(--about-hero-halo-opacity);
  transform: translate3d(0, -50%, 0) rotate(-7deg) scale(.96);
  filter: blur(16px);
  animation: about-hero-glow-in-soft 1.15s cubic-bezier(.22, .61, .36, 1) both;
}

.about-page.page-hero .shell {
  z-index: 2;
}

@keyframes about-hero-glow-in {
  from {
    opacity: 0;
    transform: translate3d(-10px, -50%, 0) rotate(-7deg);
  }

  to {
    opacity: var(--about-hero-ring-opacity);
    transform: translate3d(0, -50%, 0) rotate(-7deg);
  }
}

@keyframes about-hero-glow-in-soft {
  from {
    opacity: 0;
    transform: translate3d(-10px, -50%, 0) rotate(-7deg) scale(.96);
  }

  to {
    opacity: var(--about-hero-halo-opacity);
    transform: translate3d(0, -50%, 0) rotate(-7deg) scale(.96);
  }
}

@media (max-width: 900px) {
  .about-page.page-hero::before,
  .about-page.page-hero::after {
    left: clamp(-17rem, -34vw, -8rem);
    width: clamp(23rem, 76vw, 38rem);
    height: min(128%, 42rem);
  }

  .about-page.page-hero::after {
    left: clamp(-15rem, -30vw, -7rem);
    width: clamp(21rem, 68vw, 34rem);
  }
}

@media (max-width: 560px) {
  .about-page.page-hero::before,
  .about-page.page-hero::after {
    --about-hero-ring-opacity: .27;
    --about-hero-halo-opacity: .1;
    left: -12rem;
    width: 27rem;
    height: 116%;
  }

  .about-page.page-hero::after {
    left: -10.5rem;
    width: 24rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-page.page-hero::before,
  .about-page.page-hero::after {
    animation: none;
    will-change: auto;
  }
}