/* ============================================================= Phoenix INVEST — V3.2 анімації (легкі, ненав'язливі) Підключити після main.css в : Структура: 1. Dots-grid фон (живий, дихає) 2. Glow на картках при hover (mouse-position aware) 3. Reveal on scroll (плавна поява блоків) 4. Shimmer на CTA-кнопках 5. Float на hero 6. Respects prefers-reduced-motion ============================================================= */ /* ============================================ 1. DOTS-GRID ФОН — все тіло сайту ============================================ */ /* ШАР 1 — статична базова сітка точок (тиха, фонова) */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(circle at center, rgba(215, 157, 50, 0.18) 1px, transparent 1.5px), radial-gradient(circle at center, rgba(91, 124, 255, 0.08) 0.5px, transparent 1.5px); background-size: 32px 32px, 16px 16px; background-position: 0 0, 8px 8px; opacity: 0.6; animation: dotsBreathing 12s ease-in-out infinite; } /* ШАР 2 — копія сітки видна крізь діагональну стрічку-маску. V3.2.4 параметри (тонке налаштування за відгуком): • Прозорість крапок ще знижена (gold 0.28→0.18, blue 0.15→0.10) • Стрічка ШИРША (16% → 36%) і з МʼЯКИМИ краями (8 keypoints fade) • Хвиля ще повільніша (animation 9s → 14s) */ body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; /* Тьмяніші збільшені крапки */ background-image: radial-gradient(circle at center, rgba(232, 179, 69, 0.18) 2.4px, transparent 4px), radial-gradient(circle at center, rgba(120, 150, 255, 0.10) 1.4px, transparent 3px); background-size: 32px 32px, 16px 16px; background-position: 0 0, 8px 8px; /* Широка ПЛАВНА діагональна стрічка з 9-ма keypoints для гладких країв. 32% — 68% видимої зони (36% від маски замість 16%), переходи поступові: 0.15 → 0.45 → 0.75 → 0.95 → 1.0 → 0.95 → 0.75 → 0.45 → 0.15 */ -webkit-mask-image: linear-gradient( 135deg, transparent 0%, transparent 28%, rgba(0, 0, 0, 0.15) 32%, rgba(0, 0, 0, 0.45) 38%, rgba(0, 0, 0, 0.75) 44%, rgba(0, 0, 0, 0.95) 48%, rgba(0, 0, 0, 1.00) 50%, rgba(0, 0, 0, 0.95) 52%, rgba(0, 0, 0, 0.75) 56%, rgba(0, 0, 0, 0.45) 62%, rgba(0, 0, 0, 0.15) 68%, transparent 72%, transparent 100% ); mask-image: linear-gradient( 135deg, transparent 0%, transparent 28%, rgba(0, 0, 0, 0.15) 32%, rgba(0, 0, 0, 0.45) 38%, rgba(0, 0, 0, 0.75) 44%, rgba(0, 0, 0, 0.95) 48%, rgba(0, 0, 0, 1.00) 50%, rgba(0, 0, 0, 0.95) 52%, rgba(0, 0, 0, 0.75) 56%, rgba(0, 0, 0, 0.45) 62%, rgba(0, 0, 0, 0.15) 68%, transparent 72%, transparent 100% ); -webkit-mask-size: 240% 240%; mask-size: 240% 240%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 115% 115%; mask-position: 115% 115%; /* 14 сек цикл = ~7с повільна хвиля + ~7с пауза */ animation: dotsWaveDiagonal 14s cubic-bezier(0.4, 0, 0.2, 1) infinite; will-change: mask-position; } @keyframes dotsWaveDiagonal { /* 0-50% — повільна хвиля проходить по діагоналі (4.5 сек) */ 0% { -webkit-mask-position: 110% 110%; mask-position: 110% 110%; } 50% { -webkit-mask-position: -10% -10%; mask-position: -10% -10%; } /* 50-100% — пауза 4.5 сек, маска лишається за межами екрану */ 100% { -webkit-mask-position: -10% -10%; mask-position: -10% -10%; } } /* Контент має бути над сіткою */ body > * { position: relative; z-index: 1; } @keyframes dotsBreathing { 0%, 100% { opacity: 0.55; background-size: 32px 32px, 16px 16px; } 50% { opacity: 0.75; background-size: 34px 34px, 17px 17px; } } /* На дуже широких або дуже вузьких — щільніша сітка */ @media (min-width: 1600px) { body::before, body::after { background-size: 40px 40px, 20px 20px; } } @media (max-width: 768px) { body::before { background-size: 24px 24px, 12px 12px; opacity: 0.4; } body::after { background-size: 24px 24px, 12px 12px; } } /* ============================================ 2. GLOW EFFECT — переливне світіння на hover Активується додаванням класу .glow-card на елемент. JS встановлює CSS змінні --mouse-x / --mouse-y від cursor. ============================================ */ .glow-card { position: relative; overflow: hidden; isolation: isolate; transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.3, 1.0), box-shadow 0.32s cubic-bezier(0.2, 0.8, 0.3, 1.0), border-color 0.32s ease; } .glow-card::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; /* Радіальний градієнт-«сяйво» який слідує за курсором (CSS variables --mouse-x/-y задає JS у %) */ background: radial-gradient( circle 240px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(215, 157, 50, 0.22), rgba(215, 157, 50, 0.08) 40%, transparent 70% ); opacity: 0; transition: opacity 0.4s ease; } .glow-card::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; /* Тонка лінія яка обводить картку при hover — переливається */ padding: 1px; background: linear-gradient( 135deg, rgba(215, 157, 50, 0) 0%, rgba(215, 157, 50, 0.4) 25%, rgba(91, 124, 255, 0.4) 50%, rgba(215, 157, 50, 0.4) 75%, rgba(215, 157, 50, 0) 100% ); background-size: 300% 300%; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.4s ease; } .glow-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), 0 0 24px rgba(215, 157, 50, 0.18); border-color: rgba(215, 157, 50, 0.45); } .glow-card:hover::before { opacity: 1; } .glow-card:hover::after { opacity: 1; animation: glowBorderShift 3.5s linear infinite; } @keyframes glowBorderShift { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } } /* ============================================ 3. REVEAL ON SCROLL Елементи з [data-reveal] плавно з'являються коли скрол доводить їх у viewport. JS додає клас .is-revealed. Variants: data-reveal="up|left|right|zoom|fade" ============================================ */ [data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.3, 1.0), transform 0.8s cubic-bezier(0.2, 0.8, 0.3, 1.0); will-change: opacity, transform; } [data-reveal="left"] { transform: translateX(-40px); } [data-reveal="right"] { transform: translateX(40px); } [data-reveal="zoom"] { transform: scale(0.94); } [data-reveal="fade"] { transform: none; } [data-reveal].is-revealed { opacity: 1; transform: none; } /* Stagger: коли вкладені діти теж мають data-reveal — з затримкою */ [data-reveal-stagger] > [data-reveal] { transition-delay: 0s; } [data-reveal-stagger].is-revealed > [data-reveal]:nth-child(1) { transition-delay: 0.05s; } [data-reveal-stagger].is-revealed > [data-reveal]:nth-child(2) { transition-delay: 0.12s; } [data-reveal-stagger].is-revealed > [data-reveal]:nth-child(3) { transition-delay: 0.20s; } [data-reveal-stagger].is-revealed > [data-reveal]:nth-child(4) { transition-delay: 0.28s; } [data-reveal-stagger].is-revealed > [data-reveal]:nth-child(5) { transition-delay: 0.36s; } [data-reveal-stagger].is-revealed > [data-reveal]:nth-child(6) { transition-delay: 0.44s; } [data-reveal-stagger].is-revealed > [data-reveal]:nth-child(7) { transition-delay: 0.52s; } [data-reveal-stagger].is-revealed > [data-reveal]:nth-child(8) { transition-delay: 0.60s; } /* ============================================ 4. SHIMMER на головних кнопках (CTA) Активується класом .btn-shimmer (поверх існуючої .btn-primary) ============================================ */ .btn-shimmer { position: relative; overflow: hidden; isolation: isolate; } .btn-shimmer::after { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 100deg, transparent 0%, rgba(255, 255, 255, 0.18) 50%, transparent 100% ); transition: left 0.6s cubic-bezier(0.2, 0.8, 0.3, 1.0); pointer-events: none; } .btn-shimmer:hover::after { left: 100%; } /* ============================================ 5. FLOATING на hero-card (повільний parallax) ============================================ */ .hero-card.floating { animation: floatY 6s ease-in-out infinite; } @keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* ============================================ 6. PULSE на акцентних бейджах і кнопках Через box-shadow — НЕ перевизначає position властивості елемента (важливо для .float-chat який має position: fixed) ============================================ */ .pulse-accent { animation: pulseShadow 2.4s ease-out infinite; } @keyframes pulseShadow { 0% { box-shadow: 0 0 0 0 rgba(215, 157, 50, 0.55); } 70% { box-shadow: 0 0 0 14px rgba(215, 157, 50, 0); } 100% { box-shadow: 0 0 0 0 rgba(215, 157, 50, 0); } } /* ============================================ 6.5. ПРОЗОРІ СЕКЦІЇ — щоб точкова сітка body::before була видна СКРІЗЬ. Замість solid bg даємо тонку межу. Footer і header лишаються з solid bg (там посилання/контакти). ============================================ */ .locations, .how, .units, .about { background: transparent !important; border-top: 1px solid rgba(255, 255, 255, 0.04); /* Легкий «тон» для розділення без перекриття точок */ box-shadow: inset 0 1px 0 rgba(215, 157, 50, 0.04); } /* CTA-блок «Готові обговорити» в about — ЗАЛИШАЄМО solid bg щоб він виділявся; точки навколо нього все одно будуть видні */ .about-cta { background: linear-gradient( 145deg, rgba(20, 40, 58, 0.85), rgba(15, 32, 50, 0.85) ); backdrop-filter: blur(2px); } /* Картки на прозорих секціях — додаємо легкий backdrop щоб текст залишався читабельним поверх точок */ .location-card, .how-step, .unit-card { backdrop-filter: blur(1px); } /* ============================================ 7. ACCESSIBILITY — поважаємо налаштування користувача Користувачі з prefers-reduced-motion (укачування, vestibular) отримують статичну версію — без анімацій руху. ============================================ */ @media (prefers-reduced-motion: reduce) { body::before { animation: none; } body::after { /* Сховати хвилю-відблиск для людей з vestibular sensitivity */ display: none; } .glow-card, .glow-card::before, .glow-card::after { transition: none !important; animation: none !important; } [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } .btn-shimmer::after { display: none; } .hero-card.floating { animation: none; } .pulse-accent::before { animation: none; opacity: 0; } } /* ============================================ 8. ВИМКНУТИ ВСЕ ДИНАМІЧНО Якщо — все статика. (Контролюється з admin settings → site_animations_enabled) ============================================ */ html[data-animations="off"] body::before { animation: none; opacity: 0.35; } html[data-animations="off"] body::after { display: none; } html[data-animations="off"] .glow-card::before, html[data-animations="off"] .glow-card::after { display: none; } html[data-animations="off"] [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } html[data-animations="off"] .btn-shimmer::after { display: none; } html[data-animations="off"] .hero-card.floating { animation: none; } html[data-animations="off"] .pulse-accent { animation: none; box-shadow: none; } /* Коли анімації вимкнені — повертаємо solid bg секцій (інакше після відключення точок буде монотонний фон) */ html[data-animations="off"] .locations, html[data-animations="off"] .units { background: var(--color-bg-deep) !important; border-top: none; box-shadow: none; } html[data-animations="off"] .how, html[data-animations="off"] .about { background: var(--color-bg) !important; border-top: none; box-shadow: none; }