/* Visual effects (assets/fx.js) + post edit / block styling */

/* ---------- Aurora background (dark theme only) ---------- */
#xn-aurora { position: fixed; inset: -20% -20% auto -20%; height: 70vh; z-index: -2; pointer-events: none; filter: blur(70px); opacity: .5; overflow: hidden; }
body.light-theme #xn-aurora { opacity: .3; }
#xn-aurora span { position: absolute; display: block; width: 46vw; height: 46vw; border-radius: 50%; mix-blend-mode: screen; animation: xn-aurora 18s ease-in-out infinite; }
#xn-aurora span:nth-child(1) { left: 2%; top: -10%; background: var(--xn-accent, #8b7bff); }
#xn-aurora span:nth-child(2) { left: 40%; top: -20%; background: #ec4899; animation-delay: -6s; animation-duration: 22s; }
#xn-aurora span:nth-child(3) { left: 70%; top: -14%; background: #38bdf8; animation-delay: -12s; animation-duration: 26s; }
@keyframes xn-aurora {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(6vw, 4vh) scale(1.15); }
    66% { transform: translate(-5vw, 2vh) scale(.9); }
}

/* ---------- Click spark ---------- */
.xn-spark {
    position: fixed; width: 6px; height: 6px; border-radius: 50%; z-index: 2147483000;
    pointer-events: none; transform: translate(-50%, -50%);
    animation: xn-spark .5s ease-out forwards;
}
@keyframes xn-spark {
    0% { opacity: 1; transform: translate(-50%, -50%) translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(.3); }
}

/* ---------- Shiny wordmark ---------- */
.xn-shiny { position: relative; background-clip: text; -webkit-background-clip: text; }
.xn-shiny::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
    background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: xn-sheen 5.5s ease-in-out infinite;
}
@keyframes xn-sheen { 0% { background-position: 160% 0; } 55%, 100% { background-position: -60% 0; } }

/* ---------- Card tilt + glow ---------- */
.post-item, .telegram-gift-card-box, .public-card { transition: transform .18s ease, box-shadow .18s ease; transform-style: preserve-3d; }
.xn-tilt { transform: perspective(900px) rotateX(var(--tiltX, 0)) rotateY(var(--tiltY, 0)); }
.post-item.xn-tilt::before, .public-card.xn-tilt::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.08), transparent 60%);
}
.post-item, .public-card { position: relative; }

/* ---------- Accent picker (Settings) ---------- */
.xn-accent-wrap { margin: 0 0 16px; }
.xn-accent-title { font-size: 13px; font-weight: 700; color: var(--text-muted); margin-bottom: 8px; }
.xn-accent-row { display: flex; gap: 10px; flex-wrap: wrap; }
.xn-accent-sw { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform .12s ease; }
.xn-accent-sw:hover { transform: scale(1.12); }
.xn-accent-sw.is-on { border-color: var(--text-main); box-shadow: 0 0 0 2px var(--bg-color), 0 0 0 4px currentColor; }

/* ---------- Edit post ---------- */
.post-edit-btn { background: none; border: none; cursor: pointer; color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; padding: 4px; border-radius: 8px; transition: color .15s, background-color .15s; }
.post-edit-btn:hover { color: var(--xn-accent, #8b7bff); background: var(--xn-accent-soft, rgba(139,123,255,.14)); }
.xn-edit-box { margin: 6px 0 10px; display: flex; flex-direction: column; gap: 8px; }
.xn-edit-ta { width: 100%; font-size: 15px !important; resize: vertical; }
.xn-edit-row { display: flex; gap: 8px; justify-content: flex-end; }
.xn-edit-row button { border: 0; border-radius: 999px; padding: 8px 16px; font: inherit; font-weight: 700; cursor: pointer; }
.xn-edit-cancel { background: var(--input-bg); color: var(--text-muted); }
.xn-edit-save { background: var(--xn-accent, #8b7bff); color: #fff; }
.xn-edited { color: var(--text-muted); font-size: 12px; font-weight: 600; }

/* ---------- Block ---------- */
.xn-blocked-hidden { display: none !important; }
.xn-block-btn:hover { background: rgba(239,68,68,.14) !important; color: #ef4444 !important; }

@media (prefers-reduced-motion: reduce) {
    #xn-aurora, .xn-shiny::after { animation: none; }
    .post-item, .telegram-gift-card-box, .public-card { transition: none; }
}