/* Премиум-прелоадер INGRIAFARM — «Кошачья подпись». Самодостаточный слой: без GSAP/Vue, переносится на прод 1:1 вместе с ingri-preloader.js. Шелл (#if-preloader) в разметке скрыт по умолчанию и показывается ТОЛЬКО когда ingri-preloader.js поставил класс `if-preloading` на — нет JS, значит нет прелоадера и ничего не залипает. */ #if-preloader { display: none; } /* Скролл заперт, пока прелоадер на экране */ html.if-preloading { overflow: hidden; } html.if-preloading #if-preloader { display: flex; align-items: center; justify-content: center; position: fixed; inset: 0; z-index: 100000; background: #ffffff; overflow: hidden; } html.theme-dark.if-preloading #if-preloader { background: #222222; } /* Повторный визит в сессии: скрыт до первого кадра */ html.if-preloader-skip #if-preloader { display: none !important; } /* ------------------------------------------------------------------ */ /* Центр: логотип, полоса, счётчик */ /* ------------------------------------------------------------------ */ .if-preloader__center { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 0 24px; } .if-preloader__logo { animation: if-pre-logo-settle 1.1s cubic-bezier(0.34, 1.4, 0.44, 1) 0.15s backwards; } .if-preloader__logo img { display: block; width: min(264px, 72vw); height: auto; /* «подпись»: проявление слева направо */ clip-path: inset(-8% 100% -8% 0); animation: if-pre-logo-write 0.95s cubic-bezier(0.65, 0, 0.25, 1) 0.25s forwards; } /* На тёмной теме чёрная рукопись инвертируется в белую */ html.theme-dark #if-preloader .if-preloader__logo img { filter: invert(1); } @keyframes if-pre-logo-write { to { clip-path: inset(-8% -2% -8% 0); } } @keyframes if-pre-logo-settle { from { transform: translateY(14px) scale(0.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } .if-preloader__bar { width: min(200px, 56vw); height: 3px; border-radius: 99px; background: rgba(4, 0, 0, 0.09); overflow: hidden; animation: if-pre-fade-up 0.6s ease 0.55s backwards; } html.theme-dark #if-preloader .if-preloader__bar { background: rgba(255, 255, 255, 0.14); } .if-preloader__bar-fill { display: block; width: 100%; height: 100%; border-radius: 99px; background: #f39b2b; box-shadow: 0 0 10px rgba(243, 155, 43, 0.65); transform: scaleX(0); transform-origin: left center; /* Без transition намеренно: scaleX ведёт ingri-preloader.js каждый rAF-кадр, транзишен здесь перезапускался бы 60 раз/с и заливка хронически отставала от счётчика (на проде: цифра 24%, полоса ~5%). Плавность даёт сам движок. */ } .if-preloader__count { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.14em; color: #040000; font-variant-numeric: tabular-nums; animation: if-pre-fade-up 0.6s ease 0.65s backwards; } html.theme-dark #if-preloader .if-preloader__count { color: #ffffff; } .if-preloader__count i { font-style: normal; color: #f39b2b; } @keyframes if-pre-fade-up { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ------------------------------------------------------------------ */ /* Лапки: кот «прошагал» по диагонали, штампы проявляются и тают */ /* ------------------------------------------------------------------ */ .if-preloader__paws { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .if-preloader__paws svg { position: absolute; width: clamp(34px, 5vw, 56px); height: auto; color: #f39b2b; opacity: 0; transform-origin: center; animation: if-pre-paw 5.2s ease-out infinite; } /* тропинка из нижнего левого в верхний правый угол, шаги чередуются */ .if-preloader__paws svg:nth-child(1) { left: 7%; bottom: 9%; rotate: 32deg; animation-delay: 0s; } .if-preloader__paws svg:nth-child(2) { left: 17%; bottom: 22%; rotate: 44deg; animation-delay: 0.55s; } .if-preloader__paws svg:nth-child(3) { left: 24%; bottom: 40%; rotate: 30deg; animation-delay: 1.1s; } .if-preloader__paws svg:nth-child(4) { right: 30%; top: 34%; rotate: 46deg; animation-delay: 1.65s; } .if-preloader__paws svg:nth-child(5) { right: 19%; top: 22%; rotate: 28deg; animation-delay: 2.2s; } .if-preloader__paws svg:nth-child(6) { right: 9%; top: 8%; rotate: 42deg; animation-delay: 2.75s; } @keyframes if-pre-paw { 0% { opacity: 0; transform: scale(1.45); } 6% { opacity: 0.16; transform: scale(1); } 46% { opacity: 0.11; } 72%, 100% { opacity: 0; transform: scale(0.98); } } html.theme-dark #if-preloader .if-preloader__paws svg { color: #f5a844; } /* ------------------------------------------------------------------ */ /* Волна ухода: одна панель 250vh с волнистыми верхом и низом */ /* ------------------------------------------------------------------ */ .if-preloader__wave { position: absolute; left: 0; top: 100%; width: 100%; height: 124vh; z-index: 4; pointer-events: none; } .if-preloader__wave svg { display: block; width: 100%; height: 11vh; color: #f39b2b; } .if-preloader__wave-body { height: 102vh; background: #f39b2b; } .if-preloader__wave svg:last-child { transform: scaleY(-1); } /* ------------------------------------------------------------------ */ /* Фазы ухода */ /* ------------------------------------------------------------------ */ /* 1) контент «выпархивает» вверх */ #if-preloader.is-done .if-preloader__center { animation: if-pre-center-out 0.5s cubic-bezier(0.5, 0, 0.75, 0.4) forwards; } #if-preloader.is-done .if-preloader__paws svg { transition: opacity 0.35s ease; opacity: 0 !important; } @keyframes if-pre-center-out { 30% { transform: translateY(6px) scale(1.02); opacity: 1; } 100% { transform: translateY(-46px) scale(0.94); opacity: 0; } } /* 2) волна накрывает экран и уходит вверх, открывая страницу. Панель (124vh: волна 11 + тело 102 + волна 11) стартует под вьюпортом (top:100%). -90.4% высоты ≈ 112vh — тело закрывает экран целиком (микро-пауза 45–55%); к 100% (-181%) панель полностью выше экрана, волнистый низ «выныривает» через весь вьюпорт. */ #if-preloader.is-exiting .if-preloader__wave { animation: if-pre-wave-sweep 1.25s cubic-bezier(0.66, 0, 0.34, 1) forwards; } @keyframes if-pre-wave-sweep { 0% { transform: translateY(0); } 45%, 55% { transform: translateY(-90.4%); } 100% { transform: translateY(-181%); } } /* под прикрытием волны фон прелоадера растворяется, страница уже под ним */ #if-preloader.is-exiting { transition: background-color 0.01s linear 0.62s; background-color: transparent !important; } /* ------------------------------------------------------------------ */ /* Reduced motion: статичный логотип, мягкий фейд */ /* ------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { #if-preloader .if-preloader__logo, #if-preloader .if-preloader__logo img, #if-preloader .if-preloader__bar, #if-preloader .if-preloader__count, #if-preloader .if-preloader__paws svg, #if-preloader.is-done .if-preloader__center, #if-preloader.is-exiting .if-preloader__wave { animation: none; } #if-preloader .if-preloader__logo img { clip-path: none; } #if-preloader .if-preloader__paws { display: none; } #if-preloader.is-exiting { transition: opacity 0.3s ease; opacity: 0; background-color: #ffffff !important; } html.theme-dark #if-preloader.is-exiting { background-color: #222222 !important; } }