.overview-preview {
  display: block;
  min-width: 0;
  border-radius: clamp(20px, 2.4vw, 48px);
}
.overview-preview .agent-example__message {
  isolation: isolate;
  overflow: hidden;
}
.preview-play {
  position: absolute;
  top: clamp(18px, 2.55vw, 52px);
  right: clamp(18px, 2.55vw, 52px);
  display: grid;
  place-items: center;
  width: clamp(24px, 2.45vw, 44px);
  aspect-ratio: 1;
  color: var(--accent);
  background: #17130e;
  border: 1px solid #765739;
  border-radius: 50%;
  pointer-events: none;
}
.preview-play i {
  width: .52em;
  height: .67em;
  margin-left: .16em;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.preview-reveal { display: none; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .preview-reveal {
    --lens: clamp(58px, 6.8vw, 112px);
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    overflow: hidden;
    pointer-events: none;
    background: #201a12;
    clip-path: circle(0 at var(--preview-x, 50%) var(--preview-y, 50%));
    opacity: 0;
    transition: clip-path .19s ease-out, opacity .14s ease-out;
  }
  .preview-reveal::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("./media/linger-overview.webp") center right / auto 124% no-repeat, #efece3;
    filter: grayscale(1) sepia(.82) saturate(1.8) brightness(.84);
  }
  .preview-reveal::after {
    content: "";
    position: absolute;
    width: calc(2 * var(--lens));
    aspect-ratio: 1;
    top: var(--preview-y, 50%);
    left: var(--preview-x, 50%);
    translate: -50% -50%;
    background: radial-gradient(ellipse 62% 72% at 24% 5%, rgb(255 238 214 / .42), transparent 73%);
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.7px #ffd096, inset 0 0 12px #c88748;
  }
  .overview-preview.is-previewing .preview-reveal {
    clip-path: circle(var(--lens) at var(--preview-x) var(--preview-y));
    opacity: 1;
  }
  .preview-play { z-index: 2; }
  .overview-preview.is-previewing .preview-play {
    left: var(--preview-x);
    top: var(--preview-y);
    right: auto;
    translate: -50% -50%;
    width: 32px;
    color: #231509;
    background: #ffcf8f;
    border-color: #16100b;
  }
}
.overview-preview:focus-visible .preview-play {
  color: #21170f;
  background: var(--accent);
}

/* A small amber field expands across the installer tile from its entry point. */
.download-options a { position: relative; isolation: isolate; overflow: hidden; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .download-options a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--accent);
    clip-path: circle(0 at var(--entry-x, 50%) var(--entry-y, 50%));
    transition: clip-path .38s cubic-bezier(.23,.78,.22,1);
  }
  .download-options a:hover::before,
  .download-options a:focus-visible::before {
    clip-path: circle(157% at var(--entry-x, 50%) var(--entry-y, 50%));
  }
  .download-options a :is(span, small, b) { transition: color .16s, translate .24s; }
  .download-options a:is(:hover, :focus-visible) :is(span, small, b) { color: #1c140b; }
  .download-options a:is(:hover, :focus-visible) b { translate: 0 3px; }
  .download-options a:focus-visible { outline-color: var(--accent); }
}