/* =========================================
   MEDIA EXPERIENCE
========================================= */

.media-experience {

    position: fixed;

    inset: 0;

    z-index: 100;

    display: flex;

    align-items: center;

    justify-content: center;

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

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.9s var(--ease-smooth),
        visibility 0.9s var(--ease-smooth);
}


/* -----------------------------------------
   Active state
----------------------------------------- */

.media-experience.is-open {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


/* -----------------------------------------
   Background
----------------------------------------- */

.media-backdrop {

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(30, 12, 30, 0.18),
            transparent 48%
        ),
        var(--media-overlay);

    opacity: 0;

    backdrop-filter: blur(2px);

    -webkit-backdrop-filter: blur(2px);

    transition:
        opacity 1.1s var(--ease-smooth);
}

.media-experience.is-open
.media-backdrop {

    opacity: 1;
}


/* -----------------------------------------
   Media shell
----------------------------------------- */

.media-shell {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: min(
        900px,
        calc(100vw - 40px)
    );

    max-height:
        calc(100vh - 80px);

    padding:
        clamp(10px, 2vw, 18px);

    border:
        1px solid var(--media-border);

    border-radius:
        var(--media-radius);

    background:
        var(--media-background);

    box-shadow:
        var(--media-shadow);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    transform:
        translateY(24px)
        scale(0.97);

    opacity: 0;

    transition:
        transform 1s var(--ease-smooth),
        opacity 0.8s var(--ease-smooth);
}

.media-experience.is-open
.media-shell {

    transform:
        translateY(0)
        scale(1);

    opacity: 1;
}


/* -----------------------------------------
   Media content
----------------------------------------- */

.media-content {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    max-height:
        calc(100vh - 150px);

    overflow: hidden;

    border-radius:
        calc(var(--media-radius) - 4px);

    background:
        rgba(0, 0, 0, 0.22);
}


/* -----------------------------------------
   Images
----------------------------------------- */

.media-content img {

    display: block;

    width: auto;

    max-width: 100%;

    max-height:
        calc(100vh - 150px);

    object-fit: contain;

    border-radius:
        calc(var(--media-radius) - 4px);

    opacity: 0;

    transform:
        scale(0.985);

    transition:
        opacity 0.8s var(--ease-smooth),
        transform 1s var(--ease-smooth);
}

.media-content img.is-loaded {

    opacity: 1;

    transform:
        scale(1);
}


/* -----------------------------------------
   Videos
----------------------------------------- */

.media-content video {

    display: block;

    width: 100%;

    max-height:
        calc(100vh - 150px);

    object-fit: contain;

    border-radius:
        calc(var(--media-radius) - 4px);

    background: #000;

    opacity: 0;

    transition:
        opacity 0.8s var(--ease-smooth);
}

.media-content video.is-loaded {

    opacity: 1;
}


/* -----------------------------------------
   Caption
----------------------------------------- */

.media-caption {

    width: 100%;

    min-height: 22px;

    padding:
        10px 8px 2px;

    font-family:
        var(--font-ui);

    font-size: 9px;

    line-height: 1.5;

    letter-spacing:
        0.07em;

    color:
        rgba(235, 239, 255, 0.48);

    text-align: center;

    opacity: 0;

    transition:
        opacity 0.8s ease 0.35s;
}

.media-experience.is-open
.media-caption.has-content {

    opacity: 1;
}


/* -----------------------------------------
   Close button
----------------------------------------- */

.media-close {

    position: absolute;

    z-index: 5;

    top: -42px;

    right: 0;

    width: 28px;

    height: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(180, 192, 215, 0.10);

    border-radius: 50%;

    background:
        rgba(3, 5, 13, 0.62);

    cursor: pointer;

    opacity: 0;

    transform:
        scale(0.8);

    transition:
        opacity 0.6s ease 0.3s,
        transform 0.6s var(--ease-smooth),
        background 0.3s ease,
        border-color 0.3s ease;
}

.media-experience.is-open
.media-close {

    opacity: 1;

    transform:
        scale(1);
}

