/* 
  Hero Field Typography & Z-index Stacking 
*/
.hero {
  position: relative;
  overflow: hidden;
}

.hero__headline-wrap {
  position: relative;
  z-index: 10;
}

/* 
  Semantic H1 is for SEO and screen readers.
  Visually hidden but still takes up space in flow.
*/
.hero__headline--semantic {
  color: transparent !important;
  opacity: 0 !important;
  user-select: none;
  pointer-events: none;
}

/* 
  Visual layer stays behind the sphere. 
  Sphere canvas is usually z-index 5.
*/
.hero__core-placeholder {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 5; 
  pointer-events: none; 
}

.hero__headline--visual {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 2; /* Behind the sphere (5) */
}

/* 
  Front-Slice layer stays ON TOP of the sphere. 
  It will be clipped in JS to only show text where the sphere is, 
  creating a 3D intersection illusion.
*/
.hero__headline--front-slice {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 15; /* In front of the sphere (5) */
  /* Fallback clip-path if JS fails, hidden */
  clip-path: circle(0px at 50% 50%);
  will-change: clip-path;
  color: var(--color-base, #1E1C1A); /* Inherit color to overlay correctly */
}

/* Splitting Utilities */
.hero__headline {
  width: 100% !important;
  max-width: none !important;
}

.hero__headline-line {
  display: block;
  white-space: nowrap !important;
}
.hero__field-char {
  display: inline-block;
  will-change: transform, opacity, letter-spacing;
  transform-origin: center center;
}

/* Metadata & Rules Micro-animations */
.meta-strip__item, .hero__rule {
  will-change: transform, opacity;
}