/* ═══════════════════════════════════════════════════════════
   SACRED LAYER — Esoteric Visual Accents
   Zodiac Persona Engine contribution to Sacred Folio storefront

   ADDITIVE to DaVinci's base design. Do not override base tokens.
   Layers: sacred geometry, planetary glyphs, zodiac ring,
           conjunction visualization, PS meters, astro badges.
   ═══════════════════════════════════════════════════════════ */

/* ── SACRED GEOMETRY: Flower of Life (hero watermark) ────── */
.flower-of-life {
  position: absolute;
  width: 700px;
  height: 700px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.025;
  pointer-events: none;
  z-index: 1;
  animation: sacred-breathe 12s ease-in-out infinite;
}

.flower-of-life circle {
  fill: none;
  stroke: var(--gold, #d4a848);
  stroke-width: 0.4;
}

.flower-of-life .outer-ring {
  stroke-dasharray: 3 3;
  stroke-width: 0.3;
}

@keyframes sacred-breathe {
  0%, 100% { opacity: 0.025; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  50%      { opacity: 0.04; transform: translate(-50%, -50%) scale(1.02) rotate(1deg); }
}

/* ── ZODIAC RING (slowly rotating behind hero) ───────────── */
.zodiac-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 580px;
  height: 580px;
  pointer-events: none;
  z-index: 1;
  animation: zodiac-rotate 600s linear infinite;
  opacity: 0.035;
}

.zodiac-ring circle {
  fill: none;
  stroke: var(--gold, #d4a848);
}

.zodiac-ring .ring-outer { stroke-width: 0.8; }
.zodiac-ring .ring-inner { stroke-width: 0.4; }
.zodiac-ring .ring-houses { stroke-width: 0.3; stroke-dasharray: 2 8; }

.zodiac-ring .tick {
  stroke: var(--gold, #d4a848);
  stroke-width: 0.5;
}

.zodiac-ring .glyph-text {
  fill: var(--gold, #d4a848);
  font-size: 10px;
  font-family: var(--serif, Georgia, serif);
  text-anchor: middle;
  dominant-baseline: central;
}

@keyframes zodiac-rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ── PLANETARY ORBIT PATHS ───────────────────────────────── */
.orbit-path {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}

.orbit-path circle {
  fill: none;
  stroke-width: 0.5;
  stroke-dasharray: 4 6;
}

.orbit-saturn {
  width: 420px;
  height: 420px;
  opacity: 0.06;
  animation: zodiac-rotate 240s linear infinite;
}

.orbit-saturn circle { stroke: #7c6f9b; }

.orbit-neptune {
  width: 520px;
  height: 520px;
  opacity: 0.05;
  animation: zodiac-rotate 360s linear infinite reverse;
}

.orbit-neptune circle { stroke: #4a7fb5; }

/* ── PLANET MARKERS on orbits ────────────────────────────── */
.planet-marker {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
}

.planet-marker--saturn {
  background: #7c6f9b;
  box-shadow: 0 0 12px 4px rgba(124,111,155,0.4);
  animation: orbit-saturn-path 240s linear infinite;
}

.planet-marker--neptune {
  background: #4a7fb5;
  box-shadow: 0 0 12px 4px rgba(74,127,181,0.4);
  animation: orbit-neptune-path 360s linear infinite;
}

/* ── CONJUNCTION GLOW (where Saturn meets Neptune) ───────── */
.conjunction-point {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 210px));
  width: 6px;
  height: 6px;
  background: #c09eff;
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
  box-shadow:
    0 0 8px 3px #c09eff,
    0 0 24px 8px rgba(192,158,255,0.4),
    0 0 60px 20px rgba(192,158,255,0.15);
  animation: conjunction-pulse 3s ease-in-out infinite;
}

@keyframes conjunction-pulse {
  0%, 100% { transform: translate(-50%, calc(-50% - 210px)) scale(1); opacity: 0.8; }
  50%      { transform: translate(-50%, calc(-50% - 210px)) scale(1.5); opacity: 1; }
}

/* ── FLOATING PLANETARY GLYPHS ───────────────────────────── */
.planetary-glyph {
  position: absolute;
  font-size: 3rem;
  opacity: 0.08;
  pointer-events: none;
  z-index: 1;
  font-family: var(--serif, Georgia, serif);
}

.glyph-saturn {
  color: #7c6f9b;
  top: 28%;
  left: 12%;
  animation: glyph-float 10s ease-in-out infinite;
}

.glyph-neptune {
  color: #4a7fb5;
  top: 32%;
  right: 12%;
  animation: glyph-float 10s ease-in-out infinite 3s;
}

.glyph-aries {
  color: #e05252;
  bottom: 22%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  opacity: 0.05;
  animation: glyph-float 8s ease-in-out infinite 5s;
}

@keyframes glyph-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

.glyph-aries { /* override for centered glyph */
  animation: glyph-float-center 8s ease-in-out infinite 5s;
}

@keyframes glyph-float-center {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-14px); }
}

/* ── METATRON'S CUBE DIVIDER ─────────────────────────────── */
.sacred-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  position: relative;
}

.sacred-divider svg {
  width: 60px;
  height: 60px;
  opacity: 0.12;
}

.sacred-divider svg circle {
  fill: none;
  stroke: var(--gold, #d4a848);
  stroke-width: 0.5;
}

.sacred-divider svg line {
  stroke: var(--gold, #d4a848);
  stroke-width: 0.3;
  opacity: 0.6;
}

.sacred-divider::before,
.sacred-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  max-width: 200px;
  background: linear-gradient(90deg, transparent, rgba(212,168,72,0.15), transparent);
}

/* ── PLANETARY SCORE METER ───────────────────────────────── */
.ps-meter-container {
  margin: 1.5rem 0;
}

.ps-meter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.ps-meter-label {
  font-family: var(--mono, monospace);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.ps-meter-label--low       { color: #4ade80; }
.ps-meter-label--normal    { color: #a3e635; }
.ps-meter-label--elevated  { color: #facc15; }
.ps-meter-label--extreme   { color: #f97316; }
.ps-meter-label--catastrophic { color: #ef4444; }

.ps-meter-bar {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.04);
  border-radius: 3px;
  overflow: hidden;
}

.ps-meter-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.ps-meter-fill--low       { background: linear-gradient(90deg, #22c55e, #4ade80); }
.ps-meter-fill--normal    { background: linear-gradient(90deg, #4ade80, #a3e635); }
.ps-meter-fill--elevated  { background: linear-gradient(90deg, #facc15, #f97316); }
.ps-meter-fill--extreme   { background: linear-gradient(90deg, #f97316, #ef4444); }
.ps-meter-fill--catastrophic { background: linear-gradient(90deg, #ef4444, #991b1b); }

/* ── ASTROLOGICAL BADGES ─────────────────────────────────── */
.astro-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 6px;
  font-family: var(--mono, monospace);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.astro-badge--conjunction {
  background: rgba(192,158,255,0.1);
  border: 1px solid rgba(192,158,255,0.25);
  color: #c09eff;
}

.astro-badge--extreme {
  background: rgba(249,115,22,0.1);
  border: 1px solid rgba(249,115,22,0.2);
  color: #f97316;
}

.astro-badge--blocked {
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.2);
  color: #f87171;
}

.astro-badge--allow {
  background: rgba(74,222,128,0.08);
  border: 1px solid rgba(74,222,128,0.2);
  color: #4ade80;
}

/* ── VESICA PISCIS ACCENT (for section backgrounds) ──────── */
.vesica-accent {
  position: absolute;
  pointer-events: none;
  opacity: 0.015;
}

.vesica-accent svg {
  width: 300px;
  height: 400px;
}

.vesica-accent circle {
  fill: none;
  stroke: var(--gold, #d4a848);
  stroke-width: 0.6;
}

/* ── GOLDEN SPIRAL ACCENT ────────────────────────────────── */
.golden-spiral {
  position: absolute;
  pointer-events: none;
  opacity: 0.02;
  z-index: 0;
}

.golden-spiral svg path {
  fill: none;
  stroke: var(--gold, #d4a848);
  stroke-width: 0.5;
}

/* ── CONSTELLATION DOT GRID (subtle background texture) ─── */
.constellation-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.03;
  background-image:
    radial-gradient(1px 1px at 10% 15%, rgba(212,168,72,0.6), transparent),
    radial-gradient(1px 1px at 25% 45%, rgba(212,168,72,0.4), transparent),
    radial-gradient(1px 1px at 40% 80%, rgba(212,168,72,0.5), transparent),
    radial-gradient(1px 1px at 55% 25%, rgba(212,168,72,0.3), transparent),
    radial-gradient(1px 1px at 70% 60%, rgba(212,168,72,0.5), transparent),
    radial-gradient(1px 1px at 85% 35%, rgba(212,168,72,0.4), transparent),
    radial-gradient(1px 1px at 15% 70%, rgba(167,139,250,0.3), transparent),
    radial-gradient(1px 1px at 60% 90%, rgba(167,139,250,0.4), transparent),
    radial-gradient(1px 1px at 90% 85%, rgba(74,127,181,0.3), transparent);
}

/* ── SYSTEM CARD ESOTERIC ICONS (override DaVinci generic) ─ */
.system-card .esoteric-icon {
  font-size: 28px;
  display: block;
  margin-bottom: 16px;
  line-height: 1;
}

/* ── PS EVENT TIMELINE (for conjunction section) ─────────── */
.ps-timeline {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 2rem 0;
  position: relative;
}

.ps-timeline::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    #4ade80 0%, #4ade80 30%,
    #facc15 40%, #f97316 60%,
    #ef4444 70%, #991b1b 100%
  );
  opacity: 0.3;
  z-index: 0;
}

.ps-timeline-event {
  position: relative;
  z-index: 1;
  text-align: center;
  flex: 1;
}

.ps-timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin: 0 auto 6px;
  border: 2px solid;
}

.ps-timeline-dot--normal {
  background: rgba(74,222,128,0.2);
  border-color: #4ade80;
}

.ps-timeline-dot--extreme {
  background: rgba(249,115,22,0.2);
  border-color: #f97316;
  box-shadow: 0 0 8px rgba(249,115,22,0.4);
}

.ps-timeline-dot--catastrophic {
  background: rgba(239,68,68,0.2);
  border-color: #ef4444;
  box-shadow: 0 0 12px rgba(239,68,68,0.4);
  animation: catastrophic-pulse 2s ease-in-out infinite;
}

@keyframes catastrophic-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(239,68,68,0.3); }
  50%      { box-shadow: 0 0 20px rgba(239,68,68,0.6); }
}

.ps-timeline-date {
  font-family: var(--mono, monospace);
  font-size: 10px;
  color: var(--muted, #4a4a7a);
  letter-spacing: 1px;
}

.ps-timeline-score {
  font-family: var(--mono, monospace);
  font-size: 13px;
  font-weight: 700;
  margin-top: 2px;
}

/* ── RESPONSIVE SACRED LAYER ─────────────────────────────── */
@media (max-width: 768px) {
  .flower-of-life { width: 400px; height: 400px; }
  .zodiac-ring { width: 350px; height: 350px; }
  .orbit-saturn { width: 280px; height: 280px; }
  .orbit-neptune { width: 340px; height: 340px; }
  .planetary-glyph { font-size: 2rem; opacity: 0.05; }
  .conjunction-point { transform: translate(-50%, calc(-50% - 140px)); }
}

@media (max-width: 480px) {
  .flower-of-life { width: 280px; height: 280px; }
  .zodiac-ring { display: none; }
  .orbit-saturn, .orbit-neptune { display: none; }
  .planetary-glyph { display: none; }
}