*,
*::before,
*::after {
    box-sizing: border-box;
}

@font-face {
    font-family: "SF Pro Rounded";
    src: url("/static/fonts/SF_Pro_Rounded/SF-Pro-Rounded-Regular.otf")
        format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "SF Pro Rounded";
    src: url("/static/fonts/SF_Pro_Rounded/SF-Pro-Rounded-Medium.otf")
        format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "SF Pro Rounded";
    src: url("/static/fonts/SF_Pro_Rounded/SF-Pro-Rounded-Semibold.otf")
        format("opentype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

.caramel-regular {
    font-family: "Caramel", cursive;
    font-weight: 400;
    font-style: normal;
}

.bg-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Layer 1: Dark bottom fade (from your bottom color #100D18) */
    /* Layer 2: Warm light glow (from your top right color #FFE8D9) */
    background:
        /* Dark Gradient (Bottom Fade) */
        linear-gradient(to top, #100d18 0%, rgba(16, 13, 24, 0) 50%),
        /* Light Radial Glow (Top Right) */
            radial-gradient(
                at top right,
                /* 1. Reduce Opacity (using RGBA for the light color #ffe8d9) */
                    rgba(255, 232, 217, 0.2) 2%,
                /* Reduced opacity from 100% (or 0.7) to 20% */
                    /* 2. Reduce Size (making it fade out faster) */
                    rgba(255, 232, 217, 0) 20%
                    /* Reduced fade distance from 20% (or 85%) to 10% */
            );
    z-index: 1; /* Ensure the overlay is above the background image */
}
/* Ensure content is above the overlay */
.bg-overlay > * {
    position: relative;
    z-index: 2;
}

/* Container must be relative for absolute positioning */
.glow-container {
    position: relative;
    /* This ensures that content is visible over the glow lines */
    z-index: 10;
}

.h1-gradient-text {
    background: linear-gradient(
        135.12deg,
        rgba(73, 71, 161, 0.8) 0.21%,
        rgba(220, 168, 154, 0.8) 100%
    );
    -webkit-background-clip: text; /* Clip background to text (for WebKit browsers) */
    -webkit-text-fill-color: transparent; /* Make text color transparent */
    background-clip: text; /* Standard property */
    color: transparent; /* Fallback */
}

.weave-gradient-text {
    background: linear-gradient(
        135.12deg,
        rgba(73, 71, 161, 0.8) 0.21%,
        rgba(220, 168, 154, 0.8) 100%
    );
    -webkit-background-clip: text; /* Clip background to text (for WebKit browsers) */
    -webkit-text-fill-color: transparent; /* Make text color transparent */
    background-clip: text; /* Standard property */
    color: transparent; /* Fallback */
}