/* Explain: Base document styles, typography, and scroll-reveal animations. - */
* {
    box-sizing: border-box;
}

[x-cloak] {
    display: none !important;
}

html {
    background: var(--background-color);
    scroll-behavior: smooth;
}

body {
    background: var(--background-color);
    color: var(--text-color);
    overflow-x: hidden;
}

button,
a,
select {
    cursor: pointer;
}

input,
textarea,
select {
    color: var(--text-color);
    background-color: var(--surface-color);
}

input::placeholder,
textarea::placeholder {
    color: var(--muted-color);
}

::selection {
    background: var(--gold-subtle);
    color: var(--surface-color);
}

/* Typography refinements */
h1, h2, h3, h4, h5, h6 {
    color: var(--navy-dark);
    font-family: var(--font-heading);
}

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(8px);
    transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1), transform 900ms cubic-bezier(0.22, 1, 0.36, 1), filter 900ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform, filter;
}

.reveal-on-scroll[data-reveal="left"] {
    transform: translateX(-34px);
}

.reveal-on-scroll[data-reveal="right"] {
    transform: translateX(34px);
}

.reveal-on-scroll[data-reveal="scale"] {
    transform: translateY(22px) scale(0.96);
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
    -webkit-filter: blur(0);
}

@media (max-width: 768px) {
    .reveal-on-scroll {
        filter: none !important;
        -webkit-filter: none !important;
    }
    .reveal-on-scroll.is-visible {
        filter: none !important;
        -webkit-filter: none !important;
    }
}

.reveal-on-scroll:nth-child(2) {
    transition-delay: 90ms;
}

.reveal-on-scroll:nth-child(3) {
    transition-delay: 160ms;
}

.reveal-on-scroll:nth-child(4) {
    transition-delay: 230ms;
}

@media (prefers-reduced-motion: reduce) {
    .reveal-on-scroll {
        opacity: 1;
        transform: none !important;
        filter: none;
        transition: none;
    }
}