/* ============================================================
   Ekklesia UI — shell de design compartilhado (Fase 1 / Tier 0)
   Reskin baseado no mockup React em mockup/mockup válido/.
   Usa Tailwind via CDN (ver config em app_shell/header.php) +
   este arquivo apenas para o que o Tailwind utilitário não cobre:
   fontes, grão de textura, animações e o editor de post.
   ============================================================ */

html { scroll-behavior: smooth; }

body.ekklesia-body {
  background: #0F0D16;
  font-family: 'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

.font-display { font-family: 'Fraunces', ui-serif, Georgia, serif; }

/* ---------- scrollbars ---------- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.snap-row { scroll-snap-type: x mandatory; scroll-padding-left: 1rem; }
.snap-row > * { scroll-snap-align: start; }

/* ---------- ambient blobs (desktop) ---------- */
@keyframes ekk-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-14px) scale(1.03); }
}
.animate-float { animation: ekk-float 7s ease-in-out infinite; }

@keyframes ekk-ping-slow {
  75%, 100% { transform: scale(1.9); opacity: 0; }
}
.animate-ping-slow { animation: ekk-ping-slow 2.4s cubic-bezier(0,0,0.2,1) infinite; }

/* ---------- conteúdo rico dos posts ---------- */
.post-content b, .post-content strong { font-weight: 800; color: inherit; }
.post-content i, .post-content em { font-style: italic; }
.post-content u { text-decoration: underline; text-underline-offset: 2px; }
.post-content s, .post-content strike, .post-content del { text-decoration: line-through; }
.post-content ul { list-style: disc; padding-left: 1.3rem; margin: .35rem 0; }
.post-content ol { list-style: decimal; padding-left: 1.3rem; margin: .35rem 0; }
.post-content li { margin: .15rem 0; }
.post-content p + p { margin-top: .35rem; }
.post-content blockquote {
  border-left: 3px solid #C4B5FD;
  padding: .1rem 0 .1rem .8rem;
  margin: .4rem 0;
  color: #57534E;
  font-style: italic;
}

/* ---------- editor de nova postagem (contentEditable) ---------- */
.editor:empty::before {
  content: attr(data-ph);
  color: #A8A29E;
  pointer-events: none;
}
.editor b, .editor strong { font-weight: 800; }
.editor i, .editor em { font-style: italic; }
.editor u { text-decoration: underline; }
.editor s, .editor strike { text-decoration: line-through; }
.editor ul { list-style: disc; padding-left: 1.3rem; }
.editor ol { list-style: decimal; padding-left: 1.3rem; }
.editor blockquote {
  border-left: 3px solid #C4B5FD;
  padding-left: .8rem;
  color: #57534E;
  font-style: italic;
}
.editor:focus { outline: none; }

/* ---------- equalizador (playlist) ---------- */
.eq-bar {
  width: 3px;
  border-radius: 999px;
  transform-origin: bottom;
  animation: ekk-eq 0.9s ease-in-out infinite;
}
@keyframes ekk-eq {
  0%, 100% { transform: scaleY(0.35); }
  50% { transform: scaleY(1); }
}

/* ---------- grão de textura (hero) ---------- */
.grain { position: relative; }
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/rect%3E%3C/svg%3E");
}

/* ---------- transições simples de tela / bottom sheet ---------- */
.ekk-sheet {
  transform: translateY(100%);
  transition: transform .32s cubic-bezier(0.22,1,0.36,1);
}
.ekk-sheet.is-open { transform: translateY(0); }

.ekk-fade {
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.ekk-fade.is-open {
  opacity: 1;
  pointer-events: auto;
}

.ekk-toast {
  transform: translateY(24px) scale(.94);
  opacity: 0;
  transition: transform .25s cubic-bezier(0.22,1,0.36,1), opacity .25s ease;
}
.ekk-toast.is-open {
  transform: translateY(0) scale(1);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .animate-float, .animate-ping-slow, .eq-bar { animation: none !important; }
  .ekk-sheet, .ekk-fade, .ekk-toast { transition: none !important; }
}