/* ═══════════════════════════════════════════════════════════════════════
   themes/moods/css/_animations.css — Image & element animations
   ──────────────────────────────────────────────────────────────────────
   Animations apply when an element scrolls into view (IntersectionObserver).
   Add class "ani" + variant to any element to animate it.

   Variants:
     ani-fade        — fade in from transparent
     ani-up          — slide up from below
     ani-down        — slide down from above
     ani-left        — slide in from left
     ani-right       — slide in from right
     ani-zoom        — zoom in from 0.92x
     ani-blur        — fade with blur clearing
     ani-flip        — flip on Y axis
     ani-rotate      — small rotation effect

   Body class controls global behavior:
     .ani-on         — animations enabled
     .ani-off        — disabled (respects prefers-reduced-motion)
   ═══════════════════════════════════════════════════════════════════════ */

/* Default state — invisible, will become visible when in-view */
body.ani-on .ani {
    opacity: 0;
    transition:
        opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.7s cubic-bezier(0.4, 0, 0.2, 1),
        filter 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform, filter;
}

body.ani-on .ani-fade   { opacity: 0; }
body.ani-on .ani-up     { opacity: 0; transform: translateY(36px); }
body.ani-on .ani-down   { opacity: 0; transform: translateY(-36px); }
body.ani-on .ani-left   { opacity: 0; transform: translateX(40px); }
body.ani-on .ani-right  { opacity: 0; transform: translateX(-40px); }
body.ani-on .ani-zoom   { opacity: 0; transform: scale(0.92); }
body.ani-on .ani-blur   { opacity: 0; filter: blur(12px); }
body.ani-on .ani-flip   { opacity: 0; transform: perspective(1200px) rotateX(15deg); }
body.ani-on .ani-rotate { opacity: 0; transform: rotate(-3deg) scale(0.96); }

/* In-view state */
body.ani-on .ani.is-in {
    opacity: 1;
    transform: none;
    filter: none;
}

/* Stagger — apply to children of a container */
body.ani-on .ani-stagger > .ani-stagger-item {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s, transform 0.6s;
}
body.ani-on .ani-stagger.is-in > .ani-stagger-item { opacity: 1; transform: none; }
body.ani-on .ani-stagger.is-in > .ani-stagger-item:nth-child(1) { transition-delay: 0.05s; }
body.ani-on .ani-stagger.is-in > .ani-stagger-item:nth-child(2) { transition-delay: 0.12s; }
body.ani-on .ani-stagger.is-in > .ani-stagger-item:nth-child(3) { transition-delay: 0.19s; }
body.ani-on .ani-stagger.is-in > .ani-stagger-item:nth-child(4) { transition-delay: 0.26s; }
body.ani-on .ani-stagger.is-in > .ani-stagger-item:nth-child(5) { transition-delay: 0.33s; }
body.ani-on .ani-stagger.is-in > .ani-stagger-item:nth-child(6) { transition-delay: 0.40s; }
body.ani-on .ani-stagger.is-in > .ani-stagger-item:nth-child(7) { transition-delay: 0.47s; }
body.ani-on .ani-stagger.is-in > .ani-stagger-item:nth-child(8) { transition-delay: 0.54s; }
body.ani-on .ani-stagger.is-in > .ani-stagger-item:nth-child(n+9) { transition-delay: 0.6s; }

/* Image hover effects — applied automatically to all article-card images */
body.ani-on .ani-img-wrap {
    overflow: hidden;
    position: relative;
}
body.ani-on .ani-img-wrap img {
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), filter 0.6s;
}

body.ani-on .ani-img-zoom:hover img,
body.ani-on a:hover .ani-img-zoom img,
body.ani-on .ani-img-wrap:hover img { transform: scale(1.06); }

body.ani-on .ani-img-pan:hover img { transform: scale(1.08) translateY(-3%); }

body.ani-on .ani-img-bright:hover img { filter: brightness(1.08) contrast(1.05); }

body.ani-on .ani-img-tilt:hover { transform: perspective(1000px) rotateY(-3deg); transition: transform 0.5s; }

/* Soft auto-apply: any <a> with image inside an article gets a subtle zoom on hover */
body.ani-on article a img,
body.ani-on .news-card a img,
body.ani-on .post-card a img,
body.ani-on .grid-card a img,
body.ani-on a.m1-news img,
body.ani-on a.m2-card img,
body.ani-on a.m3-card img,
body.ani-on a.m4-card img,
body.ani-on a.m5-card img,
body.ani-on a.m6-pair-card img,
body.ani-on a.m6-trio-card img,
body.ani-on a.m6-grid-card img,
body.ani-on a.m7-pair-card img,
body.ani-on a.m7-trio-card img,
body.ani-on a.m7-grid-card img,
body.ani-on a.m8-pair-card img,
body.ani-on a.m8-trio-card img,
body.ani-on a.m8-grid-card img,
body.ani-on a.m9-pair-card img,
body.ani-on a.m9-trio-card img,
body.ani-on a.m9-grid-card img,
body.ani-on a.m10-pair-card img,
body.ani-on a.m10-trio-card img,
body.ani-on a.m10-grid-card img {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), filter 0.4s;
}
body.ani-on article a:hover img,
body.ani-on .news-card a:hover img,
body.ani-on .post-card a:hover img,
body.ani-on .grid-card a:hover img,
body.ani-on a.m1-news:hover img,
body.ani-on a.m2-card:hover img,
body.ani-on a.m3-card:hover img,
body.ani-on a.m4-card:hover img,
body.ani-on a.m5-card:hover img,
body.ani-on a.m6-pair-card:hover img,
body.ani-on a.m6-trio-card:hover img,
body.ani-on a.m6-grid-card:hover img,
body.ani-on a.m7-pair-card:hover img,
body.ani-on a.m7-trio-card:hover img,
body.ani-on a.m7-grid-card:hover img,
body.ani-on a.m8-pair-card:hover img,
body.ani-on a.m8-trio-card:hover img,
body.ani-on a.m8-grid-card:hover img,
body.ani-on a.m9-pair-card:hover img,
body.ani-on a.m9-trio-card:hover img,
body.ani-on a.m9-grid-card:hover img,
body.ani-on a.m10-pair-card:hover img,
body.ani-on a.m10-trio-card:hover img,
body.ani-on a.m10-grid-card:hover img {
    transform: scale(1.05);
}

/* Hero card — bigger hover effect */
body.ani-on a.m1-hero:hover img,
body.ani-on a.m6-hero-link:hover img,
body.ani-on a.m7-hero-link:hover img,
body.ani-on a.m8-hero-link:hover img,
body.ani-on a.m9-hero-link:hover img,
body.ani-on a.m10-hero-link:hover img {
    transform: scale(1.08);
    filter: contrast(1.05);
}

/* Smooth card lift on hover */
body.ani-on a.m6-pair-card,
body.ani-on a.m6-trio-card,
body.ani-on a.m6-grid-card,
body.ani-on a.m7-pair-card,
body.ani-on a.m8-pair-card,
body.ani-on a.m9-pair-card,
body.ani-on a.m10-pair-card { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

body.ani-on a.m6-pair-card:hover,
body.ani-on a.m6-trio-card:hover,
body.ani-on a.m7-pair-card:hover,
body.ani-on a.m8-pair-card:hover,
body.ani-on a.m9-pair-card:hover,
body.ani-on a.m10-pair-card:hover { transform: translateY(-4px); }

/* Respect user preference */
@media (prefers-reduced-motion: reduce) {
    body.ani-on .ani,
    body.ani-on .ani-stagger > .ani-stagger-item,
    body.ani-on a img {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}