/* Сторінка «Галерея» (gallery.html): нові картки, фільтр за розділами,
поява фото при прокрутці + легкий паралакс, перегляд на весь екран.
Логіка - js/fa-gallery.js. Відкат = прибрати 2 рядки перед у gallery.html. */
/* ---------- Фільтр ---------- */
.fa-gal-filter {
display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
margin: 0 0 30px; padding: 0;
}
.fa-gal-filter button {
position: relative; overflow: hidden; isolation: isolate;
border: 0; cursor: pointer;
padding: 9px 16px; border-radius: 999px;
background: rgba(18, 16, 26, .94);
color: rgba(255, 255, 255, .8);
font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2;
transition: transform .2s ease, color .2s ease, box-shadow .2s ease;
}
.fa-gal-filter button::before {
content: ""; position: absolute; inset: 0; padding: 1.2px; border-radius: inherit;
background: linear-gradient(90deg, rgba(255, 90, 31, .8), rgba(122, 44, 255, .8));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
opacity: .55; pointer-events: none;
}
.fa-gal-filter button sup { display: none; } /* лічильники приховано на прохання */
.fa-gal-filter button.on {
background: linear-gradient(90deg, #FA500A, #6207BC);
color: #fff;
box-shadow: 0 6px 18px rgba(250, 80, 10, .35);
}
.fa-gal-filter button.on::before { opacity: 0; }
.fa-gal-filter button:active { transform: scale(.95); }
/* ---------- Картка ---------- */
.fa-gal-grid .blog-single-box {
background: rgba(14, 12, 20, .96) !important;
padding: 0 !important;
margin: 0 0 28px !important;
border-radius: 22px;
overflow: hidden;
isolation: isolate;
box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
cursor: zoom-in;
transition: transform .35s ease, box-shadow .35s ease;
}
.fa-gal-grid .blog-single-box::before { /* градієнтна рамка */
content: ""; position: absolute; inset: 0; padding: 1.3px; border-radius: inherit;
background: linear-gradient(135deg, rgba(255, 90, 31, .85), rgba(122, 44, 255, .85));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
opacity: .45; pointer-events: none; z-index: 5;
transition: opacity .35s ease;
}
.fa-gal-grid .blog-single-box .blog-thumb {
aspect-ratio: 4 / 3;
border-radius: 0 !important;
padding: 0 !important;
background: #111 !important;
overflow: hidden;
}
.fa-gal-grid .blog-single-box .blog-thumb img:nth-child(1) { display: none; }
.fa-gal-grid .blog-single-box .blog-thumb img:nth-child(2) {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover;
opacity: 1 !important; filter: none !important;
transform: translate3d(0, var(--py, 0px), 0) scale(1.14) !important;
transition: transform .6s ease-out !important;
will-change: transform;
}
/* затемнення знизу, щоб читалась мітка */
.fa-gal-grid .blog-single-box .blog-thumb::after {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(to top, rgba(0, 0, 0, .65), transparent 45%);
}
/* мітка «Змагання / дата» - пігулка на фото */
.fa-gal-grid .blog-single-box .blog-thumb .blog {
position: absolute; left: 12px; bottom: 12px; z-index: 3;
}
.fa-gal-grid .blog-single-box .blog-thumb .blog a {
margin: 0 !important;
display: inline-flex; align-items: center;
padding: 6px 12px; border-radius: 999px;
font-size: 13px !important; font-weight: 600 !important; color: #fff !important;
background: rgba(0, 0, 0, .55);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, .18);
pointer-events: none;
}
.fa-gal-grid .blog-single-box .blog-thumb .blog a span { margin: 0 6px; opacity: .55; }
/* значок «збільшити» */
.fa-gal-grid .blog-single-box .fa-gal-zoom {
position: absolute; right: 12px; top: 12px; z-index: 3;
width: 34px; height: 34px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: rgba(0, 0, 0, .5);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, .2);
color: #fff; font-size: 14px;
opacity: .85; transition: transform .3s ease, opacity .3s ease;
}
/* білий відблиск - пробігає, коли картка з'являється, і при наведенні */
.fa-gal-grid .blog-single-box .fa-gal-shine {
position: absolute; top: 0; left: -80%; width: 50%; height: 100%; z-index: 4;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
transform: skewX(-20deg); pointer-events: none;
}
.fa-gal-grid .blog-single-box.fa-in .fa-gal-shine { animation: faGalShine 1.8s ease-in-out calc(.55s * var(--gk, .75)) 1 both; /* відблиск повільно, незалежно від темпу прокрутки */ }
@keyframes faGalShine { from { left: -80%; } to { left: 140%; } }
/* текст під фото */
.fa-gal-grid .blog-single-box .blog-content { padding: 14px 18px 18px !important; }
.fa-gal-grid .blog-single-box .blog-content h4 { margin: 0 0 6px !important; }
.fa-gal-grid .blog-single-box .blog-content h4 a {
font-size: 19px !important; line-height: 1.3 !important; font-weight: 700 !important; color: #fff;
pointer-events: none;
}
.fa-gal-grid .blog-single-box .blog-content p {
margin: 0; font-size: 13.5px !important; line-height: 1.45 !important;
color: rgba(255, 255, 255, .55);
}
.fa-gal-grid .blog-single-box .blog-content p::before {
content: "\f3c5"; font-family: "Font Awesome 6 Free"; font-weight: 900;
color: #FA500A; margin-right: 7px;
}
/* наведення (мишка) */
@media (hover: hover) {
.fa-gal-js .fa-gal-grid .blog-single-box.fa-in:hover { transform: translateY(-6px); box-shadow: 0 22px 44px -10px rgba(250, 80, 10, .35), 0 14px 34px rgba(0, 0, 0, .5); }
.fa-gal-grid .blog-single-box:hover::before { opacity: 1; }
.fa-gal-grid .blog-single-box:hover .blog-thumb img:nth-child(2) { transform: translate3d(0, var(--py, 0px), 0) scale(1.22) !important; }
.fa-gal-grid .blog-single-box:hover .fa-gal-zoom { transform: scale(1.12); opacity: 1; }
.fa-gal-grid .blog-single-box:hover .fa-gal-shine { animation: faGalShine 1.6s ease-in-out 0s 1 both; }
}
.fa-gal-js .fa-gal-grid .blog-single-box.fa-in:active { transform: scale(.98); }
/* ---------- Поява при прокрутці ---------- */
.fa-gal-js .fa-gal-grid > div { transition: opacity .3s ease; }
.fa-gal-js .fa-gal-grid .blog-single-box {
opacity: 0;
transform: translateY(60px) scale(.92) rotateX(10deg);
transform-origin: 50% 100%;
/* --gk - темп із fa-gallery.js (швидка прокрутка = коротша анімація) */
transition: opacity calc(.8s * var(--gk, .75)) ease, transform calc(.9s * var(--gk, .75)) cubic-bezier(.2, .85, .25, 1), box-shadow .35s ease;
transition-delay: var(--gd, 0s);
}
.fa-gal-js .fa-gal-grid .blog-single-box .blog-thumb { clip-path: inset(0 0 100% 0 round 0); transition: clip-path calc(1s * var(--gk, .75)) cubic-bezier(.45, 0, .2, 1); transition-delay: calc(var(--gd, 0s) + .05s * var(--gk, .75)); }
.fa-gal-js .fa-gal-grid .blog-single-box.fa-in { opacity: 1; transform: none; }
.fa-gal-js .fa-gal-grid .blog-single-box.fa-in .blog-thumb { clip-path: inset(0 0 0 0 round 0); }
.fa-gal-grid { perspective: 1200px; }
.fa-gal-grid > div.fa-gal-hide { display: none; }
/* мобільний: на всю ширину (шаблон давав відступ 60px з боків) */
@media (max-width: 767px) {
.fa-gal-grid .blog-single-box { margin: 0 0 22px !important; }
.fa-gal-grid .blog-single-box .blog-content h4 a { font-size: 18px !important; }
.fa-gal-filter { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -12px 22px; padding: 2px 12px 6px; }
.fa-gal-filter::-webkit-scrollbar { display: none; }
.fa-gal-filter button { flex: 0 0 auto; }
}
/* ---------- Перегляд на весь екран ---------- */
.fa-gal-lb {
position: fixed; inset: 0; z-index: 2147483000;
background: rgba(0, 0, 0, .94);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
display: flex; flex-direction: column; align-items: center; justify-content: center;
opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s;
touch-action: none; /* жести (щипок, свайп) обробляє fa-gallery.js */
}
.fa-gal-lb.open { opacity: 1; visibility: visible; }
.fa-gal-lb img {
max-width: 94vw; max-height: 78vh; border-radius: 14px;
box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
transform: scale(.94); transition: transform .35s cubic-bezier(.2, .85, .25, 1), opacity .25s ease;
user-select: none; -webkit-user-drag: none;
}
.fa-gal-lb.open img { transform: scale(1); }
.fa-gal-lb img.swap { opacity: 0; transform: scale(.97); }
.fa-gal-lb .cap { margin-top: 14px; color: #fff; text-align: center; font-size: 15px; font-weight: 600; padding: 0 70px; }
.fa-gal-lb .cap small { display: block; color: rgba(255, 255, 255, .55); font-weight: 500; font-size: 13px; margin-top: 3px; }
.fa-gal-lb .lb-btn {
position: absolute; width: 46px; height: 46px; border-radius: 50%;
border: 1.5px solid transparent; cursor: pointer; padding: 0;
background: var(--fa-chev) center / 20px 20px no-repeat padding-box, var(--fa-ring-bg);
box-shadow: 0 0 20px rgba(250, 80, 10, .4);
animation: faNavSpin 4s linear infinite;
}
.fa-gal-lb .lb-next { right: 14px; top: 50%; margin-top: -23px; }
.fa-gal-lb .lb-prev { left: 14px; top: 50%; margin-top: -23px; background: var(--fa-chev-l) center / 20px 20px no-repeat padding-box, var(--fa-ring-bg); }
.fa-gal-lb .lb-close { right: 14px; top: 14px; width: 42px; height: 42px; background: var(--fa-cross) center / 18px 18px no-repeat padding-box, var(--fa-ring-bg); }
.fa-gal-lb .lb-btn:active { transform: scale(.9); }
.fa-gal-lb .cnt { position: absolute; left: 18px; top: 24px; color: rgba(255, 255, 255, .6); font-size: 13px; font-weight: 600; }
@media (max-width: 767px) {
.fa-gal-lb .lb-next, .fa-gal-lb .lb-prev { top: auto; bottom: 22px; margin-top: 0; }
.fa-gal-lb .lb-next { right: calc(50% - 60px); }
.fa-gal-lb .lb-prev { left: calc(50% - 60px); }
.fa-gal-lb .cap { padding: 0 16px; margin-bottom: 70px; }
}
@media (prefers-reduced-motion: reduce) {
.fa-gal-js .fa-gal-grid .blog-single-box, .fa-gal-js .fa-gal-grid .blog-single-box .blog-thumb { opacity: 1; transform: none; clip-path: none; transition: none; }
.fa-gal-grid .blog-single-box .fa-gal-shine, .fa-gal-lb .lb-btn { animation: none !important; }
}
/* поки відкритий перегляд - плаваючі кнопки (дзвінок, бот, підказка) ховаємо */
html.fa-lb-open .contact-fab, html.fa-lb-open #fa-chat-widget, html.fa-lb-open #bot-hint, html.fa-lb-open .scroll-to-top { opacity: 0 !important; pointer-events: none !important; }
/* ---------- Блок «Більше фото та відео… в нашому Instagram» ----------
Іконки «Тренування» і «Турніри» - по центру картки, у світному кружечку,
плавно «дихають»; кнопка «Перейти в Instagram» - прямокутна з заокругленням. */
.about-section .about-wrapper-bx { gap: 18px; }
.about-section .about-wrapper-bx .about-box {
position: relative; isolation: isolate;
display: flex; flex-direction: column; align-items: center;
text-align: center !important;
padding: 26px 18px 22px;
border-radius: 22px;
background: radial-gradient(120% 90% at 50% 0%, rgba(250, 80, 10, .10), transparent 60%), rgba(14, 12, 20, .9);
box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
}
.about-section .about-wrapper-bx .about-box::before {
content: ""; position: absolute; inset: 0; padding: 1.2px; border-radius: inherit;
background: linear-gradient(135deg, rgba(255, 90, 31, .8), rgba(122, 44, 255, .8));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
opacity: .5; pointer-events: none;
}
.about-section .about-wrapper-bx .about-box .about-icon-bx {
display: flex !important; flex-direction: column; align-items: center; justify-content: center !important;
gap: 14px; margin: 0 0 10px;
}
.about-section .about-wrapper-bx .about-box .about-icon-bx .icon {
position: relative; margin: 0 !important;
width: 104px; height: 104px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: radial-gradient(circle at 50% 40%, rgba(250, 80, 10, .18), rgba(98, 7, 188, .14) 60%, transparent 72%);
animation: faAbFloat 3.6s ease-in-out infinite;
}
.about-section .about-wrapper-bx .about-box + .about-box .about-icon-bx .icon { animation-delay: -1.8s; }
/* обертове градієнтне кільце навколо іконки */
.about-section .about-wrapper-bx .about-box .about-icon-bx .icon::before {
content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 1.5px;
background: conic-gradient(from var(--ab-a, 0deg), #FA500A, #6207BC, transparent 55%, #FA500A);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
animation: faAbSpin 5s linear infinite;
}
.about-section .about-wrapper-bx .about-box .about-icon-bx .icon img {
width: 72px !important; height: 72px !important;
object-fit: contain !important; /* about-icon*-t.png - прозорі копії (оригінали з чорним фоном) */
filter: drop-shadow(0 4px 12px rgba(250, 80, 10, .35));
animation: faAbTilt 3.6s ease-in-out infinite;
}
.about-section .about-wrapper-bx .about-box + .about-box .about-icon-bx .icon img { animation-name: faAbPop; animation-delay: -1.8s; }
.about-section .about-wrapper-bx .about-box .about-icon-bx h3.icon-title { font-size: 19px; font-weight: 600; line-height: 1.3; }
.about-section .about-wrapper-bx .about-box p { margin: 0; line-height: 1.55; color: rgba(255, 255, 255, .6); }
@property --ab-a { syntax: "