/* ==========================================================================
   FILM-MODAL.CSS
   Project: Luxury Destination Wedding Videographer
   Author: Cyber Master Studio
   Version: 1.0
   Description: YouTube wedding film modal
   ========================================================================== */


/* ==========================================================================
   Modal
   ========================================================================== */

.film-modal {
    position: fixed;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: clamp(20px, 5vw, 80px);

    background: rgba(15, 15, 15, 0.96);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity var(--cms-transition-normal),
        visibility var(--cms-transition-normal);

    z-index: 9999;
}


/* ==========================================================================
   Open State
   ========================================================================== */

.film-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* ==========================================================================
   Backdrop
   ========================================================================== */

.film-modal__backdrop {
    position: absolute;
    inset: 0;

    cursor: pointer;
}


/* ==========================================================================
   Dialog
   ========================================================================== */

.film-modal__dialog {
    position: relative;

    width: min(1000px, 90vw);
}


/* ==========================================================================
   Video
   ========================================================================== */

.film-modal__video {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    background: #000000;

    overflow: hidden;
}


/* ==========================================================================
   Title
   ========================================================================== */

.film-modal__title {
    position: absolute;

    left: 0;
    bottom: calc(100% + 20px);

    margin: 0;

    font-family: var(--cms-font-serif);
    font-size: 1.5rem;
    font-weight: var(--cms-font-regular);

    color: #FFFFFF;
}


/* ==========================================================================
   Close Button
   ========================================================================== */

.film-modal__close {
    position: absolute;

    top: -56px;
    right: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    padding: 0;

    border: 0;

    background: transparent;

    color: #FFFFFF;

    cursor: pointer;

    z-index: 2;
}


/* ==========================================================================
   Close Icon
   ========================================================================== */

.film-modal__close span {
    position: absolute;

    width: 22px;
    height: 1px;

    background-color: currentColor;

    transition:
        transform var(--cms-transition-fast);
}

.film-modal__close span:first-child {
    transform: rotate(45deg);
}

.film-modal__close span:last-child {
    transform: rotate(-45deg);
}

.film-modal__close:hover span:first-child {
    transform: rotate(0);
}

.film-modal__close:hover span:last-child {
    transform: rotate(0);
}


/* ==========================================================================
   Video
   ========================================================================== */

.film-modal__video {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    background: #000000;

    overflow: hidden;
}


/* ==========================================================================
   YouTube iframe
   ========================================================================== */

.film-modal__video iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}


/* ==========================================================================
   Focus
   ========================================================================== */

.film-modal__close:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 6px;
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 700px) {

    .film-modal {
        padding: 20px;
    }

    .film-modal__title {
        position: static;

        margin-bottom: 20px;

        font-size: 1.25rem;
    }

    .film-modal__close {
        top: -52px;
    }

}


/* ==========================================================================
   Reduced Motion
   ========================================================================== */

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

    .film-modal,
    .film-modal__close span {
        transition: none;
    }

}


/* ==========================================================================
   Prevent Page Scroll
   ========================================================================== */

body.film-modal-is-open {
    overflow: hidden;
}

/* ==========================================================================
   Close Button
   ========================================================================== */

.film-modal__close {
    position: absolute;

    top: 20px;
    right: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    padding: 0;

    border: 0;

    background: rgba(0, 0, 0, 0.35);

    color: #FFFFFF;

    cursor: pointer;

    z-index: 10;

    transition:
        background-color var(--cms-transition-fast),
        opacity var(--cms-transition-fast);
}


/* ==========================================================================
   Close Icon
   ========================================================================== */

.film-modal__close span {
    position: absolute;

    width: 22px;
    height: 1px;

    background-color: currentColor;

    pointer-events: none;
}


.film-modal__close span:first-child {
    transform: rotate(45deg);
}


.film-modal__close span:last-child {
    transform: rotate(-45deg);
}


/* ==========================================================================
   Hover
   ========================================================================== */

.film-modal__close:hover {
    background: rgba(0, 0, 0, 0.65);
}


/* ==========================================================================
   Focus
   ========================================================================== */

.film-modal__close:focus-visible {
    outline: 1px solid #FFFFFF;
    outline-offset: 4px;
}


/* ==========================================================================
   Close Hover
   ========================================================================== */

.film-modal__close:hover span:first-child {
    transform: rotate(45deg) scaleX(0.8);
}


.film-modal__close:hover span:last-child {
    transform: rotate(-45deg) scaleX(0.8);
}


/* ==========================================================================
   Focus
   ========================================================================== */

.film-modal__close:focus-visible {
    outline: 1px solid #FFFFFF;
    outline-offset: 6px;
}