/* Shared screenshot carousel for miniapps. Companion to screenshots.js. Read by an iframe-isolated miniapp; no collision concerns with the parent page. CSS variables an instance can override on or :root: --backdrop-url url(...) of the photographic backdrop image --card-aspect aspect-ratio of each shot card (default: 1465/2845, a phone shot) --interval-ms informational only; the JS reads this from config */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { width: 100%; height: 100%; overflow: hidden; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; display: flex; align-items: center; justify-content: center; padding: 1.25rem; position: relative; background: #1a1a1a; } /* Blurred photographic backdrop sits behind everything */ body::before { content: ''; position: fixed; inset: 0; background: var(--backdrop-url, none) center / cover no-repeat; filter: blur(4px) saturate(0.9) brightness(0.78); transform: scale(1.06); /* hide blur edges */ z-index: -2; } /* Vignette + spotlight: dark corners, soft glow around center */ body::after { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse at center, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0.0) 25%, rgba(0,0,0,0.35) 65%, rgba(0,0,0,0.55) 100%); z-index: -1; pointer-events: none; } #stage { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .shot { position: absolute; height: 78%; max-height: 540px; aspect-ratio: var(--card-aspect, 1465 / 2845); border-radius: 28px; overflow: hidden; background: #000; box-shadow: 0 60px 100px -10px rgba(0,0,0,0.65), 0 30px 60px -16px rgba(0,0,0,0.45), 0 10px 24px rgba(0,0,0,0.28), 0 0 0 1px rgba(255,255,255,0.06), inset 0 1px 0 rgba(255,255,255,0.20); opacity: 0; transform: translateX(40px) scale(.95); transition: opacity .6s ease, transform .6s cubic-bezier(.34,1.2,.64,1); pointer-events: none; } .shot.is-current::after { content: ''; position: absolute; inset: -40px; border-radius: 60px; background: radial-gradient(ellipse at center, rgba(201,169,97,0.22) 0%, rgba(201,169,97,0) 70%); z-index: -1; pointer-events: none; } .shot::before { content: ''; position: absolute; top: -1px; left: 22px; right: 22px; height: 2px; background: linear-gradient(90deg, rgba(201,169,97,0) 0%, rgba(201,169,97,.55) 50%, rgba(201,169,97,0) 100%); border-radius: 2px; z-index: 2; pointer-events: none; } .shot.is-current { opacity: 1; transform: translateX(0) scale(1); z-index: 2; pointer-events: auto; } .shot.is-leaving { opacity: 0; transform: translateX(-40px) scale(.95); z-index: 1; } .shot img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; filter: saturate(0.98) contrast(1.02); transform: scale(1.0); transition: transform 7s ease-out; } .shot.is-current img { transform: scale(1.04); } /* Ken Burns drift */ .shot-label { position: absolute; left: 14px; bottom: 14px; z-index: 3; padding: .32rem .65rem; background: rgba(255,255,255,.88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 999px; font-size: .68rem; font-weight: 600; color: #1a1a1a; box-shadow: 0 4px 12px rgba(0,0,0,.18); opacity: 0; transform: translateY(6px); transition: opacity .45s ease .15s, transform .45s ease .15s; } .shot.is-current .shot-label { opacity: 1; transform: translateY(0); } .dots { position: absolute; bottom: .65rem; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; z-index: 5; } .cdot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.4); border: 1px solid rgba(0,0,0,0.05); transition: background .35s, width .35s; cursor: pointer; padding: 0; } .cdot.is-current { background: linear-gradient(90deg, #c9a961, #d8bd7e); width: 22px; border-radius: 4px; border-color: transparent; } @media (max-width: 480px) { body { padding: .75rem; } .shot { height: 72%; max-height: 440px; } .shot-label { font-size: .62rem; padding: .25rem .5rem; left: 10px; bottom: 10px; } } /* === Fan-of-cards preview mode (abanico) === Activated when ?preview=fan is on the URL. The carousel stops animating, every shot becomes visible at once, and each rotates around a common pivot point far below the cards so the spread reads as a hand of playing cards. Used by scripts/render-miniapp-preview.js to capture preview.png. */ body.preview-fan { padding: 1rem; } body.preview-fan .shot { opacity: 1 !important; transition: none !important; animation: none !important; pointer-events: none; height: 56%; max-height: 380px; left: 50%; top: 50%; /* Shared pivot ~200% below the card → cards fan around a common point. Combined with translate(-50%, -65%) the cards visually center in the frame rather than spilling past the bottom edge. */ transform-origin: 50% 200%; } body.preview-fan .shot.is-current::after, body.preview-fan .shot::before, body.preview-fan .shot-label, body.preview-fan .dots { display: none !important; } body.preview-fan .shot img { transform: scale(1) !important; } body.preview-fan .shot:nth-child(1) { transform: translate(-50%, -65%) rotate(-28deg); z-index: 1; } body.preview-fan .shot:nth-child(2) { transform: translate(-50%, -65%) rotate(-17deg); z-index: 2; } body.preview-fan .shot:nth-child(3) { transform: translate(-50%, -65%) rotate(-6deg); z-index: 3; } body.preview-fan .shot:nth-child(4) { transform: translate(-50%, -65%) rotate(6deg); z-index: 4; } body.preview-fan .shot:nth-child(5) { transform: translate(-50%, -65%) rotate(17deg); z-index: 5; } body.preview-fan .shot:nth-child(6) { transform: translate(-50%, -65%) rotate(28deg); z-index: 6; } body.preview-fan .shot:nth-child(7) { transform: translate(-50%, -65%) rotate(39deg); z-index: 7; } body.preview-fan .shot:nth-child(8) { transform: translate(-50%, -65%) rotate(50deg); z-index: 8; } /* Visually hidden but readable by scrapers and screen readers. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }