/* Test-only styles. The current homepage and shared styling are unchanged. */
.video-test-page{position:relative}
.video-test-page header{position:absolute;top:0;left:0;width:100%;z-index:3;background:linear-gradient(#20211ff0,transparent)}
.video-hero{position:relative;isolation:isolate;display:grid;place-items:center;min-height:600px;min-height:85svh;overflow:hidden;background:#20211f;padding:160px 36px 100px}
.hero-poster,.hero-video,.hero-shade{position:absolute;inset:0;width:100%;height:100%}
.hero-poster,.hero-video{object-fit:cover;object-position:50% 50%;pointer-events:none}
.hero-video{opacity:0;transition:none}
.video-hero.is-playing .hero-video{opacity:1}
.hero-shade{background:linear-gradient(180deg,rgba(16,17,16,.35),rgba(16,17,16,.48) 50%,#20211f);pointer-events:none}
.hero-content{position:relative;z-index:1;width:min(830px,100%);text-align:center}
.hero-content .logo-heading{width:100%}
.hero-tagline{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(25px,3vw,38px);font-style:italic;font-weight:400;line-height:1.35;color:#c3ad82;margin:32px auto 0;max-width:28ch;text-wrap:balance}
.hero-motion{position:absolute;z-index:2;right:32px;bottom:24px;border:1px solid #ffffff55;background:#20211f80;color:#f0eee7;padding:10px 14px;font:inherit;font-size:12px;cursor:pointer}
.hero-motion:focus-visible{outline:2px solid #c3ad82;outline-offset:4px}
.hero-motion[hidden]{display:none}
@media(max-width:900px){.video-hero{min-height:76svh;padding-inline:32px}.hero-content{max-width:700px}}
@media(max-width:650px){.video-hero{min-height:72svh;padding:132px 24px 90px}.hero-tagline{margin-top:26px}.hero-motion{right:24px;bottom:20px}}
@media(prefers-reduced-motion:reduce){.hero-video{transition:none}}

.hero-start{position:absolute;z-index:2;bottom:24px;left:50%;transform:translateX(-50%);background:#20211fcc;color:#f0eee7;border:1px solid #ffffff66;padding:12px 20px;font:inherit;cursor:pointer}
.hero-start[hidden]{display:none}
.hero-start:focus-visible{outline:2px solid #c3ad82;outline-offset:4px}

/* Two players share the existing hero; only the current and next clip load. */
.hero-video { z-index: 0; transition: opacity 220ms ease; }
.hero-video.is-visible { opacity: 1; }
.hero-shade { z-index: 2; }
.hero-content, .hero-start { z-index: 3; }
@media (prefers-reduced-motion: reduce) { .hero-video { transition: none; } }