/*
 * Broadcast-network video intro. Tablet/desktop only (see the max-width
 * backstop below AND the JS gate that removes the element outright on
 * mobile before it ever shows).
 *
 * Flow: black screen with a single "Ready to Go Live?" button (required -
 * browsers block autoplay audio without a real user gesture) -> click plays
 * the 6s video fullscreen with sound -> fades away into the real site.
 *
 * Hidden by default (.bc-intro--show makes it visible) rather than removed
 * from the DOM, so the nav logo can replay it on demand even after the
 * cookie-gated first view has already come and gone.
 */
.bc-intro {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 35%, rgba(0,0,0,.35) 65%, rgba(0,0,0,.75) 100%),
        url('/assets/img/intro-background.webp') center / cover no-repeat;
    background-color: #000;
    opacity: 1;
    transition: opacity .7s ease;
}
.bc-intro--show { display: block; }

@media (max-width: 767px) {
    .bc-intro { display: none !important; }
}

.bc-intro__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .5s ease;
}
.bc-intro--playing .bc-intro__video { opacity: 1; }

.bc-intro__gate {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    /* Column, so the Skip button stacks UNDER the play button rather than
       beside it. The gate held a single child until now, so this direction was
       never expressed either way. */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity .35s ease;
}
.bc-intro--playing .bc-intro__gate {
    opacity: 0;
    pointer-events: none;
}

.bc-intro__playbtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .9rem;
    background: none;
    border: none;
    cursor: pointer;
    color: #fff;
    padding: 1rem;
}
.bc-intro__playicon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    border: 2px solid #c9a24a;
    background: rgba(201,162,74,.12);
    color: #c9a24a;
    font-size: 1.9rem;
    line-height: 1;
    padding-left: 4px; /* optically center the triangle */
    animation: bcPulse 2.2s ease-in-out infinite;
}
.bc-intro__playbtn:hover .bc-intro__playicon,
.bc-intro__playbtn:focus-visible .bc-intro__playicon {
    background: rgba(201,162,74,.22);
    transform: scale(1.05);
}
.bc-intro__playeyebrow {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #c9a24a;
    margin-top: .3rem;
}
.bc-intro__playlabel {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .01em;
}
.bc-intro__playsub {
    font-size: .85rem;
    color: rgba(255,255,255,.6);
    letter-spacing: .02em;
}

.bc-intro__legal {
    position: absolute;
    left: 1.8rem;
    right: 1.8rem;
    bottom: .7rem;
    z-index: 2;
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    font-size: .68rem;
    line-height: 1.5;
    color: rgba(255,255,255,.35);
    letter-spacing: .01em;
}
.bc-intro--playing .bc-intro__legal { opacity: 0; transition: opacity .3s ease; }

/* Sits in the normal flow under the play button now, not pinned to the corner.
   The gate is a centred column, so it centres itself with no positioning at
   all - and it can no longer drift over the legal line on a short screen, which
   the absolute version did. */
.bc-intro__skip {
    display: block;
    margin: 1.15rem auto 0;
    z-index: 2;
    background: none;
    border: none;
    color: rgba(255,255,255,.55);
    font-size: .85rem;
    letter-spacing: .03em;
    cursor: pointer;
    padding: .5em .8em;
    transition: opacity .35s ease, color .2s ease;
}
.bc-intro__skip:hover, .bc-intro__skip:focus-visible { color: #fff; }
.bc-intro--playing .bc-intro__skip { opacity: 0; pointer-events: none; }

.bc-intro--exit { opacity: 0; pointer-events: none; }

@keyframes bcPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(201,162,74,.45); }
    50%      { box-shadow: 0 0 0 14px rgba(201,162,74,0); }
}

/* Lock page scroll while the intro is up */
html.bc-intro-lock, html.bc-intro-lock body { overflow: hidden; height: 100%; }