/* Appear — появление блоков при скролле. Логика снята с neotennis.ru (neo-in / neo-stage / neo-on), обобщена для любого сайта. Прячет элементы ТОЛЬКО если на есть класс ap-js (ставит appear.js). Без JS контент остаётся видимым. */ :root{ --ap-ease: cubic-bezier(.16, 1.12, .24, 1); --ap-ease-text: cubic-bezier(.16, 1, .3, 1); --ap-ease-title: cubic-bezier(.16, 1.1, .24, 1); --ap-dur: .9s; --ap-dur-text: .85s; --ap-dur-ui: .45s; --ap-step: 80ms; --ap-shift: 40px; --ap-shift-x: 56px; --ap-title-x: -48px; --ap-title-y: 8px; --ap-tilt: -2deg; --ap-tilt-r: 2deg; --ap-blur: 8px; } @keyframes ap-title{ 0%{opacity:0;transform:translate3d(var(--ap-title-x, -48px),var(--ap-title-y, 8px),0);filter:blur(8px)} 100%{opacity:1;transform:none;filter:none} } @keyframes ap-sub{ 0%{opacity:0;transform:translate3d(0,28px,0);filter:blur(6px)} 100%{opacity:1;transform:none;filter:none} } @keyframes ap-up{ 0%{opacity:0;transform:translate3d(0,44px,0) scale(.97);filter:blur(10px)} 100%{opacity:1;transform:none;filter:none} } @keyframes ap-left{ 0%{opacity:0;transform:translate3d(calc(var(--ap-shift-x, 56px) * -1),28px,0) rotate(var(--ap-tilt, -2deg)) scale(.96);filter:blur(10px)} 100%{opacity:1;transform:none;filter:none} } @keyframes ap-right{ 0%{opacity:0;transform:translate3d(var(--ap-shift-x, 56px),28px,0) rotate(var(--ap-tilt-r, 2deg)) scale(.96);filter:blur(10px)} 100%{opacity:1;transform:none;filter:none} } @keyframes ap-pop{ 0%{opacity:0;transform:translate3d(0,52px,0) scale(.94);filter:blur(10px)} 100%{opacity:1;transform:none;filter:none} } @keyframes ap-shot{ 0%{opacity:0;transform:translate3d(0,28px,0) scale(1.05);filter:blur(16px)} 100%{opacity:1;transform:none;filter:none} } @keyframes ap-fade{ 0%{opacity:0} 100%{opacity:1} } @keyframes ap-clip{ 0%{opacity:0;clip-path:inset(12% 12% 12% 12%);transform:scale(1.04)} 100%{opacity:1;clip-path:inset(0);transform:none} } /* Ждём появления: прячем размеченные узлы, пока нет .ap-in / .ap-on */ html.ap-js .ap-item:not(.ap-in), html.ap-js .ap-stage:not(.ap-on) [data-ap]:not(.ap-in){ opacity:0; filter:blur(var(--ap-blur)); transform:translate3d(0, var(--ap-shift), 0); } html.ap-js .ap-item.ap-dir-l:not(.ap-in), html.ap-js .ap-item[data-ap-dir="l"]:not(.ap-in){transform:translate3d(-42px,16px,0)} html.ap-js .ap-item.ap-dir-r:not(.ap-in), html.ap-js .ap-item[data-ap-dir="r"]:not(.ap-in){transform:translate3d(42px,16px,0)} html.ap-js .ap-item.ap-dir-u:not(.ap-in), html.ap-js .ap-item[data-ap-dir="u"]:not(.ap-in){transform:translate3d(0,44px,0) scale(.97)} html.ap-js .ap-item[data-ap="shot"]:not(.ap-in), html.ap-js .ap-stage:not(.ap-on) [data-ap="shot"]{ transform:translate3d(0,28px,0) scale(1.05); filter:blur(16px); } html.ap-js .ap-item[data-ap="fade"]:not(.ap-in), html.ap-js .ap-item.ap-ui:not(.ap-in), html.ap-js header.ap-stage:not(.ap-on) [data-ap], html.ap-js .ap-stage:not(.ap-on) [data-ap="fade"]{ transform:none; filter:none; } /* Элемент сам себе сцена (герой, шапка) — transition как на НЕО */ html.ap-js .ap-item.ap-in{ opacity:1; filter:none; transform:none; transition: opacity .85s var(--ap-ease-text), transform .95s var(--ap-ease), filter .7s ease; transition-delay:var(--ap-d, 0ms); } html.ap-js .ap-item[data-ap="shot"].ap-in{ transition-duration:1.15s,1.25s,.9s; } html.ap-js .ap-item.ap-ui.ap-in, html.ap-js .ap-item[data-ap="fade"].ap-in{ transition:opacity var(--ap-dur-ui) ease; transition-delay:var(--ap-d, 0ms); } /* Секция-сцена: дети играют keyframes, когда секция получила .ap-on */ html.ap-js .ap-stage.ap-on [data-ap]{ animation-duration:var(--ap-dur); animation-timing-function:var(--ap-ease); animation-fill-mode:both; animation-delay:var(--ap-d, 0ms); } html.ap-js .ap-stage.ap-on [data-ap="title"]{animation-name:ap-title;animation-timing-function:var(--ap-ease-title)} html.ap-js .ap-stage.ap-on [data-ap="sub"]{animation-name:ap-sub;animation-duration:.8s;animation-timing-function:var(--ap-ease-title)} html.ap-js .ap-stage.ap-on [data-ap="copy"], html.ap-js .ap-stage.ap-on [data-ap="list"]{animation-name:ap-sub;animation-duration:var(--ap-dur-text);animation-timing-function:var(--ap-ease-text)} html.ap-js .ap-stage.ap-on [data-ap="card"]{animation-name:ap-pop} html.ap-js .ap-stage.ap-on [data-ap="card"].ap-dir-l, html.ap-js .ap-stage.ap-on [data-ap="card"][data-ap-dir="l"], html.ap-js .ap-stage.ap-on [data-ap="card"]:nth-child(odd):not([data-ap-dir]):not(.ap-dir-r):not(.ap-dir-u){animation-name:ap-left} html.ap-js .ap-stage.ap-on [data-ap="card"].ap-dir-r, html.ap-js .ap-stage.ap-on [data-ap="card"][data-ap-dir="r"], html.ap-js .ap-stage.ap-on [data-ap="card"]:nth-child(even):not([data-ap-dir]):not(.ap-dir-l):not(.ap-dir-u){animation-name:ap-right} html.ap-js .ap-stage.ap-on [data-ap="card"].ap-dir-u, html.ap-js .ap-stage.ap-on [data-ap="card"][data-ap-dir="u"]{animation-name:ap-pop} html.ap-js .ap-stage.ap-on [data-ap="pop"]{animation-name:ap-pop} html.ap-js .ap-stage.ap-on [data-ap="shot"]{animation-name:ap-shot;animation-duration:1.15s} html.ap-js .ap-stage.ap-on [data-ap="media"]{animation-name:ap-clip;animation-duration:.95s;animation-timing-function:var(--ap-ease-text)} html.ap-js .ap-stage.ap-on [data-ap="quote"]{animation-name:ap-left;animation-duration:.85s} html.ap-js .ap-stage.ap-on [data-ap="form"], html.ap-js .ap-stage.ap-on [data-ap="cta"]{animation-name:ap-pop;animation-duration:.8s} html.ap-js .ap-stage.ap-on [data-ap="stat"]{animation-name:ap-pop} html.ap-js .ap-stage.ap-on [data-ap="row"]{animation-name:ap-sub;animation-duration:.7s;animation-timing-function:var(--ap-ease-text)} html.ap-js .ap-stage.ap-on [data-ap="fade"]{animation-name:ap-fade;animation-duration:.5s;animation-timing-function:ease} /* Запасной stagger, если JS не проставил --ap-d (как nth-child на НЕО) */ html.ap-js .ap-stage.ap-on [data-ap="sub"]{animation-delay:calc(var(--ap-d, 0ms) + .08s)} html.ap-js .ap-stage.ap-on [data-ap="copy"]:nth-of-type(1){animation-delay:calc(var(--ap-d, 0ms) + .12s)} html.ap-js .ap-stage.ap-on [data-ap="copy"]:nth-of-type(2){animation-delay:calc(var(--ap-d, 0ms) + .22s)} html.ap-js .ap-stage.ap-on [data-ap="copy"]:nth-of-type(3){animation-delay:calc(var(--ap-d, 0ms) + .32s)} html.ap-js .ap-stage.ap-on [data-ap="card"]:nth-child(1), html.ap-js .ap-stage.ap-on [data-ap="stat"]:nth-child(1), html.ap-js .ap-stage.ap-on [data-ap="row"]:nth-child(1){animation-delay:.06s} html.ap-js .ap-stage.ap-on [data-ap="card"]:nth-child(2), html.ap-js .ap-stage.ap-on [data-ap="stat"]:nth-child(2), html.ap-js .ap-stage.ap-on [data-ap="row"]:nth-child(2){animation-delay:.14s} html.ap-js .ap-stage.ap-on [data-ap="card"]:nth-child(3), html.ap-js .ap-stage.ap-on [data-ap="stat"]:nth-child(3), html.ap-js .ap-stage.ap-on [data-ap="row"]:nth-child(3){animation-delay:.22s} html.ap-js .ap-stage.ap-on [data-ap="card"]:nth-child(4), html.ap-js .ap-stage.ap-on [data-ap="stat"]:nth-child(4), html.ap-js .ap-stage.ap-on [data-ap="row"]:nth-child(4){animation-delay:.3s} html.ap-js .ap-stage.ap-on [data-ap="card"]:nth-child(5), html.ap-js .ap-stage.ap-on [data-ap="row"]:nth-child(5){animation-delay:.38s} html.ap-js .ap-stage.ap-on [data-ap="card"]:nth-child(6){animation-delay:.46s} html.ap-js .ap-stage.ap-on [data-ap="card"]:nth-child(7){animation-delay:.54s} html.ap-js .ap-stage.ap-on [data-ap="card"]:nth-child(8){animation-delay:.62s} /* Бегущая строка / уже крутящийся трек — не переигрывать вход */ html.ap-js .ap-stage.ap-on [data-ap="marquee"], html.ap-js .ap-skip, html.ap-js [data-ap="off"]{ animation:none !important; opacity:1 !important; transform:none !important; filter:none !important; } @media (max-width:640px){ :root{ --ap-shift:28px; --ap-shift-x:24px; --ap-title-x:0px; --ap-title-y:18px; --ap-tilt:0deg; --ap-tilt-r:0deg; } } @media (prefers-reduced-motion:reduce){ html.ap-js .ap-item, html.ap-js .ap-item.ap-in, html.ap-js .ap-stage [data-ap], html.ap-js .ap-stage:not(.ap-on) [data-ap]{ opacity:1 !important; transform:none !important; filter:none !important; animation:none !important; transition:none !important; } } /* тихий тон мастерской: меньше сдвиг */ :root{ --ap-shift: 24px; --ap-shift-x: 32px; --ap-title-x: -28px; --ap-blur: 6px; --ap-tilt: 0deg; --ap-tilt-r: 0deg; }