/* Homepage-only decoration. Do not change the hero grid, copy or spacing. */
.hero-light-ribbons {
  position: absolute;
  inset: 0 -2% 0 39%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  opacity: .88;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 36%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 36%, #000 94%, transparent);
}

.hero-light-ribbons-still,
.hero-light-ribbons-canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
}

.hero-light-ribbons-canvas { visibility: hidden; }
.hero-light-ribbons.is-ready .hero-light-ribbons-canvas { visibility: visible; }
.hero-light-ribbons.is-ready .hero-light-ribbons-still { visibility: hidden; }

.hero-light-ribbons-toggle {
  position: absolute;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: 1rem;
  z-index: 2;
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  place-items: center;
  color: #dceaf2;
  background: rgba(8, 34, 56, .48);
  border: 1px solid rgba(117, 213, 229, .34);
  border-radius: 50%;
  cursor: pointer;
  opacity: .68;
  transition: opacity .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.hero-light-ribbons-toggle:hover,
.hero-light-ribbons-toggle:focus-visible {
  color: #ffffff;
  background: rgba(8, 34, 56, .78);
  border-color: rgba(117, 213, 229, .72);
  opacity: 1;
}

.hero-light-ribbons-toggle:hover {
  transform: translateY(-1px);
}

.hero-light-ribbons-toggle:focus-visible {
  outline: 2px solid var(--blue-700);
  outline-offset: 3px;
}

.hero-light-ribbons-toggle::before,
.hero-light-ribbons-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  width: .18rem;
  height: .72rem;
  background: currentColor;
  border-radius: .08rem;
  transform: translateY(-50%);
}

.hero-light-ribbons-toggle::before {
  left: .91rem;
}

.hero-light-ribbons-toggle::after {
  right: .91rem;
}

.hero-light-ribbons-toggle[aria-pressed="true"]::before {
  left: 1rem;
  width: 0;
  height: 0;
  background: transparent;
  border-top: .39rem solid transparent;
  border-bottom: .39rem solid transparent;
  border-left: .62rem solid currentColor;
  border-radius: 0;
}

.hero-light-ribbons-toggle[aria-pressed="true"]::after {
  display: none;
}

.hero-light-ribbons-toggle[hidden] {
  display: none !important;
}

@media (min-width: 64rem) and (max-width: 79.99rem) {
  .hero-light-ribbons { opacity: .6; }
}

/* At small widths there is no spare right-hand column. Do not load WebGL. */
@media (max-width: 63.99rem), (forced-colors: active) {
  .hero-light-ribbons,
  .hero-light-ribbons-toggle { display: none; }
}

/* CSS also protects the still state while a live preference change is handled. */
@media (prefers-reduced-motion: reduce) {
  .hero-light-ribbons .hero-light-ribbons-canvas { visibility: hidden; }
  .hero-light-ribbons .hero-light-ribbons-still { visibility: visible; }
  .hero-light-ribbons-toggle { display: none; }
}

@media print {
  .hero-light-ribbons,
  .hero-light-ribbons-toggle { display: none; }
}