/** * anim-reveal.css — belépő-animációk kezdőállapota (FOUC-mentes). * * A finom „alulról felúszás" (fade + translateY) belépő-animációkhoz tartozó * KIZÁRÓLAG a kezdőállapot. A tényleges mozgást a scroll-reveal.js (GSAP + * ScrollTrigger) vezérli; ez a fájl csak azt biztosítja, hogy az animálandó * elemek a JS lefutása előtt ne villanjanak be (no FOUC), DE JS-hiba esetén se * maradjanak láthatatlanul. * * Működés: * - Az elemek csak akkor rejtettek (opacity:0), ha a -en ott a * `.anim-ready` flag. Ezt a flaget a header.php-be (wp_head) injektált apró * inline script teszi fel, paint ELŐTT — és csak akkor, ha NINCS * prefers-reduced-motion. Ha a JS nem fut (vagy a GSAP nem töltött be), a * flag hiányzik / leveszi magát, így minden tartalom látható marad. * - Csak `opacity`-t állítunk itt (a translateY-t a GSAP fromTo intézi), így * nincs layout-shift (CLS). * * @package estiwise-theme */ /* Kezdőállapot — csak akkor, ha a JS megerősítette (.anim-ready a -en), és nincs reduced-motion. A translateY-t a GSAP adja (immediateRender). FONTOS: a group-konténereket NEM rejtjük (a JS azok GYEREKEIT animálja). Ha a konténert rejtenénk opacity:0-val, az egész blokk eltűnne (a parent opacity a teljes részfát átlátszóvá teszi), és a gyerek-animáció sosem látszódna. */ /* Egyszeri elemek (címsor, bevezető bekezdés, fade-vizuál) — maga az elem rejtett. */ html.anim-ready [data-reveal]:not([data-reveal="group"]) { opacity: 0; } /* Group — a konténer közvetlen GYEREKEI rejtettek (ezeket animáljuk staggerrel); a konténer látható marad. */ html.anim-ready [data-reveal="group"] > * { opacity: 0; } /* HERO (above-the-fold) — CSS-vezérelt belépő, NEM GSAP. Indok: a footer-ből töltődő GSAP csak ~150–300 ms-mal a first paint UTÁN fut le; ezalatt a hero háttér-shape-jei már látszanak, a tartalom viszont rejtve van → betöltési „villanás" / lag. A CSS-animáció az első paintnél AZONNAL indul (nem vár a GSAP-ra), így a hero-tartalom a shape-ekkel együtt, simán úszik be. A reduced-motion / no-JS eseteket a `.anim-ready` flag hiánya kezeli (lásd lent). */ html.anim-ready .hero__content > * { opacity: 0; animation: esti-rise 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) both; } html.anim-ready .hero__content > *:nth-child(2) { animation-delay: 0.09s; } html.anim-ready .hero__content > *:nth-child(3) { animation-delay: 0.18s; } html.anim-ready .hero__content > *:nth-child(4) { animation-delay: 0.27s; } /* A hero ajánlat-builder vizuál: csak fade (handoff — itt nincs felúszás). */ html.anim-ready .hero__visual { opacity: 0; animation: esti-fade 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) both; animation-delay: 0.1s; } @keyframes esti-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } @keyframes esti-fade { from { opacity: 0; } to { opacity: 1; } } /* ABOVE-THE-FOLD belépő (data-entrance) — CSS-vezérelt, mint a hero: AZONNAL fut az első paintnél, NEM vár a footer-GSAP-ra → nincs betöltési „villanás". Az aloldalak fejléceihez (a hajtás fölötti tartalomhoz). A scroll-triggerelt [data-reveal] / [data-parallax] a hajtás ALATTI tartalomra való. Reduced-motion / no-JS: a `.anim-ready` flag hiánya kezeli (lásd lent). */ html.anim-ready [data-entrance]:not([data-entrance="group"]) { opacity: 0; animation: esti-rise 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) both; } html.anim-ready [data-entrance="group"] > * { opacity: 0; animation: esti-rise 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) both; } html.anim-ready [data-entrance="group"] > *:nth-child(2) { animation-delay: 0.08s; } html.anim-ready [data-entrance="group"] > *:nth-child(3) { animation-delay: 0.16s; } html.anim-ready [data-entrance="group"] > *:nth-child(4) { animation-delay: 0.24s; } html.anim-ready [data-entrance="group"] > *:nth-child(5) { animation-delay: 0.32s; } html.anim-ready [data-entrance="group"] > *:nth-child(6) { animation-delay: 0.40s; } /* Akadálymentesség — végső védőháló: reduced-motion alatt SEMMI nem rejtett, nincs elmozdulás és nincs animáció, függetlenül a JS-től. (A flaget az inline script eleve nem teszi fel reduced-motion esetén; ez az !important csak biztosíték.) */ @media (prefers-reduced-motion: reduce) { [data-reveal]:not([data-reveal="group"]), [data-reveal="group"] > *, [data-entrance]:not([data-entrance="group"]), [data-entrance="group"] > *, .hero__content > *, .hero__visual { opacity: 1 !important; transform: none !important; animation: none !important; } }