/* ═══════════════════════════════════════════════════════════════
   HOME TOUR — "One stream. Everywhere. Every toy." (public/js/home-tour.js)
   Transform/opacity animations only, so it stays smooth on phones.
   ═══════════════════════════════════════════════════════════════ */
.home-tour-mount { max-width: 860px; margin: 22px auto 0; }
.tour {
    position: relative; border-radius: 20px; padding: 20px 22px 18px; text-align: center; color: var(--text-primary);
    background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 12%, var(--bg-card)), var(--bg-card));
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}
.tour-head h2 { margin: 0 0 6px; font-size: clamp(1.2rem, 2.6vw, 1.6rem); font-weight: 900; }
.tour-head h2 i { color: var(--accent-light); }
.tour-head p { margin: 0 auto 14px; max-width: 640px; color: var(--text-secondary); font-size: 0.92rem; line-height: 1.5; }
.tour-flow { display: grid; gap: 6px; justify-items: center; }
.tour-src, .tour-out { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tour-node {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-weight: 700; font-size: 0.8rem;
    color: var(--text-primary); background: color-mix(in srgb, var(--bg-tertiary) 80%, transparent); border: 1px solid var(--border-light);
}
.tour-twitch { border-color: #9146ff; background: rgba(145,70,255,0.22); color: #fff; }
.tour-yt { border-color: #ff0000; background: rgba(255,0,0,0.18); color: #fff; }
.tour-kick { border-color: #53fc18; background: rgba(83,252,24,0.14); color: #d9ffcc; }
.tour-rs { border-color: #7dd3fc; background: rgba(125,211,252,0.14); color: #fff; }
.tour-hub {
    display: grid; justify-items: center; gap: 2px; padding: 10px 18px; border-radius: 14px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 45%, transparent), color-mix(in srgb, var(--accent-dark) 25%, transparent));
    border: 1px solid color-mix(in srgb, var(--accent-light) 75%, transparent); color: #fff;
}
.tour-hub b { font-size: 1rem; }
.tour-hub small { color: #e9d5ff; font-size: 0.74rem; font-weight: 600; }
.tour-wire { position: relative; width: 4px; height: 26px; border-radius: 2px; background: color-mix(in srgb, var(--text-primary) 18%, transparent); }
.tour-fan { width: min(70%, 420px); height: 26px; background: none; }
.tour-fan::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 3px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--text-primary) 45%, transparent) 0 8px, transparent 8px 16px); animation: tourDash 0.6s linear infinite; }
.tour-fan::after { content: ''; position: absolute; left: 50%; top: 0; width: 4px; height: 50%; background: color-mix(in srgb, var(--text-primary) 18%, transparent); transform: translateX(-50%); }
@keyframes tourDash { to { background-position: 20px 0; } }
.tour-packet { position: absolute; left: 50%; top: -6px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #fde68a; animation: tourDown 1.2s linear infinite; }
.tour-packet:nth-child(2) { animation-delay: 0.6s; }
.tour-fan .tour-packet { top: 50%; margin-top: -5px; animation: tourFan 1.4s ease-in-out infinite; }
.tour-fan .tour-packet:nth-child(2) { animation-name: tourFanL; animation-delay: 0.45s; }
.tour-fan .tour-packet:nth-child(3) { animation-name: tourFanR; animation-delay: 0.9s; }
@keyframes tourDown { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(26px); opacity: 0; } }
@keyframes tourFan { 0% { transform: translate(0, -14px) scale(0.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(0, 12px) scale(1); opacity: 0; } }
@keyframes tourFanL { 0% { transform: translate(0, -14px) scale(0.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(-160px, 12px) scale(1); opacity: 0; } }
@keyframes tourFanR { 0% { transform: translate(0, -14px) scale(0.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(160px, 12px) scale(1); opacity: 0; } }
.tour-features { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 14px 0 0; }
.tour-feat {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; color: var(--text-primary);
    background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.45);
    animation: tourPop 0.5s cubic-bezier(.2,1.5,.3,1) both; animation-delay: calc(0.2s + var(--i, 0) * 70ms);
}
.tour-feat i { color: #86efac; }
@keyframes tourPop { from { opacity: 0; transform: translateY(8px) scale(0.85); } to { opacity: 1; transform: none; } }
.tour-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
@media (max-width: 720px) { .tour { padding: 16px 12px 14px; } .tour-fan { width: 90%; } .tour-node { font-size: 0.74rem; padding: 4px 9px; } }
@media (prefers-reduced-motion: reduce) { .tour-fan::before, .tour-packet, .tour-feat { animation: none; } .tour-feat { opacity: 1; transform: none; } }