/*!
Theme Name:   Eimear Child
Template:     eimear
Theme URI:    https://github.com/webmandesign/child-theme/
Author:       WebMan Design
Author URI:   https://www.webmandesign.eu/
Version:      1.0.0
Description:  You can change this description text in your child theme's "style.css" file.
License:      GNU General Public License v3
License URI:  http://www.gnu.org/licenses/gpl-3.0.html

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* Put your custom CSS styles below... */

.hero-animate {
    overflow-x:clip!important;
    position:relative;
}
.hero-animate .wp-block-cover__inner-container {
    animation: fade-out linear;
    animation-timeline: view();
    animation-range: exit -200px;
    /*border:2px solid yellow;*/
}
.hero-animate .wp-block-cover__image-background {
    opacity:0.5;
    transform-origin: bottom;
    animation: header-image-animation linear forwards;
    animation-timeline: view();
    animation-range: exit;
}


@supports (animation-timeline: view()) {
    
}

@media (prefers-reduced-motion:no-preference) {
    .wp-block-image img {
        scale:.8;
        opacity:0;
        animation:fade-in linear forwards;
        animation-timeline:view();
        animation-range: entry 200px;
    }
}

@keyframes fade-out {
    to { opacity:0;}
}
@keyframes header-image-animation {
    25% {opacity:1;}
    85%, 100% {opacity:0; scale: 3}
}
@keyframes fade-in {
    to {scale:1;opacity:1;}
}