/* ─────────────────────────────────────────────────────────────────────────
   Vimeo background videos: dissolve in, don't pop in.

   Every Vimeo background embed on the site sits over a placeholder — the
   section's background-image on the heroes, a black frame on the event rows.
   The player painted its first frame the instant it was ready, so the swap
   was a hard cut. On a phone the placeholder's crop and the video's crop
   almost never line up (the still is background-size:cover against the
   section; the iframe is cover-fitted against the same box at the *video's*
   ratio), so that cut showed up as the picture jumping sideways for a frame.
   The event-page videos had a second source of movement on top: their iframes
   are sized by JS at 120/400/1200ms, and any of those re-fits that landed
   after the first frame was a visible rescale.

   Holding the iframe at opacity 0 until the player is genuinely running, then
   dissolving it over the placeholder, turns the cut into a fade and hides the
   re-fits while it is still invisible.

   Hidden here in CSS rather than by script so the iframe can never paint a
   frame in the gap before video-fade.js runs. The 3s-delayed keyframe is the
   no-JS safety net: with the script blocked or broken the video still appears
   on its own. video-fade.js adds .is-cfc-vplaying the moment the player
   reports playback, which cancels that animation and fades in early.

   Homepage embeds (.cfc-home-media__embed) are deliberately absent — home.css
   already owns their opacity, and video-fade.js drives them through home's
   existing .is-playing class instead.
   ───────────────────────────────────────────────────────────────────────── */

.cfc-about-hero__video iframe,
.cfc-locations-hero__video iframe,
.cfc-event-row__video iframe,
.cfc-event-enquiry__video iframe,
.cfc-parallax__video-embed iframe,
.cfc-holding__video iframe {
    opacity: 0;
    animation: cfc-vfade-in 0.7s ease 3s forwards;
}

.cfc-about-hero__video iframe.is-cfc-vplaying,
.cfc-locations-hero__video iframe.is-cfc-vplaying,
.cfc-event-row__video iframe.is-cfc-vplaying,
.cfc-event-enquiry__video iframe.is-cfc-vplaying,
.cfc-parallax__video-embed iframe.is-cfc-vplaying,
.cfc-holding__video iframe.is-cfc-vplaying {
    /* animation:none hands control back to the transition — without it the
       still-pending keyframe would win and snap the iframe to opacity 1. */
    animation: none;
    opacity: 1;
    transition: opacity 0.7s ease;
}

@keyframes cfc-vfade-in {
    to { opacity: 1; }
}

/* ── Separate desktop / mobile background videos ──────────────────────────
   A hero with two clips renders both players with NO src and lets the picker
   in class-charlies-hero-video.php give one to whichever media query matches,
   so only that clip is ever downloaded.

   Until that happens the element must not be in the layout: an <iframe> with
   no src is about:blank, which paints as a white box over the hero's poster
   image. Keyed off the src rather than a device class so it works at whatever
   breakpoint the hero passed in — and so a browser with scripting off keeps
   both hidden and falls through to the <noscript> copy instead.
   ───────────────────────────────────────────────────────────────────────── */
[data-cfc-vsrc]:not([src]) {
    display: none !important;
}

/* A dissolve is motion. Reduce it to an instant swap rather than removing the
   reveal, which would leave the video permanently hidden. */
@media (prefers-reduced-motion: reduce) {
    .cfc-about-hero__video iframe,
    .cfc-locations-hero__video iframe,
    .cfc-event-row__video iframe,
    .cfc-event-enquiry__video iframe,
    .cfc-parallax__video-embed iframe,
    .cfc-holding__video iframe {
        animation-duration: 0.01ms;
    }

    .cfc-about-hero__video iframe.is-cfc-vplaying,
    .cfc-locations-hero__video iframe.is-cfc-vplaying,
    .cfc-event-row__video iframe.is-cfc-vplaying,
    .cfc-event-enquiry__video iframe.is-cfc-vplaying,
    .cfc-parallax__video-embed iframe.is-cfc-vplaying,
    .cfc-holding__video iframe.is-cfc-vplaying {
        transition-duration: 0.01ms;
    }
}