/* ============================================================
   Screen Transitions & Loading States
   ============================================================
   Smooth crossfades, skeleton loading, stagger reveals, and
   modal animations for the pre-game flow. All timing uses
   design-system tokens (--w-transition-*).
   ============================================================ */

/* --- Reduced motion: collapse all custom animations to instant --- */
@media (prefers-reduced-motion: reduce) {
    .w-stagger-item,
    .w-screen-fade,
    .w-content-fade,
    .w-modal-overlay-fade,
    .w-modal-content-animate {
        transition: none !important;
        animation: none !important;
    }
    .w-skeleton {
        animation: none !important;
    }
}

/* --- Screen transition helpers --- */
.w-screen-fade {
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Content crossfade --- */
.w-content-fade {
    transition: opacity 0.15s ease;
}

/* --- Stagger reveal items --- */
.w-stagger-item {
    opacity: 0;
    transform: translateY(8px);
}
.w-stagger-item.revealed {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Modal overlay fade --- */
.w-modal-overlay-fade {
    transition: opacity 0.25s ease;
}

/* --- Modal content scale+fade --- */
.w-modal-content-animate {
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   Skeleton Cards
   ============================================================
   Dimensions match real card styles from index.html to prevent
   layout shift when real content replaces skeletons.
   Inner elements use .w-skeleton from design-system.css for
   the shimmer animation.
   ============================================================ */

/* --- Server card skeleton --- */
.w-skel-server-card {
    background: rgba(19, 16, 29, 0.7);
    border: 1px solid rgba(42, 36, 64, 0.6);
    border-radius: var(--w-radius-sm);
    padding: 12px 14px;
    margin-bottom: 6px;
}

.w-skel-server-card .w-skel-line {
    border-radius: 4px;
    margin-bottom: 6px;
}

.w-skel-server-card .w-skel-header {
    height: 14px;
    width: 55%;
    margin-bottom: 6px;
}

.w-skel-server-card .w-skel-desc {
    height: 9px;
    width: 80%;
    margin-bottom: 8px;
}

.w-skel-server-card .w-skel-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.w-skel-server-card .w-skel-stat {
    width: 52px;
    height: 20px;
    border-radius: 4px;
}

/* --- Character card skeleton --- */
.w-skel-char-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(19, 16, 29, 0.6);
    border: 1px solid rgba(42, 36, 64, 0.5);
    border-radius: var(--w-radius-sm);
    margin-bottom: 4px;
}

.w-skel-char-card .w-skel-thumb {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    flex-shrink: 0;
}

.w-skel-char-card .w-skel-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.w-skel-char-card .w-skel-name {
    height: 14px;
    width: 65%;
    border-radius: 3px;
}

.w-skel-char-card .w-skel-meta {
    height: 10px;
    width: 35%;
    border-radius: 3px;
}

.w-skel-char-card .w-skel-btn {
    width: 52px;
    height: 28px;
    border-radius: var(--w-radius-sm);
    flex-shrink: 0;
}