/* FREESPORTIA — public site theme: glassmorphism, motion, real icons */

/* Logo */
.fs-logo { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; color: #fff; }
.fs-logo-mark {
    width: 36px; height: 36px; border-radius: 10px;
    background: linear-gradient(135deg, #10b981, #06b6d4);
    background-size: 200% 200%;
    animation: gradientShift 5s ease infinite;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 18px rgba(16,185,129,.45), inset 0 1px 0 rgba(255,255,255,.25);
    flex-shrink: 0;
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.fs-logo-mark svg { width: 20px; height: 20px; }
.fs-logo-text span { color: #34d399; }
.fs-logo:hover .fs-logo-mark { transform: scale(1.08) rotate(-4deg); box-shadow: 0 6px 24px rgba(16,185,129,.6), inset 0 1px 0 rgba(255,255,255,.3); }

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-up { animation: fadeUp .7s cubic-bezier(.16,1,.3,1) both; }
.delay-1 { animation-delay: .08s; }
.delay-2 { animation-delay: .16s; }
.delay-3 { animation-delay: .24s; }
.delay-4 { animation-delay: .32s; }

@keyframes float {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-18px) scale(1.05); }
}
.hero-glow { position: absolute; border-radius: 999px; filter: blur(70px); opacity: .35; pointer-events: none; animation: float 9s ease-in-out infinite; z-index: 0; }

@keyframes pulseDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(1.4); } }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2ea043; animation: pulseDot 1.6s ease-in-out infinite; }

/* Glassmorphism card — the primary surface style across the site */
.glass-card {
    background: rgba(18, 23, 33, 0.55);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 8px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
    position: relative;
    transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, border-color .25s ease;
}
.glass-card::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(46,160,67,0), rgba(46,160,67,0));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events: none;
    transition: background .25s ease;
}
.glass-card:hover {
    transform: translateY(-6px);
    border-color: rgba(46,160,67,.4);
    box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(46,160,67,.15), inset 0 1px 0 rgba(255,255,255,.06);
}
.glass-card:hover::before {
    background: linear-gradient(135deg, rgba(46,160,67,.5), rgba(0,184,255,.3));
}

/* Spotlight — a soft glow that follows the cursor inside a card (JS sets --x/--y) */
.spotlight { position: relative; overflow: hidden; }
.spotlight::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(280px circle at var(--x, 50%) var(--y, 50%), rgba(46,160,67,.15), transparent 70%);
    opacity: 0; transition: opacity .3s ease;
    pointer-events: none;
}
.spotlight:hover::after { opacity: 1; }

.hover-lift { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.hover-lift:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.35); border-color: #2ea043 !important; }

.input-icon-wrap { position: relative; }
.input-icon-wrap .input-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #64748b; pointer-events: none; }
.input-icon-wrap input { padding-left: 2.5rem !important; }

/* Real-icon badge (Boxicons) replacing emoji circles */
.icon-badge {
    width: 46px; height: 46px; border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; flex-shrink: 0;
    background: linear-gradient(135deg, rgba(46,160,67,.18), rgba(0,184,255,.1));
    border: 1px solid rgba(46,160,67,.25);
    color: #34d399;
    transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .25s ease;
}
.glass-card:hover .icon-badge { transform: scale(1.12) rotate(-6deg); background: linear-gradient(135deg, rgba(46,160,67,.3), rgba(0,184,255,.18)); }

.sport-icon-badge {
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; flex-shrink: 0;
    background: linear-gradient(135deg, rgba(46,160,67,.18), rgba(0,184,255,.1));
    border: 1px solid rgba(46,160,67,.25);
    color: #34d399;
}

/* Shine-sweep CTA buttons */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::before {
    content: '';
    position: absolute; top: 0; left: -60%;
    width: 40%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
    transform: skewX(-20deg);
    transition: left .6s ease;
}
.btn-shine:hover::before { left: 130%; }

details.faq-item summary { cursor: pointer; list-style: none; }
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item .faq-chevron { transition: transform .2s ease; }
details.faq-item[open] .faq-chevron { transform: rotate(180deg); }
details.faq-item[open] summary { color: #2ea043; }

.gradient-text {
    background: linear-gradient(135deg,#00ff88,#00b8ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 200%;
    animation: gradientShift 6s ease infinite;
}
@keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.stat-counter { font-variant-numeric: tabular-nums; }

/* Animated background grid + mesh for hero sections */
@keyframes gridMove { from { background-position: 0 0; } to { background-position: 48px 48px; } }
.bg-grid-animate {
    background-image: linear-gradient(rgba(16,185,129,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(16,185,129,.09) 1px, transparent 1px);
    background-size: 48px 48px;
    animation: gridMove 14s linear infinite;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 90%);
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 90%);
}
@keyframes meshShift {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    50% { transform: translate(4%, -3%) rotate(4deg) scale(1.08); }
}
.hero-mesh {
    position: absolute; inset: -10% -5%;
    background:
        radial-gradient(circle at 20% 30%, rgba(46,160,67,.24), transparent 45%),
        radial-gradient(circle at 80% 20%, rgba(0,184,255,.2), transparent 45%),
        radial-gradient(circle at 50% 80%, rgba(163,113,247,.14), transparent 50%);
    animation: meshShift 16s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

/* Noise texture overlay for depth (subtle) */
.noise-overlay {
    position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .025; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Glass navbar */
.nav-glass { background: rgba(10,12,16,0.6); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); }