

.sky-now {
  background: radial-gradient(80% 100% at 50% 0%, rgba(124, 58, 237, 0.18), transparent 70%), rgba(0,0,0,.25);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 36px 28px;
}
.sky-now__head { text-align: center; margin-bottom: 28px; }
.sky-now__title { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 4px 0; }
.sky-now__sub { color: var(--ink-faint); font-size: .92rem; margin: 0; }

.sky-now__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.sky-planet {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; border-radius: 14px;
  background: rgba(0,0,0,.35); border: 1px solid var(--line);
  transition: all var(--t);
  position: relative; overflow: hidden;
}
.sky-planet::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 80% at 0% 50%, var(--accent), transparent 60%);
  opacity: 0; transition: opacity var(--t);
}
.sky-planet:hover { transform: translateY(-2px); border-color: var(--accent); }
.sky-planet:hover::before { opacity: .15; }
.sky-planet__glyph {
  font-size: 2.2rem; color: var(--accent); position: relative;
  filter: drop-shadow(0 0 12px var(--accent));
  animation: planetGlow 6s ease-in-out infinite;
  flex: 0 0 auto;
}
@keyframes planetGlow {
  0%,100% { filter: drop-shadow(0 0 8px var(--accent)); }
  50%     { filter: drop-shadow(0 0 16px var(--accent)); }
}
.sky-planet__body { flex: 1; min-width: 0; position: relative; }
.sky-planet__body h4 { margin: 0 0 2px; font-family: var(--serif-display); font-size: .9rem; letter-spacing: .1em; color: var(--ink); }
.sky-planet__body p { margin: 0; font-size: .85rem; color: var(--ink-dim); }
.sky-planet__body strong { color: var(--ink); }
.sky-planet__deg {
  position: absolute; top: 0; right: 0;
  font-family: var(--serif-display); font-size: .72rem; color: var(--ink-faint);
}

