/* ========================================================================== DOHO Studio — motion-full.css -------------------------------------------------------------------------- WARIANT PEŁNY ("niech widać, że coś się dzieje") Zawiera wszystko z wariantu delikatnego, plus: - morph kafelka galerii do lightboxa (view-transition-name) - scroll-driven animations (efekt "scrubbing" — animacja przypięta do pozycji scrolla, nie odpalana raz) - mocniejszy parallax, wyraźniejsze hovery - licznik i nagłówki reagujące na scroll -------------------------------------------------------------------------- JAK WYŁĄCZYĆ / ZMIENIĆ NA DELIKATNY Podmień w każdej podstrony: motion-full.css -> motion-subtle.css Albo usuń całkiem, a do base.css dopisz: .fade-up,.fade-left,.fade-right{opacity:1} -------------------------------------------------------------------------- Wszystko poniżej respektuje prefers-reduced-motion. ========================================================================== */ /* Sygnał dla app.js — włącza morph galerii */ :root { --motion-variant: "full"; } /* ========================================================================== 1. PRZEJŚCIA MIĘDZY PODSTRONAMI ========================================================================== */ @view-transition { navigation: auto; } @media (prefers-reduced-motion: no-preference) { ::view-transition-old(root) { animation: vt-out .26s cubic-bezier(.4, 0, 1, 1) both; } ::view-transition-new(root) { animation: vt-in .34s cubic-bezier(0, 0, .2, 1) both; } .navbar { view-transition-name: doho-nav; } footer { view-transition-name: doho-footer; } ::view-transition-old(doho-nav), ::view-transition-new(doho-nav), ::view-transition-old(doho-footer), ::view-transition-new(doho-footer) { animation: none; mix-blend-mode: normal; } } @keyframes vt-out { to { opacity: 0; transform: translateY(-14px) scale(.985); } } @keyframes vt-in { from { opacity: 0; transform: translateY(18px) scale(1.012); } } /* ========================================================================== 2. MORPH GALERII DO LIGHTBOXA -------------------------------------------------------------------------- Kliknięty kafelek "rozwija się" do pełnego widoku zamiast przenikać. Nazwy muszą być UNIKALNE w dokumencie, więc app.js nadaje view-transition-name tylko klikniętemu kafelkowi i zdejmuje po zamknięciu. app.js robi to WYŁĄCZNIE gdy --motion-variant == "full". Bez tego pliku atrybut nie jest nadawany — zero efektu, zero kosztu. ========================================================================== */ @media (prefers-reduced-motion: no-preference) { ::view-transition-group(lb-image) { animation-duration: .42s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); } ::view-transition-old(lb-image), ::view-transition-new(lb-image) { /* Bez crossfade — chcemy czysty morph kształtu */ animation: none; mix-blend-mode: normal; height: 100%; overflow: clip; } ::view-transition-old(lb-image) { object-fit: cover; } ::view-transition-new(lb-image) { object-fit: contain; } /* KRYTYCZNE: gdy lightbox jest otwarty, "root" (cała strona) NIE może brać udziału w przejściu — inaczej przy przełączaniu zdjęcia prześwituje navbar i menu pod spodem (efekt migotania). Zamrażamy root: stara i nowa migawka są identyczne i nieruchome, animuje się tylko obrazek. */ html.lb-active::view-transition-old(root), html.lb-active::view-transition-new(root) { animation: none; mix-blend-mode: normal; } /* Navbar i footer mają własne view-transition-name (dla przejść MIĘDZY stronami). Ale w lightboxie to one powodują "biały pasek" — navbar ze scrollowanym białym tłem jest wyrywany do osobnej warstwy i miga przy każdym przełączeniu zdjęcia. Zdejmujemy im nazwę na czas lightboxa, żeby zostały częścią zamrożonego roota i się nie ruszały. */ html.lb-active .navbar, html.lb-active footer { view-transition-name: none; } } /* ========================================================================== 3. ODSŁANIANIE SEKCJI — scroll-driven, z fallbackiem -------------------------------------------------------------------------- Domyślnie: IntersectionObserver + .visible (działa wszędzie). Gdy przeglądarka umie animation-timeline: view() — nadpisujemy to animacją przypiętą do scrolla. Efekt jest płynniejszy, bo elementy wjeżdżają proporcjonalnie do przewinięcia, a nie skokiem. Wsparcie view(): Chrome 115+, Safari 26+. Firefox za flagą (~83%). Bez wsparcia zostaje wariant z .visible. Nic się nie psuje. ========================================================================== */ .fade-up, .fade-left, .fade-right { opacity: 1; } @media (prefers-reduced-motion: no-preference) { /* --- Warstwa bazowa (IntersectionObserver) ---------------------------- */ .fade-up, .fade-left, .fade-right { opacity: 0; transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1); } .fade-up { transform: translateY(38px); } .fade-left { transform: translateX(-38px); } .fade-right { transform: translateX(38px); } .fade-up.visible, .fade-left.visible, .fade-right.visible { opacity: 1; transform: none; } @media (max-width: 900px) { .fade-left, .fade-right { transform: translateY(30px); } } /* --- Warstwa scroll-driven (nadpisuje powyższe, gdy wspierana) -------- */ @supports (animation-timeline: view()) { .fade-up, .fade-left, .fade-right { /* transition już niepotrzebne — animacja steruje wszystkim */ transition: none; animation: reveal-up linear both; animation-timeline: view(); animation-range: entry 5% cover 32%; } .fade-left { animation-name: reveal-left; } .fade-right { animation-name: reveal-right; } /* .visible nie jest już potrzebne, ale nie może psuć */ .fade-up.visible, .fade-left.visible, .fade-right.visible { opacity: initial; transform: initial; } @media (max-width: 900px) { .fade-left, .fade-right { animation-name: reveal-up; } } /* Kafelki portfolio: BEZ animacji wejścia. Był tu wcześniej scroll-driven fade-in (animation-timeline: view()), ale klient zgłosił realny problem: animation-range kończył się na "cover 40%" liczonym od pełnego wejścia w viewport, więc kafelki w ostatnim rzędzie (blisko stopki, gdzie scroll się kończy) nigdy nie dobiegały do opacity:1 - zostawały trwale przymglone. Usunięte całkowicie, zgodnie z prośbą klienta. Kafelki są widoczne od razu. */ /* Liczniki: skala przy wjeździe */ .numbers .item { animation: number-in linear both; animation-timeline: view(); animation-range: entry 10% cover 30%; } /* Kropkowany pas pod nagłówkiem rozjeżdża się w rytm scrolla */ .section-head h3::after { animation: dots-grow linear both; animation-timeline: view(); animation-range: entry 20% cover 25%; transform-origin: left center; } } } @keyframes reveal-up { from { opacity: 0; transform: translateY(56px) scale(.96); } to { opacity: 1; transform: none; } } @keyframes reveal-left { from { opacity: 0; transform: translateX(-56px); } to { opacity: 1; transform: none; } } @keyframes reveal-right { from { opacity: 0; transform: translateX(56px); } to { opacity: 1; transform: none; } } /* @keyframes tile-in celowo usunięte razem z regułą, która go używała - patrz komentarz wyżej: kafelki portfolio są teraz bez animacji wejścia. */ @keyframes number-in { from { opacity: 0; transform: translateY(20px) scale(.92); } to { opacity: 1; transform: none; } } @keyframes dots-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ========================================================================== 4. PARALLAX NA HERO — mocniejszy -------------------------------------------------------------------------- Ta sama technika co w wariancie delikatnym (scroll-timeline, nie background-attachment: fixed — iOS go ignoruje przy background-size: cover). Większy zakres ruchu i wyraźniejsze zanikanie podpisu. ========================================================================== */ @media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) { @supports (animation-timeline: scroll()) { .slides { animation: hero-parallax-full linear both; animation-timeline: scroll(root block); animation-range: 0 100vh; will-change: transform; } .caption { animation: hero-caption-full linear both; animation-timeline: scroll(root block); animation-range: 0 70vh; } /* Przyciemnienie gęstnieje przy scrollu */ #home::after { animation: hero-dim linear both; animation-timeline: scroll(root block); animation-range: 0 100vh; } } } @keyframes hero-parallax-full { to { transform: translate3d(0, 26%, 0) scale(1.12); } } @keyframes hero-caption-full { to { transform: translate(-50%, -95%) scale(.94); opacity: 0; } } /* Animujemy background-color (nie skrót background) — węższa własność, jeden element na stronę, koszt pomijalny. */ @keyframes hero-dim { to { background-color: rgba(0, 0, 0, .62); } } /* ========================================================================== 5. DETALE — wyraźniejsze ========================================================================== */ @media (prefers-reduced-motion: no-preference) { /* --- Kafelki portfolio ------------------------------------------------ */ .item-img img { transition: transform .8s cubic-bezier(.22, 1, .36, 1), filter .5s ease; } .item-img:hover img, .item-img:focus-within img { transform: scale(1.09); filter: brightness(1.06) saturate(1.05); } .item-img { transition: box-shadow .45s ease, transform .45s cubic-bezier(.22, 1, .36, 1); } .item-img:hover { transform: translateY(-4px); box-shadow: 0 18px 38px -14px rgba(0, 0, 0, .3); } .item-img-overlay { transition: opacity .45s ease, transform .45s cubic-bezier(.22, 1, .36, 1), backdrop-filter .45s ease; } .item-img:hover .item-img-overlay, .item-img:focus-within .item-img-overlay { backdrop-filter: blur(1px); } .overlay-info .zoom { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), background .3s ease, color .3s ease; } .item-img:hover .overlay-info .zoom { transform: translateY(0) scale(1.06); } /* --- Karty oferty ------------------------------------------------------ */ .services .item, .offer-card { transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s ease; } .services .item:hover, .offer-card:hover { transform: translateY(-8px); box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .22); } .services .item .icon, .offer-card .icon { transition: background .4s ease, color .4s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1); } .services .item:hover .icon, .offer-card:hover .icon { transform: scale(1.14) rotate(-4deg); } /* --- Kroki procesu ----------------------------------------------------- */ .process-box { transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s ease; } .process-box:hover { transform: translateY(-6px); box-shadow: 0 20px 42px -14px rgba(0, 0, 0, .2); } .process-box::after { transition: color .5s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1); } .process-box:hover::after { color: rgba(88, 43, 54, .22); transform: scale(1.08); } .process-icon { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), background .4s ease; } .process-box:hover .process-icon { transform: scale(1.1) rotate(-5deg); background: var(--brand); color: #fff; } /* --- Nagłówki: fallback gdy brak scroll-driven ------------------------- */ @supports not (animation-timeline: view()) { .section-head h3::after { transform-origin: left center; transform: scaleX(0); transition: transform .85s cubic-bezier(.22, 1, .36, 1) .12s; } .section-head.visible h3::after { transform: scaleX(1); } } /* --- Przyciski --------------------------------------------------------- */ .buton { transition: background .35s ease, color .35s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s ease; } .buton:hover { transform: translateY(-3px); box-shadow: 0 10px 22px -8px rgba(88, 43, 54, .5); } .buton:active { transform: translateY(-1px); } /* Animujemy letter-spacing + transform, nie padding — padding wymusza reflow przy każdej klatce. */ .styled-button { transition: background .3s ease, color .3s ease, letter-spacing .3s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1); } .styled-button:hover { letter-spacing: .6px; transform: translateX(2px); } /* --- Nawigacja --------------------------------------------------------- */ .nav-links a::after { transition: width .45s cubic-bezier(.22, 1, .36, 1); } .logo { transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); } .logo:hover { transform: scale(1.04); } /* --- Ikony społecznościowe -------------------------------------------- */ .social-icon a, .social-footer-box a { transition: background .3s ease, color .3s ease, border-color .3s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1); } .social-icon a:hover, .social-footer-box a:hover { transform: translateY(-5px) scale(1.06); } /* --- Lightbox / popup -------------------------------------------------- */ dialog.lightbox[open], dialog.popup[open] { animation: dlg-in-full .34s cubic-bezier(.22, 1, .36, 1); } dialog.lightbox[open]::backdrop, dialog.popup[open]::backdrop { animation: backdrop-in .34s ease; } .lb-close, .lb-prev, .lb-next { transition: background .25s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1); } .lb-close:hover { transform: rotate(90deg); } .lb-prev:hover { transform: translateY(-50%) translateX(-3px); } .lb-next:hover { transform: translateY(-50%) translateX(3px); } /* --- Powrót na górę ---------------------------------------------------- */ .to-top { transition: opacity .3s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1), background .3s ease; } .to-top:hover { transform: translateY(-5px) scale(1.05); } /* --- Kropki ------------------------------------------------------------ */ .slider-dots button, .reviews-dots button { transition: background .3s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1); } .slider-dots button:hover { transform: scale(1.25); } .reviews-dots button:hover { transform: scale(1.25); } /* --- Rotujące słowo w hero -------------------------------------------- */ .words b { transition: opacity .6s ease, transform .6s cubic-bezier(.22, 1, .36, 1); } /* --- Awatar w opiniach -------------------------------------------------- Bez hover-scale: .reviews ma overflow:hidden (wymagane przez mechanikę karuzeli - inaczej nieaktywne slajdy byłyby widoczne obok). scale() wypycha kółko poza tę granicę i ucina je od góry. Klient zgłosił to jako błąd, więc efekt usunięty całkowicie zamiast łatany. */ } @keyframes dlg-in-full { from { opacity: 0; transform: scale(.94) translateY(12px); } } @keyframes backdrop-in { from { opacity: 0; } } /* ========================================================================== RESPEKTOWANIE prefers-reduced-motion ========================================================================== */ @media (prefers-reduced-motion: reduce) { .fade-up, .fade-left, .fade-right { opacity: 1; transform: none; animation: none; } .gallery .items, .numbers .item { opacity: 1; transform: none; animation: none; } .section-head h3::after { transform: scaleX(1); animation: none; } .slides, .caption, #home::after { animation: none; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }