/*
Trailer section — pixel-matched to a supplied reference screenshot, so it
deliberately breaks from the site's normal .bsw-section/.bsw-container
rhythm: content-height (not 100vh — the reference isn't full-screen, it's
a padded section with a self-contained video card), full-bleed background,
own meta row of inline SVG icons (no icon font loaded anywhere on this
site, so these are hand-drawn to keep it dependency-free).

Two click targets (data-trailer-trigger, wired in assets/js/trailer.js)
both play the same trailer: the big button on the card, and the small
"Play Trailer" caption underneath it. Playing swaps only the CARD's
poster+button for a YouTube iframe — the heading/meta text above the card
is normal page content here, not a full-bleed overlay like the hero, so it
doesn't need to hide when the video starts.
*/

.bsw-trailer-section{position:relative;width:100%;padding:100px 24px 90px;background-size:cover;background-position:center;text-align:center}
.bsw-trailer-section::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.5)}

.bsw-trailer-header{position:relative;z-index:2;max-width:700px;margin:0 auto}
.bsw-trailer-header .bsw-h2{position:relative;margin-bottom:0}
.bsw-trailer-divider{position:absolute;left:50%;top:-97%;transform:translateX(-50%);width:clamp(240px,34vw,440px);height:auto}
.bsw-trailer-header .bsw-lead{margin-top:24px;margin-bottom:26px}

.bsw-trailer-meta{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;font-family:var(--bsw-font-support);font-size:12px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:var(--bsw-text)}
.bsw-trailer-meta span{display:inline-flex;align-items:center;gap:7px}
.bsw-trailer-meta svg{width:15px;height:15px;flex-shrink:0}
.bsw-trailer-meta-sep{color:var(--bsw-red);opacity:.7}

.bsw-trailer-card{position:relative;z-index:2;max-width:980px;margin:46px auto 0;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid rgba(255,130,70,.45);box-shadow:0 0 60px rgba(205,7,4,.35),0 20px 50px -20px rgba(0,0,0,.8)}
.bsw-trailer-card-media{position:absolute;inset:0;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center}

.bsw-trailer-play-btn{position:relative;z-index:1;width:92px;height:92px;border-radius:50%;background:var(--bsw-red);border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 28px rgba(0,0,0,.55);transition:transform .2s}
.bsw-trailer-play-btn:hover{transform:scale(1.08)}
.bsw-trailer-play-icon{display:block;width:0;height:0;border-style:solid;border-width:14px 0 14px 24px;border-color:transparent transparent transparent #ffffff;margin-left:6px}

.bsw-trailer-video-wrap{position:absolute;inset:0;z-index:3;display:none}
.bsw-trailer-video-wrap::after{content:"";position:absolute;inset:0;z-index:-1;background-image:url('/wp-content/uploads/2026/08/Blood-Star-Movie-Website-Header.webp');background-size:cover;background-position:center}
.bsw-trailer-video-wrap iframe{position:relative;z-index:1;width:100%;height:100%;border:0;display:block}
.bsw-trailer-card.is-playing .bsw-trailer-card-media{display:none}
.bsw-trailer-card.is-playing .bsw-trailer-video-wrap{display:block}

.bsw-trailer-caption-btn{position:relative;z-index:2;margin:22px auto 0;display:flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;color:var(--bsw-text);font-family:var(--bsw-font-support);font-size:12px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;transition:color .15s}
.bsw-trailer-caption-btn svg{width:16px;height:16px}
.bsw-trailer-caption-btn:hover{color:var(--bsw-red)}

@media (max-width:768px){
	.bsw-trailer-section{padding:80px 20px 60px}
	.bsw-trailer-meta{gap:8px;font-size:11px}
	.bsw-trailer-play-btn{width:72px;height:72px}
	.bsw-trailer-play-icon{border-width:11px 0 11px 18px}
	.bsw-trailer-card{margin-top:34px}
	.bsw-trailer-divider{top:-63%}
}