/* ============================================================ LEAVES SYSTEM — parallax + floating loop ============================================================ 3 warstwy głębi (klasa na każdym ): - .leaf.bg = blur 10px, opacity 0.22, najwolniej (data-speed 0.12-0.18) - .leaf.mid = blur 3px, opacity 0.50, średnio (data-speed 0.28-0.38) - .leaf.fg = blur 0px, opacity 0.75, najszybciej (data-speed 0.50-0.55) Każda sekcja-kontener z liśćmi musi mieć: - data-leaves-section (atrybut) - position: relative + overflow: hidden (automatycznie przez selektor poniżej) Treść sekcji jest podnoszona z-index 5 (przez selektor który łapie .container ORAZ .hero-compact-inner — bo hero podstron nie używa .container) Globalny toggle: ============================================================ */ .leaves-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; } .leaf { position: absolute; pointer-events: none; user-select: none; will-change: transform; animation: leafFloat var(--float-dur, 12s) ease-in-out infinite; animation-delay: var(--float-delay, 0s); transform: translate3d(var(--parallax-x, 0px), var(--parallax-y, 0px), 0) rotate(var(--rot, 0deg)); } @keyframes leafFloat { 0%, 100% { transform: translate3d(var(--parallax-x, 0px), var(--parallax-y, 0px), 0) rotate(var(--rot, 0deg)); } 50% { transform: translate3d( calc(var(--parallax-x, 0px) + var(--float-x, 8px)), calc(var(--parallax-y, 0px) + var(--float-y, -6px)), 0 ) rotate(calc(var(--rot, 0deg) + var(--float-rot, 3deg))); } } /* Bazowe warstwy (na jasnym tle - np. sekcja technologii) */ .leaf.bg { filter: blur(10px); opacity: 0.22; z-index: 1; } .leaf.mid { filter: blur(3px); opacity: 0.50; z-index: 2; } .leaf.fg { filter: blur(0); opacity: 0.75; z-index: 3; } /* Na ciemnym tle (sekcja liczb + hero podstron) — jaśniejsze przez brightness */ .stats-section .leaf.bg, .hero-compact .leaf.bg { opacity: 0.22; filter: blur(12px) brightness(1.4); } .stats-section .leaf.mid, .hero-compact .leaf.mid { opacity: 0.45; filter: blur(3px) brightness(1.2); } .stats-section .leaf.fg, .hero-compact .leaf.fg { opacity: 0.70; filter: brightness(1.15); } /* Hero podstron (50vh, jeszcze dyskretniej) */ .hero-compact .leaf.bg { opacity: 0.18; } .hero-compact .leaf.mid { opacity: 0.42; } .hero-compact .leaf.fg { opacity: 0.62; } /* Globalny wyłącznik */ body.no-leaves .leaves-layer { display: none !important; } /* Accessibility - bez animacji */ @media (prefers-reduced-motion: reduce) { .leaf { animation: none !important; } } /* Mobile - tylko mid/fg, bez parallax JS */ @media (max-width: 640px) { .leaf.bg { display: none; } .leaf.mid { opacity: 0.32; filter: blur(4px); } .leaf.fg { opacity: 0.60; } } /* Sekcja-kontener z liśćmi — pozycjonowanie i treść NAD liśćmi. Selektor łapie zarówno .container (sekcje home) jak i .hero-compact-inner (hero podstron). */ [data-leaves-section] { position: relative; overflow: hidden; } [data-leaves-section] > .container, [data-leaves-section] > .hero-compact-inner { position: relative; z-index: 5; }