/* /portfolio, "整頁捲動預覽": each featured site's desktop frame holds a full-length screenshot of the live site.
   Hovering the frame (or, on touch screens, the frame settling on screen) scrolls it from header to footer.
   The frame shows the top of the same image from the first paint, so nothing is swapped in. */

/* ---- Hero: the counts ---- */
.pf-stats { display: flex; flex-wrap: wrap; gap: clamp(1.6rem, 5vw, 4rem); margin-top: clamp(2.2rem, 5vw, 3.4rem); padding-top: 1.6rem; border-top: 1px solid var(--line-dark); max-width: 44rem; }
.pf-stats div { display: grid; gap: 0.35rem; }
.pf-stats b { font-family: var(--serif); font-weight: 900; font-size: clamp(2.6rem, 5vw, 3.8rem); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.pf-stats b em { font-style: normal; color: var(--gold); }
.pf-stats span { font-size: 0.86rem; color: var(--on-dark-2); }

/* ---- Desktop frame: a window onto the whole page ---- */
.show-desk .bar { align-items: center; }
.show-desk .bar small { margin-left: auto; font-size: 0.68rem; letter-spacing: 0.08em; color: var(--on-dark-2); }
.show-scroll { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; container-type: size; }
/* Selectors start with .show so they outrank ai.css's ".show:hover .show-desk img" zoom */
.show .show-desk .show-scroll img { aspect-ratio: auto; height: auto; object-fit: initial; transform: translateY(0); transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1); will-change: transform; }
/* --dur is set per site in the template, from the page length */
.show .show-scroll.is-playing img,
.show .show-desk:hover .show-scroll img { transform: translateY(calc(-100% + 100cqh)); transition: transform var(--dur, 6s) cubic-bezier(0.45, 0, 0.55, 1); }

@media (hover: none), (pointer: coarse) {
    .show .show-desk:hover .show-scroll:not(.is-playing) img { transform: translateY(0); transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1); }
}
@media (prefers-reduced-motion: reduce) {
    .show .show-scroll.is-playing img, .show .show-desk:hover .show-scroll img { transform: none; transition: none; }
    .show-desk .bar small { display: none; }
}