/*
Theme Name: Arcana
Theme URI: https://arcanapp.net/
Author: Dani
Description: Tema Arcana (landing + blog) basado en el HTML original con Tailwind CDN.
Version: 1.0.0
License: GPLv2 or later
Text Domain: arcana
*/

:root {
  --arcana-purple: #a78bfa;
  --arcana-dark: #060608;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--arcana-dark);
  color: #f8f9fa;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.serif { font-family: 'Playfair Display', serif; letter-spacing: 0.05em; }
.handwritten { font-family: 'Dancing Script', cursive; color: var(--arcana-purple); }

/* Fondo Zen con Nebulosas */
.mystic-bg {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
  background:
    radial-gradient(circle at 50% 10%, #1e1045 0%, transparent 60%),
    radial-gradient(circle at 85% 40%, #131135 0%, transparent 50%),
    radial-gradient(circle at 15% 70%, #131135 0%, transparent 50%);
}

.star {
  position: absolute; background: white; border-radius: 50%; opacity: 0.15;
  animation: twinkle var(--duration) infinite ease-in-out;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.1); }
}

/* Glassmorphism */
.glass-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.glass-card:hover {
  border-color: rgba(167, 139, 250, 0.3);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-5px);
}

.btn-mystic {
  background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
  box-shadow: 0 10px 30px -5px rgba(124, 58, 237, 0.4);
  color: white; font-weight: 700;
}

.reveal {
  opacity: 0; transform: translateY(30px);
  transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal.active { opacity: 1; transform: translateY(0); }

/* Notificación flotante */
#live-notification {
  position: fixed; bottom: 30px; left: 30px; z-index: 100;
  transform: translateX(-120%); opacity: 0;
  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#live-notification.show { transform: translateX(0); opacity: 1; }

/* Polaroid Gallery */
.polaroid {
  background: white; padding: 12px 12px 48px 12px;
  box-shadow: 0 15px 45px rgba(0,0,0,0.6);
  transition: all 0.4s ease;
}
.polaroid:hover { transform: rotate(0deg) scale(1.05) translateY(-10px); z-index: 20; }

/* Ritual overlay */
#ritual-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.96);
  z-index: 1000; display: none; align-items: center; justify-content: center;
  backdrop-filter: blur(25px);
}

.mood-active {
  border-color: var(--arcana-purple) !important;
  box-shadow: 0 0 25px var(--arcana-purple);
  background: rgba(167, 139, 250, 0.15) !important;
}

@keyframes pulse-energy {
  0% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.6); opacity: 0.1; }
  100% { transform: scale(1); opacity: 0.4; }
}
.energy-circle {
  position: absolute; border: 1px solid var(--arcana-purple);
  border-radius: 50%; animation: pulse-energy 4s infinite;
}

/* Tipografía de posts (contenido del editor) */
.entry-content {
  color: #d4d4d8;
  font-weight: 300;
  line-height: 1.9;
}
.entry-content h2, .entry-content h3, .entry-content h4 {
  color: #fff;
  font-family: 'Playfair Display', serif;
  letter-spacing: 0.02em;
  margin: 2.2rem 0 0.9rem;
}
.entry-content p { margin: 1rem 0; }
.entry-content a { color: #c4b5fd; text-decoration: underline; text-underline-offset: 3px; }
.entry-content ul, .entry-content ol { padding-left: 1.25rem; margin: 1rem 0; }
.entry-content blockquote {
  border-left: 2px solid rgba(167,139,250,0.4);
  padding-left: 1rem;
  color: #e4e4e7;
  font-style: italic;
  margin: 1.5rem 0;
}