/* Click-to-enlarge for the feature clips.
 *
 * Shared by both takes on purpose: the two sites disagree about almost
 * everything, but a magnified clip is the app's own dark chrome floating on a
 * scrim, and that reads the same either way. Keeping one copy means the two
 * takes can't drift into two slightly different zoom behaviours.
 *
 * The hero clip is deliberately NOT zoomable — it is already the largest thing
 * on the page, so a zoom affordance there promises something it can't deliver.
 */

[data-zoom] {
  cursor: zoom-in;
  position: relative;
}

/* The affordance has to be visible without hover, because touch has no hover.
   It sits over the plate rather than beside it so it costs no layout. */
[data-zoom]::after {
  content: "";
  position: absolute;
  inset: auto 10px 10px auto;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background:
    /* a magnifier glyph, drawn rather than shipped as an icon font */
    no-repeat center/13px 13px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23E6E8EC' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.4'/%3E%3Cpath d='M10.3 10.3 14 14M7 5.2v3.6M5.2 7h3.6'/%3E%3C/svg%3E"),
    rgba(10, 11, 14, 0.62);
  border: 1px solid rgba(230, 232, 236, 0.22);
  opacity: 0;
  transition: opacity 160ms ease;
  pointer-events: none;
}
[data-zoom]:hover::after,
[data-zoom]:focus-visible::after { opacity: 1; }
@media (hover: none) {
  [data-zoom]::after { opacity: 1; }
}

.zoom {
  border: 0;
  padding: 0;
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
  background: transparent;
  overflow: hidden;
}
.zoom::backdrop {
  background: rgba(6, 7, 9, 0.88);
  backdrop-filter: blur(3px);
}

.zoom__stage {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  box-sizing: border-box;
  cursor: zoom-out;
}

/* The clip keeps its own aspect ratio and simply takes as much room as the
   viewport allows. No fixed size: these captures are not all one shape. */
.zoom__stage > * {
  display: block;
  max-width: min(1600px, 100%);
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.8);
  cursor: default;
}

.zoom__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(230, 232, 236, 0.24);
  background: rgba(20, 22, 26, 0.9);
  color: #E6E8EC;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.zoom__close:hover { background: rgba(38, 42, 48, 0.95); }
.zoom__close:focus-visible { outline: 2px solid #3FA9A0; outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  .zoom[open] .zoom__stage > * {
    animation: zoom-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  @keyframes zoom-in {
    from { transform: scale(0.94); opacity: 0; }
    to   { transform: none; opacity: 1; }
  }
}