/* Full-screen media viewer. Owns the whole glass while it is open, so nothing behind it
   can scroll or bounce. Dark by design: a photo viewer should never tint the picture. */

html.mtv-viewer-open,
html.mtv-viewer-open body { overflow: hidden !important; }

.mtv-viewer {
    position: fixed;
    inset: 0;
    z-index: 4300;
    background: #05080c;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility 0s linear .2s;
    overscroll-behavior: contain;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}
.mtv-viewer.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .2s ease, visibility 0s linear 0s;
}
.mtv-viewer.is-closing { opacity: 0; pointer-events: none; }

.mtv-viewer__stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: none;
}

.mtv-viewer__img {
    max-width: 100vw;
    max-height: 100vh;
    width: auto;
    height: auto;
    object-fit: contain;
    transform-origin: center center;
    will-change: transform;
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}
.mtv-viewer__img.is-settling { transition: transform .26s cubic-bezier(.22, .68, 0, 1); }

.mtv-viewer__top {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    z-index: 2;
    transition: opacity .18s ease;
}
.mtv-viewer__close,
.mtv-viewer__open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mtv-viewer__close svg,
.mtv-viewer__open svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.mtv-viewer__count {
    color: rgba(255, 255, 255, .82);
    font: 600 13px/1 var(--mtv-font-ui, inherit);
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
}

.mtv-viewer__bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    z-index: 2;
}
.mtv-viewer__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .32);
    border: 0;
    padding: 0;
    transition: background .18s ease, transform .18s ease;
}
.mtv-viewer__dot.is-on { background: #fff; transform: scale(1.25); }

.mtv-viewer__spinner {
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .22);
    border-top-color: #fff;
    animation: mtv-viewer-spin .8s linear infinite;
    opacity: 0;
    transition: opacity .2s ease;
}
.mtv-viewer__spinner.is-on { opacity: 1; }
@keyframes mtv-viewer-spin { to { transform: rotate(360deg); } }

.mtv-viewer__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 42px);
    margin: 0 auto;
    max-width: min(92vw, 640px);
    color: rgba(255, 255, 255, .78);
    font: 500 13px/1.5 var(--mtv-font-ui, inherit);
    text-align: center;
    padding: 0 18px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .mtv-viewer,
    .mtv-viewer__img.is-settling { transition: none; }
}