/* =========================================
   CROWNS OF AVENHOLD — HOMEPAGE
   Victorian / Medieval Fantasy
   ========================================= */

.home-page {
    --home-gold: var(--gold, #d8b36a);
    --home-copper: var(--copper, #a96e48);
    --home-cream: var(--cream, #eee3cc);
    --home-muted: var(--muted, #a69a84);
    --home-bg: var(--bg, #100e0c);
    --home-panel: var(--panel, #191510);

    min-height: 100vh;
    margin: 0;
    padding: 32px 20px;

    display: grid;
    place-items: center;

    color: var(--home-cream);
    background:
        radial-gradient(
            ellipse at 50% 35%,
            rgb(106 69 36 / 18%),
            transparent 55%
        ),
        radial-gradient(
            ellipse at bottom,
            rgb(34 57 37 / 18%),
            transparent 65%
        ),
        var(--home-bg);

    font-family: var(--site-font-body, Georgia, serif);
    overflow-x: hidden;
}

/* Atmospheric background decoration */

.home-page::before {
    content: "";
    position: fixed;
    inset: 14px;
    pointer-events: none;

    border: 1px solid rgb(216 179 106 / 18%);
    outline: 1px solid rgb(216 179 106 / 7%);
    outline-offset: 5px;

    z-index: 0;
}

/* Main hero panel */

.hero {
    position: relative;
    z-index: 1;

    width: min(100%, 820px);
    padding: clamp(38px, 8vw, 82px)
             clamp(22px, 7vw, 76px);

    text-align: center;

    background:
        linear-gradient(
            145deg,
            rgb(34 27 20 / 94%),
            rgb(17 15 12 / 97%)
        );

    border: 1px solid rgb(169 110 72 / 55%);

    box-shadow:
        0 0 0 5px rgb(16 14 12 / 80%),
        0 0 0 6px rgb(216 179 106 / 15%),
        0 30px 100px rgb(0 0 0 / 50%);

    animation: hero-arrive 1.2s ease-out both;
}

/* Introductory label */

.eyebrow {
    display: block;
    margin-bottom: 24px;

    color: var(--home-copper);

    font-family: Inter, Arial, sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    line-height: 1.8;
    text-transform: uppercase;

    animation: fade-up 1s ease-out 0.2s both;
}

/* Main title */

#title {
    margin: 0;

    color: var(--home-gold);

    font-family: var(
        --site-font-heading,
        "Cinzel",
        Georgia,
        serif
    );

    font-size: clamp(2.3rem, 6.5vw, 4.8rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0.035em;

    text-wrap: balance;

    text-shadow:
        0 2px 0 #382819,
        0 0 35px rgb(216 179 106 / 15%);

    animation: title-reveal 1.4s ease-out both;
}

/* Decorative divider */

.ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    width: min(100%, 330px);
    margin: 30px auto;

    color: var(--home-gold);
}

.ornament > span:not(.ornament-symbol) {
    height: 1px;
    flex: 1;

    background: linear-gradient(
        90deg,
        transparent,
        var(--home-copper)
    );
}

.ornament > span:last-child:not(.ornament-symbol) {
    background: linear-gradient(
        90deg,
        var(--home-copper),
        transparent
    );
}

.ornament-symbol {
    font-size: 1.2rem;
    text-shadow: 0 0 15px rgb(216 179 106 / 35%);
}

/* Lore text */

.hero-lore {
    max-width: 610px;
    margin: 0 auto;

    color: var(--home-cream);

    font-size: clamp(1.05rem, 2vw, 1.2rem);
    line-height: 1.95;
    letter-spacing: 0.015em;

    white-space: pre-line;
    text-wrap: pretty;

    animation: fade-up 1.2s ease-out 0.6s both;
}

/* Account actions */

.hero-actions {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 16px;

    margin-top: 38px;

    animation: fade-up 1s ease-out 0.9s both;
}

.hero-actions .vic-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    min-height: 52px;
    padding: 14px 23px;

    font-family: var(
        --site-font-heading,
        "Cinzel",
        Georgia,
        serif
    );

    font-size: 0.8rem;
    letter-spacing: 0.07em;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;

    transition:
        color 250ms ease,
        background 250ms ease,
        border-color 250ms ease,
        box-shadow 250ms ease,
        transform 250ms ease;
}

/* Login: restrained and understated */

.hero-actions .vic-btn-ghost {
    border: 1px solid rgb(169 110 72 / 65%);
    color: var(--home-cream);
    background: rgb(255 255 255 / 2%);
}

.hero-actions .vic-btn-ghost:hover {
    border-color: var(--home-gold);
    background: rgb(216 179 106 / 7%);
    color: var(--home-gold);
    transform: translateY(-2px);
}

/* Signup: primary action */

.hero-actions .vic-btn-epic {
    border: 1px solid var(--home-gold);
    color: #17110a;

    background: linear-gradient(
        135deg,
        #e4c783,
        #b58a45
    );

    box-shadow:
        inset 0 1px rgb(255 255 255 / 35%),
        0 5px 22px rgb(0 0 0 / 25%);
}

.hero-actions .vic-btn-epic:hover {
    background: linear-gradient(
        135deg,
        #f1dca3,
        #d0a85d
    );

    box-shadow:
        0 0 24px rgb(216 179 106 / 22%),
        inset 0 1px rgb(255 255 255 / 45%);

    transform: translateY(-2px);
}

/* Keyboard accessibility */

.hero-actions .vic-btn:focus-visible {
    outline: 2px solid var(--home-gold);
    outline-offset: 5px;
}

/* Closing tagline */

.hero-footer {
    margin: 46px 0 0;

    color: var(--home-muted);

    font-family: Inter, Arial, sans-serif;
    font-size: 0.63rem;
    font-weight: 500;
    letter-spacing: 0.25em;
    line-height: 1.8;

    animation: fade-up 1s ease-out 1.1s both;
}

/* Animations */

@keyframes hero-arrive {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes title-reveal {
    from {
        opacity: 0;
        letter-spacing: 0.12em;
        filter: blur(4px);
    }

    to {
        opacity: 1;
        letter-spacing: 0.035em;
        filter: blur(0);
    }
}

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive layout */

@media (max-width: 600px) {
    .home-page {
        padding: 28px 20px;
    }

    .home-page::before {
        inset: 9px;
        outline-offset: 3px;
    }

    .hero {
        padding: 42px 22px;
    }

    .eyebrow {
        font-size: 0.62rem;
        letter-spacing: 0.2em;
    }

    .hero-lore {
        line-height: 1.8;
    }

    .hero-actions {
        flex-direction: column;
        gap: 12px;
        margin-top: 30px;
    }

    .hero-actions .vic-btn {
        width: 100%;
        box-sizing: border-box;
    }

    .hero-footer {
        margin-top: 34px;
        font-size: 0.55rem;
        letter-spacing: 0.15em;
    }
}

/* Respect reduced-motion preferences */

@media (prefers-reduced-motion: reduce) {
    .hero,
    #title,
    .eyebrow,
    .hero-lore,
    .hero-actions,
    .hero-footer {
        animation: none !important;
    }

    .hero-actions .vic-btn {
        transition: none;
    }
}