/* =====================================================================
   MALGOODI — animations.css
   Subtle motion only. Static state always matches the PDF.
   =====================================================================*/

/* --- Hero load sequence: staggered fade + slight rise --- */
.reveal-hero {
    opacity: 0;
    transform: translateY(16px);
    animation: heroReveal .9s cubic-bezier(.22,.61,.36,1) forwards;
    animation-delay: var(--d, 0s);
}
@keyframes heroReveal {
    to { opacity: 1; transform: translateY(0); }
}

/* --- Scroll reveal (toggled by IntersectionObserver in animations.js) --- */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
}
.reveal-on-scroll.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* stagger children inside experience boxes */
.exp-box.in-view .exp-item {
    animation: itemRise .7s ease forwards;
    opacity: 0;
}
.exp-box.in-view .exp-item:nth-child(1) { animation-delay: .05s; }
.exp-box.in-view .exp-item:nth-child(2) { animation-delay: .15s; }
.exp-box.in-view .exp-item:nth-child(3) { animation-delay: .25s; }
.exp-box.in-view .exp-item:nth-child(4) { animation-delay: .35s; }
@keyframes itemRise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* stagger stat cards */
.stats.in-view .stat { animation: itemRise .7s ease forwards; opacity: 0; }
.stats.in-view .stat:nth-child(1) { animation-delay: .05s; }
.stats.in-view .stat:nth-child(2) { animation-delay: .18s; }
.stats.in-view .stat:nth-child(3) { animation-delay: .31s; }

/* --- Experience hover (desktop only, handled with media query) --- */
@media (hover: hover) and (pointer: fine) {
    .exp-item:hover .exp-icon { transform: translateY(-3px); }
    .exp-item:hover .exp-title { color: #000; }
    .exp-box:hover { border-color: var(--malgoodi-border-2); }
}

/* --- Gentle hero art settle on load --- */
.hero-art img {
    opacity: 0;
    animation: artFade 1.6s ease .2s forwards;
}
@keyframes artFade { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .reveal-hero,
    .reveal-on-scroll,
    .hero-art img,
    .exp-box.in-view .exp-item,
    .stats.in-view .stat {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}