.futura-bold {
    font-family: futura-100, sans-serif;
    font-weight: 700;
    font-style: normal;
}
.futura-oblique {
    font-family: futura-100, sans-serif;
    font-weight: 700;
    font-style: italic;
}
            
.masked-text-container {
  /* Optional: Set a background for the container if needed */
    /*
        background-color: #f0f0f0; 
        padding: 20px;
    */
}

.masked-text {
  text-align: center; /* Center the text */

  /* Set the background image that will be masked by the text */
  
  /* Clip the background image to the shape of the text */
  -webkit-background-clip: text; /* For Webkit browsers (Chrome, Safari) */
  background-clip: text;

  /* Make the text color transparent so the background image shows through */
  -webkit-text-fill-color: transparent; /* For Webkit browsers */
  color: transparent; /* Fallback for other browsers, though background-clip: text might not be fully supported without prefixes */
}

.scrolling-gradient {
    /* Point to your image */
    background-image: url('/assets/media/illustrations/oceanpallet.gif');
    
    /* Ensure it repeats horizontally */
    background-repeat: repeat-x; 
    
    /* Optional: Fix the height or let it fill the container */
    height: 100%; 
    width: 100%;

    /* The Animation: 
       - 'linear' is crucial for constant speed (no easing/slowing down)
       - 'infinite' makes it loop forever 
    */
    animation: scrollLeft 10s linear infinite;
}

@keyframes scrollLeft {
    from {
        background-position: 0 0;
    }
    to {
        /* IMPORTANT: Replace 500px with the EXACT width of your image file */
        background-position: -655px 0;
    }
}


canvas {
    position: fixed;
    top: 0;      /* Ensure it snaps to top */
    left: 0;     /* Ensure it snaps to left */
    width: 100%;
    height: 100%;
    z-index: 0;  /* Sit at the bottom level */
    pointer-events: none; /* CRITICAL: Lets clicks pass through to links below */
}

/* Ensure your actual content sits ON TOP of the canvas */
#kt_body > div, 
#kt_body > main {
    position: relative;
    z-index: 1;
}

.my-target-div {
    position: relative; /* traps the absolute canvas inside */
    overflow: hidden;   /* cuts off stars that fly out */
    z-index: 1;         /* establishes stacking context */

}

#star-canvas {
    position: absolute; /* aligns to the parent div, not the screen */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;        /* puts it behind the form text */
    pointer-events: none; 
}

.invert-layer {
  mix-blend-mode: difference;
  
  /* Or 'exclusion' for a softer, lower-contrast inversion */
}