/* ============================================================= PAGE TRANSITIONS & PRELOADER - Preloader: лого + индикатор (показывается при входе/обновлении) - Transition: iris-wipe circle из ЦЕНТРА экрана с лого ============================================================= */ /* ------------------------------------------------------------- PRELOADER (вход на страницу) По умолчанию ВИДЕН (inline-CSS в создаёт элемент до body). JS скрывает его через .hidden — плавное исчезновение. ------------------------------------------------------------- */ #page-preloader { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; background: linear-gradient(180deg, #1A2C42 0%, #0F1D2B 100%); transform: translateZ(0); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.6s; } #page-preloader.hidden { opacity: 0; visibility: hidden; pointer-events: none; } #page-preloader::before { content: ''; position: absolute; top: 50%; left: 50%; width: 520px; height: 520px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(97, 117, 162, 0.18) 0%, rgba(0, 0, 0, 0) 70%); filter: blur(60px); border-radius: 50%; pointer-events: none; animation: preloader-orb-pulse 3s ease-in-out infinite; } @keyframes preloader-orb-pulse { 0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 0.85; transform: translate(-50%, -50%) scale(1.12); } } .preloader-logo { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; opacity: 0; transform: translateY(16px); animation: preloader-logo-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards; } .preloader-logo img { width: 44px; height: 44px; object-fit: contain; animation: preloader-logo-glow 2.4s ease-in-out infinite; } .preloader-logo span { font-family: 'Forum', Georgia, serif; font-size: 1.6rem; font-weight: 600; letter-spacing: 0.18em; color: #ffffff; } @keyframes preloader-logo-in { to { opacity: 1; transform: translateY(0); } } @keyframes preloader-logo-glow { 0%, 100% { filter: drop-shadow(0 0 6px rgba(97, 117, 162, 0.4)); } 50% { filter: drop-shadow(0 0 16px rgba(124, 145, 191, 0.7)); } } .preloader-indicator { position: relative; z-index: 2; width: 160px; height: 3px; background: rgba(255, 255, 255, 0.08); border-radius: 999px; overflow: hidden; opacity: 0; animation: preloader-fade-in 0.6s ease 0.35s forwards; } .preloader-indicator::after { content: ''; position: absolute; top: 0; left: 0; width: 40%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #6175A2 0%, #7C91BF 100%); box-shadow: 0 0 10px rgba(124, 145, 191, 0.6); animation: preloader-indicator-slide 1.15s cubic-bezier(0.65, 0, 0.35, 1) infinite; } @keyframes preloader-indicator-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } } @keyframes preloader-fade-in { to { opacity: 1; } } .preloader-hint { position: relative; z-index: 2; margin-top: -10px; font-family: 'Inter', system-ui, sans-serif; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(224, 242, 254, 0.35); opacity: 0; animation: preloader-fade-in 0.6s ease 0.5s forwards; } /* ------------------------------------------------------------- PAGE TRANSITION — iris-wipe circle ИЗ ЦЕНТРА экрана Один оверлей с лого посередине. Круг раскрывается из центра (50% 50%) и схлопывается обратно в центр. ------------------------------------------------------------- */ /* Круг-оверлей: по умолчанию схлопнут в точку */ #page-transition-curtain { position: fixed; inset: 0; z-index: 9998; pointer-events: none; background: linear-gradient(160deg, #1A2C42 0%, #122133 55%, #0F1D2B 100%); clip-path: circle(0% at 50% 50%); will-change: clip-path; } /* Мягкое свечение внутри круга */ #page-transition-curtain::before { content: ''; position: absolute; top: 50%; left: 50%; width: 500px; height: 500px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(97, 117, 162, 0.22) 0%, rgba(0, 0, 0, 0) 70%); filter: blur(60px); border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity 0.3s ease 0.15s; } /* Лого — абсолютно по центру экрана, стабильно видно */ #page-transition-curtain .pt-logo { position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; transform: translate(-50%, -50%) scale(0.6); opacity: 0; object-fit: contain; filter: drop-shadow(0 0 18px rgba(124, 145, 191, 0.7)); pointer-events: none; z-index: 1; /* Плавное появление — без рывков */ transition: opacity 0.25s ease 0.2s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.2s; } /* --- CLOSING: круг расширяется из центра, покрывает весь экран --- */ #page-transition-curtain.closing { pointer-events: auto; clip-path: circle(150% at 50% 50%); transition: clip-path 0.55s cubic-bezier(0.65, 0, 0.35, 1); } #page-transition-curtain.closing::before { opacity: 1; transition-delay: 0.2s; } #page-transition-curtain.closing .pt-logo { opacity: 1; transform: translate(-50%, -50%) scale(1); } /* --- COVERED: мгновенный старт для новой страницы (уже покрыт) --- */ #page-transition-curtain.covered { pointer-events: auto; clip-path: circle(150% at 50% 50%); } /* Светлый кружок остаётся видимым на новой странице — без мерцания */ #page-transition-curtain.covered::before { opacity: 1; transition: none; } #page-transition-curtain.covered .pt-logo { opacity: 1; transform: translate(-50%, -50%) scale(1); /* Без transition — сразу видим */ transition: none; } /* --- OPENING: круг схлопывается обратно в центр --- */ #page-transition-curtain.opening { pointer-events: auto; clip-path: circle(0% at 50% 50%); transition: clip-path 0.55s cubic-bezier(0.65, 0, 0.35, 1); } #page-transition-curtain.opening::before { opacity: 0; /* Свечение держится, пока круг ещё большой (delay), затем плавно гаснет вместе со схлопыванием — убирает тёмную вспышку за лого */ transition: opacity 0.4s ease; transition-delay: 0.22s; } #page-transition-curtain.opening .pt-logo { opacity: 1; transform: translate(-50%, -50%) scale(1); /* Лого держится видимым ~250мс, затем плавно исчезает вместе с кругом */ transition: opacity 0.2s ease 0.25s, transform 0.2s ease 0.25s; } /* Финальная стадия — лого скрыто (применяется JS через setTimeout после opening) */ #page-transition-curtain.done .pt-logo { opacity: 0; transform: translate(-50%, -50%) scale(0.85); /* плавно и не резко гаснет вместе со схлопыванием круга */ transition: opacity 0.35s ease, transform 0.35s ease; transition-delay: 0.05s; } /* Мгновенный сброс занавеса при восстановлении страницы из bfcache (см. resetCurtainOnBfcacheRestore в page-transitions.js) — без этого переключение классов ниже само по себе анимировалось бы. */ #page-transition-curtain.no-transition, #page-transition-curtain.no-transition::before, #page-transition-curtain.no-transition .pt-logo { transition: none !important; } /* ------------------------------------------------------------- Accessibility / производительность ------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { #page-preloader, #page-preloader::before, .preloader-logo, .preloader-logo img, .preloader-indicator, .preloader-indicator::after, .preloader-hint { animation: none !important; } .preloader-logo { opacity: 1; transform: none; } .preloader-indicator, .preloader-hint { opacity: 1; } #page-transition-curtain { transition-duration: 0.001ms !important; } } /* ------------------------------------------------------------- ANTI-FLICKER: занавес покрывает экран ещё ДО первой отрисовки. Класс html.pt-incoming ставится синхронным inline-скриптом в , если страница открыта переходом. Это убирает вспышку контента. ------------------------------------------------------------- */ html.pt-incoming #page-transition-curtain { pointer-events: auto; clip-path: circle(150% at 50% 50%); -webkit-clip-path: circle(150% at 50% 50%); transition: none !important; } html.pt-incoming #page-transition-curtain::before { opacity: 1; transition: none !important; } html.pt-incoming #page-transition-curtain .pt-logo { opacity: 1; transition: none !important; }