/* ═══════════════════════════════════════════════════════
   Ruzuna — Glass Layer
   Loaded AFTER shared.css + style.css. Pure additive overrides:
   ambient animated gradient background + frosted-glass surfaces
   + smoother motion. Nothing here removes existing structure.
   ═══════════════════════════════════════════════════════ */

:root {
  --glass:        rgba(24,22,34,.52);
  --glass-strong: rgba(26,24,38,.74);
  --glass-soft:   rgba(255,255,255,.035);
  --glass-border: rgba(255,255,255,.10);
  --glass-blur:   18px;
}

/* ── Ambient animated background ──────────────────────── */
.ambient-bg {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
}
.ambient-bg span {
  position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform;
  mix-blend-mode: screen;
}
.ambient-bg span:nth-child(1) {
  width: 56vmax; height: 56vmax; top: -18vmax; left: -14vmax;
  background: radial-gradient(circle, rgba(124,58,237,.55) 0%, transparent 70%);
  animation: driftA 28s ease-in-out infinite;
}
.ambient-bg span:nth-child(2) {
  width: 46vmax; height: 46vmax; bottom: -14vmax; right: -10vmax;
  background: radial-gradient(circle, rgba(6,182,212,.4) 0%, transparent 70%);
  animation: driftB 34s ease-in-out infinite;
}
.ambient-bg span:nth-child(3) {
  width: 40vmax; height: 40vmax; top: 28%; right: 8%;
  background: radial-gradient(circle, rgba(236,72,153,.35) 0%, transparent 70%);
  animation: driftC 40s ease-in-out infinite;
}
.ambient-bg span:nth-child(4) {
  width: 34vmax; height: 34vmax; bottom: 10%; left: 6%;
  background: radial-gradient(circle, rgba(245,158,11,.22) 0%, transparent 70%);
  animation: driftD 36s ease-in-out infinite;
}
@keyframes driftA { 0%,100% { transform: translate(0,0) scale(1); }       50% { transform: translate(9vmax,7vmax) scale(1.15); } }
@keyframes driftB { 0%,100% { transform: translate(0,0) scale(1); }       50% { transform: translate(-8vmax,-9vmax) scale(1.1); } }
@keyframes driftC { 0%,100% { transform: translate(0,0) scale(1); }       50% { transform: translate(-7vmax,8vmax) scale(.92); } }
@keyframes driftD { 0%,100% { transform: translate(0,0) scale(1); }       50% { transform: translate(6vmax,-6vmax) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .ambient-bg span { animation: none !important; } }
@media (max-width: 640px) { .ambient-bg span { filter: blur(46px); opacity: .8; } }

body { background: var(--bg); }
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(124,58,237,.10), transparent 60%);
}

/* ── Frosted surfaces ─────────────────────────────────── */
.rz-card, .rz-card-interactive {
  background: var(--glass) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  border: 1px solid var(--glass-border) !important;
  transition: transform .38s var(--ease-out-expo), box-shadow .38s var(--ease-out-expo), background .25s, border-color .25s;
}
.rz-card:hover { border-color: var(--border-accent) !important; box-shadow: 0 18px 46px rgba(0,0,0,.4); background: var(--glass-strong) !important; }
.rz-card-interactive:hover { transform: translateY(-3px); background: var(--glass-strong) !important; }

.modal-box {
  background: var(--glass-strong) !important;
  backdrop-filter: blur(32px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.4) !important;
  border: 1px solid var(--glass-border) !important;
  animation: glassPop .34s var(--ease-out-expo);
}
.modal-overlay { backdrop-filter: blur(12px) saturate(1.15) !important; -webkit-backdrop-filter: blur(12px) saturate(1.15) !important; }
@keyframes glassPop { from { opacity: 0; transform: scale(.94) translateY(10px); filter: blur(8px); } to { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); } }

.top-nav {
  background: rgba(6,6,10,.55) !important;
  backdrop-filter: blur(30px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.4) !important;
}
.side-nav {
  background: rgba(6,6,10,.4) !important;
  backdrop-filter: blur(24px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.3) !important;
}
.mob-nav {
  background: rgba(8,8,14,.62) !important;
  backdrop-filter: blur(26px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.4) !important;
}

.rz-input {
  background: var(--glass-soft) !important;
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border) !important;
}
.rz-input:focus { background: rgba(255,255,255,.05) !important; }

.rz-chip, .status-chip { backdrop-filter: blur(6px); }

.tab-btn.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark)) !important;
  box-shadow: 0 4px 20px var(--accent-glow);
  border-color: transparent !important;
}

/* ── Media cards: lift + glow on hover ───────────────── */
.media-card:hover {
  transform: translateY(-6px) scale(1.015) !important;
  box-shadow: 0 22px 54px rgba(0,0,0,.5), 0 0 0 1px var(--border-accent) !important;
}

