/**
 * AF Video — front styles
 *
 * Layout contract shared by every mode: `.afvideo` is the block (it may carry a
 * caption), `.afvideo__frame` is the visual box. Inside the frame the poster
 * sits in the flow and gives the box its size (so there is no layout shift),
 * and the video is laid over it and fades in once it can play.
 *
 * The modal is deliberately self-contained (no theme component involved), which
 * is why it ships its own backdrop, dialog and scroll lock here.
 *
 * @author At first Sarl <team@atfirst.io>
 */

.afvideo {
    display: block;
    --afvideo-play-size: clamp(48px, 12%, 68px);
    --afvideo-modal-z: 1090;
}

/* --afvideo-ratio is written inline by the service when the shortcode asks for
   a ratio (ratio="16/9" / data-ratio="606/866"). Doing it in CSS rather than in
   JS means the box is right on first paint — no reflow when the metadata lands.
   The dialog is deliberately left out: a portrait crop for the thumbnail must
   not crop the video once it is played full size. */
.afvideo__frame {
    position: relative;
    display: block;
    overflow: hidden;
    line-height: 0;
    aspect-ratio: var(--afvideo-ratio, auto);
}

.afvideo__poster,
.afvideo__poster img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.afvideo__poster {
    transition: opacity .4s ease;
}

.afvideo__frame .afvideo__media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .4s ease;
}

/* With a poster present, the video overlays it. */
.afvideo:not(.afvideo--noposter) .afvideo__frame .afvideo__media {
    position: absolute;
    top: 0;
    left: 0;
}

.afvideo.is-ready .afvideo__frame .afvideo__media {
    opacity: 1;
}

/* Keep the poster underneath: it covers the gap if the video is ever removed
   from the compositor, and it is what remains visible when autoplay is denied. */
.afvideo.is-ready:not(.is-autoplay-blocked) .afvideo__poster {
    opacity: 0;
}

.afvideo.is-autoplay-blocked .afvideo__frame .afvideo__media {
    opacity: 0;
}

/* No poster: the video is the flow element. */
.afvideo--noposter .afvideo__frame .afvideo__media {
    position: relative;
    opacity: 1;
}

/* ---------------------------------------------------------------- player --- */

/* Idle player: the poster is what you see, and the (already present) native
   controls must neither show through nor swallow the click meant for play. */
.afvideo--player[data-afvideo-state="idle"] .afvideo__frame .afvideo__media {
    opacity: 0;
    pointer-events: none;
}

.afvideo--player[data-afvideo-state="idle"] .afvideo__frame {
    cursor: pointer;
}

.afvideo--player[data-afvideo-state="playing"] .afvideo__play {
    opacity: 0;
    visibility: hidden;
}

.afvideo__play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    line-height: 0;
    cursor: pointer;
    transition: opacity .2s ease, transform .2s ease;
}

.afvideo__play--static {
    pointer-events: none;
}

.afvideo__play-icon {
    width: var(--afvideo-play-size);
    height: auto;
}

.afvideo__play-bg {
    fill: rgba(0, 0, 0, .55);
    transition: fill .2s ease;
}

.afvideo__play-arrow {
    fill: #fff;
}

.afvideo__play:hover .afvideo__play-bg,
.afvideo__trigger:hover .afvideo__play-bg,
.afvideo__trigger:focus-visible .afvideo__play-bg {
    fill: rgba(0, 0, 0, .85);
}

.afvideo__play:hover,
.afvideo__trigger:hover .afvideo__play {
    transform: translate(-50%, -50%) scale(1.06);
}

.afvideo__play:focus-visible,
.afvideo__trigger:focus-visible,
.afvideo__sound:focus-visible,
.afvideo-modal__close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* ----------------------------------------------------------------- modal --- */

/* The whole poster is the button. */
.afvideo__trigger {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-align: center;
    cursor: pointer;
}

.afvideo__trigger-label {
    display: block;
    margin-top: .5rem;
    line-height: normal;
}

.afvideo__caption {
    margin: .5rem 0 0;
    font-size: .875em;
    line-height: normal;
}

.afvideo-modal[hidden] {
    display: none;
}

.afvideo-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--afvideo-modal-z, 1090);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.afvideo-modal__backdrop {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .82);
    cursor: pointer;
}

.afvideo-modal__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1100px;
    max-height: 100%;
    overflow: hidden;
    border-radius: .5rem;
    background: #000;
    color: #fff;
    animation: afvideo-modal-in .2s ease;
}

.afvideo-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1rem;
}

.afvideo-modal__title {
    margin: 0;
    font-size: 1rem;
    line-height: 1.3;
}

.afvideo-modal__close {
    margin-left: auto;
    padding: .25rem;
    border: 0;
    background: none;
    color: inherit;
    line-height: 0;
    cursor: pointer;
}

.afvideo-modal__body {
    line-height: 0;
}

/* In the dialog the video IS the content: no poster underneath, so it is shown
   whole (contain) rather than cropped, and never hidden behind an opacity gate. */
.afvideo-modal__body .afvideo__media {
    display: block;
    width: 100%;
    height: auto;
    max-height: calc(100vh - 8rem);
    object-fit: contain;
    opacity: 1;
}

/* Scroll lock while a dialog is open. */
html.afvideo-modal-open,
html.afvideo-modal-open body {
    overflow: hidden;
}

@keyframes afvideo-modal-in {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ------------------------------------------------------------ sound toggle - */

.afvideo__sound {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    line-height: 0;
    cursor: pointer;
    transition: background .2s ease;
}

.afvideo__sound:hover {
    background: rgba(0, 0, 0, .85);
}

.afvideo__sound-icon {
    fill: currentColor;
}

.afvideo__sound-icon--off {
    display: none;
}

.afvideo__sound[aria-pressed="true"] .afvideo__sound-icon--on {
    display: none;
}

.afvideo__sound[aria-pressed="true"] .afvideo__sound-icon--off {
    display: block;
}

@media (prefers-reduced-motion: reduce) {

    .afvideo__frame .afvideo__media,
    .afvideo__poster,
    .afvideo__play,
    .afvideo__sound {
        transition: none;
    }

    .afvideo-modal__dialog {
        animation: none;
    }
}