/* The page sets sphere, text and divider geometry in the same rem composition. */
.team-story .story-halo {
  position: absolute;
  top: var(--story-halo-top, 8.25rem);
  left: 50%;
  z-index: 0;
  width: var(--story-halo-size, 49.5rem);
  max-width: calc(100% - 48px);
  height: auto;
  aspect-ratio: 1;
  transform: translateX(-50%);
  isolation: isolate;
  contain: layout;
  pointer-events: none;
  overflow: visible;
}

.team-story .story-halo::before,
.team-story .story-halo::after {
  content: "";
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  transition: opacity .4s ease;
}

/* Static chromatic band for no-WebGL/reduced capability devices.
   Concentric optical bands keep the same warm/cool profile around the circle. */
.team-story .story-halo::before {
  background:
    radial-gradient(closest-side, transparent 68%, #ffca8033 69.8%, #e99c4c0c 70.7%, transparent 72%),
    radial-gradient(closest-side, transparent 66.5%, #329dff3d 68.8%, #329dff0c 69.8%, transparent 71%),
    radial-gradient(closest-side, transparent 67.5%, #c6d4dc18 69.3%, transparent 71%),
    radial-gradient(closest-side, transparent 60%, #80a9d918 68%, #e3b38616 71%, transparent 81%);
  background-repeat: no-repeat;
}

.team-story .story-halo::after {
  background:
    radial-gradient(circle at 27% 23%, #ccecffb3 0 .65px, transparent 1px),
    radial-gradient(circle at 57% 15%, #ccecff80 0 .5px, transparent .9px),
    radial-gradient(circle at 75% 29%, #dcf5ffb3 0 .65px, transparent 1px),
    radial-gradient(circle at 40% 34%, #ccecff66 0 .5px, transparent .9px),
    radial-gradient(circle at 16% 51%, #ccecff80 0 .5px, transparent .9px),
    radial-gradient(circle at 68% 47%, #ccecffb3 0 .65px, transparent 1px),
    radial-gradient(circle at 32% 60%, #ccecff80 0 .5px, transparent .9px),
    radial-gradient(circle at 81% 64%, #dcf5ffb3 0 .65px, transparent 1px),
    radial-gradient(circle at 53% 72%, #ccecff80 0 .5px, transparent .9px);
}

.team-story .story-halo > .story-halo__rim {
  position: absolute;
  inset: -20%;
  display: block;
  width: 140%;
  height: 140%;
  max-width: none;
  opacity: 0;
  transition: opacity .4s ease;
}

/* Pad the optical layers without changing the sphere or heading geometry.
   Remap the original lower fade into the expanded 140% painting area. */
.team-story .story-halo::before,
.team-story .story-halo::after,
.team-story .story-halo > .story-halo__rim {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 39.286%, #000c 45%, #0005 52.143%, #0001 57.143%, transparent 60.714%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 39.286%, #000c 45%, #0005 52.143%, #0001 57.143%, transparent 60.714%);
}

.team-story .story-halo.is-ready > .story-halo__rim { opacity: 1; }
.team-story .story-halo.is-ready::before,
.team-story .hero.has-home-stars .story-halo::after { opacity: 0; }

/* Homepage field covers the entire first screen, including outside the sphere.
   Its own lower fade blends into the following section without a hard seam. */
.team-story .hero.concept-hero { position: relative; }
.team-story .hero.concept-hero > .story-stars {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%);
}
.team-story .hero.concept-hero #clients { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .team-story .story-halo > canvas,
  .team-story .story-halo::before,
  .team-story .story-halo::after { transition: none; }
}