/* IG-style reel page — full viewport snap, cover video, overlay controls */ html.sx-videos-page-root, html.sx-videos-page-root body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: #000; } /* iOS Safari scrolls reliably on a fixed inner scroller, not overflow on . */ #pageContent.sx-videos-scroll-root { position: fixed; inset: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; scroll-snap-type: y mandatory; scroll-behavior: smooth; touch-action: pan-y; } .sx-videos-page { margin: 0; min-height: 100%; background: #000; color: #eefaff; } .sx-videos-page__header { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: max(0.55rem, env(safe-area-inset-top)) 0.85rem 0.55rem; background: linear-gradient(180deg, rgba(0, 0, 0, 0.72), transparent); pointer-events: none; } .sx-videos-page__header a, .sx-videos-page__header button { pointer-events: auto; } .sx-videos-page__title { margin: 0; font: 700 1rem/1.2 Arial, sans-serif; color: #fff; letter-spacing: 0.04em; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65); } .sx-videos-page__home { appearance: none; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; padding: 0.35rem 0.75rem; background: rgba(0, 0, 0, 0.45); color: #fff; font: 700 0.78rem/1 Arial, sans-serif; text-decoration: none; } .sx-videos-page__status { margin: 0; padding: calc(4.5rem + env(safe-area-inset-top)) 1rem 2rem; text-align: center; color: rgba(255, 255, 255, 0.75); font-size: 0.95rem; } .sx-videos-page__status.is-error { color: #ffb4b4; } .sx-videos-reel { margin: 0; padding: 0; } .sx-reel-slide { position: relative; width: 100%; height: 100dvh; min-height: 100vh; scroll-snap-align: start; scroll-snap-stop: always; display: flex; align-items: stretch; justify-content: center; background: #000; box-sizing: border-box; } .sx-reel-slide__stage { position: relative; flex: 1; width: 100%; max-width: min(100%, 520px); margin: 0 auto; display: flex; align-items: center; justify-content: center; } .sx-reel-slide__media { position: relative; width: 100%; height: 100dvh; min-height: 100vh; background: #000; cursor: pointer; touch-action: manipulation; overflow: hidden; } .sx-reel-slide__poster, .sx-reel-slide__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; background: #000; } .sx-reel-slide__video { z-index: 1; } .sx-reel-slide__poster { z-index: 2; transition: opacity 0.18s ease; } .sx-reel-slide.is-playing .sx-reel-slide__poster { opacity: 0; pointer-events: none; } .sx-reel-slide.is-playing .sx-reel-slide__poster[hidden] { display: block; visibility: hidden; } .sx-reel-slide__sound { position: absolute; right: 0.85rem; bottom: calc(1.35rem + env(safe-area-inset-bottom)); z-index: 6; width: 2.35rem; height: 2.35rem; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M3 10v4h4l5 5V5L7 10H3zm13.5 2a4.5 4.5 0 0 0-2.5-4.03v8.05a4.5 4.5 0 0 0 2.5-4.02zM14 3.23v2.06a7 7 0 0 1 0 13.74v2.06a9 9 0 0 0 0-17.83z'/%3E%3C/svg%3E") center/58% no-repeat; cursor: pointer; pointer-events: auto; } .sx-reel-slide__sound.is-muted { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M16.5 12a4.5 4.5 0 0 0-2.5-4.03v2.14l2.45 2.45a4.48 4.48 0 0 0 .05-.56zM19 12c0 .94-.2 1.82-.54 2.64l1.51 1.51A8.9 8.9 0 0 0 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3 3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06a8.99 8.99 0 0 0 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4 9.91 6.09 12 8.18V4z'/%3E%3C/svg%3E"); } .sx-reel-slide__caption { position: absolute; left: 0.85rem; right: 3.5rem; bottom: calc(1.25rem + env(safe-area-inset-bottom)); z-index: 5; color: #fff; font-size: 0.86rem; line-height: 1.35; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85); pointer-events: none; } .sx-reel-slide__caption strong { display: block; font-size: 0.95rem; font-weight: 700; } .sx-reel-slide.is-loading::after { content: ""; position: absolute; left: 50%; top: 50%; z-index: 3; width: 2.2rem; height: 2.2rem; margin: -1.1rem 0 0 -1.1rem; border: 2px solid rgba(255, 255, 255, 0.28); border-top-color: #fff; border-radius: 50%; animation: sx-reel-spin 0.75s linear infinite; } .sx-reel-slide.is-buffering::after { content: ""; position: absolute; left: 50%; top: 50%; z-index: 3; width: 2rem; height: 2rem; margin: -1rem 0 0 -1rem; border: 2px solid rgba(255, 255, 255, 0.2); border-top-color: rgba(255, 255, 255, 0.85); border-radius: 50%; animation: sx-reel-spin 0.75s linear infinite; } @keyframes sx-reel-spin { to { transform: rotate(360deg); } } #pageContent.locked { display: none; } #vidLockModal.is-open { background: #0a0a0a; } /* Desktop IG Reels: centered column, same snap + wheel */ @media (hover: hover) and (pointer: fine) { .sx-reel-slide__stage { max-width: min(100%, 480px); border-inline: 1px solid rgba(255, 255, 255, 0.06); } .sx-reel-slide__media { height: 100dvh; min-height: 100vh; } } @media (pointer: coarse), (max-width: 900px) { .sx-reel-slide__stage { max-width: 100%; } }