/* ============================================================
   CoStream — animations.css
   Skeleton loading, hover effects, view transitions
   ============================================================ */

@keyframes cs-shimmer {
    from { background-position: -600px 0 }
    to   { background-position:  600px 0 }
}
@keyframes cs-slide-in {
    from { opacity:0; transform:translateY(-10px) }
    to   { opacity:1; transform:translateY(0) }
}
@keyframes cs-vt-out {
    to { opacity:0; transform:translateY(-8px) scale(.99) }
}
@keyframes cs-vt-in {
    from { opacity:0; transform:translateY(10px) scale(.99) }
    to   { opacity:1; transform:translateY(0) scale(1) }
}

/* ── SKELETON ───────────────────────────────────────────── */
.cs-skel {
    border-radius: 6px;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,.03) 25%,
        rgba(255,255,255,.08) 50%,
        rgba(255,255,255,.03) 75%
    );
    background-size: 1200px 100%;
    animation: cs-shimmer 1.6s ease-in-out infinite;
}

/* ── HOVER ─────────────────────────────────────────────── */
.streamer-tile {
    transition: border-color .25s, transform .25s, box-shadow .25s !important;
}
.streamer-tile:hover {
    border-color: rgba(108,99,255,.4) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(108,99,255,.15) !important;
}
.ach-item {
    transition: border-color .2s, transform .2s, box-shadow .2s !important;
}
.ach-item:hover {
    border-color: rgba(108,99,255,.5) !important;
    transform: translateY(-3px) scale(1.05) !important;
    box-shadow: 0 6px 16px rgba(108,99,255,.2) !important;
}
.vod-card {
    transition: border-color .25s, transform .25s, box-shadow .25s !important;
}
.vod-card:hover {
    border-color: rgba(108,99,255,.4) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.3) !important;
}
.partner-item {
    transition: background .15s, transform .15s !important;
}
.partner-item:hover {
    transform: translateX(3px) !important;
}
.block {
    transition: border-color .25s !important;
}
.block:hover {
    border-color: rgba(108,99,255,.18) !important;
}
.af-item {
    transition: border-color .2s, transform .2s !important;
}
.af-item:hover {
    border-color: rgba(108,99,255,.3) !important;
    transform: translateX(2px) !important;
}

/* ── ПОЯВЛЕНИЕ ─────────────────────────────────────────── */
.cs-enter {
    animation: cs-slide-in .3s cubic-bezier(.34,1.1,.64,1) both;
}
.cs-enter-1 { animation-delay:.05s }
.cs-enter-2 { animation-delay:.10s }
.cs-enter-3 { animation-delay:.15s }
.cs-enter-4 { animation-delay:.20s }

/* ── VIEW TRANSITIONS ───────────────────────────────────── */
@supports (view-transition-name: page) {
    ::view-transition-old(page) { animation: cs-vt-out .22s ease both; }
    ::view-transition-new(page) { animation: cs-vt-in  .28s ease both; }
    body > * { view-transition-name: page; }
}

/* ── SKELETON КОМПОНЕНТЫ ───────────────────────────────── */
.cs-skel-raid {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .65rem .75rem;
    border-radius: 12px;
    margin-bottom: .3rem;
    background: var(--surface2);
    border: 1px solid var(--border);
}
.cs-skel-tile {
    flex-shrink: 0;
    width: 150px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.1rem .9rem;
    text-align: center;
}
.cs-skel-vod {
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface2);
    border: 1px solid var(--border);
}