.hero-demo {
  width: min(100%, 320px);
  justify-self: center;
}

.hero-demo .app-shot {
  position: relative;
  width: 100%;
  isolation: isolate;
}

.app-shot video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 400ms ease;
}

.app-shot.is-ready video { opacity: 1; }

.demo-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 8px;
  min-height: 44px;
  margin-top: 12px;
  color: var(--tm-copy);
  font-size: 12px;
}

.demo-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--tm-deep);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.demo-toggle[hidden], .demo-toggle .icon-pause { display: none; }
.demo-toggle.is-playing .icon-pause { display: block; }
.demo-toggle.is-playing .icon-play { display: none; }
.demo-toggle:hover { background: var(--tm-surface); }
.demo-toggle:focus-visible { outline: 3px solid var(--tm-primary); outline-offset: 2px; }

@media (min-width: 781px) {
  .hero-demo { justify-self: end; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > *, .hero-demo {
    animation: arrive 850ms cubic-bezier(.22, 1, .36, 1) both;
  }
  .hero-copy > :nth-child(2) { animation-delay: 80ms; }
  .hero-copy > :nth-child(3) { animation-delay: 160ms; }
  .hero-copy > :nth-child(4) { animation-delay: 240ms; }
  .hero-copy > :nth-child(5) { animation-delay: 320ms; }
  .hero-demo { animation-delay: 180ms; }

  .reveal-pending {
    opacity: 0;
    transform: translateY(16px);
  }
  .reveal-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 650ms ease, transform 750ms cubic-bezier(.22, 1, .36, 1);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .list > li.reveal-pending { transform: translateX(10px); }
  .list > li.reveal-visible { transform: translateX(0); }
  .early h2.reveal-pending { transform: translateY(12px) scale(.985); }
  .footer-row > .reveal-pending { transform: translateY(8px); }

  .section .overline::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 2px;
    margin-right: 8px;
    vertical-align: middle;
    background: var(--tm-primary);
    transform-origin: left;
    transition: transform 600ms cubic-bezier(.22, 1, .36, 1);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .section .overline.reveal-pending::before { transform: scaleX(0); }
  .section .overline.reveal-visible::before { transform: scaleX(1); }

  .button, .demo-toggle {
    transition: transform 200ms ease, background-color 200ms ease, color 200ms ease;
  }
  .button:hover { transform: translateY(-3px); }
  .button:active { transform: translateY(0) scale(.98); }
  .button.reveal-visible {
    transition: opacity 650ms ease, transform 750ms cubic-bezier(.22, 1, .36, 1), background-color 200ms ease, color 200ms ease;
    transition-delay: var(--reveal-delay, 0ms);
  }
  .feature {
    transition: opacity 650ms ease, transform 750ms cubic-bezier(.22, 1, .36, 1), border-color 250ms ease, background-color 250ms ease;
  }
  .feature-symbol { transition: transform 350ms cubic-bezier(.22, 1, .36, 1); }
  .feature.reveal-visible .feature-symbol {
    animation: symbol-settle 650ms cubic-bezier(.22, 1, .36, 1);
    animation-delay: var(--reveal-delay, 0ms);
  }
  .feature:hover { border-color: var(--tm-primary); }
  .feature:hover .feature-symbol { transform: translateY(-4px) rotate(-8deg); }

  .section a:not(.button), .footer-links a {
    text-underline-offset: 3px;
    transition: color 200ms ease, text-underline-offset 200ms ease;
  }
  .section a:not(.button):hover, .footer-links a:hover { text-underline-offset: 5px; }

  @media (hover: hover) and (pointer: fine) {
    .feature.reveal-visible:hover { transform: translateY(-3px); }
    .plain-card { transition: border-color 250ms ease; }
    .plain-card:hover { border-color: var(--tm-muted); }
  }

  @keyframes symbol-settle {
    from { transform: translateY(4px) scale(.94); }
    to { transform: translateY(0) scale(1); }
  }

  .reveal-pending:focus-within, .reveal-visible:focus-within {
    opacity: 1;
    transform: none;
    transition: none;
  }

  @keyframes arrive {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-shot video { transition: none; }
  .reveal-pending { opacity: 1; transform: none; }
}