/*
 TIBIA OTBR PREMIUM V2
 Camada visual experimental.
 Nenhuma funcionalidade do MyAAC e modificada.
*/

/* Atmosfera visual */
body {
    background-color: #061323;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .55;

    background-image:
        radial-gradient(circle, rgba(250,208,126,.85) 1px, transparent 2px),
        radial-gradient(circle, rgba(107,191,255,.85) 1px, transparent 2px),
        radial-gradient(circle, rgba(255,234,175,.65) 1px, transparent 2px);

    background-size:
        191px 227px,
        263px 311px,
        347px 281px;

    background-position:
        27px 48px,
        112px 91px,
        61px 177px;

    animation: otbr-v2-particles 22s linear infinite;
}

/* Realce do cenario existente */
#ArtworkHelper {
    position: relative;
}

/* Logo */
#TibiaLogoArtworkTop {
    animation: otbr-v2-logo-float 6s ease-in-out infinite;
    transform-origin: center;
}

/* Menus medievais */
#MenuColumn .MenuButton {
    transition:
        transform .25s ease,
        filter .25s ease,
        box-shadow .25s ease;
}

#MenuColumn .MenuButton:hover {
    transform: translateX(4px);
    filter:
        brightness(1.22)
        saturate(1.13)
        drop-shadow(0 0 9px rgba(241,192,95,.4));
}

#MenuColumn .Submenuitem:hover,
#MenuColumn .SubMenuItem:hover {
    filter: brightness(1.2);
}

/* Molduras e profundidade */
#ContentColumn .Box {
    animation: otbr-v2-panel-entrance .55s ease-out both;
    transition:
        filter .3s ease,
        transform .3s ease;
}

#ContentColumn .Box:hover {
    filter:
        drop-shadow(0 10px 16px rgba(0,0,0,.4))
        drop-shadow(0 0 12px rgba(208,166,80,.18));
}

#ThemeboxesColumn .Box {
    animation: otbr-v2-panel-entrance .7s ease-out both;
    transition:
        filter .25s ease,
        transform .25s ease;
}

#ThemeboxesColumn .Box:hover {
    transform: translateY(-2px);
    filter:
        drop-shadow(0 9px 13px rgba(0,0,0,.48))
        drop-shadow(0 0 10px rgba(237,185,91,.2));
}

/* Titulos globais */
#ContentColumn .TableContainer .CaptionContainer .Text {
    color: #f7dda5;
    text-shadow:
        0 1px 2px rgba(0,0,0,.65),
        0 0 11px rgba(242,188,92,.24);
}

/* Interacoes em botoes */
#ContentColumn .otbr-btn,
#ContentColumn .btn,
#ContentColumn input[type="submit"] {
    transition:
        transform .2s ease,
        filter .2s ease,
        box-shadow .2s ease;
}

#ContentColumn .otbr-btn:hover,
#ContentColumn .btn:hover,
#ContentColumn input[type="submit"]:hover {
    filter: brightness(1.12);
    box-shadow: 0 0 13px rgba(232,185,90,.22);
}

/* Links */
#ContentColumn a {
    transition:
        color .2s ease,
        text-shadow .2s ease;
}

#ContentColumn a:hover {
    text-shadow: 0 0 8px rgba(232,193,108,.25);
}

/* Animacoes */
@keyframes otbr-v2-particles {
    0% {
        background-position:
            27px 48px,
            112px 91px,
            61px 177px;
    }
    100% {
        background-position:
            27px -179px,
            112px -220px,
            61px -104px;
    }
}

@keyframes otbr-v2-logo-float {
    0%,100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

@keyframes otbr-v2-panel-entrance {
    from {
        opacity: .8;
        transform: translateY(9px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Acessibilidade */
@media (prefers-reduced-motion: reduce) {
    body::after,
    #TibiaLogoArtworkTop,
    #ContentColumn .Box,
    #ThemeboxesColumn .Box {
        animation: none !important;
    }

    #MenuColumn .MenuButton,
    #ContentColumn .otbr-btn,
    #ContentColumn .btn,
    #ContentColumn input[type="submit"],
    #ContentColumn a {
        transition: none !important;
    }
}