.aspects-now { background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.aspects-now__head { text-align: center; margin-bottom: 18px; }
.aspects-now__head h3 { font-family: var(--serif); font-size: 1.4rem; margin: 4px 0 0; }
.aspects-now__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.aspect-row {
  display: grid; grid-template-columns: auto 1fr 60px;
  align-items: center; gap: 14px;
  padding: 14px 18px; border-radius: 12px;
  background: rgba(0,0,0,.25); border-left: 3px solid var(--gold-soft);
  transition: all var(--t);
}
.aspect-row:hover { background: rgba(0,0,0,.4); }
.aspect-row--trine, .aspect-row--sextile { border-left-color: #4ade80; }
.aspect-row--square, .aspect-row--opposition { border-left-color: var(--rose); }
.aspect-row--conjunction { border-left-color: var(--gold-soft); }

.aspect-row__planets { display: inline-flex; gap: 6px; align-items: center; min-width: 88px; }
.aspect-row__glyph { font-size: 1.4rem; }
.aspect-row__symbol { font-size: 1.1rem; color: var(--ink); }
.aspect-row__name { display: none; }
.aspect-row__txt { font-family: var(--serif); font-size: 1rem; color: var(--ink); flex: 1; }
.aspect-row__orb { font-size: .8rem; color: var(--ink-faint); font-family: var(--serif-display); text-align: right; }

@media (min-width: 720px) {
  .aspect-row { grid-template-columns: auto auto 1fr 60px; }
  .aspect-row__name { display: inline; font-family: var(--serif-display); letter-spacing: .08em; font-size: .82rem; color: var(--gold-soft); }
}

.cosmic-mood {
  display: grid; grid-template-columns: 140px 1fr; gap: 24px; align-items: center;
  padding: 28px; border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(124,58,237,.16), rgba(0,0,0,.4));
  border: 1px solid var(--line-strong);
}
@media (max-width: 640px) { .cosmic-mood { grid-template-columns: 1fr; text-align: center; } }
.cosmic-mood__dial {
  --score: 50;
  width: 130px; height: 130px; border-radius: 50%;
  background: conic-gradient(from -90deg, var(--gold) 0%, var(--gold) calc(var(--score) * 1%), rgba(255,255,255,.08) calc(var(--score) * 1%));
  display: grid; place-items: center;
  position: relative; margin: 0 auto;
  box-shadow: 0 0 40px rgba(212, 175, 55, .25);
}
.cosmic-mood__dial::after {
  content: ""; position: absolute; inset: 12px; border-radius: 50%;
  background: var(--bg-1);
}
.cosmic-mood__num {
  position: relative; z-index: 1;
  font-family: var(--serif-display); font-size: 2.4rem; font-weight: 600;
  color: var(--gold-soft);
}
.cosmic-mood__txt { padding: 4px 0; }
.cosmic-mood__name { font-family: var(--serif); font-size: 2rem; margin: 4px 0 8px; text-transform: capitalize; }
.cosmic-mood__txt p { color: var(--ink-dim); margin: 0; font-size: 1.05rem; }
.mood--lifting .cosmic-mood__dial { box-shadow: 0 0 50px rgba(74, 222, 128, .3); }
.mood--lifting .cosmic-mood__name { color: #4ade80; }
.mood--tense .cosmic-mood__name, .mood--heavy .cosmic-mood__name { color: var(--rose); }

.live-ticker {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px; border-radius: 999px;
  background: rgba(0,0,0,.4); border: 1px solid var(--line-strong);
  max-width: 720px; margin: 0 auto; position: relative; overflow: hidden;
}
.live-ticker__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #4ade80; box-shadow: 0 0 10px rgba(74, 222, 128, .8);
  animation: tickerDot 2s ease-in-out infinite;
  flex: 0 0 auto;
}
@keyframes tickerDot { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.live-ticker__list {
  list-style: none; padding: 0; margin: 0; flex: 1;
  position: relative; height: 1.5em;
}
.live-ticker__item {
  position: absolute; inset: 0; opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s, transform 0.5s;
  font-family: var(--serif); font-size: 1rem; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.live-ticker__item.is-on { opacity: 1; transform: translateY(0); }

.reading-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
.reading-card {
  display: block; padding: 28px 24px;
  border-radius: var(--radius); background: var(--glass); border: 1px solid var(--line);
  color: var(--ink); transition: all var(--t);
  position: relative; overflow: hidden;
}
.reading-card::after {
  content: ""; position: absolute; inset: -1px;
  border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, transparent 60%, rgba(212,175,55,.4));
  opacity: 0; transition: opacity var(--t);
}
.reading-card:hover { transform: translateY(-4px); border-color: var(--gold-soft); background: var(--glass-soft); }
.reading-card:hover::after { opacity: 1; }
.reading-card__glyph {
  display: block; font-size: 2.4rem; color: var(--gold);
  margin-bottom: 14px; filter: drop-shadow(0 0 10px rgba(212,175,55,.3));
}
.reading-card__title { font-family: var(--serif); font-size: 1.25rem; margin: 0 0 10px; line-height: 1.25; }
.reading-card__excerpt { color: var(--ink-dim); font-size: .96rem; line-height: 1.55; margin: 0 0 14px; }
.reading-card__cta { color: var(--gold-soft); font-size: .9rem; }

.constellations {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}
.constellation {
  --accent: var(--gold);
  display: flex; flex-direction: column; align-items: center;
  padding: 22px 14px; border-radius: 18px;
  background: rgba(0,0,0,.3); border: 1px solid var(--line);
  transition: all var(--t); color: var(--ink); position: relative; overflow: hidden;
}
.constellation:hover { transform: translateY(-4px); border-color: var(--accent); background: rgba(0,0,0,.5); }
.constellation__svg { width: 100%; height: auto; max-height: 90px; margin-bottom: 8px; }
.constellation__svg line { stroke: var(--accent); stroke-width: .4; opacity: .35; transition: opacity var(--t); }
.constellation:hover .constellation__svg line { opacity: .8; }
.constellation__star {
  fill: var(--accent);
  filter: drop-shadow(0 0 4px var(--accent));
  animation: starTwinkle 3s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.3s);
}
@keyframes starTwinkle { 0%,100% { opacity: .65; r: 1.4; } 50% { opacity: 1; r: 1.8; } }
.constellation__name { font-family: var(--serif); font-size: 1.05rem; margin: 4px 0 2px; }
.constellation__date { color: var(--ink-faint); font-size: .78rem; }

.arcana-showcase {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 18px;
}
.tarot-illus {
  perspective: 1000px;
  cursor: pointer;
}
.tarot-illus__frame {
  position: relative;
  aspect-ratio: 2/3;
  padding: 20px 16px;
  border-radius: 14px;
  background: linear-gradient(160deg, #1d0e3d 0%, #0a0418 50%, #14082a 100%);
  border: 1px solid rgba(212, 175, 55, .3);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  overflow: hidden;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s, border-color .4s;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.6), inset 0 0 60px rgba(212, 175, 55, .04);
}
.tarot-illus:hover .tarot-illus__frame {
  transform: rotateY(8deg) rotateX(-4deg) translateZ(20px) scale(1.02);
  border-color: var(--gold-soft);
  box-shadow: 0 30px 80px -20px rgba(212, 175, 55, .25), inset 0 0 80px rgba(212, 175, 55, .08);
}
.tarot-illus__corner {
  position: absolute; color: var(--gold-soft); font-size: .9rem; opacity: .7;
}
.tarot-illus__corner--tl { top: 8px; left: 10px; }
.tarot-illus__corner--tr { top: 8px; right: 10px; }
.tarot-illus__corner--bl { bottom: 8px; left: 10px; }
.tarot-illus__corner--br { bottom: 8px; right: 10px; }
.tarot-illus__num {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  font-family: var(--serif-display); font-size: .72rem; letter-spacing: .25em;
  color: var(--gold-soft); opacity: .8;
}
.tarot-illus__symbol {
  font-size: 4.2rem; color: var(--gold);
  filter: drop-shadow(0 0 30px rgba(212, 175, 55, .4));
  margin-bottom: 14px;
  position: relative; z-index: 1;
  animation: cardSymbolBreathe 5s ease-in-out infinite;
}
@keyframes cardSymbolBreathe {
  0%,100% { transform: scale(1); filter: drop-shadow(0 0 20px rgba(212, 175, 55, .35)); }
  50%     { transform: scale(1.06); filter: drop-shadow(0 0 40px rgba(212, 175, 55, .55)); }
}
.tarot-illus__name {
  font-family: var(--serif); font-size: 1.05rem; margin: 0; color: var(--ink);
  position: relative; z-index: 1; line-height: 1.3;
  letter-spacing: .03em;
}
.tarot-illus__halo {
  position: absolute; inset: -50%;
  background: radial-gradient(circle at 50% 50%, rgba(212, 175, 55, .12), transparent 60%);
  pointer-events: none;
  animation: cardHaloRotate 30s linear infinite;
}
@keyframes cardHaloRotate { from { transform: rotate(0); } to { transform: rotate(360deg); } }

.illustration--placeholder {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: 14px;
  background: radial-gradient(60% 80% at 50% 30%, rgba(124, 58, 237, .35), rgba(10, 4, 24, 1) 70%);
  display: grid; place-items: center;
  overflow: hidden;
  border: 1px solid var(--line-strong);
}
.illustration__halo {
  position: absolute; inset: 20%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 55, .18), transparent 60%);
  animation: halopulse 4s ease-in-out infinite;
}
@keyframes halopulse {
  0%,100% { transform: scale(1); opacity: .6; }
  50%     { transform: scale(1.15); opacity: 1; }
}
.illustration__sigil {
  position: relative; z-index: 1;
  font-size: 5rem; color: var(--gold);
  filter: drop-shadow(0 0 25px rgba(212, 175, 55, .55));
}

