/* ═══════════════════════════════════════════════════════════════
   DIVERGENT — CINEMATIC LUXURY LAYER
   "We Call Us Free." — Bold, raw, community power.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=Crimson+Pro:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --purple: #7C3AED;
  --purple-soft: rgba(124, 58, 237, 0.08);
  --purple-glow: rgba(124, 58, 237, 0.12);
  --lavender: #EDE9FE;
  --font-display: 'Sora', 'Space Grotesk', -apple-system, sans-serif;
  --font-editorial: 'Crimson Pro', Georgia, serif;
  --shadow-cinema: 0 8px 48px rgba(0, 0, 0, 0.06), 0 2px 12px rgba(0, 0, 0, 0.03);
  --shadow-purple: 0 4px 24px rgba(124, 58, 237, 0.1);
  --transition-cinema: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── Body — warm editorial base ── */
body {
  font-family: var(--font-display) !important;
  letter-spacing: -0.01em;
}

/* ── Main heading — cinematic ── */
h1, .gradient-text {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}

/* ── Subheadings — editorial serif ── */
h2, h3 {
  font-family: var(--font-editorial) !important;
  font-style: italic;
  font-weight: 400 !important;
  letter-spacing: -0.01em;
}

/* ── "Come Be Who You Are" — editorial italic ── */
div[style*="letter-spacing: 0.06em"] {
  font-family: var(--font-editorial) !important;
  font-style: italic !important;
  font-size: 16px !important;
  letter-spacing: 0.02em !important;
  color: #64748B !important;
}

/* ── Glass cards — deeper, richer ── */
.glass-card {
  background: linear-gradient(145deg, rgba(255,255,255,0.75), rgba(255,255,255,0.55)) !important;
  border: 1px solid rgba(124, 58, 237, 0.08) !important;
  box-shadow: var(--shadow-cinema) !important;
  border-radius: 24px !important;
  transition: var(--transition-cinema) !important;
  position: relative;
  overflow: hidden;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.2), transparent);
  pointer-events: none;
}

.glass-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-cinema), var(--shadow-purple) !important;
  border-color: rgba(124, 58, 237, 0.15) !important;
}

.glass-card-glow {
  background: linear-gradient(145deg, rgba(255,255,255,0.8), rgba(237,233,254,0.4)) !important;
  border: 1px solid rgba(124, 58, 237, 0.12) !important;
  box-shadow: var(--shadow-cinema) !important;
  border-radius: 24px !important;
  transition: var(--transition-cinema) !important;
}

.glass-card-glow:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-cinema), 0 0 32px rgba(124, 58, 237, 0.08) !important;
}

/* ── Animate rise — smoother, more cinematic ── */
.animate-rise {
  animation: cinema-rise 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both !important;
}

@keyframes cinema-rise {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Shimmer text — refined ── */
.shimmer-text {
  background-size: 200% auto !important;
  animation: cinema-shimmer 4s linear infinite !important;
}

@keyframes cinema-shimmer {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ── Pillar labels — refined spacing ── */
span[style*="letter-spacing: 0.12em"][style*="text-transform: uppercase"] {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
}

/* ── Co-Host label ── */
span[style*="color: rgb(124, 58, 237)"][style*="font-weight: 700"] {
  font-family: var(--font-editorial) !important;
  font-style: italic;
  font-size: 20px !important;
}

/* ── Choice cards (Creator/Viewer/Business) ── */
div[style*="cursor: pointer"][style*="border-radius"] {
  transition: var(--transition-cinema) !important;
}

div[style*="cursor: pointer"][style*="border-radius"]:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: var(--shadow-cinema) !important;
}

/* ── Post button — premium ── */
button[style*="position: fixed"][style*="bottom"] {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  transition: var(--transition-cinema) !important;
}

button[style*="position: fixed"][style*="bottom"]:hover {
  transform: scale(1.05) !important;
}

/* ── Scrollbar — purple accent ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(124, 58, 237, 0.2); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(124, 58, 237, 0.4); }

/* ── Selection ── */
::selection {
  background: rgba(124, 58, 237, 0.15);
  color: #1a1a1a;
}

/* ── Bold text — purple accent ── */
strong, b {
  color: var(--purple) !important;
  font-weight: 700;
}

/* ── Subtle grain ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  opacity: 0.02;
  pointer-events: none;
  z-index: 10000;
  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.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 128px;
}

/* ── Focus states ── */
:focus-visible {
  outline: 2px solid var(--purple) !important;
  outline-offset: 2px;
}

/* ── No dark mode ── */
@media (prefers-color-scheme: dark) {
  html, body { color-scheme: light !important; }
}

/* ── Responsive polish ── */
@media (max-width: 768px) {
  h1, .gradient-text {
    font-size: 36px !important;
  }
}