/*
=====================================================
AETHER CORE UI
=====================================================

Shared Aether visual primitives.

Mode files own layout and contextual choreography:
- aetherOverlay.css
- aetherMenu.css
- entityView.css

This file owns shared tokens, reusable UI surfaces, and
the global motion grammar.
=====================================================
*/


@font-face {

    font-family:
        "Aether Dot Gothic";

    src:
        url("../../assets/fonts/DotGothic16-Regular.ttf")
        format("truetype");

    font-style:
        normal;

    font-weight:
        400;

    font-display:
        swap;

}


:root {

    --aether-font-interface:
        "Aether Dot Gothic",
        sans-serif;

    --aether-perception-band-height:
        clamp(48px, 5.4vh, 62px);

    --aether-perception-band-bleed-before:
        28px;

    --aether-perception-band-bleed-after:
        30px;

    --aether-perception-panel-height:
        calc(
            var(--aether-perception-band-height) +
            var(--aether-perception-band-bleed-before) +
            var(--aether-perception-band-bleed-after)
        );

    --aether-lens-filter:
        invert(0.72)
        contrast(2.00)
        saturate(1.62)
        blur(2px);

    --aether-lens-filter-soft:
        invert(0.68)
        contrast(1.65)
        saturate(1.42)
        blur(3px);

    --aether-lens-fill:
        rgba(255, 255, 255, 0.012);

    --aether-lens-fill-strong:
        rgba(255, 255, 255, 0.085);

    --aether-lens-ink:
        rgba(2, 3, 6, 0.90);

    --aether-lens-ink-muted:
        rgba(2, 3, 6, 0.64);

    --aether-lens-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.20),
        inset 0 -10px 18px
        rgba(0, 0, 0, 0.16),
        0 12px 28px
        rgba(0, 0, 0, 0.08);

    --aether-motion-interface-distance: 64px;
    --aether-motion-layer-distance: 52px;
    --aether-motion-open-interface-duration: 340ms;
    --aether-motion-close-interface-duration: 230ms;
    --aether-motion-close-atmosphere-duration: 230ms;
    --aether-motion-layer-exit-duration: 180ms;
    --aether-motion-layer-enter-duration: 240ms;
    --aether-motion-section-swap-duration: 85ms;
    --aether-motion-index-stagger-duration: 140ms;
    --aether-motion-surface-settle-duration: 180ms;
    --aether-motion-surface-background-filter-duration: 180ms;
    --aether-motion-portrait-background-duration: 280ms;
    --aether-motion-portrait-visual-opacity-duration: 90ms;
    --aether-motion-portrait-visual-transform-duration: 160ms;
    --aether-motion-info-background-duration: 360ms;
    --aether-motion-interface-enter-transform-duration: 300ms;
    --aether-motion-interface-enter-opacity-duration: 260ms;
    --aether-motion-overlay-withdraw-opacity-duration: 230ms;
    --aether-motion-overlay-withdraw-transform-duration: 280ms;
    --aether-motion-overlay-withdraw-horizontal-distance: 52px;
    --aether-motion-overlay-withdraw-vertical-distance: 40px;
    --aether-motion-content-enter-opacity-duration: 220ms;
    --aether-motion-content-enter-transform-duration: 260ms;
    --aether-motion-portrait-enter-transform-duration: 280ms;
    --aether-motion-control-duration: 180ms;
    --aether-motion-control-transform-duration: 160ms;
    --aether-motion-scroll-indicator-duration: 140ms;
    --aether-motion-content-swap-duration: 150ms;
    --aether-motion-snapshot-duration: 110ms;
    --aether-motion-surface-interaction-duration: 180ms;
    --aether-motion-surface-layout-duration: 280ms;
    --aether-motion-window-transfer-duration: 560ms;
    --aether-motion-window-transfer-opacity-duration: 180ms;
    --aether-motion-preview-portrait-duration: 180ms;
    --aether-motion-preview-media-swap-duration: 70ms;
    --aether-motion-preview-media-settle-duration: 150ms;
    --aether-motion-preview-media-transform-duration: 170ms;
    --aether-motion-preview-media-opacity-duration: 110ms;
    --aether-motion-duration: 260ms;
    --aether-motion-opacity-duration: 200ms;
    --aether-motion-filter-duration: 180ms;
    --aether-motion-easing:
        cubic-bezier(0.19, 1, 0.22, 1);

}


