/**
 * blog-scroll-driven.css — PR-X4
 * Scroll-driven animations leves (CSS Scroll-driven Animations).
 * Chromium 115+ / Safari 18+ com animation-timeline: view().
 * Sem JS. Browsers sem suporte: conteúdo estático (sem flash).
 *
 * Princípio: subtle, não “efeito de portfolio”. Reduced-motion = off.
 */

/* ── Keyframes (shared) ── */
@keyframes blog-fade-up {
    from {
        opacity: 0.22;
        transform: translateY(0.7rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes blog-fade-in {
    from {
        opacity: 0.15;
    }
    to {
        opacity: 1;
    }
}

@keyframes blog-hero-settle {
    from {
        transform: scale(1.045);
        filter: brightness(0.96);
    }
    to {
        transform: scale(1);
        filter: brightness(1);
    }
}

@keyframes blog-h2-mark {
    from {
        opacity: 0.35;
        letter-spacing: 0.01em;
    }
    to {
        opacity: 1;
        letter-spacing: 0;
    }
}

@supports (animation-timeline: view()) {
    /* ── Article: rich blocks enter softly ── */
    .blog-content .callout,
    .blog-content .blog-accordion,
    .blog-content .verdict-card,
    .blog-content .offer-cta,
    .blog-content figure:not(.article-hero-image),
    .blog-content .blog-table-wrap,
    .blog-content table.blog-table,
    .blog-content aside.richnote:not(.richnote-margin),
    .blog-content .editorial-freshness,
    .expert-tips-section .article-tile,
    .products-love-section .product-love-card {
        animation: blog-fade-up linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 45%;
    }

    /* Chips: quick fade only (no vertical jump in flow) */
    .blog-content .chip[data-pretext-chip] {
        animation: blog-fade-in linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 55%;
    }

    /* H2 section markers — very light */
    .blog-content > h2 {
        animation: blog-h2-mark linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 35%;
    }

    /* Hero: settle as it enters (figure clips overflow) */
    .article-hero-image {
        overflow: hidden;
    }
    .article-hero-image img {
        animation: blog-hero-settle linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 40%;
        transform-origin: center center;
        will-change: transform;
    }

    /* Category grid tiles (when this sheet is linked on category pages) */
    .blog-category-grid .article-tile {
        animation: blog-fade-up linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 40%;
    }

    /* Respect focus / karaoke: don't fight opacity of non-focused blocks */
    .blog-content.reading-focus .callout,
    .blog-content.reading-focus .blog-accordion,
    .blog-content.reading-focus figure,
    .blog-content.reading-focus .verdict-card,
    .blog-content.reading-focus .offer-cta,
    body.tts-karaoke-playing .blog-content .callout,
    body.tts-karaoke-playing .blog-content figure {
        animation: none;
    }

    /* Active TTS block stays fully opaque */
    body.tts-karaoke-playing .blog-content .tts-active-block {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* ── Reduced motion: kill every scroll-driven effect ── */
@media (prefers-reduced-motion: reduce) {
    .blog-content .callout,
    .blog-content .blog-accordion,
    .blog-content .verdict-card,
    .blog-content .offer-cta,
    .blog-content figure,
    .blog-content .blog-table-wrap,
    .blog-content table.blog-table,
    .blog-content aside.richnote,
    .blog-content .editorial-freshness,
    .blog-content .chip[data-pretext-chip],
    .blog-content > h2,
    .article-hero-image img,
    .expert-tips-section .article-tile,
    .products-love-section .product-love-card,
    .blog-category-grid .article-tile {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        will-change: auto !important;
    }
}