/* ============================================================ Global scroll-reveal Miękkie, nienachalne pojawianie się sekcji i elementów po kolei. Prymityw: opacity + transform (translateY) + .is-visible od JS. Fade (.fade-in) jest pancerny na Safari; osobna klasa .hw-reveal daje odręczny "wpis" (maska --hw) i degraduje do zwykłego fade przy reduce-motion. Bezpiecznik anty-znikanie: chowanie działa TYLKO pod html.reveal-on, które ustawia inline skrypt w jeszcze przed malowaniem, a watchdog zdejmuje je gdy reveal.js nie wystartuje. Brak JS = pełna treść widoczna. ============================================================ */ :root{ --reveal-dur: .85s; --reveal-rise: 18px; } html.reveal-on .fade-in{ opacity: 0; transform: translateY(var(--reveal-rise)); transition: opacity var(--reveal-dur) var(--ease-out, cubic-bezier(0, 0, 0.2, 1)), transform var(--reveal-dur) var(--ease-spring, cubic-bezier(0.34, 1.28, 0.64, 1));} html.reveal-on .fade-in.is-visible{ opacity: 1; transform: none; } /* Wariant cytatu — zachowaj lekki obrót po osiadaniu. */ html.reveal-on .quote.fade-in{ transform: rotate(var(--rot)) translateY(var(--reveal-rise)); } html.reveal-on .quote.fade-in.is-visible{ transform: rotate(var(--rot)) translateY(0); } /* ------------------------------------------------------------ .hw-reveal — odręczny "wpis" (jak .fit__note), ale jako WIELOKROTNA klasa: dodajesz ją do dowolnego napisu, reveal.js sam ją obserwuje i odsłania (własne .is-visible, bez zależności od przodka). Efekt: miękkie osiadanie + maska "wpisywania się" L→P. ------------------------------------------------------------ */ @property --hw{ syntax: ''; inherits: false; initial-value: 0%; } html.reveal-on .hw-reveal{ opacity: 0; transform: rotate(-4deg) translateY(6px) scale(.97); --hw: 0%; -webkit-mask-image: linear-gradient(100deg, #000 var(--hw), rgba(0,0,0,0) calc(var(--hw) + 12%)); mask-image: linear-gradient(100deg, #000 var(--hw), rgba(0,0,0,0) calc(var(--hw) + 12%)); transition: opacity .4s var(--ease-out, cubic-bezier(0,0,0.2,1)) .05s, transform .6s var(--ease-spring, cubic-bezier(0.34, 1.28, 0.64, 1)) .08s, --hw .9s var(--ease-out, cubic-bezier(0,0,0.2,1)) .1s;} html.reveal-on .hw-reveal.is-visible{ opacity: 1; transform: rotate(-2deg) translateY(0) scale(1); --hw: 100%; } /* Hero: notka odręczna wchodzi zwykłym, czystym fade razem z blokiem. Wyłączamy kruchą maskę --hw (ink-in) — to ona „wyskakiwała nie najładniej". Efekt „pisania się" (write-on) dojdzie osobno jako dedykowany task. */ html.reveal-on .hero__handwritten-block .hero__handwritten{ -webkit-mask-image: none; mask-image: none; } /* Reduce Motion: bez RUCHU (translate/scale/rotate), ale zostaje delikatny cross-fade. Opacity nie jest "motion", więc jest zgodne z dostępnością, a treść wciąż pojawia się scrollem, nie wszystko naraz. Nadpisujemy globalny `*{transition-duration:0}` wyższą specyficznością. */ @media (prefers-reduced-motion: reduce){ /* Longhandy (NIE skrót) — skrót zerowałby transition-delay i zabijał inline stagger z reveal.js. Delay zostawiamy dla JS. */ html.reveal-on .fade-in{ opacity: 0 !important; transform: none !important; transition-property: opacity !important; transition-duration: var(--reveal-dur) !important; transition-timing-function: ease !important; } html.reveal-on .fade-in.is-visible{ opacity: 1 !important; } html.reveal-on .quote.fade-in{ transform: rotate(var(--rot)) !important; } /* .hw-reveal bez maski/ruchu — sam cross-fade (lekki obrót zostaje jako styl, nie animujemy go). */ html.reveal-on .hw-reveal{ opacity: 0 !important; transform: rotate(-2deg) !important; -webkit-mask-image: none !important; mask-image: none !important; transition-property: opacity !important; transition-duration: var(--reveal-dur) !important; transition-timing-function: ease !important; } html.reveal-on .hw-reveal.is-visible{ opacity: 1 !important; } }