/* * HPD Fade Up — globalna animacija sadrzaja. * Jednostavan fade up + fade in: element je pocetno skriven ispod * (opacity 0, translateY 50px) i kad ude u viewport podigne se i pojavi. * * Siri selektori (body.archive/.search/.blog > .site-main > article, * .entry-thumbnail, .entry-content > *) sakrivaju sadrzaj JOS PRIJE * prvog iscrtavanja — klasu .hpd-anim dodaje inline skripta na pocetku * — pa prvi element nema "bljesak" (flash). * Prijelaz je definiran SAMO na .hpd-in (bez nezeljenog down+fade-out). */ /* Pre-paint skrivanje arhiva i blog indeksa — cijele kartice postova */ html.hpd-anim body.archive .site-main > article, html.hpd-anim body.search .site-main > article, html.hpd-anim body.blog .site-main > article { opacity: 0; } /* Pre-paint skrivanje na postu/stranici — istaknuta foto i blokovi sadrzaja */ html.hpd-anim .entry-thumbnail, html.hpd-anim .entry-content > * { opacity: 0; } /* Pocetno skriveno stanje — bez prijelaza (element samo nestane ispod) */ html.hpd-anim .hpd-fade-up { opacity: 0; transform: translateY(50px); will-change: opacity, transform; } /* Vidljivo kad ude u viewport — prijelaz samo ovdje: fade up + fade in */ html.hpd-anim .hpd-fade-up.hpd-in { opacity: 1; transform: none; transition: opacity 1.4s ease, transform 1.4s cubic-bezier(0.25, 0.1, 0.25, 1); } /* Kaskadni delay za gridove (kartice, galerije) — red po red */ html.hpd-anim .hpd-fade-grid > .hpd-fade-up.hpd-in:nth-child(2), html.hpd-anim .hpd-fade-grid > .hpd-fade-up.hpd-in:nth-child(3) { transition-delay: 0.1s; } html.hpd-anim .hpd-fade-grid > .hpd-fade-up.hpd-in:nth-child(4), html.hpd-anim .hpd-fade-grid > .hpd-fade-up.hpd-in:nth-child(5) { transition-delay: 0.2s; } html.hpd-anim .hpd-fade-grid > .hpd-fade-up.hpd-in:nth-child(6), html.hpd-anim .hpd-fade-grid > .hpd-fade-up.hpd-in:nth-child(7) { transition-delay: 0.3s; } html.hpd-anim .hpd-fade-grid > .hpd-fade-up.hpd-in:nth-child(8), html.hpd-anim .hpd-fade-grid > .hpd-fade-up.hpd-in:nth-child(9) { transition-delay: 0.4s; } /* Spaceri i elementi bez visine se ne animiraju */ html.hpd-anim .hpd-fade-up.wp-block-spacer { opacity: 1; transform: none; } /* Sigurnosno: ako glavni JS ne uspije, prikazi sve nakon timeouta — sadrzaj nikad ne smije ostati nevidljiv. */ html.hpd-anim.hpd-timeout .hpd-fade-up, html.hpd-anim.hpd-timeout .site-main > article, html.hpd-anim.hpd-timeout .entry-thumbnail, html.hpd-anim.hpd-timeout .entry-content > * { opacity: 1 !important; transform: none; transition: none; } /* Bez animacije za korisnike koji su iskljucili animacije (prefers-reduced-motion) */ @media (prefers-reduced-motion: reduce) { html.hpd-anim .hpd-fade-up, html.hpd-anim .hpd-fade-up.hpd-in, html.hpd-anim .site-main > article, html.hpd-anim .entry-thumbnail, html.hpd-anim .entry-content > * { opacity: 1; transform: none; transition: none; } }