/* ══════════════════════════════════════════════════════════
   VIBRA-BREATHE · Wave 1 + Wave 2 + Wave 3 "Vive"
   UI Transformation Layer — zero changes to base CSS
   ══════════════════════════════════════════════════════════ */

/* ┌──────────────────────────────────────────────────┐
   │  DESIGN TOKENS                                   │
   └──────────────────────────────────────────────────┘ */
:root {
  --vb-glow:     rgba(138,87,255,0.043);
  --vb-glass:    rgba(255,255,255,0.06);
  --vb-glass2:   rgba(255,255,255,0.03);
  --vb-border:   rgba(255,255,255,0.06);
  --vb-blur:     blur(18px);
  --vb-blur-heavy: blur(32px);
  --vb-radius-card: 14px;
  --vb-radius-img:  12px;
  --vb-gap:      16px;
  --vb-lh:       1.72;
  --vb-violet:   rgba(138,87,255,0.15);
  --vb-violet-glow: rgba(176,136,255,0.35);
  --vb-transition: 0.3s cubic-bezier(0.2, 0, 0.1, 1);
  --vb-transition-slow: 0.5s cubic-bezier(0.2, 0, 0.1, 1);
}

/* ┌──────────────────────────────────────────────────┐
   │  WAVE 1 — RESPIRA                               │
   └──────────────────────────────────────────────────┘ */

/* ── 1. BODY GLOW — sutil gradient que da profundidad ──── */
html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, var(--vb-glow) 0%, transparent 70%),
    var(--bg) !important;
}

/* ── 2. POST CARDS — glass, float, breathe ─────────────── */
.post-card {
  background: var(--vb-glass) !important;
  backdrop-filter: var(--vb-blur);
  -webkit-backdrop-filter: var(--vb-blur);
  border: 1px solid var(--vb-border) !important;
  border-radius: var(--vb-radius-card) !important;
  margin-bottom: var(--vb-gap) !important;
  transition: transform var(--vb-transition), opacity var(--vb-transition);
}

/* ── 3. TEXT — el texto respira ─────────────────────────── */
.pc-text,
.post-body,
.feed-post p,
.pc-body {
  line-height: var(--vb-lh) !important;
}

/* ── 4. IMAGE RADIUS — bordes generosos ────────────────── */
.pc-img img,
.post-card img,
.post-img {
  border-radius: var(--vb-radius-img) !important;
}

/* ── 5. TOPNAV — glass authority ───────────────────────── */
.topnav {
  background: rgba(6,4,15,0.88) !important;
  backdrop-filter: var(--vb-blur-heavy) !important;
  -webkit-backdrop-filter: var(--vb-blur-heavy) !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}

/* ── 6. BOTTOM NAV — 4 tabs, clean ─────────────────────── */
.bottom-nav {
  overflow: hidden;
  justify-content: space-around;
  height: calc(56px + var(--safe-bot));
  background: rgba(6,4,15,0.97) !important;
  backdrop-filter: var(--vb-blur-heavy) !important;
  -webkit-backdrop-filter: var(--vb-blur-heavy) !important;
  border-top: 1px solid rgba(255,255,255,0.04) !important;
}

.bn-tab {
  flex: 1;
  min-width: 0;
}

/* Active tab — glow dot underneath */
.bn-tab.active {
  position: relative;
}
.bn-tab.active::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--violet2);
  box-shadow: 0 0 8px var(--vb-violet-glow);
}
.bn-tab.active .bn-label {
  opacity: 1;
  max-height: 1.2em;
}

/* Show only 4 core tabs: Feed, Radar, Cosmos, Mas */
.bottom-nav .bn-tab:nth-child(n+5) {
  display: none !important;
}

/* ── 7. LABELS — hidden by default, visible on active ──── */
.bn-label {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.25s, max-height 0.25s;
}
.bn-tab.active .bn-label {
  opacity: 1;
  max-height: 1.2em;
}