/*
=====================================================
GLOBAL DIRECTIONAL MOTION
=====================================================
*/


[data-aether-motion] {
    transition:
        transform var(--aether-motion-duration)
            var(--aether-motion-easing),
        opacity var(--aether-motion-opacity-duration) ease,
        filter var(--aether-motion-filter-duration) ease;
    will-change: transform, opacity, filter;
}

:is(.is-opening-ui, .is-closing-ui, .is-closing)
[data-aether-motion="left"] {
    transform: translate3d(
        calc(-1 * var(--aether-motion-interface-distance)),
        0,
        0
    );
    opacity: 0;
}

:is(.is-opening-ui, .is-closing-ui, .is-closing)
[data-aether-motion="right"] {
    transform: translate3d(
        var(--aether-motion-interface-distance),
        0,
        0
    );
    opacity: 0;
}

.is-layer-out [data-aether-motion="left"] {
    transform: translate3d(
        calc(-1 * var(--aether-motion-layer-distance)),
        0,
        0
    );
    opacity: 0;
}

.is-layer-out [data-aether-motion="right"] {
    transform: translate3d(
        var(--aether-motion-layer-distance),
        0,
        0
    );
    opacity: 0;
}


/* Index companions own their staged entrance in AetherIndexMotion.
They join only screen withdrawal and closing, never screen opening. */
:is(.is-closing-ui, .is-closing)
[data-aether-motion="index-companion-left"],
.is-layer-out
[data-aether-motion="index-companion-left"] {
    transform: translate3d(
        calc(-1 * var(--aether-motion-layer-distance)),
        0,
        0
    );
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    [data-aether-motion] {
        transition: none;
    }
}


/*
=====================================================
GLOBAL WITHDRAWAL AND CONTENT-ENTRANCE MOTION
=====================================================
*/


[data-aether-withdraw-motion] {
    translate: 0 0;
    opacity: 1;
    transition:
        opacity var(--aether-motion-overlay-withdraw-opacity-duration) ease,
        translate var(--aether-motion-overlay-withdraw-transform-duration)
            var(--aether-motion-easing);
    will-change: opacity, translate;
}

[data-aether-withdraw-motion].is-aether-withdrawn {
    pointer-events: none !important;
}

[data-aether-withdraw-motion="left"].is-aether-withdrawn {
    translate: calc(-1 * var(--aether-motion-overlay-withdraw-horizontal-distance)) 0;
}

[data-aether-withdraw-motion="right"].is-aether-withdrawn {
    translate: var(--aether-motion-overlay-withdraw-horizontal-distance) 0;
}

[data-aether-withdraw-motion="top"].is-aether-withdrawn {
    translate: 0 calc(-1 * var(--aether-motion-overlay-withdraw-vertical-distance));
}

[data-aether-withdraw-motion="bottom"].is-aether-withdrawn {
    translate: 0 var(--aether-motion-overlay-withdraw-vertical-distance);
}

[data-aether-content-motion="left"] {
    opacity: 0;
    transform: translate3d(-24px, 0, 0);
    pointer-events: none;
    transition:
        opacity var(--aether-motion-content-enter-opacity-duration) ease,
        filter var(--aether-motion-surface-background-filter-duration) ease,
        transform var(--aether-motion-content-enter-transform-duration)
            var(--aether-motion-easing);
}

[data-aether-content-motion="left"].is-open {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    [data-aether-withdraw-motion],
    [data-aether-content-motion] {
        transition: none;
    }

    .aether-screen,
    .aether-screen *,
    .aether-ui-button {
        transition: none !important;
        animation: none !important;
    }
}


