/* =========================================================
   NANIKA — lekkie animacje wejścia
   =========================================================

   Reveal korzysta z @keyframes zamiast `transition`.

   Dzięki temu globalne animacje wejścia NIE nadpisują
   transition ustawionego na kartach kategorii, produktach,
   przyciskach itd. Hover może więc płynnie używać własnego
   `transform`, a reveal nadal zachowuje przesunięcie i skalę.
   ========================================================= */

html.nanika-js .nanika-reveal
{
    --nanika-reveal-y: 22px;
    --nanika-reveal-scale: 1;

    opacity: 0;
    translate: 0 var(--nanika-reveal-y);
    scale: var(--nanika-reveal-scale);
    will-change: opacity, translate, scale;
}

html.nanika-js .nanika-reveal.nanika-reveal--soft
{
    --nanika-reveal-y: 14px;
}

html.nanika-js .nanika-reveal.nanika-reveal--scale
{
    --nanika-reveal-y: 18px;
    --nanika-reveal-scale: 0.985;
}

html.nanika-js .nanika-reveal.is-visible
{
    animation: nanika-reveal-in 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--nanika-reveal-delay, 0ms);
}

@keyframes nanika-reveal-in
{
    from
    {
        opacity: 0;
        translate: 0 var(--nanika-reveal-y);
        scale: var(--nanika-reveal-scale);
    }

    to
    {
        opacity: 1;
        translate: 0 0;
        scale: 1;
    }
}

/*
 * Ukrycie elementów przed uruchomieniem JavaScriptu zapobiega
 * ich krótkotrwałemu pojawieniu się przed startem animacji.
 *
 * Na zwykłych podstronach nie ukrywamy całego artykułu. Długi artykuł,
 * taki jak polityka prywatności, może być wielokrotnie wyższy od okna
 * przeglądarki i przez to nie osiągnąć wymaganego progu IntersectionObserver.
 */
html.nanika-js:not(.nanika-motion-ready):not(.nanika-motion-fallback) main > section,
html.nanika-js:not(.nanika-motion-ready):not(.nanika-motion-fallback) main > article:not(.default-page article),
html.nanika-js:not(.nanika-motion-ready):not(.nanika-motion-fallback) .home-categories-grid > *,
html.nanika-js:not(.nanika-motion-ready):not(.nanika-motion-fallback) .home-editorial-products > *,
html.nanika-js:not(.nanika-motion-ready):not(.nanika-motion-fallback) .home-editorial-copy > *,
html.nanika-js:not(.nanika-motion-ready):not(.nanika-motion-fallback) .home-philosophy-int > *,
html.nanika-js:not(.nanika-motion-ready):not(.nanika-motion-fallback) .home-section-head > *,
html.nanika-js:not(.nanika-motion-ready):not(.nanika-motion-fallback) .home-journal-inner > *,
html.nanika-js:not(.nanika-motion-ready):not(.nanika-motion-fallback) ul.products > li.product,
html.nanika-js:not(.nanika-motion-ready):not(.nanika-motion-fallback) .nanika-product-gallery__thumbs,
html.nanika-js:not(.nanika-motion-ready):not(.nanika-motion-fallback) .nanika-product-gallery__main,
html.nanika-js:not(.nanika-motion-ready):not(.nanika-motion-fallback) .product-summary > *,
html.nanika-js:not(.nanika-motion-ready):not(.nanika-motion-fallback) .woocommerce-tabs,
html.nanika-js:not(.nanika-motion-ready):not(.nanika-motion-fallback) .related.products,
html.nanika-js:not(.nanika-motion-ready):not(.nanika-motion-fallback) .default-page article > header,
html.nanika-js:not(.nanika-motion-ready):not(.nanika-motion-fallback) .default-page .entry-content > *,
html.nanika-js:not(.nanika-motion-ready):not(.nanika-motion-fallback) .about-hero > *,
html.nanika-js:not(.nanika-motion-ready):not(.nanika-motion-fallback) .about-values > *,
html.nanika-js:not(.nanika-motion-ready):not(.nanika-motion-fallback) .about-story > *,
html.nanika-js:not(.nanika-motion-ready):not(.nanika-motion-fallback) .contact-hero > *,
html.nanika-js:not(.nanika-motion-ready):not(.nanika-motion-fallback) .contact-grid > *,
html.nanika-js:not(.nanika-motion-ready):not(.nanika-motion-fallback) .site-footer .footer-grid > *,
html.nanika-js:not(.nanika-motion-ready):not(.nanika-motion-fallback) .site-footer .footer-bottom
{
    opacity: 0;
}

@media (prefers-reduced-motion: reduce)
{
    html.nanika-js .nanika-reveal,
    html.nanika-js .nanika-reveal.nanika-reveal--soft,
    html.nanika-js .nanika-reveal.nanika-reveal--scale,
    html.nanika-js .nanika-reveal.is-visible
    {
        opacity: 1;
        translate: none;
        scale: none;
        animation: none;
    }
}