/*
=====================================================
AETHER PREVIEW
=====================================================

Preview owns its layout and local media presentation.
It intentionally shares only Aether Chrome's global
bands and the portrait renderer with the other modes.
=====================================================
*/

.aether-preview-view {
    z-index: 120;
    display: none;
    overflow: hidden;
    color: #000;
    font-family: var(--aether-font-interface);
    outline: none;
}

.aether-preview-view.is-open {
    display: block !important;
    visibility: visible;
}

.aether-preview-dismiss-surface {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.aether-preview-shell {
    --aether-preview-shell-x:
        clamp(24px, 4vw, 70px);

    z-index: 1;
    inset: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: clamp(8px, 1.2vh, 14px);
}

.aether-preview-view.is-open .aether-preview-stage,
.aether-preview-view.is-open .aether-preview-media,
.aether-preview-view.is-open .aether-preview-portrait,
.aether-preview-view.is-open .aether-preview-visual,
.aether-preview-view.is-open .aether-preview-header,
.aether-preview-view.is-open .aether-preview-footer {
    opacity: 1;
    visibility: visible;
}

.aether-preview-view.is-preview-modus .aether-entity-header-preview {
    display: block;
}


.aether-preview-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: end;
    height: var(--aether-perception-band-height);
    min-height: var(--aether-perception-band-height);
    box-sizing: border-box;
    padding-bottom: 14px;
}

.aether-preview-header-left,
.aether-preview-header-right {
    min-width: 0;
}

.aether-preview-header-right {
    text-align: right;
}

.aether-preview-header-content {
    transition:
        transform var(--aether-motion-preview-media-transform-duration) cubic-bezier(0.19, 1, 0.22, 1),
        opacity var(--aether-motion-preview-media-opacity-duration) ease;
}

.aether-preview-header-content.is-media-shifting {
    transform: translate3d(-14px, 0, 0);
    opacity: 0.04;
}

.aether-preview-title {
    font-size: 12px;
    letter-spacing: 0.22em;
}

.aether-preview-detail,
.aether-preview-position,
.aether-preview-status {
    margin-top: 5px;
    font-size: 9px;
    letter-spacing: 0.16em;
    opacity: 0.55;
}

.aether-preview-stage {
    position: absolute;
    z-index: 8;
    inset: 0;
    min-width: 0;
    min-height: 0;
}

.aether-preview-media,
.aether-preview-portrait {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

.aether-preview-media {
    position: relative;
}

.aether-preview-portrait {
    position: relative;
    z-index: 10;
    overflow: hidden;
    isolation: isolate;
    color: var(--aether-lens-ink);
    background: var(--aether-lens-fill);
    backdrop-filter: var(--aether-lens-filter-soft);
    -webkit-backdrop-filter: var(--aether-lens-filter-soft);
    transition: opacity var(--aether-motion-preview-portrait-duration) ease;
    will-change: opacity;
}

.aether-preview-image-frame {
    position: absolute;
    inset: clamp(8px, 1.5vh, 14px) 0;
    z-index: 1;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.aether-preview-view.is-open.is-preview-surface-pending .aether-preview-portrait {
    opacity: 0;
}

.aether-preview-view.is-adopting-portrait .aether-preview-portrait {
    opacity: 0;
}

.aether-preview-visual {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    transition:
        opacity var(--aether-motion-preview-media-opacity-duration) ease,
        transform var(--aether-motion-preview-media-transform-duration) cubic-bezier(0.19, 1, 0.22, 1);
    will-change: opacity, transform;
}

.aether-preview-visual .aether-portrait-image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    opacity: 1;
    filter: saturate(0.88) contrast(1.04);
}

.aether-preview-view.is-open.is-preview-visual-pending .aether-preview-visual {
    opacity: 0;
}

.aether-preview-visual .aether-portrait-sigil {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(56px, 13vw, 160px);
    color: #000;
}

.aether-preview-media.is-media-shifting .aether-preview-visual {
    opacity: 0.04;
    transform: translateY(4px) scale(0.994);
}

.aether-preview-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--aether-perception-band-height);
    min-height: var(--aether-perception-band-height);
    padding-top: 0;
    font-size: 9px;
    letter-spacing: 0.14em;
}

.aether-preview-footer-left,
.aether-preview-footer-right {
    display: flex;
    gap: 24px;
    opacity: 0.58;
}

.aether-preview-control-key {
    color: #000;
}

@media (max-width: 820px) {
    .aether-preview-shell {
        --aether-preview-shell-x:
            24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .aether-preview-view,
    .aether-preview-shell,
    .aether-preview-header-content,
    .aether-preview-visual {
        transition: none;
    }
}