/* ── 8. TRUMAN BANNER — respira, no grita ─────────────── */
.truman-banner {
  margin: 0.5rem var(--feed-padding-x) 0.65rem;
  padding: 0.6rem 0.9rem;
  background: linear-gradient(135deg, rgba(138,87,255,0.06) 0%, rgba(0,212,255,0.03) 100%) !important;
  border: none !important;
  border-radius: var(--vb-radius-card) !important;
  backdrop-filter: var(--vb-blur) !important;
  -webkit-backdrop-filter: var(--vb-blur) !important;
}

/* ── 9. FAB — glass signal emitter ─────────────────────── */
.compose-btn,
.fab {
  background: var(--vb-violet) !important;
  backdrop-filter: var(--vb-blur) !important;
  -webkit-backdrop-filter: var(--vb-blur) !important;
  border: 1px solid rgba(176,136,255,0.18) !important;
  box-shadow:
    0 0 20px rgba(138,87,255,0.25),
    0 4px 15px rgba(0,0,0,0.3) !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}
.compose-btn:active,
.fab:active {
  transform: scale(0.92) !important;
}

/* ── 10. TOPNAV ELEMENTS — clean authority ─────────────── */
.tn-logo {
  font-weight: 800;
}

/* ── 11. NERHIA PULSE — data respira ───────────────────── */
.nerhia-pulse {
  margin: 0 var(--feed-padding-x) 0.5rem;
  border-radius: var(--vb-radius-card);
  background: var(--vb-glass) !important;
  border: 1px solid var(--vb-border) !important;
  backdrop-filter: var(--vb-blur) !important;
  -webkit-backdrop-filter: var(--vb-blur) !important;
}

/* ── 12. DEPT STRIP — filter pills respiran ────────────── */
.dept-strip {
  border-bottom-color: rgba(255,255,255,0.03) !important;
}

.dept-tab {
  border-radius: 99px !important;
  transition: background var(--vb-transition), color var(--vb-transition) !important;
}

/* ── RESPONSIVE ────────────────────────────────────── */
@media (max-width: 480px) {
  .bottom-nav {
    overflow: hidden;
  }
}


/* ┌──────────────────────────────────────────────────┐
   │  WAVE 2 — LATE (El Pulso)                       │
   └──────────────────────────────────────────────────┘ */

/* ── 13. STORIES — glass orbs con dept glow ────────────── */
.stories-strip {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.03) !important;
  padding: 0.85rem 1rem !important;
  gap: 0.75rem !important;
}

.story-thumb {
  transition: transform var(--vb-transition) !important;
}
.story-thumb:active {
  transform: scale(0.93) !important;
}

/* Glass orb effect on rings */
.story-ring {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06) !important;
  transition: opacity var(--vb-transition), box-shadow var(--vb-transition) !important;
}
.story-ring:not(.seen) {
  opacity: 1 !important;
}

/* Department-specific glow on unseen stories */
.story-ring-nerhia:not(.seen) {
  box-shadow:
    0 0 12px rgba(0,212,255,0.3),
    0 0 0 1px rgba(0,212,255,0.15) !important;
}
.story-ring-mobility:not(.seen) {
  box-shadow:
    0 0 12px rgba(0,153,255,0.3),
    0 0 0 1px rgba(0,153,255,0.15) !important;
}
.story-ring-culture:not(.seen) {
  box-shadow:
    0 0 12px rgba(176,136,255,0.3),
    0 0 0 1px rgba(176,136,255,0.15) !important;
}
.story-ring-economy:not(.seen) {
  box-shadow:
    0 0 12px rgba(255,196,0,0.3),
    0 0 0 1px rgba(255,196,0,0.15) !important;
}
.story-ring-energy:not(.seen) {
  box-shadow:
    0 0 12px rgba(0,255,136,0.3),
    0 0 0 1px rgba(0,255,136,0.15) !important;
}
.story-ring-vitality:not(.seen) {
  box-shadow:
    0 0 12px rgba(255,68,170,0.3),
    0 0 0 1px rgba(255,68,170,0.15) !important;
}

