/* Hookah Threads — Anime Sakura Theme */
/* Activated by body.theme-anime */

body.theme-anime {
    --bg: #0d0b14;
    --bg2: #110e1a;
    --surface: rgba(232,147,184,0.06);
    --surface-hover: rgba(232,147,184,0.12);
    --glass: rgba(232,147,184,0.04);
    --glass-border: rgba(232,147,184,0.15);
    --border: rgba(232,147,184,0.1);
    --border-hover: rgba(232,147,184,0.25);
    --accent: #e893b8;
    --accent-dim: rgba(232,147,184,0.15);
    --muted: rgba(255,220,230,0.4);
    --muted2: rgba(255,220,230,0.2);
}

/* ── Background ── */

body.theme-anime {
    background:
        linear-gradient(180deg, rgba(13,11,20,0.82) 0%, rgba(13,11,20,0.92) 100%),
        url('/static/anime-bg.jpg') center/cover no-repeat fixed;
}

/* ── Header ── */

body.theme-anime .header {
    background: rgba(13,11,20,0.85);
    backdrop-filter: blur(24px);
    border-bottom-color: rgba(232,147,184,0.12);
}

/* ── Cards ── */

body.theme-anime .thread-card {
    border-color: rgba(232,147,184,0.08);
}
body.theme-anime .thread-card:hover {
    border-color: rgba(232,147,184,0.2);
    box-shadow: 0 4px 24px rgba(232,147,184,0.06);
}

/* ── Sidebar ── */

body.theme-anime .cat-item.active {
    background: rgba(232,147,184,0.12);
    color: #f8d0e0;
}
body.theme-anime .cat-item:hover {
    background: rgba(232,147,184,0.08);
}

body.theme-anime .left-sidebar {
    border-right-color: rgba(232,147,184,0.08);
}

/* ── Login card ── */

body.theme-anime .login-card {
    border-color: rgba(232,147,184,0.15);
    box-shadow: 0 0 80px rgba(232,147,184,0.08), inset 0 1px 0 rgba(232,147,184,0.1);
}

/* ── Buttons ── */

body.theme-anime .btn-primary {
    background: rgba(232,147,184,0.2);
    border-color: rgba(232,147,184,0.3);
}
body.theme-anime .btn-primary:hover {
    background: rgba(232,147,184,0.3);
}

/* ── Modals ── */

body.theme-anime .modal {
    border-color: rgba(232,147,184,0.15);
    box-shadow: 0 24px 80px rgba(232,147,184,0.05), inset 0 1px 0 rgba(232,147,184,0.08);
}

/* ── Scrollbar ── */

body.theme-anime ::-webkit-scrollbar-thumb {
    background: rgba(232,147,184,0.15);
}
body.theme-anime ::-webkit-scrollbar-thumb:hover {
    background: rgba(232,147,184,0.25);
}

/* ── Selection ── */

body.theme-anime ::selection {
    background: rgba(232,147,184,0.25);
    color: #fff;
}

/* ── Links ── */

