@font-face {
    font-family: 'Heming';
    src: url('../fonts/Heming Variable.ttf') format('truetype');
}

@font-face {
    font-family: 'Nohemi';
    src: url('../fonts/Nohemi-VF.ttf') format('truetype');
}

@font-face {
    font-family: 'Salsa';
    src: url('../fonts/Salsa-BT-Regular.otf') format('opentype');
}

body {
    margin: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: #212020;
    color: #fff;
    font-family: sans-serif;
}

canvas {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: auto;
    pointer-events: none;
}

.content-wrapper {
    width: 100%;
    position: relative;
    z-index: auto;
}

.section {
    width: 100%;
    height: 140vh;
    position: relative;
    box-sizing: border-box;
    display: flow-root;
}

:root {
    --_noise-texture: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><defs><filter id='n' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='0.3' numOctaves='3' stitchTiles='stitch' result='t'/><feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.48 0 0 0 -0.126' in='t' result='g'/></filter></defs><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    --_noise-size: 5%;
}

.mesh-gradient {
    --_gradient-blend-mode: normal;
    --_gradient-blur: 20px;
    --_gradient: radial-gradient(at 66.8% 11.6%, #454545 0px, transparent 50%), radial-gradient(at 30.6% 9.4%, #616161 0px, transparent 50%);

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: clip;
    background: var(--_gradient) #212020;
    background-blend-mode: var(--_gradient-blend-mode);
    z-index: -1;
}

.mesh-gradient .frosted-backdrop {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    backdrop-filter: blur(var(--_gradient-blur));
    -webkit-backdrop-filter: blur(var(--_gradient-blur));
    z-index: 3;
}

.global-noise {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
    background-image: var(--_noise-texture);
    background-size: var(--_noise-size);
    background-position: center;
    background-repeat: repeat;
}

/* --- SECTION SPACER (30vh breathing room between sections) --- */
.section-spacer {
    width: 100%;
    height: 30vh;
    pointer-events: none;
}