/* Explain: Base page behavior for the luxury premium portfolio */
* {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    overflow-x: hidden;
    background: var(--background-color);
    color: var(--text-color);
    background-image:
        linear-gradient(rgba(212, 175, 55, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212, 175, 55, 0.03) 1px, transparent 1px);
    background-size: 100px 100px;
}

::selection {
    background: var(--primary-color);
    color: #000;
}

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

button,
a,
input,
textarea {
    font: inherit;
}

section {
    position: relative;
    scroll-margin-top: 6rem;
}

.reveal {
    opacity: 0;
    transform: translateY(2.2rem);
    transition: opacity 900ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

.parallax-drift {
    transform: translate3d(0, var(--parallax-y, 0px), 0);
    transition: transform 120ms linear;
}