@layer components {
  /* The product itself, running: the real conversation in a phone, Type or Talk, with a tour
     that rings one part at a time and says what it does. On a phone the words sit under the
     phone; on a wide screen they open beside it, on a line to the part they name. */
  .site-demo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
    inline-size: var(--size-fill);
  }

  .site-demo__modes .choice__option {
    min-inline-size: calc(2 * var(--tap-min));
    font: var(--type-button);
  }

  .site-demo__stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
    inline-size: var(--size-fill);
  }

  /* The Explorer's own phone, Safari and all, at its true size and scaled as one, so the app
     inside lays out exactly as on a phone. The box around it holds the scaled size. */
  .site-demo__fit {
    inline-size: calc(var(--site-demo-frame-inline-size) * var(--site-demo-scale));
    block-size: calc(var(--site-demo-frame-block-size) * var(--site-demo-scale));
  }

  .site-demo__device {
    --dsx-zoom: var(--site-demo-scale);
    --dsx-screen-width: var(--site-demo-screen-inline-size);
    --dsx-screen-height: var(--site-demo-screen-block-size);
    --dsx-chrome-inset-top: var(--site-demo-chrome-top);
    --dsx-chrome-inset-bottom: var(--site-demo-chrome-bottom);
    --dsx-chrome-inset-left: var(--length-zero);
    --dsx-viewport-width: var(--site-demo-screen-inline-size);
    --dsx-viewport-height: calc(var(--site-demo-screen-block-size) - var(--site-demo-chrome-top) - var(--site-demo-chrome-bottom));
  }

  .site-demo__app {
    opacity: var(--opacity-none);
    pointer-events: none;
    transition: opacity var(--dur-sheet) var(--ease-calm);
  }

  .site-demo__app--current {
    opacity: var(--opacity-full);
  }

  .site-demo__ring {
    position: absolute;
    inset-block-start: calc(var(--ring-y, var(--length-zero)) - var(--site-demo-ring-pad));
    inset-inline-start: calc(var(--ring-x, var(--length-zero)) - var(--site-demo-ring-pad));
    z-index: var(--z-sticky);
    inline-size: calc(var(--ring-w, var(--length-zero)) + 2 * var(--site-demo-ring-pad));
    block-size: calc(var(--ring-h, var(--length-zero)) + 2 * var(--site-demo-ring-pad));
    border-radius: var(--radius-lg);
    box-shadow: var(--space-0) var(--space-0) var(--space-0) var(--border-width-strong) var(--color-accent), var(--space-0) var(--space-0) var(--space-0) var(--site-demo-ring-reach) var(--color-demo-halo);
    pointer-events: none;
    transition: inset var(--dur-sheet) var(--ease-spring-soft), inline-size var(--dur-sheet) var(--ease-spring-soft), block-size var(--dur-sheet) var(--ease-spring-soft);
  }

  .site-demo__callout {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    inline-size: min(var(--size-fill), var(--site-demo-callout-inline-size));
    min-block-size: calc(var(--space-13) + var(--space-5));
    padding: var(--space-6) var(--space-7);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-raised);
    box-shadow: var(--elev-3);
    text-align: center;
  }

  .site-demo__title {
    font: var(--type-heading);
    color: var(--color-ink-display);
  }

  .site-demo__text {
    font: var(--type-body-sm);
    color: var(--color-ink-muted);
    text-wrap: pretty;
  }

  .site-demo__steps {
    display: flex;
    gap: var(--space-3);
    list-style: none;
  }

  .site-demo__step {
    display: flex;
    align-items: center;
    inline-size: var(--site-demo-step-inline-size);
    block-size: var(--space-8);
    padding: var(--space-0);
    border: none;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .site-demo__fill {
    position: relative;
    inline-size: var(--size-fill);
    block-size: var(--site-demo-step-block-size);
    border-radius: var(--radius-pill);
    background-color: var(--color-border-strong);
    overflow: hidden;
  }

  .site-demo__fill::after {
    content: "";
    position: absolute;
    inset: var(--space-0);
    background-color: var(--color-accent);
    transform-origin: left center;
    scale: var(--site-demo-fill-start);
  }

  .site-demo__step--done .site-demo__fill::after,
  .site-demo__step--current .site-demo__fill::after {
    scale: none;
  }

  @media (prefers-reduced-motion: no-preference) {
    .site-demo__step--current .site-demo__fill::after {
      animation: site-demo-fill var(--site-demo-interval) linear forwards;
    }

    .site-demo--held .site-demo__step--current .site-demo__fill::after {
      animation-play-state: paused;
    }

    .site-demo__callout--in {
      animation: site-demo-callout var(--dur-slow) var(--ease-spring-soft);
    }
  }

  @keyframes site-demo-fill {
    from {
      scale: var(--site-demo-fill-start);
    }
  }

  @keyframes site-demo-callout {
    from {
      opacity: var(--opacity-none);
      scale: var(--site-demo-callout-pop);
    }
  }

  /* On a wide screen the words open beside the phone, level with the part they name. */
  @media (width >= 1000px) {
    .site-demo__stage {
      --site-demo-scale: var(--site-demo-scale-max);
    }

    .site-demo__callout {
      position: absolute;
      inset-block-start: var(--callout-y, 50%);
      inset-inline-start: var(--callout-x, var(--length-zero));
      min-block-size: auto;
      text-align: start;
      translate: var(--space-0) -50%;
      transform-origin: right center;
    }

    .site-demo__callout[data-side="right"] {
      transform-origin: left center;
    }

    .site-demo__callout::after {
      content: "";
      position: absolute;
      inset-block-start: 50%;
      inset-inline-start: var(--size-fill);
      inline-size: var(--line-length, var(--length-zero));
      block-size: var(--border-width-strong);
      background-color: var(--color-accent);
    }

    .site-demo__callout[data-side="right"]::after {
      inset-inline: auto var(--size-fill);
    }
  }
}