/* ── Primary buttons: gradient + glow ────────────────── */
.rz-btn-primary {
  background: linear-gradient(135deg, var(--accent), #9333ea) !important;
  box-shadow: 0 4px 22px var(--accent-glow);
}
.rz-btn-primary:hover {
  box-shadow: 0 8px 30px var(--accent-glow), 0 0 0 1px rgba(255,255,255,.12);
  transform: translateY(-2px);
}
.rz-btn-secondary {
  background: var(--glass-soft) !important;
  backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border) !important;
}

/* ── Skeleton shimmer (apply class="skeleton" to any loading placeholder) ── */
.skeleton {
  position: relative; overflow: hidden; background: var(--bg-3); border-radius: var(--r);
  color: transparent !important;
}
.skeleton::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.07) 50%, transparent 70%);
  transform: translateX(-100%); animation: shimmer 1.7s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

/* ── Smoother section/page transitions ───────────────── */
.tab-sec.on, .ctab-sec.on { animation: cin-reveal .55s var(--ease-out-expo) both; }

/* ── Scrollbar polish ─────────────────────────────────── */
* { scrollbar-color: rgba(255,255,255,.18) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28); }

/* ── Auth modal: bring up to glass standard ──────────── */
.auth-modal-overlay {
  backdrop-filter: blur(20px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.2) !important;
}
.auth-modal {
  background: var(--glass-strong) !important;
  backdrop-filter: blur(32px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.4) !important;
  border: 1px solid var(--glass-border) !important;
  animation: glassPop .36s var(--ease-out-expo) !important;
  position: relative;
  overflow: hidden;
}
.auth-modal::before {
  content: ''; position: absolute; top: -60%; left: 50%; transform: translateX(-50%);
  width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(124,58,237,.35) 0%, transparent 70%);
  filter: blur(40px); pointer-events: none; z-index: 0;
}
.auth-modal > * { position: relative; z-index: 1; }
.auth-modal h2 {
  background: linear-gradient(135deg, var(--text), var(--accent-light));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.auth-tabs { background: var(--glass-soft) !important; backdrop-filter: blur(8px); }
.auth-tab.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark)) !important;
  color: #fff !important; border: none !important;
  box-shadow: 0 4px 16px var(--accent-glow);
}
.toast {
  backdrop-filter: blur(20px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.3) !important;
}

/* ── Post cards: glass + hero media banner ───────────── */
.post-card {
  background: var(--glass) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  border: 1px solid var(--glass-border) !important;
}
.post-card:hover {
  border-color: var(--border-accent) !important;
  box-shadow: 0 16px 44px rgba(0,0,0,.4);
  background: var(--glass-strong) !important;
}

.post-media-hero {
  position: relative; width: 100%; height: 168px; border-radius: var(--r-lg);
  overflow: hidden; margin-bottom: .75rem; cursor: pointer; background: var(--bg-4);
  transition: transform .4s var(--ease-out-expo);
}
.post-media-hero:hover { transform: scale(1.012); }
.post-media-hero img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease-out-expo), filter .5s;
  filter: saturate(1.05);
}
.post-media-hero:hover img { transform: scale(1.06); filter: saturate(1.2) brightness(1.05); }
.post-media-hero-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: .85rem 1rem; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.25) 60%, rgba(0,0,0,.82) 100%);
}
.post-media-hero-type { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--accent-light); margin-bottom: 2px; }
.post-media-hero-title { font-size: 1.05rem; font-weight: 800; color: #fff; line-height: 1.25; text-shadow: 0 2px 12px rgba(0,0,0,.5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-media-hero-sub { font-size: .74rem; color: rgba(255,255,255,.72); margin-top: 1px; }
.post-media-hero-play {
  position: absolute; top: .7rem; right: .7rem; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(0,0,0,.45); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center;
  color: #fff; transition: .2s;
}
.post-media-hero:hover .post-media-hero-play { background: var(--accent); transform: scale(1.1); }

/* ── Empty states: give the icon real presence instead of washed-out text ── */
.empty-state .empty-icon {
  font-size: 2.6rem !important; opacity: 1 !important;
  width: 84px; height: 84px; border-radius: 50%;
  display: flex !important; align-items: center; justify-content: center; margin: 0 auto .9rem;
  background: radial-gradient(circle, var(--accent-dim) 0%, transparent 75%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 0 40px var(--accent-glow), inset 0 0 20px rgba(255,255,255,.04);
}
.empty-state h3 { font-size: .95rem !important; color: var(--text) !important; }
.empty-state p { font-size: .82rem !important; max-width: 280px; margin: 0 auto; line-height: 1.6; }

/* ── Post action icons: heart pop on like ────────────── */
.post-action-btn svg { display: block; }
.post-action-btn.liked svg { animation: heartPop .42s var(--ease-out-expo); }
@keyframes heartPop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.4); }
  60%  { transform: scale(.9); }
  100% { transform: scale(1); }
}
.post-action-btn { gap: .35rem !important; }