/* mystical.boo */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #0a0514; color: #e0d8f0; font-family: 'Lato', sans-serif; font-weight: 300; line-height: 1.8; }
.hero { min-height: 80vh; display: flex; align-items: center; justify-content: center; position: relative; padding: 4rem 2rem; flex-direction: column; }
.crystal-ball { width: 150px; height: 150px; border-radius: 50%; background: conic-gradient(#a78bfa, #f472b6, #67e8f9, #a78bfa); animation: shimmer 4s linear infinite; margin-bottom: 2rem; opacity: 0.7; }
@keyframes shimmer { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.hero-content { text-align: center; position: relative; z-index: 1; }
.brand { font-family: 'Cormorant', serif; font-weight: 400; font-size: clamp(2rem, 5vw, 3.5rem); }
.veil-label { font-family: 'Fira Code', monospace; font-size: 0.55rem; color: #ffffff; display: block; margin-top: 0.5rem; letter-spacing: 0.15em; opacity: 0.8; }
.constellation { height: 100px; position: relative; max-width: 400px; margin: 0 auto; }
.star { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: rgba(255,255,255,0.6); animation: twinkle 3s ease-in-out infinite; }
.s1 { left: 10%; top: 30%; animation-delay: 0s; }
.s2 { left: 30%; top: 60%; animation-delay: 0.5s; }
.s3 { left: 50%; top: 20%; animation-delay: 1s; }
.s4 { left: 70%; top: 50%; animation-delay: 1.5s; }
.s5 { left: 90%; top: 35%; animation-delay: 2s; }
@keyframes twinkle { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
.readings { max-width: 480px; margin: 0 auto; padding: 2rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.reading-panel { background: #140a1e; padding: 2rem; border-top: 2px solid; border-image: linear-gradient(to right, #a78bfa, #f472b6, #67e8f9) 1; }
.reading-title { font-family: 'Cormorant', serif; font-weight: 400; font-size: 1.3rem; margin-bottom: 0.5rem; }
.reading-text { font-size: 0.8rem; color: #b0a8c8; }
.spirits { max-width: 480px; margin: 0 auto; padding: 3rem 1.5rem; }
.spirit-panel { background: rgba(167,139,250,0.08); border: 1px solid rgba(167,139,250,0.15); backdrop-filter: blur(4px); padding: 2rem; }
.spirit-text { font-size: 0.8rem; color: rgba(224,216,240,0.5); text-align: center; }
.close { text-align: center; padding: 3rem 2rem; }
.footer-brand { font-family: 'Cormorant', serif; font-weight: 400; font-size: 0.5rem; color: #1a0a2e; letter-spacing: 0.2em; }
.fade-in { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }