/* Context-aware floating concepts for each English hero area. */

.it-context-hero-host {
  position: relative;
  overflow: hidden;
}

.it-context-hero-values {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  overflow: hidden;
  pointer-events: none;
}

.it-context-hero-values span {
  position: absolute;
  top: var(--y);
  left: var(--x);
  display: block;
  color: var(--c);
  font-size: var(--s);
  font-weight: 760;
  line-height: 1;
  letter-spacing: .11em;
  white-space: nowrap;
  text-transform: uppercase;
  text-shadow: 0 0 22px color-mix(in srgb, var(--c) 28%, transparent);
  opacity: 0;
  animation: itContextHeroFloat var(--t) ease-in-out var(--d) infinite;
  will-change: transform, opacity;
}

.it-context-hero-host > .container {
  position: relative;
  z-index: 3;
}

@media (max-width: 767.98px) {
  .it-context-hero-values span:nth-child(n + 7) {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .it-context-hero-values {
    opacity: .72;
  }
}