@import url('css/_themes.css');
@import url('css/_layout.css');
@import url('css/_components.css');

* {
    -webkit-tap-highlight-color: transparent;
}

body {
    margin: 0;
    background-color: var(--bg-app);
    color: var(--text-app);
    
    /* Wavy 3D Grid container setup */
    position: relative;
    min-height: 100vh;
        
    /* Grid side fade percentage (smaller on mobile, larger on desktop) */
    --side-fade: 5%;
}

@media (min-width: 768px) {
    body { --side-fade: 15%; }
}

@media (min-width: 1024px) {
    body { --side-fade: 25%; }
}

/* Massive out-of-bounds background layer to fix WebKit blur bleed */
body::after {
    content: '';
    position: fixed;
    top: -100px;
    left: -100px;
    right: -100px;
    bottom: -100px;
    background-color: var(--bg-app);
    z-index: -2;
    pointer-events: none;
}

body::before {
    content: '';
    position: fixed;
    top: -16px; /* Pulls the top-most grid line and its shadow safely off the screen */
    left: 0;
    width: 100%;
    height: calc(100% + 16px);
    z-index: -1;
    pointer-events: none;
    
    /* Gradient tint block:
       1. Horizontal layer: Fades edges to the background color (--color-5) so the grid seamlessly disappears on the sides.
       2. Vertical layer: Theme colors fading to transparent at the top and bottom horizons. */
    background-image: 
        linear-gradient(to right, var(--bg-app) 0%, rgba(var(--p-bg), 0) var(--side-fade), rgba(var(--p-bg), 0) calc(100% - var(--side-fade)), var(--bg-app) 100%),
        linear-gradient(to bottom, rgba(var(--p-accent-2), 0) 0%, rgba(var(--p-accent-2), 0.5) 15%, rgba(var(--p-accent-1), 0.8) 85%, rgba(var(--p-accent-1), 0) 100%);
    
    /* Use the black lines on transparent SVG as an alpha mask */
    -webkit-mask-image: url('media/wave_grid_inverted.svg');
    -webkit-mask-size: cover;
    -webkit-mask-position: center bottom;
    -webkit-mask-repeat: no-repeat;
    
    mask-image: url('media/wave_grid_inverted.svg');
    mask-size: cover;
    mask-position: center bottom;
    mask-repeat: no-repeat;
    
    opacity: 0.9;
    filter: drop-shadow(0 0 8px rgba(var(--p-accent-1), 0.4));
}

button {
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
}