/*
 * Homepage hero (banner) motion.
 * Entrance: header fades down, accent bar draws, heading + subtitle rise out of a mask,
 * image glides in from the right, leaf blooms from the top-right corner.
 * Idle: image and leaf drift slowly; on desktop pointers they follow the cursor slightly
 * (the `translate` property is driven by js/home-hero.js, so it never fights the keyframes).
 * Everything is switched off for prefers-reduced-motion.
 */

:root {
    --hero-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Header: animate the top bar only. A transform animation on <header> itself would make it the
   containing block for the fixed mobile-menu overlay and squeeze the overlay into the header. */
.hero-header > div > nav:first-child {
    animation: hero-fade-down 0.8s var(--hero-ease) both;
}

/* Accent bar above the heading */
.hero-accent {
    display: block;
    width: 56px;
    height: 3px;
    border-radius: 3px;
    margin-bottom: 22px;
    background: linear-gradient(90deg, #D97B5F, #E9B48A);
    transform-origin: left center;
    animation: hero-draw 0.9s var(--hero-ease) 0.25s both;
}

/* Heading and subtitle */
.hero-title {
    animation: hero-rise 1s var(--hero-ease) 0.35s both;
}

.hero-subtitle {
    animation: hero-rise 1s var(--hero-ease) 0.5s both;
}

/* Image: entrance, then a slow float */
.hero-image {
    transform-origin: 60% 80%;
    transition: translate 0.6s var(--hero-ease);
    animation:
        hero-glide-in 1.3s var(--hero-ease) 0.3s both,
        hero-float 7s ease-in-out 1.6s infinite;
    will-change: transform, translate;
}

/* Leaf arc: bloom from the corner, then a gentle sway */
.hero-leaf {
    transform-origin: top right;
    transition: translate 0.8s var(--hero-ease);
    animation:
        hero-bloom 1.6s var(--hero-ease) 0.1s both,
        hero-sway 12s ease-in-out 1.7s infinite;
    will-change: transform, translate;
}

@keyframes hero-fade-down {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: none; }
}

@keyframes hero-draw {
    from { opacity: 0; transform: scaleX(0); }
    to   { opacity: 1; transform: scaleX(1); }
}

@keyframes hero-rise {
    from { opacity: 0; transform: translateY(28px); clip-path: inset(0 0 100% 0); }
    to   { opacity: 1; transform: none; clip-path: inset(0 0 -20% 0); }
}

@keyframes hero-glide-in {
    from { opacity: 0; transform: translateX(48px) scale(1.04); filter: blur(6px); }
    to   { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
}

@keyframes hero-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

@keyframes hero-bloom {
    from { opacity: 0; transform: scale(0.85) rotate(-4deg); }
    to   { opacity: 1; transform: none; }
}

@keyframes hero-sway {
    0%, 100% { transform: none; }
    50%      { transform: rotate(-1.5deg) scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-header > div > nav:first-child,
    .hero-accent,
    .hero-title,
    .hero-subtitle,
    .hero-image,
    .hero-leaf {
        animation: none !important;
        transition: none !important;
        translate: none !important;
    }
}