/*=========================================================
=                       ANIMATIONS                        =
=========================================================*/
/* Shared motion system: scroll reveals (JS adds .is-visible via
   IntersectionObserver — see assets/js/main.js), gentle floating
   accents, and the promo-bar marquee. All respect
   prefers-reduced-motion (see root.css global rule). */

/*---------- Scroll reveal ----------*/

[data-reveal]{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
    will-change:opacity, transform;
}

[data-reveal].is-visible{
    opacity:1;
    transform:translateY(0);
}

img[data-reveal]{
    transform:translateY(28px) scale(.97);
}

img[data-reveal].is-visible{
    transform:translateY(0) scale(1);
}

/*---------- Gentle float (decorative motifs, icons) ----------*/

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

.floral-float{
    animation:floral-float 6s ease-in-out infinite;
}

.floral-float--slow{
    animation-duration:9s;
}

.floral-float--delay{
    animation-delay:1.4s;
}

/*---------- Petal drift (hero) ----------*/

@keyframes petal-drift{
    0%{ transform:translate3d(0,-10%,0) rotate(0deg); opacity:0; }
    10%{ opacity:.85; }
    90%{ opacity:.7; }
    100%{ transform:translate3d(6vw,120%,0) rotate(200deg); opacity:0; }
}

.hero__petals{
    position:absolute;
    inset:0;
    z-index:-1;
    overflow:hidden;
    pointer-events:none;
}

.hero__petal{
    position:absolute;
    top:0;
    width:16px;
    height:16px;
    border-radius:0 60% 0 60%;
    background:var(--sunflower);
    opacity:.75;
    animation:petal-drift linear infinite;
}

.hero__petal:nth-child(1){ left:8%; width:14px; height:14px; background:var(--sunflower); animation-duration:14s; animation-delay:0s; }
.hero__petal:nth-child(2){ left:22%; width:10px; height:10px; background:var(--accent); animation-duration:11s; animation-delay:2s; }
.hero__petal:nth-child(3){ left:38%; width:16px; height:16px; background:var(--sunflower); animation-duration:16s; animation-delay:1s; }
.hero__petal:nth-child(4){ left:55%; width:12px; height:12px; background:var(--accent); animation-duration:13s; animation-delay:3.5s; }
.hero__petal:nth-child(5){ left:70%; width:15px; height:15px; background:var(--sunflower); animation-duration:15s; animation-delay:.5s; }
.hero__petal:nth-child(6){ left:85%; width:11px; height:11px; background:var(--accent); animation-duration:12s; animation-delay:2.8s; }

/*---------- Marquee (promo bar) ----------*/

@keyframes marquee-scroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(-100%); }
}

/*---------- Reduced motion ----------*/

@media (prefers-reduced-motion:reduce){

    [data-reveal]{
        opacity:1;
        transform:none;
        transition:none;
    }

    .floral-float,
    .hero__petal{
        animation:none;
    }

}