/* styles.css */

/* 1. Define the section element and assign the background image */
.background-image-section {
    /* REQUIRED: Set a minimum height so you can see the image if no content is present. */
    min-height: 400px; /* Adjust this value as needed */
    
    /* 2. The Image Magic */
    background-image: url('../images/securewink-background-2.jpg'); /* <-- UPDATE THIS PATH! */
    
    /* Crucial Properties for Behavior: */
    background-size: cover;          /* Ensures the image always covers the container, cropping if necessary. */
    background-position: center;     /* Centers the focus of the image (e.g., not cutting off the left side). */
    background-repeat: no-repeat;   /* Stops the image from tiling/repeating. */
    opacity: 0; /* Start hidden! */
    transition: opacity 1s ease-in-out; /* Animate over 1 second */
}

/* When JS runs and adds the class 'visible', it changes the state */
.background-image-section.is-loaded {
    opacity: 1;
}

/* 3. Adding Readability (THE BIGGEST MISSING STEP) */
/* Background images are often too bright or distracting for text. Add a dark overlay! */
.background-image-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Creates a semi-transparent black layer (adjust opacity for desired effect) */
    background-color: rgba(0, 0, 0, 0.6); 
}

/* Correct positioning context for the overlay */
.background-image-section {
    position: relative; /* Allows the pseudo-element to be positioned relative to this container */
}