.media-close:hover {

    background:
        rgba(180, 192, 215, 0.06);

    border-color:
        rgba(180, 192, 215, 0.20);
}


/* X icon */

.media-close span {

    position: absolute;

    width: 10px;

    height: 1px;

    background:
        rgba(235, 239, 255, 0.68);

    transition:
        background 0.3s ease;
}

.media-close span:first-child {

    transform:
        rotate(45deg);
}

.media-close span:last-child {

    transform:
        rotate(-45deg);
}

.media-close:hover span {

    background:
        rgba(255, 184, 210, 0.9);
}


/* -----------------------------------------
   Opening flash
----------------------------------------- */

.media-experience::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        radial-gradient(
            circle at center,             rgba(180, 192, 215, 0.04),
            transparent 35%
        );

    opacity: 0;

    transform:
        scale(0.7);

}

.media-experience.is-opening::after {

    animation:
        mediaOpeningFlash 1.2s
        var(--ease-smooth);
}

@keyframes mediaOpeningFlash {

    0% {
        opacity: 0.9;
        transform: scale(0.7);
    }

    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}


/* -----------------------------------------
   Responsive
----------------------------------------- */

@media (max-width: 700px) {

    .media-experience {

        padding:
            18px;
    }

    .media-shell {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: min(
        900px,
        calc(100vw - 40px)
    );

    max-height:
        calc(100vh - 80px);

    padding:
        clamp(10px, 2vw, 18px);

    border:
        1px solid
        rgba(180, 192, 215, 0.08);

    border-radius:
        var(--media-radius);

    background:
        rgba(4, 6, 15, 0.88);

    box-shadow:
        0 30px 100px
        rgba(0, 0, 0, 0.55);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    /*
     * Initial state
     *
     * The memory begins almost invisible,
     * slightly smaller and slightly lower.
     */

    opacity: 0;

    transform:
        translateY(34px)
        scale(0.94);

    filter:
        blur(8px);

    transition:
        opacity 1.25s ease,
        transform 1.35s var(--ease-smooth),
        filter 1.35s ease,
        box-shadow 1.5s ease,
        border-color 1.5s ease;
}


/*
 * The memory slowly settles into place.
 */

.media-experience.is-open
.media-shell {

    opacity: 1;

    transform:
        translateY(0)
        scale(1);

    filter:
        blur(0);

    border-color:
        rgba(180, 192, 215, 0.12);

    box-shadow:
        0 35px 110px
        rgba(0, 0, 0, 0.62),
        0 0 70px
        rgba(180, 192, 215, 0.03);
}

        /* =========================================
   SOFT MEMORY REVEAL
========================================= */

.media-shell::before {

    content: "";

    position: absolute;

    inset: -35px;

    z-index: -1;

    border-radius:
        calc(var(--media-radius) + 25px);

    background:
        radial-gradient(
            ellipse at center,             rgba(180, 192, 215, 0.06),
            rgba(255, 64, 93, 0.025) 35%,
            transparent 70%
        );

    opacity: 0;

    transform:
        scale(0.82);

    filter:
        blur(22px);

    pointer-events: none;

    transition:
        opacity 1.5s ease,
        transform 1.6s var(--ease-smooth);
}


.media-experience.is-open
.media-shell::before {

    opacity: 1;

    transform:
        scale(1);
}

        .media-placeholder {

    opacity: 0;

    transform:
        translateY(8px);

    transition:
        opacity 0.9s ease 0.45s,
        transform 1s var(--ease-smooth) 0.45s;
}


.media-experience.is-open
.media-placeholder {

    opacity: 1;

    transform:
        translateY(0);
}

    .media-content {

        max-height:
            calc(100vh - 100px);

        border-radius: 8px;
    }

    .media-content img,
    .media-content video {

        max-height:
            calc(100vh - 110px);
    }

    .media-caption {

        font-size: 8px;

        padding:
            8px 4px 2px;
    }

    .media-close {

        top: -38px;

        right: 0;
    }
}