/*
 * TIBIA OTBR PREMIUM
 * Laboratorio visual V1
 * Identidade: azul profundo, ouro medieval e magia.
 * Sem alteracoes na estrutura funcional do MyAAC.
 */

:root {
    --otbr-premium-navy: #07192c;
    --otbr-premium-blue: #28699e;
    --otbr-premium-gold: #e5bd70;
    --otbr-premium-light: #f8e5b1;
}

/* Atmosfera magica sobre o cenario original */

body::before {
    content: "";
    position: fixed;
    inset: -18%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse at 16% 24%,
            rgba(31,119,215,.16),
            transparent 35%
        ),
        radial-gradient(
            ellipse at 84% 34%,
            rgba(240,182,73,.11),
            transparent 33%
        ),
        radial-gradient(
            ellipse at 50% 82%,
            rgba(20,128,192,.12),
            transparent 45%
        );
    animation: otbr-premium-aurora 16s ease-in-out infinite alternate;
}

#Bodycontainer {
    position: relative;
    z-index: 1;
}

/* Identidade visual do logo original */

#TibiaLogoArtworkTop {
    filter:
        drop-shadow(0 0 8px rgba(234,187,92,.35))
        drop-shadow(0 5px 12px rgba(0,0,0,.45));
    animation: otbr-premium-logo 5s ease-in-out infinite;
}

/* Interacao nos menus tradicionais */

#MenuColumn .MenuButton {
    transition:
        filter .25s ease,
        transform .25s ease;
}

#MenuColumn .MenuButton:hover {
    transform: translateX(2px);
    filter:
        brightness(1.16)
        drop-shadow(0 0 7px rgba(235,184,91,.35));
}

#MenuColumn .menuitem {
    transition: filter .25s ease;
}

#MenuColumn .menuitem:hover {
    filter: brightness(1.08);
}

/* Profundidade dos paineis principais */

#ContentColumn .Box {
    transition: filter .35s ease;
    filter: drop-shadow(0 8px 12px rgba(0,0,0,.24));
}

#ContentColumn .Box:hover {
    filter:
        drop-shadow(0 8px 14px rgba(0,0,0,.34))
        drop-shadow(0 0 8px rgba(215,173,93,.08));
}

#ThemeboxesColumn .Box {
    transition: filter .3s ease;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,.28));
}

#ThemeboxesColumn .Box:hover {
    filter:
        drop-shadow(0 6px 12px rgba(0,0,0,.35))
        drop-shadow(0 0 9px rgba(226,179,93,.13));
}

/* Titulos tradicionais das tabelas */

#ContentColumn .TableContainer .CaptionContainer .Text {
    text-shadow:
        0 1px 2px rgba(0,0,0,.5),
        0 0 9px rgba(241,195,106,.12);
}

/* Selecao de texto personalizada */

::selection {
    background: #ba8a41;
    color: #07192c;
}

/* Animacoes */

@keyframes otbr-premium-aurora {
    0% {
        transform: translate3d(-2%,0,0);
        opacity: .7;
    }
    100% {
        transform: translate3d(2%,-2%,0);
        opacity: 1;
    }
}

@keyframes otbr-premium-logo {
    0%,100% {
        filter:
            drop-shadow(0 0 8px rgba(234,187,92,.3))
            drop-shadow(0 5px 12px rgba(0,0,0,.45));
    }
    50% {
        filter:
            drop-shadow(0 0 17px rgba(234,187,92,.57))
            drop-shadow(0 5px 12px rgba(0,0,0,.45));
    }
}

/* Acessibilidade e desempenho */

@media (prefers-reduced-motion: reduce) {
    body::before,
    #TibiaLogoArtworkTop {
        animation: none !important;
    }

    #MenuColumn .MenuButton,
    #MenuColumn .menuitem,
    #ContentColumn .Box,
    #ThemeboxesColumn .Box {
        transition: none !important;
    }
}