/* ============================================================ ЦКИ Недвижимость — слой анимаций ВАЖНО, если нужно всё отключить: каждое правило в этом файле работает ТОЛЬКО когда на теге стоит класс .anim-on. Класс ставит animations.js — и только если внутри него включён флаг ANIMATIONS_ENABLED. Поставили флаг в false → класс не появится → сайт выглядит и работает ровно так же, как до появления этого файла. Ни одна строка ниже при этом не сработает. Существующие ховеры из styles.css здесь не переопределяются — этот файл только добавляет, ничего не заменяет. ============================================================ */ html.anim-on { --a-in: 720ms; /* появление блоков при скролле */ --a-word: 900ms; /* появление слов в заголовке */ --a-hover: 240ms; /* наведение */ --a-page: 460ms; /* переход между страницами */ --a-e: cubic-bezier(.22, .61, .36, 1); } /* ============================================================ 1. ПРЕЛОАДЕР Показывается один раз за визит. Логотип проявляется, под ним тонкая линия прогресса, затем экран растворяется. ============================================================ */ html.cki-hold, html.cki-hold body { overflow: hidden; } .cki-pre { position: fixed; inset: 0; z-index: 999; display: grid; place-items: center; align-content: center; gap: 24px; background: var(--bg); } .cki-pre.is-out { opacity: 0; pointer-events: none; transition: opacity 360ms var(--a-e); } .cki-pre__mark { color: var(--gold); opacity: 0; transform: translateY(10px); animation: cki-pre-in 480ms var(--a-e) forwards; } .cki-pre__mark img { width: auto; height: 44px; display: block; } .cki-pre__bar { position: relative; width: 130px; height: 1px; background: rgba(255, 255, 255, .12); overflow: hidden; } .cki-pre__bar i { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: var(--gold); transition: width 560ms var(--a-e); } @keyframes cki-pre-in { to { opacity: 1; transform: none; } } /* ============================================================ 2. ПОЯВЛЕНИЕ БЛОКОВ ПРИ СКРОЛЛЕ Атрибут data-anim ставит скрипт, разметку не трогаем. После того как блок появился, скрипт снимает атрибут — элемент возвращается к обычным стилям и ховеры работают как раньше, без задержек. ============================================================ */ html.anim-on [data-anim] { opacity: 0; transform: translateY(24px); will-change: opacity, transform; } html.anim-on [data-anim].is-in { opacity: 1; transform: none; transition: opacity var(--a-in) var(--a-e), transform var(--a-in) var(--a-e); transition-delay: var(--a-d, 0ms); } /* ============================================================ 3. ПЕРВЫЙ ЭКРАН Заголовок выезжает по словам из-под невидимой маски. ============================================================ */ html.anim-on .hero__title .w { display: inline-block; overflow: hidden; /* запас снизу, чтобы маска не срезала «у», «р», «д» */ padding-bottom: .12em; margin-bottom: -.12em; /* В styles.css есть правило `.hero__title span`, которое красит золотым градиентом вторую часть фразы. Обёртки слов — тоже span, и без сброса градиент разошёлся бы по каждому слову отдельно, а первая строка перекрасилась бы из белой в золотую. Сбрасываем фон и наследуем цвет: на первой строке получается белый, внутри золотого блока — прозрачный, сквозь который просвечивает единый градиент родителя. */ background: none; color: inherit; } html.anim-on .hero__title .w > i { display: inline-block; font-style: normal; transform: translateY(115%); opacity: 0; transition: transform var(--a-word) var(--a-e), opacity var(--a-word) var(--a-e); transition-delay: var(--a-d, 0ms); } html.anim-on .hero__title.is-in .w > i { transform: none; opacity: 1; } /* Кусок заголовка, покрашенный градиентом по тексту, выезжает без обрезающей маски: с ней Safari перестаёт рисовать такой текст вовсе. Поэтому здесь только всплытие и проявление. */ html.anim-on .hero__title .w--plain { display: block; width: 100%; max-width: 100%; overflow: visible; padding-bottom: 0; margin-bottom: 0; } html.anim-on .hero__title .w--plain > i { display: block; width: 100%; max-width: 100%; transform: translateY(28%); } /* --- блик по заголовку --- Один раз при появлении по буквам проходит отсвет, будто свет скользнул по металлу. Режим наложения overlay осветляет только сами буквы: тёмный фон вокруг он почти не трогает. */ html.anim-on .hero__title { position: relative; } html.anim-on .hero__title::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .5) 50%, transparent 62%); mix-blend-mode: overlay; transform: translateX(-120%); opacity: 0; } html.anim-on .hero__title.is-shine::after { animation: cki-shine 1500ms cubic-bezier(.4, 0, .2, 1) forwards; } @keyframes cki-shine { 0% { transform: translateX(-120%); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(120%); opacity: 0; } } /* световое пятно на фоне медленно «дышит» — кадр не выглядит мёртвым */ html.anim-on .hero__glow { animation: cki-breathe 11s ease-in-out infinite; } @keyframes cki-breathe { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.07); opacity: 1; } } /* --- цифры в статистике --- Считаются от нуля и одновременно выезжают снизу из-под маски. Ширину знаков фиксируем, иначе строка дёргается на каждом шаге счётчика. */ html.anim-on .hero__stats b { font-variant-numeric: tabular-nums; display: inline-block; overflow: hidden; /* запас снизу, чтобы маска не срезала хвосты у «р» и «ч» */ padding-bottom: .12em; margin-bottom: -.12em; } html.anim-on .hero__stats b > i { display: inline-block; font-style: normal; transform: translateY(115%); transition: transform 850ms var(--a-e); } html.anim-on .hero__stats b.is-up > i { transform: none; } /* ============================================================ 4. КАРТОЧКИ Наведение на одну — остальные приглушаются, фокус на выбранной. ============================================================ */ html.anim-on .grid .card, html.anim-on .cases .case-card, html.anim-on .program, html.anim-on .insurance-card, html.anim-on .advantages .adv, html.anim-on .review, html.anim-on .contact, html.anim-on .calc-big { transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease), opacity var(--a-hover) var(--a-e); } html.anim-on .grid:hover .card:not(:hover), html.anim-on .cases:hover .case-card:not(:hover) { opacity: .5; } html.anim-on .card:hover, html.anim-on .case-card:hover, html.anim-on .program:hover, html.anim-on .insurance-card:hover, html.anim-on .adv:hover, html.anim-on .review:hover, html.anim-on .contact:hover, html.anim-on .calc-big:hover { transform: translateY(-4px); border-color: rgba(239, 206, 140, .5); box-shadow: 0 22px 52px rgba(0, 0, 0, .34), 0 0 0 1px rgba(239, 206, 140, .045); } /* стрелка «Разбор дела →» уезжает вправо */ html.anim-on .case-card:hover .case-card__more { transform: translateX(6px); } /* --- свечение за курсором --- Внутри карточки за мышью следует мягкое золотое пятно света. Координаты подставляет скрипт в --mx / --my. Слой лежит поверх содержимого, но не перехватывает клики. */ html.anim-on .card, html.anim-on .case-card, html.anim-on .program, html.anim-on .insurance-card, html.anim-on .adv, html.anim-on .review, html.anim-on .contact, html.anim-on .calc-big { position: relative; overflow: hidden; } html.anim-on .cki-spotlight { position: absolute; inset: 0; pointer-events: none; z-index: 3; border-radius: inherit; background: radial-gradient(310px circle at var(--mx, 50%) var(--my, 50%), rgba(246, 220, 169, .13), rgba(239, 206, 140, .045) 32%, transparent 68%); opacity: 0; transition: opacity .35s var(--a-e); } html.anim-on .cki-spotlight.is-on { opacity: 1; } /* ============================================================ 4a. ЛИНИИ МЕЖДУ РАЗДЕЛАМИ Тонкая линия появляется от центра к краям, когда следующий раздел входит в экран. Элемент добавляет animations.js. ============================================================ */ html.anim-on main > .section { position: relative; } html.anim-on .cki-section-line { position: absolute; top: 0; left: 50%; width: min(calc(100% - 48px), var(--wrap)); height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent 0%, rgba(239, 206, 140, .42) 22%, rgba(246, 220, 169, .78) 50%, rgba(239, 206, 140, .42) 78%, transparent 100%); box-shadow: 0 0 18px rgba(239, 206, 140, .12); opacity: 0; transform: translateX(-50%) scaleX(.04); transform-origin: center; transition: transform 1100ms var(--a-e), opacity 600ms var(--a-e); } html.anim-on .cki-section-line.is-drawn { opacity: 1; transform: translateX(-50%) scaleX(1); } /* Текущий раздел в верхнем меню. */ html.anim-on .nav a.is-active { color: var(--gold-bright); text-shadow: 0 0 14px rgba(239, 206, 140, .3); } html.anim-on .nav a.is-active::after { left: 0; right: 0; opacity: 1; } /* ============================================================ 4b. АТМОСФЕРА ФОНА Очень слабое золото и плёночное зерно убирают плоский чёрный, но не меняют контраст текста и фотографий. ============================================================ */ html.anim-on body { position: relative; isolation: isolate; } html.anim-on body > main, html.anim-on body > footer { position: relative; z-index: 1; } .cki-atmosphere { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .cki-atmosphere__glow { position: absolute; width: 64vw; height: 64vw; left: -26vw; top: 18vh; border-radius: 50%; background: radial-gradient(circle, rgba(239, 206, 140, .042), transparent 67%); filter: blur(12px); animation: cki-ambient-drift 22s ease-in-out infinite alternate; } .cki-atmosphere__grain { position: absolute; inset: -40%; opacity: .026; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.74'/%3E%3C/svg%3E"); animation: cki-grain-shift .55s steps(2) infinite; } @keyframes cki-ambient-drift { to { transform: translate(72vw, 18vh) scale(1.14); opacity: .78; } } @keyframes cki-grain-shift { 0% { transform: translate3d(-2%, -1%, 0); } 25% { transform: translate3d(1%, 2%, 0); } 50% { transform: translate3d(2%, -2%, 0); } 75% { transform: translate3d(-1%, 1%, 0); } 100% { transform: translate3d(1%, -1%, 0); } } /* На сенсорных устройствах оставляем атмосферу статичной: визуальный эффект сохраняется, а батарея и прокрутка не тратятся на два бесконечных фоновых движения. */ @media (max-width: 768px), (pointer: coarse) { .cki-atmosphere__glow { animation: none; opacity: .72; } .cki-atmosphere__grain { animation: none; opacity: .018; } } /* ============================================================ 4c. РАСКРЫВАЮЩИЕСЯ ФИЛЬТРЫ Заголовок остаётся обычной подписью поля; отдельная круглая стрелка управляет сворачиванием и доступна с клавиатуры. ============================================================ */ html.anim-on .f-group { position: relative; } html.anim-on .f-group::before { content: ''; position: absolute; left: -10px; top: -7px; bottom: -7px; width: 2px; border-radius: 3px; background: var(--gold); opacity: 0; box-shadow: 0 0 12px rgba(239, 206, 140, .28); transition: opacity .25s var(--a-e); } html.anim-on .f-group.has-value::before { opacity: .72; } html.anim-on .f-group__header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; } html.anim-on .f-group__header .f-label { margin-bottom: 0; transition: color .22s var(--a-e); } html.anim-on .f-group.has-value .f-group__header .f-label { color: var(--gold); } html.anim-on .f-group__toggle { flex: none; width: 24px; height: 24px; padding: 0; display: grid; place-items: center; border: 1px solid rgba(239, 206, 140, .18); border-radius: 50%; color: var(--muted); background: rgba(10, 10, 11, .25); cursor: pointer; transition: color .22s var(--a-e), border-color .22s var(--a-e), background .22s var(--a-e), transform .32s var(--a-e); } html.anim-on .f-group__toggle::before { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-1px) rotate(45deg); } html.anim-on .f-group__toggle:hover, html.anim-on .f-group__toggle:focus-visible { color: var(--gold-bright); border-color: var(--gold); background: rgba(239, 206, 140, .08); outline: none; } html.anim-on .f-group.is-collapsed .f-group__toggle { transform: rotate(-90deg); } html.anim-on .f-group__body { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .38s var(--a-e), opacity .26s var(--a-e); } html.anim-on .f-group__inner { min-height: 0; overflow: hidden; } html.anim-on .f-group.is-collapsed .f-group__body { grid-template-rows: 0fr; opacity: 0; } html.anim-on .f-group.has-value .f-control, html.anim-on .f-group.has-value .chip.is-on, html.anim-on .f-group.has-value .check input:checked { border-color: rgba(239, 206, 140, .5); box-shadow: 0 0 0 1px rgba(239, 206, 140, .035), 0 8px 20px rgba(0, 0, 0, .1); } /* ============================================================ 5. КОЛЬЦО ЗА КУРСОРОМ (только мышь, не тач) Родной курсор остаётся на месте — это добавка, а не замена. ============================================================ */ .cki-cur { position: fixed; top: 0; left: 0; z-index: 900; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 1px solid var(--gold); border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .3s var(--a-e), width .3s var(--a-e), height .3s var(--a-e), margin .3s var(--a-e), background-color .3s var(--a-e); } .cki-cur.is-on { opacity: .75; } .cki-cur.is-lg { width: 62px; height: 62px; margin: -31px 0 0 -31px; background: rgba(239, 206, 140, .1); } /* ============================================================ 6. ПЕРЕХОД МЕЖДУ СТРАНИЦАМИ Вместо белой перезагрузки — затемнение и проявление. ============================================================ */ .cki-fade { position: fixed; inset: 0; z-index: 998; background: var(--bg); opacity: 0; pointer-events: none; transition: opacity var(--a-page) var(--a-e); } .cki-fade.is-on { opacity: 1; pointer-events: auto; } /* ============================================================ 7. СТРАНИЦЫ КЕЙСОВ Заголовок и плитки результата проявляются каскадом. ============================================================ */ html.anim-on .case__result > * { transition-delay: var(--a-d, 0ms); } /* --- подсветка «Недвижимость» под кольцом курсора --- Поверх белого слова лежит его светло-золотая копия, закрытая маской. Маска — круглое окно, которое скрипт двигает за курсором: видно только тот кусок золотой копии, что под кольцом. Сделано копией с маской, а не градиентом по тексту: обрезка плюс градиент по буквам ломает отрисовку в Safari — уже наступали. */ html.anim-on .hero__title .w > i { position: relative; } html.anim-on .hero__title .hl { position: absolute; left: 0; top: 0; font: inherit; letter-spacing: inherit; white-space: nowrap; color: #EFCE8C; /* явное золото: #FFEFC4 почти не отличался от белого */ pointer-events: none; /* копия не должна попадать в выделение: иначе заголовок выделяется как «НедвижимостьНедвижимость» */ -webkit-user-select: none; user-select: none; -webkit-mask-image: radial-gradient(circle 78px at var(--hx, -999px) var(--hy, -999px), #000 0%, rgba(0,0,0,.6) 52%, transparent 76%); mask-image: radial-gradient(circle 78px at var(--hx, -999px) var(--hy, -999px), #000 0%, rgba(0,0,0,.6) 52%, transparent 76%); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* Та же золотая подсветка для белых крупных заголовков блоков. Скрипт не добавляет класс заголовкам, которые уже окрашены золотым. */ html.anim-on .cki-title-paintable { position: relative; } html.anim-on .cki-title-paintable::after { content: attr(data-cki-paint); position: absolute; inset: 0; z-index: 1; display: block; font: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; text-transform: inherit; color: #EFCE8C; pointer-events: none; -webkit-user-select: none; user-select: none; -webkit-mask-image: radial-gradient(circle 78px at var(--hx, -999px) var(--hy, -999px), #000 0%, rgba(0,0,0,.6) 52%, transparent 76%); mask-image: radial-gradient(circle 78px at var(--hx, -999px) var(--hy, -999px), #000 0%, rgba(0,0,0,.6) 52%, transparent 76%); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* --- волна вокруг ползунков большого калькулятора --- Кружок пульсирует расходящимся золотым кольцом — подсказывает, что его можно тянуть. При наведении и перетаскивании пульсация выключается, чтобы не спорить с обычной подсветкой. */ html.anim-on .calc-big .range::-webkit-slider-thumb { animation: cki-thumb 2.6s ease-out infinite; } html.anim-on .calc-big .range::-moz-range-thumb { animation: cki-thumb 2.6s ease-out infinite; } html.anim-on .calc-big .range:hover::-webkit-slider-thumb, html.anim-on .calc-big .range:active::-webkit-slider-thumb, html.anim-on .calc-big .range:focus-visible::-webkit-slider-thumb { animation: none; } @keyframes cki-thumb { 0% { box-shadow: 0 0 0 4px rgba(239, 206, 140, .16); } 55% { box-shadow: 0 0 0 13px rgba(239, 206, 140, 0); } 55.01% { box-shadow: 0 0 0 4px rgba(239, 206, 140, 0); } 100% { box-shadow: 0 0 0 4px rgba(239, 206, 140, .16); } } /* --- лёгкая волна по кнопкам «Узнать одобрение» и «Подобрать» --- */ html.anim-on [data-open-lead="Узнать одобрение"], html.anim-on .quick__submit { position: relative; overflow: hidden; } html.anim-on [data-open-lead="Узнать одобрение"]::after, html.anim-on .quick__submit::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: translateX(-160%); pointer-events: none; animation: cki-wave 4.5s ease-in-out infinite; } @keyframes cki-wave { 0% { transform: translateX(-160%); } 45%, 100% { transform: translateX(320%); } } /* ============================================================ 7a. МОБИЛЬНЫЕ МИКРОАНИМАЦИИ На сенсорном экране нет наведения, поэтому движение подсказывает интерактивность через касание, скролл и активную карточку. ============================================================ */ @media (max-width: 760px) and (hover: none) { html.anim-on .reviews.is-carousel .review { opacity: .7; transform: scale(.965); transform-origin: center center; transition: opacity .38s var(--a-e), transform .38s var(--a-e), border-color .38s var(--a-e), box-shadow .38s var(--a-e); } html.anim-on .reviews.is-carousel .review.is-current { opacity: 1; transform: scale(1); border-color: rgba(239, 206, 140, .42); box-shadow: 0 20px 48px rgba(0, 0, 0, .28), 0 0 0 1px rgba(239, 206, 140, .035); } html.anim-on .btn, html.anim-on .material-card, html.anim-on .accreditation__steps article, html.anim-on .partner-logo, html.anim-on .certificate-card { -webkit-tap-highlight-color: transparent; transition: transform .2s var(--a-e), border-color .2s var(--a-e), box-shadow .2s var(--a-e); } html.anim-on .btn:active, html.anim-on .material-card:active, html.anim-on .accreditation__steps article:active, html.anim-on .partner-logo:active, html.anim-on .certificate-card:active { transform: scale(.975); } html.anim-on .reviews-carousel__dot.is-active { animation: cki-mobile-dot 2.3s ease-in-out infinite; } } @keyframes cki-mobile-dot { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 206, 140, 0), 0 0 14px rgba(239, 206, 140, .22); } 50% { box-shadow: 0 0 0 5px rgba(239, 206, 140, .08), 0 0 22px rgba(239, 206, 140, .34); } } /* ---------- если человек просил систему убрать анимации ---------- */ /* ============================================================ 8. ЕСЛИ ЧЕЛОВЕК ПРОСИЛ СИСТЕМУ УБРАТЬ АНИМАЦИИ Скрипт в этом случае вообще не включается, но подстрахуемся и на уровне стилей. ============================================================ */ @media (prefers-reduced-motion: reduce) { html.anim-on [data-anim], html.anim-on .hero__stats b > i, html.anim-on .hero__title .w > i { opacity: 1 !important; transform: none !important; } html.anim-on .hero__glow { animation: none; } html.anim-on .reviews.is-carousel .review { opacity: 1; transform: none; } html.anim-on .reviews-carousel__dot.is-active { animation: none; } html.anim-on [data-open-lead="Узнать одобрение"]::after, html.anim-on .quick__submit::after { animation: none; opacity: 0; } html.anim-on .calc-big .range::-webkit-slider-thumb { animation: none; } html.anim-on .hero__title .hl { display: none; } html.anim-on .cki-title-paintable::after { display: none; } .cki-atmosphere__glow, .cki-atmosphere__grain { animation: none; } html.anim-on .cki-section-line { transition: none; opacity: 1; transform: translateX(-50%) scaleX(1); } .cki-cur { display: none; } }