#fxCanvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 2;
}

.section-cinematic,
.content-section {
  position: relative;
  overflow: hidden;
}

.section-cinematic::before,
.content-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.7;
}

.section-cinematic::before {
  background:
    radial-gradient(circle at 74% 15%, rgba(255, 248, 230, 0.22), transparent 16%),
    linear-gradient(90deg, rgba(7, 10, 18, 0.48), rgba(7, 10, 18, 0.1) 46%, rgba(15, 10, 7, 0.2)),
    linear-gradient(180deg, rgba(15, 10, 7, 0.06), rgba(15, 10, 7, 0.66));
}

.content-section--gallery::before,
.content-section--locations::before,
.content-section--sponsors::before {
  background:
    radial-gradient(circle at 8% 40%, rgba(216, 185, 130, 0.09), transparent 16%),
    radial-gradient(circle at 92% 72%, rgba(184, 137, 59, 0.08), transparent 18%);
}

.content-section--story::before,
.content-section--vision::before {
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 248, 230, 0.16), transparent 18%),
    radial-gradient(circle at 12% 78%, rgba(216, 185, 130, 0.08), transparent 18%);
}

.link-light {
  color: var(--sp-cream);
  border-color: rgba(243, 230, 207, 0.16);
}

.link-light::after,
.link-gold::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 8px;
  height: 1px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--sp-transition), background var(--sp-transition);
}

.link-light::after {
  background: var(--sp-gold);
}

.link-light:hover,
.link-light:focus-visible,
.link-light.active {
  color: var(--sp-gold);
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  text-shadow: 0 0 14px rgba(184, 137, 59, 0.18);
}

.link-gold {
  color: var(--sp-gold);
  border-color: rgba(184, 137, 59, 0.42);
  background: rgba(184, 137, 59, 0.08);
}

.link-gold::after {
  background: var(--sp-cream);
}

.link-gold:hover,
.link-gold:focus-visible,
.link-gold.active {
  color: var(--sp-cream);
  border-color: rgba(243, 230, 207, 0.58);
  background: rgba(243, 230, 207, 0.07);
  box-shadow:
    0 0 0 1px rgba(243, 230, 207, 0.12),
    0 0 24px rgba(243, 230, 207, 0.12);
}

.link-light:hover::after,
.link-light:focus-visible::after,
.link-light.active::after,
.link-gold:hover::after,
.link-gold:focus-visible::after,
.link-gold.active::after {
  transform: scaleX(1);
}

.brand::after,
.brand:hover::after,
.brand:focus-visible::after,
.brand.active::after,
.nav-link::after,
.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link.active::after {
  content: none;
  transform: none;
}

.brand.link-light:hover,
.brand.link-light:focus-visible {
  color: var(--sp-cream);
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.nav-link.link-light:hover,
.nav-link.link-light:focus-visible,
.nav-link.link-light.active {
  color: var(--sp-gold);
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  text-shadow: 0 0 14px rgba(184, 137, 59, 0.18);
}

.cta:hover,
.cta:focus-visible,
.nav-link:hover,
.nav-link:focus-visible,
.character-card:hover,
.location-card:hover,
.sponsor-panel:hover {
  outline: none;
}

.site-header a,
.site-header button,
.mobile-nav-panel a,
.mobile-nav-panel button {
  text-decoration: none;
  border-bottom: 0;
}

.site-header a::after,
.site-header button::after,
.mobile-nav-panel a::after,
.mobile-nav-panel button::after {
  content: none;
  display: none;
}

.site-header a:focus-visible,
.site-header button:focus-visible,
.mobile-nav-panel a:focus-visible,
.modal__close:focus-visible,
.hero-video-trigger:focus-visible,
.hero-cta-card:focus-visible,
.social-link:focus-visible {
  outline: 2px solid rgba(216, 185, 130, 0.86);
  outline-offset: 3px;
}

@media (max-width: 900px), (pointer: coarse) {
  #fxCanvas {
    display: none;
  }
}