:root {
    --color-bg-deep: #1b1712;
    --color-bg-deep-2: #241e17;
    --color-glow: #7a5628;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    background: var(--color-bg-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 5vh 1.25rem;
    position: relative;
    overflow: hidden;
}

body::before {
    content: "";
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle at 50% 50%, var(--color-glow) 0%, transparent 50%);
    animation: pulse-glow 3.5s ease-in-out infinite;
    pointer-events: none;
    filter: blur(10px);
}

@keyframes pulse-glow {
    0% { opacity: 0.12; transform: scale(0.65); }
    50% { opacity: 0.95; transform: scale(1.6); }
    100% { opacity: 0.12; transform: scale(0.65); }
}

.reveal-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    opacity: 0;
    transform: translateY(14px);
    animation: reveal 1.1s ease-out 0.15s forwards;
}

.reveal-card img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6), 0 10px 30px -10px rgba(0, 0, 0, 0.4);
}

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

@media (prefers-reduced-motion: reduce) {
    .reveal-card {
        animation: none;
        opacity: 1;
        transform: none;
    }

    body::before {
        animation: none;
        opacity: 0.75;
        transform: none;
    }
}