/*

Theme Name: Kadence Child

Theme URI: https://www.kadencewp.com/theme/kadence-theme/

Description: A Kadence Child Theme

Author: Your Name

Author URI: https://yourwebsite.com

Template: kadence

Version: 1.0.0

Text Domain: kadence-child

*/



/* Optional: Hide elements before GSAP animates them in */

/* This helps prevent a brief flash of the unstyled image before animation starts */

.animated-image-scroll {

    opacity: 0; /* Starts hidden */

    transform: scale(0.2); /* Starts small */

    /* GSAP will animate these properties, but this initial CSS prevents a flicker */

}



/* In your style.css */

.animated-background-section {

    background-image: url('path/to/your/background-image.jpg'); /* Your background image */

    background-size: cover; /* Or 'contain', '100% 100%', etc. */

    background-position: 50% 0%; /* Initial background position (for parallax effect) */

    background-repeat: no-repeat;

    /* Optional: for the initial fade-in, match what GSAP does */

    opacity: 0;

}



/* Ensure the .product-scroll-image (the <a> tag) is correctly positioned to act as a container */

.product-scroll-image {

    position: relative; /* CRUCIAL: Makes this the positioning context for its children */

    display: block; /* Ensures it behaves like a block element */

    width: auto; /* Or specific width if needed */

    height: auto; /* Or specific height if needed */

    /* Add any other existing styles for .product-scroll-image here if not already present */

}



/* Styling for the dynamically created hover text */

.product-hover-text {

    position: absolute; /* Position relative to .product-scroll-image */

    top: 50%; /* Start at vertical center */

    left: 50%; /* Start at horizontal center */

    transform: translate(-50%, -50%); /* Precisely center the text */

    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black background */

    color: white; /* White text color */

    padding: 10px 15px; /* Padding around the text */

    border-radius: 5px; /* Slightly rounded corners */

    font-size: 1.2em; /* Adjust font size as needed */

    text-align: center; /* Center the text within its box */

    white-space: nowrap; /* Prevent text from wrapping if it's short */

    pointer-events: none; /* VERY IMPORTANT: Allows clicks to pass through to the link below */



    /* --- CRITICAL FIX: Ensure these are present to hide it initially --- */

    opacity: 0; /* Initially hidden */

    visibility: hidden; /* Also hide from screen readers when not visible */

    /* ----------------------------------------------- */



    transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth transition */



    z-index: 10; /* Ensure text appears above the image */

}



/* Hover effect: When you hover over the main image container */

.product-scroll-image:hover .product-hover-text {

    opacity: 1; /* Fade in */

    visibility: visible; /* Make visible */

}



/* Optional: Slight scale effect on image on hover */

.product-scroll-image:hover img {

    transform: scale(1.05); /* Slightly enlarge image on hover */

    transition: transform 0.3s ease; /* Smooth transition for scale */

}



/* Ensure the image doesn't overflow its container during scaling if needed */

.product-scroll-image img {

    display: block; /* Remove extra space below image */

    max-width: 100%; /* Prevent image from overflowing */

    height: auto; /* Maintain aspect ratio */

    transition: transform 0.3s ease; /* Smooth transition for initial image */

}