/* Showreel viewer (assets/js/reel-viewer.js): one video per screen, swipe up / down like reels */
html.rv-open, html.rv-open body { overflow: hidden; }
.rv { position: fixed; inset: 0; z-index: 3000; background: #000; color: #fff; }
.rv-top { position: absolute; z-index: 2; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: linear-gradient(#000c, #0000); pointer-events: none; }
.rv-top > * { pointer-events: auto; }
.rv-name { font-weight: 600; font-size: 15px; }
.rv-count { font-size: 12px; opacity: 0.7; }
.rv-close { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.14); color: #fff; font-size: 16px; cursor: pointer; }
.rv-close:hover { background: rgba(255,255,255,0.26); }
.rv-scroll { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.rv-scroll::-webkit-scrollbar { display: none; }
.rv-slide { height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 56px 0 20px; }
.rv-frame { position: relative; overflow: hidden; border-radius: 14px; background: #111; flex: none; }
.rv-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.rv-frame iframe { opacity: 0; transition: opacity 0.25s; z-index: 1; }
.rv-frame iframe.ready { opacity: 1; }
.rv-frame iframe.rv-ig { inset: auto; background: #000; }
.rv-hint { display: none; }
@media (max-width: 700px) {
  .rv-hint { display: block; position: absolute; z-index: 2; left: 50%; bottom: 72px; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; background: rgba(0,0,0,0.7); font-size: 13px; white-space: nowrap; pointer-events: none; animation: rv-hint 1.6s ease-in-out 3; }
}
@keyframes rv-hint { 50% { transform: translate(-50%, -8px); } }
.rv-poster { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: #111; cursor: pointer; display: grid; place-items: center; }
.rv-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rv-playbtn { position: relative; width: 68px; height: 68px; border-radius: 50%; background: var(--tungsten, #d80b2a); color: #fff; display: grid; place-items: center; font-size: 22px; padding-left: 4px; }
.rv-cap { max-width: calc(100vw - 32px); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; }
.rv-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-cap a { color: rgba(255,255,255,0.75); white-space: nowrap; }
.rv-cap a:hover { color: #fff; }
.rv-nav { position: absolute; z-index: 2; right: 24px; top: 50%; transform: translateY(-50%); display: grid; gap: 10px; }
.rv-nav button { width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.14); color: #fff; font-size: 20px; cursor: pointer; }
.rv-nav button:hover:not(:disabled) { background: rgba(255,255,255,0.28); }
.rv-nav button:disabled { opacity: 0.3; cursor: default; }
@media (max-width: 700px) { .rv-nav { display: none; } .rv-frame { border-radius: 0; } .rv-cap { padding: 0 16px; } }