/* Glass avatar background */
.story-av {
  background: rgba(16,13,26,0.85) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* Story labels — cleaner */
.story-label {
  font-size: 0.5rem !important;
  color: rgba(190,178,230,0.55) !important;
  letter-spacing: 0.08em !important;
}

/* ── 14. MISSION WIDGET — subtle toast, not banner ─────── */
.mission-widget {
  background: rgba(138,87,255,0.04) !important;
  border: 1px solid rgba(138,87,255,0.08) !important;
  border-radius: 10px !important;
  padding: 0.5rem 0.75rem !important;
  margin: 0 var(--feed-padding-x, 1.15rem) 0.4rem !important;
  opacity: 0.7;
  transition: opacity var(--vb-transition) !important;
}
.mission-widget:hover {
  opacity: 1;
}

.mw-type {
  font-size: 0.55rem !important;
  letter-spacing: 0.12em !important;
  opacity: 0.6;
}
.mw-text {
  font-size: 0.68rem !important;
  opacity: 0.8;
}
.mw-bar-wrap {
  height: 2px !important;
  background: rgba(255,255,255,0.06) !important;
  border-radius: 2px !important;
  overflow: hidden;
}
.mw-bar {
  height: 100% !important;
  background: linear-gradient(90deg, var(--violet2), rgba(0,212,255,0.8)) !important;
  border-radius: 2px !important;
  transition: width 0.6s ease-out !important;
}
.mw-progress {
  font-size: 0.5rem !important;
  opacity: 0.45;
}

/* ── 15. UVX HEARTBEAT — the city pulses ───────────────── */
@keyframes vb-heartbeat {
  0%, 100% { transform: scale(1); opacity: 1; }
  15%      { transform: scale(1.06); opacity: 1; }
  30%      { transform: scale(1); opacity: 1; }
  45%      { transform: scale(1.04); opacity: 1; }
  60%      { transform: scale(1); opacity: 0.85; }
}

.tn-uvx,
[class*="uvx-badge"],
[class*="uvx-pill"] {
  animation: vb-heartbeat 3s ease-in-out infinite !important;
  transform-origin: center center;
}

/* ── 16. PANEL TRANSITIONS — fade/slide, never snap ────── */
.panel-section,
[id$="-panel"]:not(.bottom-nav):not(.vr-feed-panel):not(.vf-panel-header):not(.vf-panel-title):not(.vf-panel-close):not(.vf-panel-body),
[id$="Panel"]:not(.bottom-nav) {
  transition:
    opacity var(--vb-transition-slow),
    transform var(--vb-transition-slow) !important;
}

/* ── 17. FEED CONTENT — stagger fade-in ────────────────── */
@keyframes vb-fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }

@keyframes vb-screen-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

}

.post-card {
  animation: vb-fade-up 0.4s ease-out both;
}
.post-card:nth-child(1) { animation-delay: 0.05s; }
.post-card:nth-child(2) { animation-delay: 0.12s; }
.post-card:nth-child(3) { animation-delay: 0.19s; }
.post-card:nth-child(4) { animation-delay: 0.26s; }
.post-card:nth-child(5) { animation-delay: 0.33s; }

/* ── 18. SCREEN TRANSITIONS — main screens fade ───────── */
.screen {
  transition: opacity var(--vb-transition-slow) !important;
}
.screen.active {
  animation: vb-screen-in 0.35s ease-out both !important;
}

/* ── 19. DEPT TABS — smooth filter switch ──────────────── */
.dept-tab {
  transition: background var(--vb-transition),
              color var(--vb-transition),
              border-color var(--vb-transition) !important;
}
.dept-tab.active {
  box-shadow: 0 0 8px rgba(138,87,255,0.15) !important;
}

