/* Optional: Define base font if needed */
    /* body { font-family: 'Inter', sans-serif; } */

    /* Refined background collage animation */
    .bg-collage-image {
        position: absolute;
        border-radius: 8px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        animation: float 15s infinite ease-in-out alternate;
        opacity: 0; /* Start hidden, fade in */
        transition: opacity 0.5s ease-in-out;
        will-change: transform, opacity; /* Optimize animation */
    }

    @keyframes float {
        0% { transform: translateY(0px) rotate(0deg); }
        50% { transform: translateY(-15px) rotate(3deg); }
        100% { transform: translateY(0px) rotate(-3deg); }
    }

    /* Staggered animation delays and positions */
    .bg-image-1 { top: 10%; left: 5%; width: 150px; animation-delay: 0s; }
    .bg-image-2 { top: 30%; left: 80%; width: 100px; animation-delay: -2s; }
    .bg-image-3 { top: 5%; left: 40%; width: 120px; animation-delay: -4s; }
    .bg-image-4 { bottom: 15%; left: 10%; width: 90px; animation-delay: -6s; }
    .bg-image-5 { top: 60%; left: 90%; width: 110px; animation-delay: -8s; }
    .bg-image-6 { bottom: 5%; left: 55%; width: 100px; animation-delay: -10s; }
    .bg-image-7 { top: 75%; left: 20%; width: 130px; animation-delay: -12s; }
    .bg-image-8 { top: 40%; left: 5%; width: 80px; animation-delay: -14s; }

    /* Fade in images when loaded */
    main#hero img.loaded {
        opacity: 0.5; /* Adjust final opacity - make it subtle */
    }

    /* General Load Animation (for initial elements) */
    @keyframes load-in {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .animate-load {
      animation: load-in 0.6s ease-out forwards;
      opacity: 0; /* Start hidden */
    }

    /* Scroll animation classes */
    .animate-on-scroll {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
      will-change: opacity, transform; /* Optimize */
    }
    .animate-on-scroll.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Hide file input visually but keep accessible */
    #file-input {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap; /* added line */
        border-width: 0;
    }

    /* Styling for the image preview */
    #image-preview {
        display: block; /* Ensure it behaves like a block element */
        max-height: 12rem; /* 48 in Tailwind (192px) */
        width: auto; /* Maintain aspect ratio */
        margin-left: auto;
        margin-right: auto;
        border-radius: 0.375rem; /* rounded-md */
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* shadow-md */
        margin-bottom: 1rem; /* mb-4 */
        object-fit: contain; /* Ensure the whole image is visible */
    }