/* =====================================================================
   Futbol bo'limi — "silikon" glassmorphism + silliq animatsiyalar.
   Hammasi .fb-page ostida scoped (faqat futbol sahifalariga ta'sir qiladi).
   ===================================================================== */

.fb-page {
    position: relative;
    min-height: 100vh;
    --glass-bg: rgba(255, 255, 255, 0.55);
    --glass-bg-strong: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.65);
    --glass-blur: 14px;
    --glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.12);
    --glass-shadow-hover: 0 16px 44px rgba(31, 38, 135, 0.2);
}

/* ---- Animatsiyali gradient fon ---- */
.fb-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background: linear-gradient(125deg, #e0e7ff, #f0fdf4, #faf5ff, #e0f2fe, #eef2ff);
    background-size: 400% 400%;
    animation: fbGradient 22s ease infinite;
}
@keyframes fbGradient {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ---- Suzuvchi rangli "orb"lar (silikon nur effekti) ---- */
.fb-page::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(440px circle at 12% 18%, rgba(124, 58, 237, 0.18), transparent 60%),
        radial-gradient(400px circle at 88% 72%, rgba(22, 163, 74, 0.16), transparent 60%),
        radial-gradient(360px circle at 60% 110%, rgba(37, 99, 235, 0.14), transparent 60%);
    animation: fbFloat 18s ease-in-out infinite alternate;
}
@keyframes fbFloat {
    from { transform: translate3d(0, -14px, 0) scale(1); }
    to   { transform: translate3d(0, 14px, 0) scale(1.04); }
}

/* ---- Glass kartalar ----
   Class kartalari (.fb-card/.sc-card) va inline #fff / #f8fafc qutilar.
   Gradientli (rangli) kartalar va xato qutilari (#fef2f2) tegmaydi. */
.fb-page .fb-card,
.fb-page .sc-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(var(--glass-blur)) saturate(165%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(165%);
    transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease;
}
.fb-page [style*="background: #fff"],
.fb-page [style*="background:#fff"],
.fb-page [style*="background: #f8fafc"],
.fb-page [style*="background:#f8fafc"] {
    background: var(--glass-bg) !important;
    border-color: var(--glass-border) !important;
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(var(--glass-blur)) saturate(165%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(165%);
    transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease;
}

/* ---- Hover: yumshoq ko'tarilish ---- */
.fb-page .fb-card:hover,
.fb-page .sc-card:hover,
.fb-page [style*="background: #f8fafc"]:hover,
.fb-page [style*="background:#f8fafc"]:hover {
    transform: translateY(-5px);
    box-shadow: var(--glass-shadow-hover);
}

/* Rangli (gradientli) feature-kartalar: faqat soya/transition, fon o'zgarmaydi */
.fb-page .fb-card[style*="gradient"],
.fb-page [style*="linear-gradient"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-blend-mode: normal;
}

/* ---- Havola va tugmalar uchun silliq o'tish ---- */
.fb-page a,
.fb-page button {
    transition: color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.fb-page .fb-nav a:hover,
.fb-page .sc-card a:hover {
    transform: translateX(3px);
}

/* ---- Jadval qatorlari uchun yumshoq highlight ---- */
.fb-page tbody tr {
    transition: background .25s ease;
}
.fb-page tbody tr:hover {
    background: rgba(124, 58, 237, 0.07) !important;
}

/* ---- Scroll-reveal (JS .fb-reveal qo'shadi, ko'rinaganda .fb-in) ---- */
.fb-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1);
    will-change: opacity, transform;
}
.fb-reveal.fb-in {
    opacity: 1;
    transform: none;
}

/* ---- Sahifa kirish animatsiyasi (sarlavhalar) ---- */
.fb-page h1 {
    animation: fbRise .8s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes fbRise {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: none; }
}

/* ---- Harakatni kamaytirish afzalligi (foydalanuvchi tanlasa) ---- */
@media (prefers-reduced-motion: reduce) {
    .fb-page::before,
    .fb-page::after,
    .fb-page h1 { animation: none; }
    .fb-reveal { opacity: 1; transform: none; transition: none; }
    .fb-page .fb-card,
    .fb-page .sc-card { transition: none; }
}