/*
Theme Name: Ánimas Platform
Theme URI: https://animas.local/
Author: Ánimas
Description: Tema oficial de la plataforma digital de Ánimas.
Version: 0.5.4
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: animas-platform
*/

:root {
    --animas-font-display: "Animas Display", serif;
}

.animas-display,
.animas-wordmark {
    font-family: var(--animas-font-display);
    font-style: normal;
    font-weight: 400;
}

.animas-wordmark {
    font-variant-ligatures: common-ligatures discretionary-ligatures;
    font-feature-settings: "rlig" 1, "kern" 1;
}

body.animas-entrance-page {
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    background: #090a09;
}

.animas-entrance {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    background-color: #090a09;
    overflow: hidden;
}

.animas-entrance__stone,
.animas-entrance__light {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.animas-entrance__stone {
    z-index: -2;
    background-image: url("assets/images/animas-entrance-stone.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    animation: animas-stone-breathe 16s ease-in-out infinite alternate;
}

.animas-entrance__light {
    z-index: -1;
    background:
        radial-gradient(circle at 22% 12%, rgba(207, 159, 82, .16) 0%, rgba(130, 91, 43, .055) 21%, transparent 47%),
        radial-gradient(ellipse at 50% 48%, transparent 34%, rgba(0, 0, 0, .2) 100%);
    mix-blend-mode: screen;
    opacity: .72;
    animation: animas-light-breathe 9s ease-in-out infinite alternate;
}

.animas-entrance__actions {
    position: absolute;
    z-index: 2;
    top: 71.5%;
    left: 50%;
    display: flex;
    justify-content: center;
    gap: 5%;
    width: 45%;
    transform: translateX(-50%);
}

.animas-stone-button {
    --animas-label-spacing: .035em;
    position: relative;
    display: grid;
    place-items: center;
    container-type: inline-size;
    width: 47.5%;
    aspect-ratio: 2.64 / 1;
    color: #1a1b19;
    border: 0;
    outline: 0;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    filter: drop-shadow(0 .35rem .28rem rgba(0, 0, 0, .42));
}

.animas-stone-button::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.animas-stone-button--archive::before {
    background-image: url("assets/images/ui/animas-button-home-trimmed.png");
}

.animas-stone-button--adventure::before {
    background-image: url("assets/images/ui/animas-button-player-portal-trimmed.png");
}

.animas-stone-button span {
    padding: 0 11%;
    font-family: var(--animas-font-display);
    font-size: 5.6cqw;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: var(--animas-label-spacing);
    text-shadow: 0 1px rgba(255, 255, 255, .22);
    transition:
        color 260ms ease,
        text-shadow 320ms ease,
        filter 320ms ease;
}

.animas-stone-button:hover span,
.animas-stone-button:active span,
.animas-stone-button:focus-visible span {
    color: #f3dfad;
    filter: brightness(1.18);
    text-shadow:
        0 0 .08em rgba(255, 246, 216, .95),
        0 0 .28em rgba(232, 187, 105, .88),
        0 0 .72em rgba(185, 119, 42, .68),
        0 0 1.25em rgba(130, 74, 24, .44);
}

.animas-stone-button:focus-visible {
    outline: 1px solid rgba(243, 223, 173, .58);
    outline-offset: .35rem;
}

@media (orientation: portrait) {
    .animas-entrance__stone {
        background-image: url("assets/images/animas-entrance-stone-mobile.png");
    }

    .animas-entrance__actions {
        top: 64%;
        width: 69%;
        flex-direction: column;
        gap: min(1.8svh, 1rem);
    }

    .animas-stone-button {
        width: 100%;
    }
}

@keyframes animas-stone-breathe {
    from { filter: brightness(.97) contrast(1.01); }
    to { filter: brightness(1.025) contrast(1.035); }
}

@keyframes animas-light-breathe {
    from { opacity: .56; }
    to { opacity: .82; }
}

@media (prefers-reduced-motion: reduce) {
    .animas-entrance__stone,
    .animas-entrance__light {
        animation: none;
        transition: none;
    }

    .animas-stone-button span {
        transition: none;
    }
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}