/* Efekty "wow" dokładane do oryginalnego wyglądu Bricks. Każda sekcja = jeden plik JS w fx/. */ /* 1. Hero: Ken Burns + przejście slajdów "roletą" (see-hero.js) */ .hero-slider .hero-image-slider { overflow: hidden; border-radius: var(--radius-m); } .hero-slider .is-active .hero-image-slider__image, .hero-slider .see-hero-prev .hero-image-slider__image { animation: see-ken-burns 9s cubic-bezier(0.33, 0, 0.67, 1) forwards; } @keyframes see-ken-burns { from { transform: scale(1); } to { transform: scale(1.08); } } /* Poprawka CLS (nie efekt): przed startem Splide 5 slajdów stoi w rzędzie, slider ma ~1/5 docelowej wysokości i po inicjalizacji spycha stronę w dół. Pierwszy slajd od razu na pełną szerokość i widoczny. */ .hero-slider:not(.is-initialized) { visibility: visible; } /* Przed inicjalizacją slajdy nie mają jeszcze klasy splide__slide - celujemy w dzieci listy. */ .hero-slider:not(.is-initialized) .splide__list > * { flex: 0 0 100%; } .hero-slider:not(.is-initialized) .splide__list > :not(:first-child) { display: none; } /* Poprzedni slajd zostaje pod spodem, nowy zasłania go od prawej zamiast przenikania. */ .hero-slider.see-hero-wipe .splide__slide.see-hero-prev { opacity: 1 !important; z-index: 1; } .hero-slider.see-hero-wipe .splide__slide.is-active { opacity: 1 !important; z-index: 2; } .hero-slider.see-hero-wipe .splide__slide.see-hero-in { animation: see-hero-wipe 1.1s cubic-bezier(0.77, 0, 0.18, 1) both; } @keyframes see-hero-wipe { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } } /* 2. Nagłówki: słowa wysuwają się spod maski (see-headings.js) */ .see-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; } .see-word__inner { display: inline-block; transform: translateY(110%); transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1) var(--see-word-delay, 0ms); } .see-heading-in .see-word__inner { transform: none; } /* 3. Zdjęcia: odsłanianie od dołu + paralaksa (see-images.js) */ .see-img-frame { overflow: hidden; } .see-img { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s cubic-bezier(0.76, 0, 0.24, 1); will-change: transform; } .see-img.is-in { clip-path: inset(0 0 0 0); } /* 5. Zespół: pochylenie 3D za kursorem + odblask (see-team.js) */ .see-tilt { transform: perspective(900px) rotateX(var(--see-tilt-x, 0deg)) rotateY(var(--see-tilt-y, 0deg)); transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .see-tilt.is-tilting { transition-duration: 0.12s; } .see-tilt::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(circle at var(--see-glare-x, 50%) var(--see-glare-y, 50%), rgba(255, 255, 255, 0.28), transparent 55%); opacity: 0; transition: opacity 0.4s; } .see-tilt.is-tilting::after { opacity: 1; } /* 6. Logo spółki-córki: słowo pod "see." pisze się litera po literze (see-logo.js) */ .see-logo-type { clip-path: polygon(0 0, 100% 0, 100% var(--see-split), var(--see-type-x) var(--see-split), var(--see-type-x) 100%, 0 100%); } /* Zanim ruszy see-logo.js, słowo pod "see." jest już schowane - bez mignięcia pełnego logo (klasę see-logo-pending stawia skrypt inline w , zdejmuje see-logo.js). */ html.see-logo-pending #brx-header .brxe-logo img[src*="see-construction-logo"], html.see-logo-pending #brx-header .brxe-logo img[src*="see-architecture-logo-projekty"] { clip-path: inset(0 0 31.7% 0); } /* 7. Przejścia między podstronami: treść się przenika, nagłówek z logo stoi w miejscu */ @view-transition { navigation: auto; } #brx-header { view-transition-name: see-header; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.4s; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } .hero-slider .hero-image-slider__image, .hero-slider.see-hero-wipe .splide__slide { animation: none !important; } .see-word__inner, .see-img { transform: none !important; clip-path: none !important; transition: none !important; } } /* Strona 404 (nie efekt): wyszukiwarka WP bez backendu nie działa - chowamy pole. Nie display:none - Bricks ma display:flex !important w @layer bricks, a !important z warstwy wygrywa z każdym spoza niej. visibility zdejmuje też pole z kolejności Tab. */ .bricks-404-wrapper .bricks-search-form { position: absolute; visibility: hidden; }