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

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

body {
    margin: 0;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 20% 10%, rgba(37, 217, 242, 0.12), transparent 28rem),
        radial-gradient(circle at 88% 30%, rgba(184, 107, 75, 0.16), transparent 26rem),
        var(--background-color);
    color: var(--text-color);
}

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

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) scale(0.98);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

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

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