/* The artwork changes inside one reserved stage. The hero copy never moves. */
.hero-art-carousel { width: 100%; }
.hero-art-viewport {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: clamp(27rem, 40vw, 35rem);
}
.hero-art-slide {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 650ms ease, visibility 0s linear 650ms;
}
.hero-art-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 650ms ease;
}
.hero-art-slide .signal-frame { width: 100%; height: 100%; display: grid; place-items: center; }
.hero-art-slide .signal-art { width: 100%; height: 100%; overflow: visible; }
.hero-art-slide-face { overflow: hidden; }
.hero-face-look {
  container-type: size;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  transform: translate(var(--face-look-x, 0px), var(--face-look-y, 0px));
  transition: transform 850ms ease-out;
}
.hero-face-portrait {
  position: relative;
  flex: none;
  width: min(80cqh, 100cqw);
  height: auto;
  max-width: 100%;
  aspect-ratio: 2 / 3;
  mask-image: url("assets/hero-face/portrait-cutout.webp"), linear-gradient(#000 72%, transparent 84%);
  mask-size: 100% 100%;
  mask-mode: alpha;
  mask-repeat: no-repeat;
  mask-composite: intersect;
}
.hero-face-portrait img { width: 100%; height: 100%; object-fit: contain; }
.hero-face-current {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}
.hero-face-closed {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  mask-image: radial-gradient(ellipse 10% 4% at 37.7% 39.6%, #000 60%, transparent 100%), radial-gradient(ellipse 10% 4% at 63% 39.6%, #000 60%, transparent 100%);
}
.hero-current-flow { animation: hero-current-down 5.2s linear infinite paused; }
.hero-current-echo { animation-delay: -2.6s; opacity: .6; }
.hero-face-flow { animation: hero-face-down 3.2s linear infinite paused; }
.hero-art-carousel.is-motion-running[data-art-active="face"] .hero-current-flow,
.hero-art-carousel.is-motion-running[data-art-active="face"] .hero-face-flow { animation-play-state: running; }
.hero-art-carousel:not(.is-motion-running) .signal-art *,
.hero-art-carousel[data-art-active="face"] .signal-art * { animation-play-state: paused !important; }
.hero-art-controls {
  display: none;
  position: relative;
  z-index: 3;
  justify-content: center;
  align-items: center;
  gap: .55rem;
  min-height: 2.8rem;
  margin-top: -.35rem;
}
.hero-art-carousel.is-ready .hero-art-controls { display: flex; }
.hero-art-choice, .hero-art-pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.2rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: .73rem;
  font-weight: 700;
}
.hero-art-choice { min-width: 2.6rem; padding: .35rem .6rem; }
.hero-art-choice.is-active { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.hero-art-choice:hover:not(.is-active), .hero-art-pause:hover { border-color: var(--blue-strong); background: var(--blue-soft); }
.hero-art-pause { min-width: 4.5rem; padding: .35rem .8rem; }
.hero-art-carousel figcaption {
  width: fit-content;
  max-width: 100%;
  margin: .55rem auto 0;
  text-align: center;
}
.hero-art-carousel figcaption [data-art-caption] { min-width: 0; }
.hero-art-carousel figcaption .live-dot {
  animation: hero-caption-beacon 5.4s ease-in-out infinite paused;
}
.hero-art-carousel.is-motion-running figcaption .live-dot { animation-play-state: running; }
@keyframes hero-caption-beacon {
  0%, 6%, 25%, 100% { background-color: var(--blue-strong); box-shadow: 0 0 0 .25rem var(--blue-soft); }
  13% { background-color: rgb(6 182 238 / 0%); box-shadow: 0 0 0 .3rem rgb(82 217 255 / 45%), 0 0 .75rem .2rem rgb(0 187 240 / 55%); }
}
@keyframes hero-current-down { from { transform: translateY(0); } to { transform: translateY(1920px); } }
@keyframes hero-face-down { from { transform: translateY(0); } to { transform: translateY(810px); } }
@media (max-width: 820px) {
  .hero-art-viewport { height: clamp(21rem, 98vw, 31rem); }
}
@media (max-width: 580px) {
  .hero-art-viewport { height: clamp(19rem, 102vw, 26rem); }
  .hero-art-carousel figcaption { margin-top: .35rem; }
  .hero-art-carousel figcaption [data-art-caption] { display: grid; place-items: center; min-height: 3.1em; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-art-slide { transition: none; }
  .hero-face-look { transition: none; transform: none; }
  .hero-current-flow, .hero-face-flow, .hero-art-carousel .signal-art *, .hero-art-carousel figcaption .live-dot { animation: none !important; }
  .hero-art-pause { display: none; }
}