/* ── 20. NERHIA SPARKLINES — subtle glow on hover ──────── */
.nerhia-pulse {
  transition: box-shadow var(--vb-transition) !important;
}
.nerhia-pulse:hover,
.nerhia-pulse:active {
  box-shadow: 0 0 16px rgba(138,87,255,0.12) !important;
}

/* ── 21. GLOBAL POLISH ─────────────────────────────────── */

/* Scroll momentum */
.stories-strip,
.dept-strip {
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

/* Smoother image loading */
.pc-img img,
.post-card img {
  transition: opacity 0.3s ease-in !important;
}

/* Link/button tap feedback */
button, a, [role="button"] {
  transition: opacity 0.15s, transform 0.15s !important;
}
button:active, a:active, [role="button"]:active {
  opacity: 0.85 !important;
}

/* Text selection color */
::selection {
  background: rgba(138,87,255,0.3);
  color: #fff;
}

/* Scrollbar — thin and subtle */
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(138,87,255,0.15);
  border-radius: 4px;
}


/* ┌──────────────────────────────────────────────────┐
   │  WAVE 3 — VIVE                                  │
   │  La ciudad reacciona. El fondo respira.          │
   │  Las partículas flotan. La nav obedece.          │
   └──────────────────────────────────────────────────┘ */

/* ── 22. AMBIENT PARTICLES ─────────────────────────────── */
.vb-particles {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.vb-particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(138,87,255,0.6) 0%, rgba(138,87,255,0) 70%);
  animation: vbFloat 12s ease-in-out infinite alternate;
  will-change: transform, opacity;
  filter: blur(1px);
}

.vb-particle:nth-child(odd) {
  background: radial-gradient(circle, rgba(0,212,255,0.5) 0%, rgba(0,212,255,0) 70%);
}

.vb-particle:nth-child(3n) {
  background: radial-gradient(circle, rgba(255,113,206,0.45) 0%, rgba(255,113,206,0) 70%);
}

@keyframes vbFloat {
  0%   { transform: translateY(0) translateX(0) scale(1); }
  25%  { transform: translateY(-30px) translateX(15px) scale(1.2); }
  50%  { transform: translateY(-10px) translateX(-20px) scale(0.8); }
  75%  { transform: translateY(-40px) translateX(10px) scale(1.1); }
  100% { transform: translateY(-20px) translateX(-10px) scale(1); }
}

/* ── 23. UVX-REACTIVE BACKGROUND ───────────────────────── */
body[data-uvx-level="high"]::before {
  background: radial-gradient(
    ellipse 80% 60% at 50% 25%,
    rgba(138,87,255,0.06) 0%,
    rgba(176,136,255,0.025) 40%,
    transparent 70%
  ) !important;
}

body[data-uvx-level="mid"]::before {
  background: radial-gradient(
    ellipse 80% 60% at 50% 25%,
    rgba(0,212,255,0.045) 0%,
    rgba(0,180,220,0.02) 40%,
    transparent 70%
  ) !important;
}

body[data-uvx-level="low"]::before {
  background: radial-gradient(
    ellipse 80% 60% at 50% 25%,
    rgba(255,71,87,0.04) 0%,
    rgba(255,100,100,0.015) 40%,
    transparent 70%
  ) !important;
}

body::before {
  transition: background 2s ease-in-out !important;
}

/* ── 24. SCROLL-RESPONSIVE NAV ─────────────────────────── */
.topnav,
.bottom-nav {
  transition:
    transform 0.4s cubic-bezier(0.2, 0, 0.1, 1),
    opacity 0.4s cubic-bezier(0.2, 0, 0.1, 1) !important;
}

/* Nav always visible — never hide primary navigation */
/* Compose button repositions when immersive-scrolling */
body[data-scroll-dir="down"] .compose-btn {
  bottom: 1.2rem !important;
  transition: bottom 0.4s cubic-bezier(0.2, 0, 0.1, 1) !important;
}

