/* stefanpressconsulting.com - the demo viewer (index.php <dialog id="demo-viewer">, assets/viewer.js) and the board's
   "Watch the demo" button. Loaded after home.css (the tokens). Served as a file: the CSP allows no inline style. */

  /* the button on the board */
  .btn.watch { display: inline-flex; align-items: center; gap: 8px; }
  .btn.watch .play {
    width: 0; height: 0;
    border-style: solid; border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent currentColor;
  }
  .btn.watch .dur { font-size: 12px; font-weight: 600; opacity: .75; font-variant-numeric: tabular-nums; }

  /* the board's way into the theatre (theatre.php) */
  .board-bar { flex-wrap: wrap; align-items: center; }
  .btn.theatre-btn { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 8px 14px; font-size: 13px; }
  .btn.theatre-btn .play {
    width: 0; height: 0;
    border-style: solid; border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent currentColor;
  }

  /* the pop-up */
  .viewer {
    /* as wide as fits, but never taller than the window: 16:9 video + ~130 px of bar, progress and footer */
    width: min(1040px, calc(100vw - 32px), calc((100vh - 150px) * 16 / 9));
    max-width: none;
    max-height: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    overflow: visible;
  }
  .viewer::backdrop {
    background: radial-gradient(circle at 50% 40%, rgba(74, 240, 255, 0.10), rgba(2, 3, 8, 0.88) 60%);
    backdrop-filter: blur(6px);
  }
  .viewer[open] { animation: viewer-in .42s cubic-bezier(.2, .9, .25, 1.15); }
  .viewer[open]::backdrop { animation: viewer-fade .3s ease-out; }

  .viewer-frame {
    position: relative;
    padding: 14px 14px 12px;
    border-radius: 16px;
    background:
      linear-gradient(rgba(8, 11, 22, 0.96), rgba(8, 11, 22, 0.96)) padding-box,
      linear-gradient(120deg, var(--cyan), var(--violet), var(--cyan)) border-box;
    background-size: 100% 100%, 300% 300%;
    border: 1px solid transparent;
    box-shadow: 0 0 0 1px rgba(74, 240, 255, 0.08), 0 0 60px rgba(74, 240, 255, 0.18), 0 30px 90px rgba(0, 0, 0, 0.7);
    animation: viewer-border 6s linear infinite;
  }

  /* HUD corner brackets */
  .corner { position: absolute; width: 22px; height: 22px; border: 2px solid var(--cyan); opacity: .85; pointer-events: none; }
  .corner.tl { top: -7px; left: -7px; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
  .corner.tr { top: -7px; right: -7px; border-left: 0; border-bottom: 0; border-top-right-radius: 6px; }
  .corner.bl { bottom: -7px; left: -7px; border-right: 0; border-top: 0; border-bottom-left-radius: 6px; }
  .corner.br { bottom: -7px; right: -7px; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; }

  .viewer-bar { display: flex; align-items: center; gap: 14px; padding: 2px 4px 12px; }
  .viewer-rec {
    display: inline-flex; align-items: center; gap: 7px;
    font: 700 11px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    letter-spacing: .18em; color: var(--cyan);
  }
  .viewer-rec i { width: 8px; height: 8px; border-radius: 50%; background: #ff3b6b; box-shadow: 0 0 10px #ff3b6b; }
  .viewer.playing .viewer-rec i { animation: viewer-blink 1.1s steps(2, start) infinite; }
  .viewer-title { flex: 1; margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; color: #fff;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .viewer-time { font: 600 12.5px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: var(--muted);
    font-variant-numeric: tabular-nums; }
  .viewer-x {
    width: 34px; height: 34px; margin: 0; padding: 0;
    font-size: 22px; line-height: 1; letter-spacing: 0; text-transform: none;
    color: var(--text); background: rgba(4, 7, 16, 0.7); border: 1px solid var(--line); border-radius: 9px;
    box-shadow: none; cursor: pointer;
  }
  .viewer-x:hover, .viewer-x:focus-visible { color: var(--cyan); border-color: var(--cyan); transform: none; filter: none; }

  .viewer-screen {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    box-shadow: inset 0 0 0 1px rgba(74, 240, 255, 0.15);
  }
  .viewer-screen video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
  /* faint scan lines + a slow sweep, under the pointer (the controls stay usable) */
  .viewer-scan {
    position: absolute; inset: 0; pointer-events: none;
    background:
      linear-gradient(rgba(74, 240, 255, 0.07), transparent 18%) 0 -20% / 100% 30% no-repeat,
      repeating-linear-gradient(transparent 0 2px, rgba(0, 0, 0, 0.16) 2px 3px);
    mix-blend-mode: screen;
    opacity: .55;
    animation: viewer-sweep 5s linear infinite;
  }

  .viewer-progress { height: 3px; margin: 10px 2px 0; border-radius: 2px; background: rgba(120, 220, 255, 0.12); overflow: hidden; }
  .viewer-progress i { display: block; width: 0; height: 100%;
    background: linear-gradient(90deg, var(--cyan), var(--violet)); box-shadow: 0 0 10px var(--cyan); transition: width .25s linear; }
  .viewer-foot { margin: 9px 4px 0; font-size: 12px; color: var(--muted); }

  @keyframes viewer-in { from { opacity: 0; transform: translateY(18px) scale(.94); filter: blur(6px); }
                         to   { opacity: 1; transform: none; filter: none; } }
  @keyframes viewer-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes viewer-border { from { background-position: 0 0, 0% 50%; } to { background-position: 0 0, 300% 50%; } }
  @keyframes viewer-blink { to { visibility: hidden; } }
  @keyframes viewer-sweep { from { background-position: 0 -30%, 0 0; } to { background-position: 0 130%, 0 0; } }

  @media (max-width: 560px) {
    .viewer-frame { padding: 10px 10px 9px; }
    .viewer-title { font-size: 15px; }
    .viewer-foot { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .viewer[open], .viewer[open]::backdrop, .viewer-frame, .viewer-scan, .viewer.playing .viewer-rec i { animation: none; }
    .viewer-progress i { transition: none; }
  }