.app-teaser {
  --teaser-nav-height: 88px;
  min-height: 100svh;
  background: #000;
  color: #fff;
}
.app-teaser .header { color: var(--ink); }
.app-teaser .desktop-nav a[aria-current="page"]:after { right: 0; }
.app-teaser-stage {
  min-height: calc(100svh - var(--teaser-nav-height));
  padding: 24px clamp(12px, 3vw, 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.app-date-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.app-scene {
  position: relative;
  isolation: isolate;
  width: min(100%, 1440px, calc((100svh - var(--teaser-nav-height) - 122px) * 16 / 9));
  min-width: min(100%, 680px);
  aspect-ratio: 16 / 9;
}
.app-scene-canvas, .app-scene-poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.app-scene-canvas { opacity: 0; transition: opacity .45s ease; }
.app-scene-poster { pointer-events: none; transition: opacity .45s ease; }
.app-scene[data-ready="true"] .app-scene-canvas { opacity: 1; }
.app-scene[data-ready="true"] .app-scene-poster { opacity: 0; }
.app-teaser-motion {
  display: flex;
  align-items: center;
  width: min(66%, 580px);
  min-height: 52px;
  padding: 10px 0;
  margin-top: 12px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.app-charge-track {
  position: relative;
  display: block;
  width: 100%;
  height: 28px;
  padding: 4px;
  border: 1px solid #dfff0066;
  background: #171b0a;
  box-shadow: 0 0 26px #dfff0012;
  overflow: hidden;
  transform: skewX(-10deg);
}
.app-charge-fill {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(.02);
  transform-origin: left center;
  background: linear-gradient(0deg, #aabf00, var(--volt) 65%, #f3ff83);
  box-shadow: 0 0 18px #dfff0055;
  animation: app-charge 16s steps(28, end) infinite;
}
.app-charge-segments {
  position: absolute;
  inset: 4px;
  background: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / 28 - 3px), #000c calc(100% / 28 - 3px), #000c calc(100% / 28));
}
.app-teaser-motion:focus-visible { outline: 2px solid var(--volt); outline-offset: 6px; }
.app-teaser-motion:disabled { cursor: default; }
.app-teaser[data-motion="paused"] .app-charge-fill,
.app-teaser[data-visible="false"] .app-charge-fill { animation-play-state: paused; }
@keyframes app-charge {
  0% { transform: scaleX(.02); }
  82%, 100% { transform: scaleX(1); }
}
@media (max-width: 800px) {
  .app-teaser { --teaser-nav-height: 74px; }
  .app-teaser-stage { padding-inline: 8px; }
  .app-teaser-motion { width: 72%; }
}
@media (max-width: 500px) {
  .app-charge-track { height: 22px; padding: 3px; }
  .app-charge-segments { inset: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .app-charge-fill { animation: none; transform: scaleX(.65); }
  .app-scene-canvas, .app-scene-poster { transition: none; }
}