/*
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 */
}

/* Optional: Slight scale effect on image on hover */
.product-scroll-image:hover img {
    transform: scale(1.1); /* 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 */
}

/* Styling for Kadence's native image caption */
figure.wp-block-kadence-image figcaption {
    font-size: 2em !important;     /* Sets the font size to 2em */
    text-align: center;          /* Centers the text within the caption box */

}

.product-scroll-image {
    opacity: 0;
    visibility: hidden; /* Add visibility hidden for stronger initial hide */
}