/*
=====================================================
AETHER WORLD PANEL MATERIAL
=====================================================

Shared material for the world-facing Aether panels.
The overlay stylesheet owns their layout, content, and
mode-specific visibility; this file owns only surfaces
and their interaction transitions.
=====================================================
*/

+/*
=====================================================
AETHER INVERSION MATERIAL SYSTEM
=====================================================
*/


.aether-world-location,
.aether-world-minimap,
.aether-world-focus {

    color:
        var(--aether-lens-ink);

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

    border-color:
        rgba(
            var(
                --aether-ui-rgb,
                200, 204, 211
            ),
            0.42
        );

    box-shadow:
        inset 0 0 0 1px
        rgba(
            var(
                --aether-ui-rgb,
                200, 204, 211
            ),
            0.14
        );

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

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

}


.aether-world-minimap {

    background:
        transparent !important;

    border:
        0 !important;

    box-shadow:
        none !important;

    backdrop-filter:
        none !important;

    -webkit-backdrop-filter:
        none !important;

}


.aether-world-minimap-shape {

    opacity:
        1;

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

    border:
        1px solid
        rgba(
            var(
                --aether-ui-rgb,
                200, 204, 211
            ),
            0.42
        );

    box-shadow:
        inset 0 0 0 1px
        rgba(
            var(
                --aether-ui-rgb,
                200, 204, 211
            ),
            0.14
        );

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

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

}


.aether-world-minimap-shape.is-aether-withdrawn {

    opacity:
        0;

}


.aether-world-minimap > div:first-child {

    color:
        var(--aether-lens-ink);

    text-shadow:
        0 1px 0
        rgba(255, 255, 255, 0.14);

}


.aether-world-minimap canvas {

    filter:
        contrast(1.08)
        saturate(1.08);

}


.aether-world-focus-surface {

    color:
        var(--aether-lens-ink) !important;

    box-sizing:
        border-box;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.28) 0%,
            rgba(255, 255, 255, 0.11) 30%,
            rgba(0, 0, 0, 0.10) 68%,
            rgba(0, 0, 0, 0.40) 100%
        ),

        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.10) 0%,
            rgba(5, 8, 16, 0.30) 13%,
            rgba(5, 8, 16, 0.18) 78%,
            rgba(255, 255, 255, 0.11) 100%
        ) !important;

    min-width:
        148px;

    min-height:
        46px;

    padding:
        8px 30px 8px 12px !important;

    font-size:
        clamp(
            16px,
            1.9vw,
            24px
        );

    letter-spacing:
        0.10em !important;

    text-align:
        left;

    border-color:
        transparent !important;

    box-shadow:
        inset 0 2px 0
        rgba(255, 255, 255, 0.42),

        inset 0 10px 18px
        rgba(255, 255, 255, 0.10),

        inset 0 -12px 18px
        rgba(0, 0, 0, 0.32),

        inset 0 -4px 0
        rgba(0, 0, 0, 0.44),

        0 12px 24px
        rgba(0, 0, 0, 0.22) !important;

    backdrop-filter:
        blur(3px)
        brightness(0.96);

    -webkit-backdrop-filter:
        blur(3px)
        brightness(0.96);

}


.aether-world-focus::after {

    display:
        none !important;

}


.aether-world-focus {

    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);

}


.aether-world-focus-surface {

    min-width:
        220px;

}


.aether-world-focus-surface > * {

    position:
        relative;

    z-index:
        2;

}


.aether-world-focus:hover,
.aether-world-focus:focus-visible {

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

    border-color:
        rgba(
            var(
                --aether-ui-rgb,
                200, 204, 211
            ),
            0.42
        );

    box-shadow:
        var(
            --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)
        );

    outline:
        none;

}


.aether-world-focus-surface::before {

    content:
        "";

    display:
        block;

    position:
        absolute;

    inset:
        0;

    z-index:
        0;

    pointer-events:
        none;

    opacity:
        1;

    background:
        rgba(255, 255, 255, 0.012) !important;

    backdrop-filter:
        var(--aether-lens-filter) !important;

    -webkit-backdrop-filter:
        var(--aether-lens-filter) !important;

    transition:
        background var(--aether-motion-surface-interaction-duration) ease,
        opacity var(--aether-motion-surface-interaction-duration) ease;

}


.aether-world-focus:hover
.aether-world-focus-surface,
.aether-world-focus:focus-visible
.aether-world-focus-surface {

    color:
        var(--aether-lens-ink) !important;

    background:
        linear-gradient(
            180deg,
            rgba(
                var(
                    --aether-ui-rgb,
                    200, 204, 211
                ),
                0.52
            )
            0%,
            rgba(255, 255, 255, 0.20) 22%,
            rgba(
                var(
                    --aether-ui-rgb,
                    200, 204, 211
                ),
                0.18
            )
            68%,
            rgba(0, 0, 0, 0.32) 100%
        ),

        linear-gradient(
            90deg,
            rgba(
                var(
                    --aether-ui-rgb,
                    200, 204, 211
                ),
                0.16
            )
            0%,
            rgba(
                var(
                    --aether-ui-rgb,
                    200, 204, 211
                ),
                0.42
            )
            48%,
            rgba(
                var(
                    --aether-ui-rgb,
                    200, 204, 211
                ),
                0.20
            )
            100%
        ) !important;

    border-color:
        transparent !important;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.42),

        inset 0 -3px 0
        rgba(0, 0, 0, 0.34),

        inset 16px 0 22px
        rgba(255, 255, 255, 0.10),

        inset -14px 0 20px
        rgba(0, 0, 0, 0.24),

        0 0 18px
        rgba(
            var(
                --aether-ui-rgb,
                200, 204, 211
            ),
            0.16
        ),

        0 14px 24px
        rgba(0, 0, 0, 0.20) !important;

}


.aether-world-focus:hover
.aether-world-focus-surface::before,
.aether-world-focus:focus-visible
.aether-world-focus-surface::before {

    background:
        rgba(255, 255, 255, 0.060) !important;

}


.aether-world-focus:hover
.aether-world-focus-surface::after,
.aether-world-focus:focus-visible
.aether-world-focus-surface::after {

    opacity:
        0.28;

}


.aether-world-location,
.aether-world-minimap-shape,
.aether-world-focus,
.aether-world-focus-surface,
.aether-world-control-glass {

    transition:
        background var(--aether-motion-surface-interaction-duration) ease,
        border-color var(--aether-motion-surface-interaction-duration) ease,
        box-shadow var(--aether-motion-surface-interaction-duration) ease,
        color var(--aether-motion-surface-interaction-duration) ease,
        opacity var(--aether-motion-surface-interaction-duration) ease,
        transform var(--aether-motion-surface-interaction-duration) ease,
        translate var(--aether-motion-surface-layout-duration)
            cubic-bezier(
                0.19,
                1,
                0.22,
                1
            ),
        backdrop-filter var(--aether-motion-surface-interaction-duration) ease,
        -webkit-backdrop-filter var(--aether-motion-surface-interaction-duration) ease;

}