.photo-caption,
.home-intro .page-kicker, .home-intro h1, .home-intro .page-description,
.faq-hero .page-kicker, .faq-hero h1, .faq-hero .page-description,
.disclaimer-hero .page-kicker, .disclaimer-hero h1, .disclaimer-hero .page-description,
.profile-banner .fo-driver-name, .profile-banner .fo-driver-sub,
.auth-context h2, .auth-context > p.muted, .auth-feature-list li {
  text-shadow: 0 1px 4px var(--color-photo-shadow);
}

/* Keep art and content on nonnegative layers so the body background cannot hide the art. */
.page-art {
  position: absolute;
  top: 0;
  bottom: 0;
  height: auto;
  right: calc((100% - 100vw) / 2);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  --fade-h: 30%;
  --fade-v: 8%;
}
.page-art-content { position: relative; z-index: 1; }
.page-art img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  mask-image:
    linear-gradient(to right, transparent 0%, black var(--fade-h), black 100%),
    linear-gradient(to bottom, transparent 0%, black var(--fade-v), black calc(100% - var(--fade-v)), transparent 100%);
  mask-composite: intersect;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, black var(--fade-h), black 100%),
    linear-gradient(to bottom, transparent 0%, black var(--fade-v), black calc(100% - var(--fade-v)), transparent 100%);
  -webkit-mask-composite: source-in, source-in;
}

/* Landscape art needs an explicit width to avoid growing with the page height. */
.page-art-tracks { width: min(40vw, 620px); }
.page-art-tracks img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }

.page-art-tracks-left { right: auto; left: calc((100% - 100vw) / 2); }
.page-art-tracks-left img {
  mask-image: linear-gradient(to left, transparent 0%, black 45%, black 100%);
  -webkit-mask-image: linear-gradient(to left, transparent 0%, black 45%, black 100%);
}

.page-art-races { width: clamp(540px, 51vw, 930px); }
.page-art-races img { width: 100%; height: 100%; object-fit: cover; object-position: center; }


/* scaleX(-1) also mirrors the mask; reverse its horizontal direction. */
.page-art-tournaments img {
  transform: scaleX(-1);
  mask-image:
    linear-gradient(to left, transparent 0%, black var(--fade-h), black 100%),
    linear-gradient(to bottom, transparent 0%, black var(--fade-v), black calc(100% - var(--fade-v)), transparent 100%);
  mask-composite: intersect;
  -webkit-mask-image:
    linear-gradient(to left, transparent 0%, black var(--fade-h), black 100%),
    linear-gradient(to bottom, transparent 0%, black var(--fade-v), black calc(100% - var(--fade-v)), transparent 100%);
  -webkit-mask-composite: source-in, source-in;
}

.page-corner-decor {
  position: absolute;
  left: calc((100% - 100vw) / 2 + 12px);
  bottom: 40px;
  z-index: 0;
  pointer-events: none;
  width: clamp(110px, 10vw, 170px);
  opacity: .85;
}
.page-corner-decor img { display: block; width: 100%; height: auto; }
.page-corner-decor--wide { width: clamp(220px, 20vw, 340px); }

.tire-track {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 2.4s cubic-bezier(.22, .7, .2, 1);
  pointer-events: none;
}
.tire-track.is-revealed { clip-path: inset(0 0 0% 0); }
.tire-track img { display: none; width: 100%; height: auto; }
.tire-track img.dark { display: block; }
[data-theme="light"] .tire-track img.dark { display: none; }
[data-theme="light"] .tire-track img.light { display: block; }

/* Keep tire tracks outside .home-intro so its clip-path does not crop them. */
.home-tire-track-host { position: relative; }
.home-tire-track {
  position: absolute;
  top: 50%;
  left: calc((100% - 100vw) / 2 + ((100vw - var(--content-max)) / 2 + var(--container-pad)) / 2);
  transform: translate(-50%, -50%);
  z-index: 0;
  width: clamp(80px, 7vw, 130px);
}

.tire-track-rail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc((100% - 100vw) / 2 + ((100vw - var(--content-max)) / 2 + var(--container-pad)) / 2);
  transform: translateX(-50%);
  z-index: 0;
  width: clamp(80px, 7vw, 130px);
  overflow: hidden;
}
.tire-track-tile { position: absolute; left: 0; width: 100%; }