/* ============================================================================ makeXcellence · WARSTWA RUCHU ---------------------------------------------------------------------------- Wszystko jest scope'owane pod html.motion — klase dodaje inline'owy skrypt w . Jesli JavaScript nie wstanie, klasy nie ma i strona wyglada dokladnie tak jak dzis: statycznie, bez ukrytych elementow. Tempo calej warstwy reguluja trzy liczby na gorze motion.js. ========================================================================== */ html.motion { scroll-behavior: smooth; } /* --- 1. REVEAL: elementy wchodza dopiero, gdy wjezdzaja w kadr ------------ */ html.motion [data-reveal] { opacity: 0; transform: translateY(16px); will-change: opacity, transform; } html.motion [data-reveal].is-in { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.22,.7,.3,1) var(--rd, 0ms), transform .7s cubic-bezier(.22,.7,.3,1) var(--rd, 0ms); } /* Elementy objete revealem nie odpalaja juz starych animacji "na load" — inaczej zagralyby w pustke, zanim ktokolwiek do nich doscrolluje. */ html.motion [data-reveal] { animation: none !important; } /* --- 2. PRZEJSCIA MIEDZY ZAKLADKAMI --------------------------------------- */ html.motion .page.active { animation: mxPageIn .6s cubic-bezier(.22,.7,.3,1) both; } html.motion .page.is-leaving { opacity: 0; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease; animation: none; } @keyframes mxPageIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* --- 3. NAWIGACJA REAGUJACA NA SCROLL ------------------------------------- */ html.motion .nav { transition: padding .3s ease, background .3s ease, box-shadow .3s ease; } html.motion .nav.is-scrolled { padding-top: 10px; padding-bottom: 10px; background: rgba(10,10,10,.97); box-shadow: 0 6px 28px rgba(0,0,0,.55); } html.motion .nav.is-scrolled .logo img { transform: scale(.9); transform-origin: left center; transition: transform .3s ease; } /* --- 4. KPI: 31 dni wypelnia sie dzien po dniu, liczniki licza rownolegle -- */ html.motion .kpi-cell:not(.empty) { animation: mxCell .55s cubic-bezier(.2,.8,.3,1) both var(--d, 0ms); } html.motion .kpi-cell.red { animation: mxCell .55s cubic-bezier(.2,.8,.3,1) both var(--d, 0ms), kpi-pulse 2s ease-in-out infinite calc(var(--d, 0ms) + 550ms); } @keyframes mxCell { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } } html.motion .kpi-letter-card { cursor: pointer; } html.motion .kpi-letter-card::after { content: '\21BB'; position: absolute; top: 14px; right: 14px; font-size: 14px; color: var(--lgray); opacity: 0; transition: opacity .25s; } html.motion .kpi-letter-card { position: relative; } html.motion .kpi-letter-card:hover::after { opacity: .7; } /* --- 5. SLUPKI (Pareto / waskie gardlo) rosna od zera ---------------------- */ html.motion [data-grow] { transform: scaleX(0); transform-origin: left center; } html.motion [data-grow].is-in { transform: scaleX(1); transition: transform 1.1s cubic-bezier(.2,.75,.3,1) var(--rd, 0ms); } /* --- 6. DETALE ------------------------------------------------------------ */ /* miniatura artykulu lekko przybliza sie przy najechaniu na karte */ html.motion .blog-card .thumb img { transition: transform .8s cubic-bezier(.2,.7,.3,1), opacity .3s; } html.motion .blog-card:hover .thumb img { transform: scale(1.05); opacity: 1; } /* pasek postepu czytania artykulu */ .mx-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--yel); z-index: 300; opacity: 0; transition: width .1s linear, opacity .3s ease; pointer-events: none; } .mx-progress.is-on { opacity: 1; } /* --- SZACUNEK DLA USTAWIEN SYSTEMOWYCH ------------------------------------ */ @media (prefers-reduced-motion: reduce) { html.motion { scroll-behavior: auto; } html.motion [data-reveal], html.motion [data-reveal].is-in { opacity: 1; transform: none; transition: none; } html.motion [data-grow], html.motion [data-grow].is-in { transform: none; transition: none; } html.motion .kpi-cell:not(.empty), html.motion .kpi-cell.red, html.motion .page.active { animation: none !important; } html.motion .nav { transition: none; } html.motion .kpi-letter-card { cursor: default; } html.motion .kpi-letter-card::after { display: none; } .mx-progress { display: none; } }