/* styles/sections/demo-modal.css
 * The product demo video dialog js/main.js builds for `.js-open-demo-modal` triggers on the
 * landing pages (moved from css/components.css onto tokens). The close control is the
 * secondary button; the backdrop dims with the overlay elevation's ink. */
@layer sections {
  .demo-video-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-16);
  }

  .demo-video-modal[hidden] {
    display: none;
  }

  /* js/main.js sets this while the dialog is open: the page behind it does not scroll. */
  body.demo-modal-open {
    overflow: hidden;
  }

  .demo-video-modal__backdrop {
    position: absolute;
    inset: 0;
    background: var(--ink-60);
    cursor: pointer;
  }

  .demo-video-modal__panel {
    position: relative;
    z-index: 1;
    width: min(960px, 100%);
    padding: var(--space-16);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--elevation-overlay);
  }

  .demo-video-modal__close {
    position: absolute;
    top: var(--space-8);
    right: var(--space-8);
    z-index: 2;
  }

  .demo-video-modal__frame {
    position: relative;
    width: 100%;
    margin-top: var(--space-48);
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--shot-black);
    aspect-ratio: 16 / 9;
  }

  .demo-video-modal__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
}