/* ------------------------------------------------------------------
   media.css: rendered loops and walkthrough videos outside the home page.

   Loaded only by pages that show one (guides and /docs through the
   content build, plus hand-written pages such as /roblox-ai-game-maker).
   The player is lib/inview-video.js: it loads a video about a screen
   early, plays it only while it is on screen, and under reduced motion
   leaves the poster with controls. Files live in /videos and are cached
   for a year, so a changed video gets a new -vN name.
   ------------------------------------------------------------------ */

.rc-video { margin: 28px 0; }
.rc-video-frame {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--rc-line-strong);
    border-radius: var(--rc-radius-lg);
    background: var(--rc-bg-sunken) center / cover no-repeat;
}
.rc-video-frame video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.rc-video-cap {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 10px;
    font-size: var(--rc-fs-caption);
    line-height: 1.5;
    color: var(--text-3);
    text-wrap: pretty;
}
.rc-video-tag {
    flex: none;
    padding: 1px 8px;
    border: 1px solid var(--rc-line-strong);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--text-2);
}

/* No black boxes: a video stays transparent over its painted poster until its first frame is
   decoded (lib/inview-video.js adds .vid-fade to <html> and .is-ready to the video). */
html.vid-fade video.fade-in { opacity: 0; transition: opacity .35s ease; }
html.vid-fade video.fade-in.is-ready { opacity: 1; }

@media (max-width: 640px) {
    .guide-page .rc-video-frame { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); border-radius: 0; border-left: 0; border-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
    html.vid-fade video.fade-in { transition: none; }
}