/* Ana Pandol — effects.css (propozycja 2026-09-30). Subtelne efekty "ozywiajace". Wszystko dziala TYLKO pod klasa .fx na , ktora dodaje effects.js (nie dodaje jej przy prefers-reduced-motion: reduce). Bez JS / przy reduce strona wyglada dokladnie jak dzis. Tylko transform/opacity (+ box-shadow na hover jednej karty). Ladowac PO site.css. E1 stagger reveal · E2 karta apartamentu (hover) · E3 opinie Google (hover-lift) E4 parallax zdjecia Hvar (PC) · E5 polysk przycisku CTA (PC) · E6 WhatsApp w docku (mobile) */ /* ---------- E1: stagger reveal ---------- app.js dodaje .is-visible; effects.js dodaje .animate do nowych elementow i ustawia --fx-d (0-240 ms) wg kolumny w rzedzie. Opoznienie dziala tylko przy wejsciu (stan .is-visible:not(.fx-in)); po zakonczeniu przejscia JS dodaje .fx-in, zeby hover nie mial opoznienia. */ .fx .animate.is-visible:not(.fx-in){transition-delay:var(--fx-d,0ms)} .fx .apt.animate,.fx .points li.animate,.fx .grev.animate,.fx .std__grid li.animate,.fx .usp__list li.animate,.fx .rel.animate{ transition:opacity .6s var(--ease),transform .6s var(--ease)} /* ---------- E2: karta apartamentu — caly artykul reaguje (PC) ---------- Juz jest: .apt__media:hover img scale(1.03) w .35s. Tu: wolniejszy, spokojniejszy zoom po najechaniu na CALA karte (albo focus na linku), i przesuniecie strzalki "zobacz". */ @media(hover:hover) and (pointer:fine){ .fx .apt .apt__media img,.fx .rel .rel__media img{transition:transform .9s var(--ease)} .fx .apt:hover .apt__media img,.fx .apt:focus-within .apt__media img, .fx .rel:hover .rel__media img,.fx .rel:focus-within .rel__media img{transform:scale(1.035)} .fx .apt:hover .link-arrow span,.fx .apt:focus-within .link-arrow span, .fx .rel:hover .link-arrow span,.fx .rel:focus-within .link-arrow span{transform:translateX(4px)} .fx .apt__title a,.fx .rel h3 a{transition:color .25s} .fx .apt:hover .apt__title a,.fx .rel:hover h3 a{color:var(--lav-deep)} } /* ---------- E3: opinie Google — delikatne uniesienie (PC) ---------- */ @media(hover:hover) and (pointer:fine){ .fx .grev.animate{transition:opacity .6s var(--ease),transform .6s var(--ease),box-shadow .35s var(--ease),border-color .35s} .fx .grev.is-visible:hover{transform:translateY(-3px);box-shadow:0 14px 28px -18px rgba(90,63,116,.45);border-color:var(--lav-soft,#E6DCF0)} } /* ---------- E4: parallax zdjecia w sekcji Hvar (tylko PC, max ±14 px) ---------- Obraz powiekszony 1.06, zeby przesuniecie nigdy nie odslonilo krawedzi. --fx-y ustawia effects.js (rAF, tylko gdy sekcja jest w widoku). */ @media all{ .fx .hvar .split__media.fx-par img{transition:none;transform:translate3d(0,var(--fx-y,0px),0) scale(1.06);will-change:transform} } /* ---------- E5: polysk na przyciskach glownych (PC, raz przy najechaniu) ---------- */ @media(hover:hover) and (pointer:fine){ .fx .btn--light,.fx .btn--dark,.fx #wa-submit-btn{position:relative;overflow:hidden;isolation:isolate} .fx .btn--light::after,.fx .btn--dark::after,.fx #wa-submit-btn::after{ content:"";position:absolute;top:0;bottom:0;left:0;width:60%;pointer-events:none;z-index:-1; background:linear-gradient(100deg,transparent 0,rgba(255,255,255,.28) 50%,transparent 100%); transform:translateX(-120%) skewX(-18deg);opacity:0} .fx .btn--light:hover::after,.fx .btn--dark:hover::after,.fx #wa-submit-btn:hover::after{ opacity:1;transform:translateX(220%) skewX(-18deg);transition:transform .9s var(--ease),opacity .2s} /* na jasnym tle przycisku (btn--light) polysk w odcieniu fioletu, bo bialy bylby niewidoczny */ .fx .btn--light::after{background:linear-gradient(100deg,transparent 0,rgba(119,84,150,.14) 50%,transparent 100%)} } /* ---------- E6: WhatsApp w docku — cichy "sygnal" (mobile) ---------- Po 6 s bez interakcji jeden pierscien (1,6 s), potem co 8 s, maksymalnie 3 razy na wizyte. Pierscien to pseudo-element: transform + opacity, zero wplywu na uklad. */ .fx .dock a.fx-wa{position:relative} .fx .dock a.fx-wa::after{content:"";position:absolute;inset:-1px;border-radius:4px;border:1.5px solid rgba(18,140,126,.55);opacity:0;transform:scale(1);pointer-events:none} .fx .dock a.fx-wa.fx-ping::after{animation:fxPing 1.6s var(--ease) 1} .fx .dock a.fx-wa.fx-ping svg{animation:fxNod 1.6s var(--ease) 1} @keyframes fxPing{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.32)}} @keyframes fxNod{0%,100%{transform:none}18%{transform:scale(1.08)}36%{transform:none}} /* ---------- bezpieczniki ---------- */ @media(prefers-reduced-motion:reduce){ .fx .animate{transition-delay:0ms!important} .fx .hvar .split__media.fx-par img{transform:none!important;will-change:auto} .fx .btn--light::after,.fx .btn--dark::after,.fx #wa-submit-btn::after,.fx .dock a.fx-wa::after{display:none} } @media print{.fx .animate{opacity:1!important;transform:none!important}} /* ===================================================================== TELEFON (urzadzenia dotykowe) — tu jest wiekszosc gosci ===================================================================== */ @media(hover:none){ html{-webkit-tap-highlight-color:rgba(119,84,150,.14)} /* E9: zdjecia kart "osiadaja" przy wejsciu w widok (1.08 -> 1) */ .fx .apt.animate .apt__media img,.fx .rel.animate .rel__media img,.fx .hvar .split__media.animate img,.fx .ivan .split__media.animate img{ transform:scale(1.08);transition:transform 1.5s var(--ease)} .fx .apt.animate.is-visible .apt__media img,.fx .rel.animate.is-visible .rel__media img, .fx .hvar .split__media.animate.is-visible img,.fx .ivan .split__media.animate.is-visible img{transform:scale(1)} /* E10: dotyk — sprzezenie zwrotne (przyciski, karty, opinie) */ .fx .btn,.fx .dock a,.fx .dock__main{transition:transform .14s var(--ease),background .2s,color .2s} .fx .btn:active,.fx .dock a:active{transform:scale(.965)} .fx .apt:active .apt__media img,.fx .rel:active .rel__media img{transform:scale(1.03);transition:transform .5s var(--ease)} .fx .grev:active{transform:scale(.985)} /* E11: pasek USP — ikony "wskakuja" po kolei */ .fx .usp__list li.animate .ico{transform:scale(.55);opacity:0;transition:transform .6s var(--ease) .15s,opacity .5s .15s} .fx .usp__list li.animate.is-visible .ico{transform:none;opacity:1} } /* E7: hero — tresc unosi sie i wygasza przy przewijaniu (dziala tez na PC, najbardziej widoczne na telefonie) */ .fx .hero__inner{transform:translate3d(0,calc(var(--hp,0) * -34px),0);opacity:calc(1 - var(--hp,0) * .9);will-change:transform,opacity} .fx .hero__img{will-change:transform} /* E12: opinie Google — przesuwane palcem (scroll-snap), pokazuje sie kawalek nastepnej karty */ @media(max-width:767px){ .grev__grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px; margin-inline:calc(var(--gut) * -1);padding:4px var(--gut) 14px;scroll-padding-inline:var(--gut); -webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain} .grev__grid::-webkit-scrollbar{display:none} .grev{flex:0 0 84%;scroll-snap-align:start} } @media(prefers-reduced-motion:reduce){ .fx .hero__inner{transform:none!important;opacity:1!important} .fx .usp__list li.animate .ico,.fx .apt.animate .apt__media img,.fx .rel.animate .rel__media img{transform:none!important;opacity:1!important} }