/* "Start wide, zoom in" on the showing pages and the /showings rows (owner 2026-10-21; Pages/Showings/_ShowingZoom.cshtml).
   Frames are stacked; showing-zoom.js turns them on one after another. Without script the last frame and the card show. */
.szoom { position:relative; aspect-ratio:16/10; overflow:hidden; background:#0f1a24; border-left:4px solid var(--gold); margin:18px 0 0; }
.szoom .f { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1); transform-origin:50% 50%; }
.szoom .f.on { opacity:1; }
.szoom.play .f.on { transition:opacity .8s ease, transform 2.6s ease-in; transform:scale(1.9); }
.szoom.play .f.last.on { transform:scale(1.08); transition:opacity 1.2s ease, transform 8s ease-out; }
.szoom .ring { position:absolute; left:50%; top:50%; width:clamp(28px,6%,64px); aspect-ratio:1; transform:translate(-50%,-50%); border:4px solid var(--gold);
  border-radius:50%; box-shadow:0 0 0 3px rgba(15,26,36,.55), 0 0 22px rgba(250,193,28,.8); opacity:0; transition:opacity .6s; animation:szpulse 1.6s ease-in-out infinite; }
@keyframes szpulse { 0%,100% { transform:translate(-50%,-50%) scale(1); } 50% { transform:translate(-50%,-50%) scale(1.25); } }
/* the pin above the ring, with the showing's name; 2M vein: a tag (no surveyed position yet) */
.szoom .pin { position:absolute; left:50%; bottom:50%; transform:translate(-50%,-14px); display:flex; flex-direction:column; align-items:center; pointer-events:none; opacity:0; transition:opacity .6s; }
.szoom .pin i { font-size:clamp(26px,4.4vw,46px); color:var(--gold); text-shadow:0 2px 6px rgba(0,0,0,.7), 0 0 2px #0f1a24; line-height:1; order:2; }
.szoom .pin span { order:1; margin-bottom:4px; background:var(--gold); color:var(--ink); font:700 15px "Open Sans Condensed", Oswald, sans-serif; text-transform:uppercase;
  padding:2px 9px; white-space:nowrap; box-shadow:0 2px 6px rgba(0,0,0,.5); }
.szoom .pin.nopos { bottom:auto; top:58px; left:14px; transform:none; align-items:flex-start; }
.szoom .pin.nopos span { background:rgba(15,26,36,.85); color:#fff; font-weight:600; text-transform:none; font-family:Roboto, sans-serif; font-size:13px; }
.szoom.small .pin span { font-size:12px; padding:1px 6px; }
.szoom.small .pin.nopos { top:40px; left:8px; }
.szoom .town { position:absolute; right:56px; top:16px; background:rgba(15,26,36,.8); color:#fff; font:600 13px Roboto, sans-serif; padding:2px 8px; opacity:0; transition:opacity .6s; }
.szoom .step { position:absolute; left:14px; top:14px; background:rgba(15,26,36,.85); color:#fff; font:700 17px "Open Sans Condensed", Oswald, sans-serif;
  text-transform:uppercase; padding:5px 12px; letter-spacing:.03em; }
.szoom .card { position:absolute; right:18px; bottom:18px; width:min(360px,70%); background:rgba(25,37,48,.94); border-top:4px solid var(--gold);
  padding:14px 18px 16px; color:var(--muted); box-shadow:0 10px 30px rgba(0,0,0,.5); opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease; }
.szoom .card.on { opacity:1; transform:none; }
.szoom .card h3 { margin:0 0 2px; font-size:22px; }
.szoom .card .big { display:block; font:700 38px/1.05 "Open Sans Condensed", Oswald, sans-serif; color:var(--gold); }
.szoom .card .sub { display:block; font-size:14px; margin:2px 0 8px; }
.szoom .card ul { margin:0; padding-left:18px; font-size:14px; line-height:1.5; }
.szoom .card li:last-child { color:#fff; font-weight:500; }
/* play / pause (owner 2026-10-21: "with a play pause button (subtle)") */
.szoom .pp { position:absolute; right:12px; top:12px; width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.35);
  background:rgba(15,26,36,.5); color:#fff; font-size:13px; line-height:1; cursor:pointer; opacity:.45; transition:opacity .25s, border-color .25s, color .25s; }
.szoom:hover .pp, .szoom .pp:focus-visible { opacity:1; }
.szoom .pp:hover { border-color:var(--gold); color:var(--gold); }
.szoom .pp .fa-play { margin-left:2px; }
.szoom-credit { font-size:11px; color:#6f8396; margin:4px 0 0; }
/* small: the /showings row */
.szoom.small { margin:0; border-left:0; }
.szoom.small .card { left:10px; right:10px; bottom:10px; width:auto; padding:8px 12px 10px; }
.szoom.small .card .big { font-size:24px; }
.szoom.small .card .big small { font:400 14px Roboto, sans-serif; color:var(--muted); }
.szoom.small .town { display:none; }
.szoom.small .step { font-size:12px; padding:3px 8px; left:8px; top:8px; }
.szoom.small .pp { width:28px; height:28px; font-size:11px; right:8px; top:8px; }
.sh-row .zpic { position:relative; min-height:250px; }
.sh-row .zpic .szoom { position:absolute; inset:0; aspect-ratio:auto; }
@media (max-width:700px) {
  .szoom:not(.small) .card { left:10px; right:10px; bottom:10px; width:auto; padding:10px 14px 12px; }
  .szoom:not(.small) .card ul, .szoom:not(.small) .card h3 { display:none; }
  .szoom:not(.small) .card .big { font-size:28px; }
  .szoom .step { font-size:13px; left:8px; top:8px; }
}
@media (prefers-reduced-motion:reduce) { .szoom .ring { animation:none; } }