.hero { position: relative; }
.hero::before {
  content: ""; position: absolute; inset: -50px;
  background: radial-gradient(circle at 50% 60%, rgba(212, 175, 55, .08), transparent 50%);
  pointer-events: none; z-index: 0;
}
.hero__inner { position: relative; z-index: 1; }
.hero__moon { position: relative; }
.hero__moon::after {
  content: ""; position: absolute; inset: -40px;
  border-radius: 50%;
  border: 1px dashed rgba(212, 175, 55, .2);
  animation: orbitSlow 60s linear infinite;
  pointer-events: none;
}
.hero__moon::before {
  content: ""; position: absolute; inset: -80px;
  border-radius: 50%;
  border: 1px dashed rgba(124, 58, 237, .15);
  animation: orbitSlow 90s linear infinite reverse;
  pointer-events: none;
}
@keyframes orbitSlow { from { transform: rotate(0); } to { transform: rotate(360deg); } }

.entry__body h2 {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 2.4em 0 0.8em;
  font-weight: 500;
  color: var(--ink);
  border-left: 3px solid var(--gold);
  padding-left: 16px;
}
.entry__body h3 {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  margin: 2em 0 0.6em;
  color: var(--gold-soft);
}
.entry__body ul { padding-left: 24px; margin: 1.2em 0; }
.entry__body ul li { margin-bottom: 0.6em; color: var(--ink); }
.entry__body ul li::marker { color: var(--gold-soft); }

