/* ========================================================================== ALDAR FARMA — animations.css Zasada: animujemy WYŁĄCZNIE transform i opacity. Każda inna właściwość (width, height, top, box-shadow) wymusza layout/paint w każdej klatce i zabija płynność 60 FPS na telefonach. ========================================================================== */ /* -------------------------------------------------------------------------- SCROLL REVEAL Element startuje przesunięty i przezroczysty; JS (IntersectionObserver) dodaje .is-revealed. Bez JS elementy pozostają widoczne — patrz .no-js. -------------------------------------------------------------------------- */ [data-reveal] { opacity: 0; transform: translate3d(0, 1.5rem, 0); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } [data-reveal='left'] { transform: translate3d(-1.5rem, 0, 0); } [data-reveal='right'] { transform: translate3d(1.5rem, 0, 0); } [data-reveal='scale'] { transform: scale(0.96); } [data-reveal='fade'] { transform: none; } [data-reveal].is-revealed { opacity: 1; transform: translate3d(0, 0, 0); will-change: auto; } [data-reveal='scale'].is-revealed { transform: scale(1); } /* Kaskada — kolejne elementy wchodzą z opóźnieniem 60 ms. Powyżej ~8 elementów kaskada zaczyna nużyć, dlatego limit. */ [data-reveal-group] > *:nth-child(1) { --reveal-delay: 0ms; } [data-reveal-group] > *:nth-child(2) { --reveal-delay: 60ms; } [data-reveal-group] > *:nth-child(3) { --reveal-delay: 120ms; } [data-reveal-group] > *:nth-child(4) { --reveal-delay: 180ms; } [data-reveal-group] > *:nth-child(5) { --reveal-delay: 240ms; } [data-reveal-group] > *:nth-child(6) { --reveal-delay: 300ms; } [data-reveal-group] > *:nth-child(n + 7) { --reveal-delay: 360ms; } /* -------------------------------------------------------------------------- KEYFRAMES -------------------------------------------------------------------------- */ @keyframes spin { to { transform: rotate(360deg); } } @keyframes scroll-hint { 0% { transform: translateY(-100%); } 55% { transform: translateY(250%); } 100% { transform: translateY(250%); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes rise-in { from { opacity: 0; transform: translate3d(0, 1rem, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } /* Rozwijanie odpowiedzi FAQ. Animujemy tylko opacity i transform — wysokość zostaje niesterowana, bo jej animacja powoduje reflow. */ .faq__item[open] .faq__a { animation: rise-in var(--dur-base) var(--ease-out); } /* -------------------------------------------------------------------------- HOVER NA OBRAZACH -------------------------------------------------------------------------- */ .zoom-on-hover { overflow: hidden; } .zoom-on-hover img { transition: transform 700ms var(--ease-out); } .zoom-on-hover:hover img { transform: scale(1.05); } /* -------------------------------------------------------------------------- BEZ JAVASCRIPTU Skrypt usuwa klasę .no-js z natychmiast po starcie. Jeśli JS jest wyłączony lub padł — treść jest w pełni widoczna, nie ukryta na zawsze. -------------------------------------------------------------------------- */ .no-js [data-reveal] { opacity: 1; transform: none; } /* -------------------------------------------------------------------------- REDUKCJA RUCHU Uwaga: elementy MUSZĄ być widoczne, nie tylko „bez animacji". -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; transform: none !important; } .hero__scroll-line::after { animation: none; transform: translateY(50%); } .hero__media img { transform: none !important; } }