/* ── 25. FEED CROSSFADE ON DEPT SWITCH ─────────────────── */
.vb-crossfade-out {
  opacity: 0 !important;
  transform: translateY(8px) !important;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out !important;
}

.vb-crossfade-in {
  animation: vbCrossFadeUp 0.35s ease-out forwards !important;
}

@keyframes vbCrossFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 26. IMMERSIVE SCROLL — banners collapse ───────────── */
.truman-banner,
.nerhia-pulse,
.stories-strip,
.mission-widget,
.session-mission,
[class*="achiever"],
[class*="xplosion"] {
  transition:
    max-height 0.4s ease,
    padding 0.4s ease,
    opacity 0.3s ease,
    margin 0.4s ease !important;
}

body[data-scroll-dir="down"] .truman-banner,
body[data-scroll-dir="down"] .nerhia-pulse,
body[data-scroll-dir="down"] .stories-strip,
body[data-scroll-dir="down"] .mission-widget,
body[data-scroll-dir="down"] .session-mission,
body[data-scroll-dir="down"] [class*="achiever"],
body[data-scroll-dir="down"] [class*="xplosion"] {
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ── 27. DEPT STRIP STICKY GLASS ───────────────────────── */
.dept-strip {
  background: rgba(6,4,15,0.92) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  position: sticky !important;
  top: 52px !important;
  z-index: 90 !important;
  transition: top 0.4s ease !important;
}

body[data-scroll-dir="down"] .dept-strip {
  top: 0 !important;
}

/* ── 28. POST INTERACTION DEPTH ────────────────────────── */
.post-card:active,
.pc:active {
  transform: scale(0.985) !important;
  transition: transform 0.15s ease !important;
}

.post-card:focus-within,
.pc:focus-within {
  box-shadow:
    0 0 0 1px rgba(138,87,255,0.2),
    0 0 20px rgba(138,87,255,0.08) !important;
}

/* ── 29. LIVE INDICATORS — enhanced pulse ──────────────── */
.live-dot {
  box-shadow: 0 0 6px 2px rgba(0,255,136,0.4) !important;
  animation: vbLivePulse 2s ease-in-out infinite !important;
}

@keyframes vbLivePulse {
  0%, 100% { box-shadow: 0 0 4px 1px rgba(0,255,136,0.3); }
  50%      { box-shadow: 0 0 10px 4px rgba(0,255,136,0.5); }
}

/* ── 30. LOADING SHIMMER ───────────────────────────────── */
.post-card:empty::after,
.pc:empty::after {
  content: '';
  display: block;
  height: 120px;
  border-radius: var(--vb-radius-card);
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.02) 0%,
    rgba(255,255,255,0.06) 50%,
    rgba(255,255,255,0.02) 100%
  );
  background-size: 200% 100%;
  animation: vbShimmer 1.5s ease-in-out infinite;
}

@keyframes vbShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── 31. COMPOSE OVERLAY GLASS ─────────────────────────── */
.compose-overlay {
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  background: rgba(6,4,15,0.92) !important;
}

.co-textarea {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 12px !important;
  line-height: 1.7 !important;
}

/* ── 32. PROFILE PANEL GLASS ───────────────────────────── */
.profile-panel {
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  background: rgba(6,4,15,0.95) !important;
}

/* ── 33. TOAST ENHANCEMENT ─────────────────────────────── */
.toast {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(138,87,255,0.15) !important;
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE GUARDS
   ══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .bottom-nav {
    overflow: hidden;
  }
  .stories-strip {
    gap: 0.6rem !important;
  }
  .vb-particle {
    opacity: 0.06 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .vb-particles {
    display: none !important;
  }
  body[data-scroll-dir="down"] .topnav,
  body[data-scroll-dir="down"] .bottom-nav {
    transform: none !important;
    opacity: 1 !important;
  }
}