/* KUGUART GOLD — 08 Motion * Globalne, delikatne wejścia nagłówków i sekcji. * Działa automatycznie na klasach kg-* — bez dopisywania animacji w Elementorze. * * Start: html.kg-motion (boot w , tylko gdy użytkownik nie ogranicza ruchu). * Wejście: klasa .is-in dodawana przez assets/js/motion.js przy IntersectionObserver. * * Wyłączenie: kg-static na elemencie lub rodzicu. * Wymuszenie: kg-reveal na dowolnym bloku. */ /* ========================================================================== 16. REVEAL — shared targets ========================================================================== */ html.kg-motion :is( .kg-hero-title, .kg-section-title, .kg-subtitle, .kg-section-label, .kg-lead, .kg-quote, .kg-card, .kg-frame, .kg-actions, .kg-reveal, .kg-product-title, .kg-hero :is(h1, h2, h3), .kg-section :is(h1, h2, h3), .kg-stack :is(h1, h2, h3), .kg-hero-content :is(h1, h2, h3) ):not(.kg-static):not(.is-in) { opacity: 0; transform: translate3d(0, var(--kg-reveal-y, 1.15rem), 0); } html.kg-motion :is( .kg-hero-title, .kg-section-title, .kg-subtitle, .kg-section-label, .kg-lead, .kg-quote, .kg-card, .kg-frame, .kg-actions, .kg-reveal, .kg-product-title, .kg-hero :is(h1, h2, h3), .kg-section :is(h1, h2, h3), .kg-stack :is(h1, h2, h3), .kg-hero-content :is(h1, h2, h3) ):not(.kg-static) { transition: opacity var(--kg-duration-reveal, 900ms) var(--kg-ease-out) var(--kg-reveal-delay, 0ms), transform var(--kg-duration-reveal, 900ms) var(--kg-ease-out) var(--kg-reveal-delay, 0ms); } html.kg-motion :is( .kg-hero-title, .kg-section-title, .kg-subtitle, .kg-section-label, .kg-lead, .kg-quote, .kg-card, .kg-frame, .kg-actions, .kg-reveal, .kg-product-title, .kg-hero :is(h1, h2, h3), .kg-section :is(h1, h2, h3), .kg-stack :is(h1, h2, h3), .kg-hero-content :is(h1, h2, h3) ).is-in { opacity: 1; transform: none; } /* * Klasa kg-* często siedzi na wrapperze widgetu Elementora. * Dzieci (h2, karta w karcie) nie dostają .is-in — wracają razem z rodzicem. * Świadomie pomijamy .kg-section / .kg-hero, żeby stagger dzieci nadal działał. */ html.kg-motion :is( .kg-hero-title, .kg-section-title, .kg-subtitle, .kg-section-label, .kg-lead, .kg-quote, .kg-card, .kg-frame, .kg-actions, .kg-reveal, .kg-product-title ).is-in :is( .kg-hero-title, .kg-section-title, .kg-subtitle, .kg-section-label, .kg-lead, .kg-quote, .kg-card, .kg-frame, .kg-actions, .kg-reveal, .kg-product-title, h1, h2, h3 ) { opacity: 1; transform: none; } /* Różne „oddechy” — hero wolniej, etykiety ciszej, karty odrobinę krócej. */ html.kg-motion .kg-hero-title { --kg-reveal-y: 1.65rem; --kg-duration-reveal: 1100ms; } html.kg-motion .kg-section-title, html.kg-motion .kg-hero :is(h1, h2), html.kg-motion .kg-section :is(h1, h2) { --kg-reveal-y: 1.25rem; --kg-duration-reveal: 950ms; } html.kg-motion .kg-subtitle, html.kg-motion .kg-section :is(h3) { --kg-reveal-y: 1rem; --kg-duration-reveal: 850ms; } html.kg-motion .kg-section-label { --kg-reveal-y: .5rem; --kg-duration-reveal: 700ms; } html.kg-motion .kg-lead, html.kg-motion .kg-quote { --kg-reveal-y: 1rem; --kg-duration-reveal: 900ms; } html.kg-motion .kg-card, html.kg-motion .kg-frame { --kg-reveal-y: 1.35rem; --kg-duration-reveal: 850ms; } html.kg-motion .kg-actions { --kg-reveal-y: .75rem; --kg-duration-reveal: 800ms; } /* ========================================================================== 17. SECTION LABEL — złota kreska wciągana przy wejściu ========================================================================== */ html.kg-motion .kg-section-label::after { content: ""; display: inline-block; width: 2.25rem; height: 1px; margin-inline-start: .85rem; vertical-align: middle; background: var(--kg-color-accent); transform: scaleX(0); transform-origin: left center; transition: transform 800ms var(--kg-ease-out) calc(var(--kg-reveal-delay, 0ms) + 180ms); } html.kg-motion .kg-section-label.is-in::after { transform: scaleX(1); } /* ========================================================================== 18. OPT-OUT + wyjątki sklepu / chrome ========================================================================== */ html.kg-motion .kg-static, html.kg-motion .kg-static :is( .kg-hero-title, .kg-section-title, .kg-subtitle, .kg-section-label, .kg-lead, .kg-quote, .kg-card, .kg-frame, .kg-actions, .kg-reveal, .kg-product-title, h1, h2, h3 ), html.kg-motion .kg-header :is(h1, h2, h3, .kg-hero-title, .kg-section-title), html.kg-motion .kg-navbar :is(h1, h2, h3), html.kg-motion .kg-topbar :is(h1, h2, h3), html.kg-motion .kg-footer :is(h1, h2, h3, .kg-logo, .kg-small, .kg-meta, .kg-nav-link, .kg-caption, .kg-text-link), html.kg-motion .woocommerce-loop-product__title, html.kg-motion .kg-product-card-title, html.kg-motion .kg-accordion-title { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; } html.kg-motion .kg-static .kg-section-label::after, html.kg-motion .kg-header .kg-section-label::after { transform: scaleX(1); } /* ========================================================================== 19. REDUCED MOTION / awaria JS ========================================================================== */ @media (prefers-reduced-motion: reduce) { html.kg-motion :is( .kg-hero-title, .kg-section-title, .kg-subtitle, .kg-section-label, .kg-lead, .kg-quote, .kg-card, .kg-frame, .kg-actions, .kg-reveal, .kg-product-title, h1, h2, h3 ), html.kg-motion .kg-section-label::after { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; filter: none !important; } }