/* Explain: Base reset and default canvas styling with scroll-reveal animations. */
/* Base reset, canvas and scroll-reveal motion */
* { box-sizing: border-box; }

html {
    background: var(--background-color);
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    background:
        radial-gradient(circle at 82% 3%, color-mix(in srgb, var(--primary-color) 20%, transparent), transparent 26rem),
        radial-gradient(circle at 10% 20%, color-mix(in srgb, var(--accent-color) 11%, transparent), transparent 30rem),
        linear-gradient(180deg, var(--background-color), color-mix(in srgb, var(--background-color) 90%, black));
}

::selection { background: var(--accent-color); color: var(--secondary-color); }

button, a { cursor: pointer; }

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

img { max-width: 100%; }

:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--primary-color) 70%, transparent);
    outline-offset: 3px;
}

[data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 700ms ease, transform 700ms ease;
}

[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    [data-reveal] { opacity: 1; transform: none; transition: none; }
}