/* Section "hero": date and venue lines, the giant name, the key visual with parallax layers and
   sparks. */

.hero {
  position: relative; overflow: clip; container-type: inline-size;
  display: flex; flex-direction: column; align-items: center;
  padding-top: calc(var(--nav-h) + var(--space-2xl));
  background: radial-gradient(120% 70% at 50% 30%, var(--color-paper-3), var(--color-paper) 70%);
}
.hero__type { position: relative; z-index: var(--z-base); width: 100%; text-align: center; padding-inline: var(--gutter); }
.hero__date {
  margin: 0 auto var(--space-sm); color: var(--color-ink);
  font-weight: 800; font-stretch: var(--wdth-wide); font-size: var(--type-title); line-height: var(--leading-tight);
}
.hero__kicker { color: var(--color-ochre); }
/* the venue sits between the date and the name, one step quieter than the date */
.hero__venue {
  margin: calc(-1 * var(--space-2xs)) auto var(--space-sm); color: var(--color-ink-2);
  font-weight: 600; font-stretch: var(--wdth-wide); font-size: var(--type-body); line-height: var(--leading-tight);
  /* the giant name's line boxes overlap this line; lift it so a link in it stays clickable */
  position: relative; z-index: var(--z-base);
}
/* the only text set in capitals */
.hero__title { max-width: none; font-size: var(--type-display); line-height: 1; text-transform: uppercase; color: var(--color-ink); }
.hero__line { display: block; white-space: nowrap; }
/* Anton's tall caps leave a gap between lines; pull them together */
.hero__line + .hero__line { margin-top: -0.14em; }
.hero__line > span { display: block; }

.hero__art {
  /* edge to edge: the art is sized by the screen's height, wider screens show more of the playfield */
  --art-h: max(160svh, 54vw);
  position: relative; z-index: 2; width: 100%; height: var(--art-h);
  /* the bumper rises in front of the lower part of the name */
  margin-top: calc(-0.13 * var(--art-h) - var(--type-display) * 0.3);
  pointer-events: none;
}
.kv--hero { width: 100%; height: 100%; }

.hero .sparks--back { z-index: 0; }
.hero .sparks--front { z-index: 3; }

@media (max-width: 48rem) {
  .hero { padding-top: calc(var(--nav-h) + var(--space-3xl)); }
  .hero__art { order: 2; --art-h: 180vw; margin-top: calc(-0.13 * var(--art-h) + var(--space-md)); }
}

/* intro: art rises, date, venue and name follow.
   The date and venue lines only move and never start invisible, so search engines' "Largest Contentful
   Paint" has something to measure early; the name fades in as in the design. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__art .kv--hero { animation: hero-art-in 1200ms var(--ease-out) both; }
  .js .hero__date, .js .hero__venue { animation: hero-rise 700ms var(--ease-out) 150ms both; }
  .js .hero__line > span { animation: hero-rise-line 900ms var(--ease-out) 300ms both; }
  .js .hero__line + .hero__line > span { animation-delay: 420ms; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .sparks--front { display: none; }
}

/* parallax driven by the scroll position itself (hero-parallax.js adds the class where the
   browser supports it and sets --hero-h and each layer's --parallax-k): over the first
   --hero-h of scrolling, a layer moves down by k times that distance, so it seems to move
   slower than the page. The browser runs it in step with scrolling, also on iPhones. */
@media (prefers-reduced-motion: no-preference) {
  .hero--css-parallax [data-speed] {
    will-change: transform;
    animation: hero-parallax linear both;
    animation-timeline: scroll(root block);
    animation-range: 0px var(--hero-h, 100vh);
  }
}
@keyframes hero-parallax { to { transform: translate3d(0, calc(var(--parallax-k) * var(--hero-h, 100vh)), 0); } }
@keyframes hero-art-in { from { opacity: 0; transform: translateY(12%); } }
@keyframes hero-rise { from { transform: translateY(16px); } }
@keyframes hero-rise-line { from { opacity: 0; transform: translateY(0.3em); } }