/* Groups Academy - card glow + falling study icons */

/* ---------- 1. Cards: orange shadow + a light running round the border ---------- */
.ga-card {
    position: relative; overflow: hidden; isolation: isolate;
    box-shadow: 0 8px 22px -8px rgba(234, 88, 12, .38), 0 0 0 1px rgba(234, 88, 12, .10) !important;
    transition: transform .25s ease, box-shadow .25s ease;
}
.ga-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px -10px rgba(234, 88, 12, .55), 0 0 0 1px rgba(234, 88, 12, .25) !important;
}
.ga-card::before {              /* the moving orange light */
    content: ""; position: absolute; z-index: -2; left: 50%; top: 50%;
    width: 230%; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(0deg);
    background: conic-gradient(from 0deg, transparent 0deg 295deg, #fdba74 325deg, #ea580c 360deg);
    will-change: transform; animation: ga-spin 6s linear infinite; animation-play-state: paused;
}
.ga-card::after {               /* face of the box; leaves a thin ring so the light shows */
    content: ""; position: absolute; z-index: -1; inset: 2px; border-radius: inherit; background: #fff;
}
.dark .ga-card::after { background: #1e293b; }
.ga-card.ga-live::before { animation-play-state: running; }       /* only runs while on screen */
.ga-card:nth-child(2n)::before { animation-direction: reverse; animation-duration: 8s; }
.ga-card:nth-child(3n)::before { animation-duration: 7s; }
@keyframes ga-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* gentle entrance */
.ga-card { opacity: 0; transform: translateY(14px); }
.ga-card.ga-in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease, box-shadow .25s ease; }
.ga-card.ga-in:hover { transform: translateY(-4px); }

/* ---------- 2. Falling study icons ---------- */
#ga-rain { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
main, footer { position: relative; z-index: 1; }
.ga-drop { position: absolute; top: -70px; will-change: transform; animation: ga-fall linear infinite; }
.ga-drop > span { display: block; will-change: transform; animation: ga-sway ease-in-out infinite alternate; filter: drop-shadow(0 3px 4px rgba(15, 23, 42, .18)); }
.ga-drop svg { display: block; }
.ga-chip { font: 800 11px/1 system-ui, sans-serif; letter-spacing: .04em; color: #fff; padding: 6px 9px; border-radius: 999px; white-space: nowrap; }
@keyframes ga-fall { from { transform: translateY(-80px); } to { transform: translateY(calc(100vh + 120px)); } }
@keyframes ga-sway { from { transform: translateX(-22px) rotate(-18deg); } to { transform: translateX(22px) rotate(18deg); } }

#ga-rain-toggle {
    position: fixed; left: 14px; bottom: 14px; z-index: 50; width: 40px; height: 40px; border-radius: 999px;
    border: 0; cursor: pointer; font-size: 18px; line-height: 40px; text-align: center;
    background: #ea580c; color: #fff; box-shadow: 0 6px 16px -4px rgba(234, 88, 12, .6);
}
#ga-rain-toggle.off { background: #94a3b8; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
    .ga-card::before, .ga-drop, .ga-drop > span { animation: none !important; }
    #ga-rain { display: none; }
    .ga-card { opacity: 1; transform: none; }
}