body.theme-anime a { color: rgba(232,147,184,0.7); }
body.theme-anime a:hover { color: #e893b8; }
body.theme-anime .thread-view-body a { color: rgba(232,147,184,0.7); }
body.theme-anime .thread-view-body a:hover { color: #e893b8; }

/* ── Online pill ── */

body.theme-anime .online-pill {
    border-color: rgba(232,147,184,0.12);
}

/* ── Notification badge ── */

body.theme-anime .notif-badge {
    background: #e893b8;
}

/* ── Search ── */

body.theme-anime .input,
body.theme-anime .textarea,
body.theme-anime .select {
    border-color: rgba(232,147,184,0.12);
}
body.theme-anime .input:focus,
body.theme-anime .textarea:focus {
    border-color: rgba(232,147,184,0.3);
    box-shadow: 0 0 0 3px rgba(232,147,184,0.08);
}

/* ── Logo pulse ── */

body.theme-anime .logo-icon {
    animation: logo-pulse-anime 2.5s ease-in-out infinite;
}
@keyframes logo-pulse-anime {
    0%, 100% { opacity: 0.7; filter: drop-shadow(0 0 3px rgba(232,147,184,0.2)); }
    50% { opacity: 1; filter: drop-shadow(0 0 10px rgba(232,147,184,0.4)); }
}

/* ═══════════════ FALLING SAKURA PETALS ═══════════════ */

.sakura-container {
    display: none;
}

body.theme-anime .sakura-container {
    display: block;
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 50;
    overflow: hidden;
}

.sakura-petal {
    position: absolute;
    top: -20px;
    border-radius: 50% 0 50% 50%;
    opacity: 0;
    pointer-events: none;
    animation: petal-fall linear infinite;
}

@keyframes petal-fall {
    0% { opacity: 0; transform: translateY(-20px) rotate(0deg) translateX(0); }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; transform: translateY(100vh) rotate(720deg) translateX(80px); }
}

.sakura-petal:nth-child(1)  { left: 5%;  width: 10px; height: 10px; background: rgba(255,183,197,0.4); animation-duration: 12s; animation-delay: 0s; }
.sakura-petal:nth-child(2)  { left: 15%; width: 8px;  height: 8px;  background: rgba(255,200,210,0.35); animation-duration: 15s; animation-delay: 2s; }
.sakura-petal:nth-child(3)  { left: 25%; width: 12px; height: 12px; background: rgba(255,183,197,0.3); animation-duration: 11s; animation-delay: 4s; }
.sakura-petal:nth-child(4)  { left: 35%; width: 7px;  height: 7px;  background: rgba(255,210,220,0.4); animation-duration: 14s; animation-delay: 1s; }
.sakura-petal:nth-child(5)  { left: 45%; width: 9px;  height: 9px;  background: rgba(255,183,197,0.35); animation-duration: 13s; animation-delay: 5s; }
.sakura-petal:nth-child(6)  { left: 55%; width: 11px; height: 11px; background: rgba(255,200,210,0.3); animation-duration: 16s; animation-delay: 3s; }
.sakura-petal:nth-child(7)  { left: 65%; width: 8px;  height: 8px;  background: rgba(255,183,197,0.4); animation-duration: 12s; animation-delay: 6s; }
.sakura-petal:nth-child(8)  { left: 75%; width: 10px; height: 10px; background: rgba(255,210,220,0.35); animation-duration: 14s; animation-delay: 0.5s; }
.sakura-petal:nth-child(9)  { left: 85%; width: 6px;  height: 6px;  background: rgba(255,183,197,0.3); animation-duration: 11s; animation-delay: 7s; }
.sakura-petal:nth-child(10) { left: 95%; width: 9px;  height: 9px;  background: rgba(255,200,210,0.4); animation-duration: 15s; animation-delay: 2.5s; }
.sakura-petal:nth-child(11) { left: 10%; width: 7px;  height: 7px;  background: rgba(255,183,197,0.25); animation-duration: 17s; animation-delay: 8s; }
.sakura-petal:nth-child(12) { left: 40%; width: 11px; height: 11px; background: rgba(255,210,220,0.3); animation-duration: 13s; animation-delay: 4.5s; }
.sakura-petal:nth-child(13) { left: 70%; width: 8px;  height: 8px;  background: rgba(255,183,197,0.35); animation-duration: 16s; animation-delay: 1.5s; }
.sakura-petal:nth-child(14) { left: 30%; width: 6px;  height: 6px;  background: rgba(255,200,210,0.3); animation-duration: 18s; animation-delay: 9s; }
.sakura-petal:nth-child(15) { left: 60%; width: 10px; height: 10px; background: rgba(255,183,197,0.25); animation-duration: 14s; animation-delay: 3.5s; }