/* Global Animations for Hollywood Eyebrow Salon */

/* -----------------------------------------------------------
   1. Column Animations (Fade In Up + Slight Zoom)
   ----------------------------------------------------------- */
.wp-block-column {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
    transition: opacity 1.0s cubic-bezier(0.22, 1, 0.36, 1), transform 1.0s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

/* Logic added via JS to add this class on scroll */
.wp-block-column.in-view {
    opacity: 1;
    transform: translateY(0) scale(1);
}


/* -----------------------------------------------------------
   2. Image Hover Effects (Slight Zoom)
   ----------------------------------------------------------- */
.wp-block-image {
    overflow: hidden;
    /* Ensures image doesn't overflow container on zoom */
    display: block;
    /* Ensures proper structure */
    border-radius: 15px;
    /* Fixes corner clipping during zoom */
    transform: translateZ(0);
    /* Webkit fix for overflow:hidden + border-radius */
}

.wp-block-image img {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
    display: block;
    /* Removes bottom space */
}

.wp-block-image:hover img {
    transform: scale(1.05);
    /* Minimal zoom as requested */
}


/* -----------------------------------------------------------
   3. Button Hover Effects (Slide Up)
   ----------------------------------------------------------- */
.wp-block-button__link {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s ease;
    will-change: transform;
}

.wp-block-button__link:hover {
    transform: translateY(-5px);
    /* Slide up slightly */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    /* Subtle shadow for depth */
}

/* -----------------------------------------------------------
   4. Text Reveal Animations (Headings & Paragraphs)
   ----------------------------------------------------------- */
/* 
   We use a separate class '.reveal-text' added by JS
   to ensure content remains visible if JS fails/loads late.
*/
.reveal-text {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
}

.reveal-text.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* -----------------------------------------------------------
   5. Navigation Hover Effects (Underline + Lift)
   ----------------------------------------------------------- */
.wp-block-navigation .wp-block-navigation-item__content {
    position: relative;
    display: inline-block;
    /* Required for transform */
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.3s ease;
}

/* Underline setup */
.wp-block-navigation .wp-block-navigation-item__content::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    /* Minimal underline */
    bottom: -2px;
    /* Slight offset */
    left: 0;
    background-color: currentColor;
    transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0.7;
    /* Slightly distinct from text */
}

/* Hover state */
.wp-block-navigation .wp-block-navigation-item__content:hover {
    transform: translateY(-2px);
    /* Subtle lift */
}

.wp-block-navigation .wp-block-navigation-item__content:hover::after {
    width: 100%;
    /* Expand to full width */
}

/* -----------------------------------------------------------
   6. Image Reveal Animations (Zoom In On Scroll)
   ----------------------------------------------------------- */
/* 
   Applied via JS adding '.reveal-image' class.
   We must maintain the translateZ(0) fix for border-radius.
*/
.reveal-image {
    opacity: 0;
    transform: scale(0.92) translateZ(0);
    /* Start slightly smaller */
    transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.reveal-image.in-view {
    opacity: 1;
    transform: scale(1) translateZ(0);
}

/* -----------------------------------------------------------
   7. Site Logo Animation (Entry + Hover)
   ----------------------------------------------------------- */
/* Entry Animation: Slide Down + Fade In on Load */
@keyframes logoEntry {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.wp-block-site-logo,
.custom-logo-link {
    animation: logoEntry 1.0s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    will-change: transform, opacity;
}

/* Hover Animation: Scale + Drop Shadow */
.custom-logo,
.wp-block-site-logo img {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.4s ease;
    will-change: transform, filter;
}

/* -----------------------------------------------------------
   8. Homepage Title Animation (Premium Slide Up + Shine)
   ----------------------------------------------------------- */
@keyframes titleEntry {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% center;
    }

    100% {
        background-position: 200% center;
    }
}

/* Scope animation to the `.Hero-title` class on the homepage only. */
body.home .Hero-title,
body.front-page .Hero-title,
body.home .Hero-title a,
body.front-page .Hero-title a {
    opacity: 0;
    /* Handled by animation */
    animation: titleEntry 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;

    /* Gradient Text Setup for Shine Effect */
    background: linear-gradient(120deg,
            #ffffff 0%,
            #ffffff 40%,
            var(--wp--preset--color--custom-light-accent-color, #f8dfa0) 50%,
            #ffffff 60%,
            #ffffff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* Essential for background-clip */
    -webkit-text-fill-color: transparent;

    /* Combined Animations: Entry + Continuous Shimmer */
    animation:
        titleEntry 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards,
        shimmer 6s linear infinite;

    will-change: transform, opacity, background-position;
}