/* Explain: Base reset, typography, selection, and page motion defaults */
* {
    box-sizing: border-box;
}

html {
    background: var(--background-color);
    color: var(--text-color);
    scroll-padding-top: 2rem;
}

body {
    overflow-x: hidden;
    background:
        radial-gradient(circle at 20% 0%, rgba(200, 169, 106, 0.13), transparent 32rem),
        radial-gradient(circle at 90% 42%, rgba(185, 138, 138, 0.12), transparent 28rem),
        var(--background-color);
}

::selection {
    background: var(--champagne-gold);
    color: var(--ink-black);
}

img {
    display: block;
    max-width: 100%;
}

button,
a,
input,
select,
textarea {
    transition: all 260ms ease;
}

input,
select,
textarea {
    border-color: rgba(246, 240, 232, 0.2) !important;
    background: rgba(246, 240, 232, 0.065) !important;
    color: var(--text-color) !important;
}

input::placeholder,
textarea::placeholder {
    color: rgba(246, 240, 232, 0.48);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--champagne-gold) !important;
    outline: 2px solid rgba(200, 169, 106, 0.2) !important;
    outline-offset: 2px;
}

select option {
    background: var(--ink-black);
    color: var(--warm-ivory);
}

.section-reveal {
    opacity: 0;
    transform: translateY(42px);
    transition: opacity 850ms ease, transform 850ms ease;
}

.section-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.page-turn {
    transform-origin: left center;
    transition: transform 700ms ease, filter 700ms ease, opacity 700ms ease;
}

.section-reveal.is-visible .page-turn {
    animation: pageTurn 900ms ease both;
}

@keyframes pageTurn {
    0% {
        opacity: 0;
        transform: perspective(1200px) rotateY(-7deg) translateX(-18px);
        filter: blur(7px) saturate(0.85);
    }
    100% {
        opacity: 1;
        transform: perspective(1200px) rotateY(0deg) translateX(0);
        filter: blur(0) saturate(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }

    .section-reveal {
        opacity: 1;
        transform: none;
    }
}