.divider-glyph {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin: 60px 0;
}
.divider-glyph::before, .divider-glyph::after {
  content: ""; flex: 1; max-width: 200px;
  height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}
.divider-glyph__symbol { color: var(--gold-soft); font-size: 1.4rem; opacity: .8; }

.live-now-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px; border-radius: 999px;
  background: rgba(74, 222, 128, .12); border: 1px solid rgba(74, 222, 128, .3);
  color: #4ade80; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  font-family: var(--serif-display);
}
.live-now-badge::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #4ade80; box-shadow: 0 0 10px #4ade80;
  animation: tickerDot 2s ease-in-out infinite;
}

.archive-tabs {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  padding: 4px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--line-strong);
  max-width: max-content; margin: 0 auto 28px;
}
.archive-tabs__tab {
  padding: 10px 20px; border-radius: 999px;
  color: var(--ink-dim); font-family: var(--serif-display);
  letter-spacing: .12em; font-size: .82rem; text-transform: uppercase;
  transition: all var(--t);
}
.archive-tabs__tab:hover { color: var(--ink); }
.archive-tabs__tab.is-active {
  background: linear-gradient(135deg, var(--gold), var(--gold-soft));
  color: #1a0c34; font-weight: 600;
}

.entry-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.entry-grid--dreams { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.entry-glyph-card {
  display: block; padding: 24px 20px; border-radius: 14px;
  background: rgba(0,0,0,.3); border: 1px solid var(--line);
  color: var(--ink); transition: all var(--t);
  height: 100%; min-height: 180px;
  position: relative; overflow: hidden;
}
.entry-glyph-card:hover {
  transform: translateY(-3px);
  border-color: var(--gold-soft);
  background: rgba(0,0,0,.5);
  box-shadow: 0 20px 40px -20px rgba(212, 175, 55, .25);
}
.entry-glyph-card::before {
  content: ""; position: absolute; top: -50%; right: -50%; width: 100%; height: 100%;
  background: radial-gradient(circle, rgba(212, 175, 55, .12), transparent 60%);
  opacity: 0; transition: opacity var(--t);
}
.entry-glyph-card:hover::before { opacity: 1; }
.entry-glyph-card__glyph {
  display: block; font-size: 2.2rem; color: var(--gold);
  margin-bottom: 12px; filter: drop-shadow(0 0 12px rgba(212,175,55,.4));
  position: relative; z-index: 1;
}
.entry-glyph-card__title {
  font-family: var(--serif); font-size: 1.1rem; margin: 0 0 8px;
  position: relative; z-index: 1; line-height: 1.3;
}
.entry-glyph-card__excerpt {
  color: var(--ink-dim); font-size: .88rem; margin: 0; line-height: 1.5;
  position: relative; z-index: 1;
}

.reveal-on-scroll {
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);
}
.reveal-on-scroll.is-revealed { opacity: 1; transform: none; }
.reading-card.reveal-on-scroll { transition-delay: 0; }
.tarot-illus.reveal-on-scroll { transform: translateY(20px) scale(.95); }
.tarot-illus.reveal-on-scroll.is-revealed { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll { opacity: 1; transform: none; transition: none; }
}

.tarot-illus.is-flipped .tarot-illus__frame {
  transform: rotateY(180deg);
}

html { scroll-behavior: smooth; }

.section { transition: background var(--t); }

.daily-card {
  background: linear-gradient(160deg, rgba(124, 58, 237, .12), rgba(0,0,0,.4));
  border: 1px solid var(--line-strong);
  position: relative; overflow: hidden;
}
.daily-card::before {
  content: ""; position: absolute; top: -100px; right: -100px;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, var(--accent, var(--gold)) 0%, transparent 60%);
  opacity: .2; pointer-events: none;
  animation: halopulse 8s ease-in-out infinite;
}
