/* ==========================================================================
   Moving-image layer (shared by the video themes): the quiet left
   navigation, film frames, the screening room, captions, grids and the
   restrained reveals. Each theme's theme.css gives it its own character.
   ========================================================================== */

:root {
    --vs-side: 220px;
    --vs-pad: 28px;
    --vf-ratio: 16 / 9;
    --vf-screen-bg: rgba(8, 8, 8, .97);
    --vf-screen-text: #e9e8e3;
    --vf-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Left navigation ---------- */

.art-menu > li { position: relative; }
.vs-expand { flex: 0 0 auto; width: 26px; height: 26px; padding: 0; border: 0; background: none; color: inherit; opacity: .6; }
.vs-expand::before { content: "−"; font: 400 15px/26px var(--art-meta-font); }
.vs-expand.collapsed::before { content: "+"; }
.vs-expand:hover { opacity: 1; }
.vs-sub { flex: 0 0 100%; margin: .1rem 0 .6rem; padding: 0 0 0 .9rem; list-style: none; border-left: 1px solid currentColor; border-color: color-mix(in srgb, var(--art-header-text) 22%, transparent); }
.vs-sub a { display: block; padding: .16rem 0; font-size: 12px; color: var(--art-header-text); opacity: .7; text-decoration: none; }
.vs-sub a span { font-family: var(--art-meta-font); font-size: 10px; opacity: .7; margin-right: .3rem; }
.vs-sub a:hover, .vs-sub a.active { opacity: 1; color: var(--art-header-hover); }
.vs-side-foot { display: flex; flex-direction: column; gap: .8rem; margin-top: 1.6rem; font-size: 12px; }
.vs-side-contact { color: var(--art-header-text); text-decoration: none; font-family: var(--art-nav-font); font-size: var(--art-nav-size); letter-spacing: var(--art-nav-tracking); text-transform: var(--art-nav-case); }
.vs-side-contact:hover { color: var(--art-header-hover); }
.vs-side-social a { color: var(--art-header-text); opacity: .7; }
.vs-side-social a:hover { opacity: 1; color: var(--art-header-hover); }

@media (min-width: 992px) {
    .vs-side { padding-left: var(--vs-side); }
    .vs-side .art-header { position: fixed !important; top: 0; bottom: 0; left: 0; width: var(--vs-side); overflow-y: auto; border-bottom: 0; border-right: var(--art-header-rule-w) solid var(--art-header-rule); scrollbar-width: none; view-transition-name: vs-nav; transition: opacity .8s ease; }
    .vs-side.admin-bar .art-header { top: 32px; }
    .vs-side .art-header__inner { flex-direction: column; flex-wrap: nowrap !important; align-items: stretch; justify-content: flex-start; min-height: 100%; max-width: none; padding: var(--vs-pad); gap: 2.4rem; }
    .vs-side .art-nav { display: flex !important; flex-direction: column; flex: 1 1 auto; justify-content: flex-start !important; }
    .vs-side .art-menu { flex-direction: column !important; flex-wrap: nowrap !important; justify-content: flex-start !important; gap: 0; }
    .vs-side .art-menu > li { display: flex; flex-wrap: wrap; align-items: center; }
    .vs-side .art-menu > li > .nav-link { flex: 1 1 0; min-width: 0; display: block; padding: .3rem 0; white-space: normal; }
    .vs-side .vs-side-foot { margin-top: auto; }
    .vs-side .edith-content .alignfull { width: auto; margin-left: calc(-1 * var(--art-gutter)); margin-right: calc(-1 * var(--art-gutter)); }
    /* Dim the navigation while the visitor watches (Customize → Video). */
    .vf-dim-idle.vf-idle .art-header { opacity: .18; }
    .vf-dim-idle.vf-idle .art-header:hover, .vf-dim-idle.vf-idle .art-header:focus-within { opacity: 1; }
}
@media (max-width: 991.98px) {
    .vs-side .art-header { position: sticky; top: 0; }
    .vs-side .art-header__inner { padding-top: 12px; padding-bottom: 12px; }
    .vs-side .art-menu > li { display: flex; flex-wrap: wrap; align-items: center; }
    .vs-side .art-menu > li > .nav-link { flex: 1 1 0; }
    .vs-side .art-tagline { display: none; }
}

/* ---------- Film frames ---------- */

.vf-film { position: relative; display: block; overflow: hidden; color: inherit; text-decoration: none; background: #111; }
.vf-film__media { position: relative; display: block; aspect-ratio: var(--vf-ratio); overflow: hidden; }
.vf-film__img, .vf-film__preview, .vf-loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vf-film__preview { opacity: 0; transition: opacity .4s ease; }
.vf-film.is-previewing .vf-film__preview { opacity: 1; }
.vf-film__blank { position: absolute; inset: 0; background: linear-gradient(135deg, #2a2a28, #111); }
.vf-film__play {
    position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .85); background: rgba(0, 0, 0, .18); backdrop-filter: blur(3px);
    opacity: 0; transform: scale(.94); transition: opacity .3s ease, transform .3s var(--vf-ease);
}
.vf-film__play::after { content: ""; position: absolute; left: 23px; top: 19px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #fff; }
.vf-film:hover .vf-film__play, .vf-film:focus-visible .vf-film__play { opacity: 1; transform: none; }
@media (hover: none) { .vf-film__play { opacity: .9; transform: none; } }
.vf-film:focus-visible { outline: 2px solid var(--art-accent); outline-offset: 3px; }

/* The almost-imperceptible reveal: 1.015 → 1 over ~700 ms (only with JS, never hidden). */
.vf-js .vf-settle .vf-film__img, .vf-js .vf-settle .vf-work__img, .vf-js .vf-settle.vf-work__media img { transform: scale(1.015); transition: transform .7s var(--vf-ease); }
.vf-js .vf-settle.is-in .vf-film__img, .vf-js .vf-settle.is-in .vf-work__img, .vf-js .vf-settle.is-in.vf-work__media img { transform: none; }

/* Related-work stagger */
.vf-js .vf-stagger > * { opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s var(--vf-ease); transition-delay: calc(min(var(--i, 0), 8) * 70ms); }
.vf-js .vf-stagger.is-in > * { opacity: 1; transform: none; }

/* Text that slides a few pixels into alignment; image masks that open. */
.vf-js .vf-reveal { opacity: 0; transform: translate(var(--vf-rx, 0), var(--vf-ry, 12px)); transition: opacity .8s ease, transform .8s var(--vf-ease); }
.vf-js .vf-reveal.is-in { opacity: 1; transform: none; }
.vf-js .vf-mask { clip-path: inset(0 0 0 0); }
.vf-js .vf-mask.vf-reveal { opacity: 1; transform: none; clip-path: inset(0 0 0 100%); transition: clip-path 1s var(--vf-ease); }
.vf-js .vf-mask.vf-reveal.is-in { clip-path: inset(0 0 0 0); }

/* ---------- Captions and grids ---------- */

.vf-cap { padding-top: .8rem; }
.vf-cap p { margin: 0; }
.vf-cap__title { font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.vf-cap__meta { margin-top: .15rem !important; font: 400 11px/1.4 var(--art-meta-font); color: var(--art-muted); letter-spacing: .03em; }
.vf-cap__text { margin-top: .6rem !important; font-size: 14px; color: var(--art-muted); }
.vf-cap__link { display: inline-block; margin-top: .5rem; font: 400 11px var(--art-meta-font); letter-spacing: .06em; text-transform: uppercase; color: var(--art-text); }

.vf-films, .vf-works { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: clamp(28px, 4vw, 56px) clamp(18px, 2.4vw, 32px); margin: 0; padding: 0; list-style: none; }
.vf-works { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.vf-work { display: block; color: var(--art-text); text-decoration: none; }
.vf-work__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--art-surface); }
.vf-work__img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto !important; }
.vf-work__title { display: block; margin-top: .7rem; font-size: 14px; }
.vf-work__meta { display: block; font: 400 11px var(--art-meta-font); color: var(--art-muted); }
.vf-heading { margin: 0 0 1.4rem; font-size: clamp(22px, 2.4vw, 32px); }
.vf-section { margin-top: clamp(72px, 10vw, 140px); }
.vf-section__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.4rem; }
.vf-section__head .vf-heading { margin: 0; }
.vf-more { font: 400 11px var(--art-meta-font); letter-spacing: .08em; text-transform: uppercase; color: var(--art-text); text-decoration: none; }
.vf-more:hover { color: var(--art-link-hover); }
.vf-index__head { margin-bottom: clamp(32px, 5vw, 64px); }
.vf-index__count { font: 400 12px var(--art-meta-font); color: var(--art-muted); }
.vf-index__works { margin-top: clamp(72px, 10vw, 140px); }

/* ---------- The screening room ---------- */

.vf-screen { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 56px); background: var(--vf-screen-bg); color: var(--vf-screen-text); }
.vf-screen[hidden] { display: none; }
.vf-screen__stage { position: relative; width: min(100%, calc((100vh - 170px) * 16 / 9)); aspect-ratio: 16 / 9; background: #000; }
.vf-screen__stage iframe, .vf-screen__stage video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.vf-screen__caption { width: min(100%, calc((100vh - 170px) * 16 / 9)); padding-top: 1rem; transition: opacity .6s ease; }
.vf-screen__caption p { margin: 0; }
.vf-screen__title { font-size: 15px; }
.vf-screen__meta { font: 400 11px var(--art-meta-font); letter-spacing: .05em; opacity: .6; }
.vf-screen__link { display: inline-block; margin-top: .4rem; font: 400 11px var(--art-meta-font); letter-spacing: .06em; text-transform: uppercase; color: var(--vf-screen-text); }
.vf-screen__close { position: absolute; top: 18px; right: 22px; padding: .3rem .2rem; border: 0; background: none; color: var(--vf-screen-text); font: 400 12px var(--art-meta-font); letter-spacing: .08em; text-transform: uppercase; transition: opacity .6s ease; }
.vf-screen__close span { font-size: 20px; vertical-align: -2px; margin-left: .3rem; }
.vf-screen.is-idle .vf-screen__caption, .vf-screen.is-idle .vf-screen__close { opacity: .08; }
body.vf-screening { overflow: hidden; }

/* ---------- Single posts: films sit in their own frames ---------- */

.edith-post .wp-block-embed.is-type-video, .edith-post .wp-block-video { margin: 2.4rem 0; }
.edith-post .wp-block-embed__wrapper iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; }

@media (prefers-reduced-motion: reduce) {
    .vf-film__play, .vf-film__preview, .vf-js .vf-stagger > *, .vf-js .vf-settle img, .vs-side .art-header { transition: none !important; }
    .vf-js .vf-settle img { transform: none !important; }
    .vf-js .vf-reveal, .vf-js .vf-mask.vf-reveal { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
}

/* ---------- Featured film ---------- */

.vf-feature__frame { position: relative; overflow: hidden; background: #111; }
.vf-feature__frame .vf-loop { z-index: 1; pointer-events: none; }
.vf-feature__frame .vf-film { z-index: 2; background: transparent; }
.vf-feature__frame:has(.vf-loop) .vf-film__img { opacity: 0; }
.vf-feature__cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1.2rem; padding-top: .9rem; }
.vf-feature__cap p { margin: 0; }
.vf-feature__title { font-size: 14px; }
.vf-feature__meta { font: 400 11px var(--art-meta-font); color: var(--art-muted); }
.vf-feature__view { margin-left: auto; font: 400 11px var(--art-meta-font); letter-spacing: .08em; text-transform: uppercase; color: var(--art-text); text-decoration: none; }
.vf-feature__view:hover { color: var(--art-link-hover); }