.aether-global-veil {

    position:
        fixed;

    inset:
        0;

    z-index:
        999;

    overflow:
        hidden;

    pointer-events:
        none;

    opacity:
        0;

    visibility:
        hidden;

    transition:
        opacity var(--aether-motion-close-atmosphere-duration) ease,
        visibility 0s linear var(--aether-motion-close-atmosphere-duration);

}


.aether-global-veil.is-active {

    opacity:
        1;

    visibility:
        visible;

    transition:
        opacity var(--aether-motion-close-atmosphere-duration) ease;

}


.aether-world-snapshot {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    opacity:
        0;

    transition:
        opacity var(--aether-motion-snapshot-duration) ease;

    image-rendering:
        pixelated;

}


.aether-global-veil.is-resolution-512
.aether-world-snapshot[data-aether-resolution="512"],

.aether-global-veil.is-resolution-256
.aether-world-snapshot[data-aether-resolution="256"],

.aether-global-veil.is-resolution-128
.aether-world-snapshot[data-aether-resolution="128"] {

    opacity:
        1;

}


button,
input,
select,
textarea {

    font-family:
        var(--aether-font-interface);

}


/*
=====================================================
BUTTON PANEL PRIMITIVE
=====================================================
*/


.aether-ui-button-panel {

    position:
        relative;

    z-index:
        0;

    isolation:
        isolate;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    height:
        var(--aether-perception-panel-height);

    min-height:
        var(--aether-perception-panel-height);

    box-sizing:
        border-box;

    pointer-events:
        none;

}


.aether-ui-button-panel > button {

    position:
        relative;

    z-index:
        1;

}


.aether-ui-button-panel-background {

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        var(--aether-lens-fill);

    box-shadow:
        var(--aether-lens-shadow);

    backdrop-filter:
        var(--aether-lens-filter-soft);

    -webkit-backdrop-filter:
        var(--aether-lens-filter-soft);

    z-index:
        0;

}


.aether-ui-band-panel-top
> .aether-ui-button-panel-background {

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.11) 0%,
            rgba(255, 255, 255, 0.055) 48%,
            rgba(255, 255, 255, 0.015) 76%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            180deg,
            black 0%,
            black 78%,
            transparent 100%
        ),
        linear-gradient(
            90deg,
            transparent 0%,
            black 14%,
            black 86%,
            transparent 100%
        );

    -webkit-mask-image:
        linear-gradient(
            180deg,
            black 0%,
            black 78%,
            transparent 100%
        ),
        linear-gradient(
            90deg,
            transparent 0%,
            black 14%,
            black 86%,
            transparent 100%
        );

    mask-composite:
        intersect;

    -webkit-mask-composite:
        source-in;

}


.aether-ui-band-panel-bottom
> .aether-ui-button-panel-background {

    background:
        linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.11) 0%,
            rgba(255, 255, 255, 0.055) 48%,
            rgba(255, 255, 255, 0.015) 76%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            0deg,
            black 0%,
            black 78%,
            transparent 100%
        ),
        linear-gradient(
            90deg,
            transparent 0%,
            black 14%,
            black 86%,
            transparent 100%
        );

    -webkit-mask-image:
        linear-gradient(
            0deg,
            black 0%,
            black 78%,
            transparent 100%
        ),
        linear-gradient(
            90deg,
            transparent 0%,
            black 14%,
            black 86%,
            transparent 100%
        );

    mask-composite:
        intersect;

    -webkit-mask-composite:
        source-in;

}
/*
=====================================================
BUTTON MATERIAL
=====================================================

Shared flat button material, interaction states, and list
variants are owned by aetherButtons.css. Core retains only
the shared motion tokens it consumes.
*/


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

    .aether-ui-button,
    .aether-ui-button::before,
    .aether-ui-button::after,
    .aether-ui-button-panel-background {

        transition:
            none;

        animation:
            none;

    }

}