/* ============================================================
   ZOLARA HERO — SOLAR SYSTEM ("a universe made of light")
   Animated cosmic visual that REPLACES the hero crystal image.
   A central sun, planets on different orbits, and a floating
   belt of 12 zodiac signs (like constellations) further out.

   Drops into .hero-cover as <div class="zh-stage">. Everything
   is scoped under .zh-stage (no global leakage). The existing
   hero text / badge / buttons / trust line are untouched.

   Animates transform/opacity only. Blur values are STATIC.
   ------------------------------------------------------------
   EDIT TUNABLES below: color tokens + breathing/spin speeds.
   ============================================================ */

.zh-stage {
  /* ---------- COLOR TOKENS (edit me) ---------- */
  --zh-navy:   #041A3D;   /* deep space base            */
  --zh-indigo: #2D1B69;   /* mid-space glow             */
  --zh-violet: #8B6CE0;   /* planet / nebula accent     */
  --zh-gold:   #D4AF37;   /* sun, zodiac, gold stars    */
  --zh-core:   #FFF6D8;   /* the breathing sun core     */

  /* ---------- MOTION (edit me) ---------- */
  --zh-breath: 7s;        /* sun breathing speed         */
  --zh-spin:   90s;       /* base orbital speed unit     */
  --zh-zodiac-spin: 240s; /* slow rotation of zodiac belt */
  /* ------------------------------------------- */

  position: relative;
  width: 100%;
  height: 70vh;
  min-height: 400px;
  max-height: 75vh;
  overflow: hidden;
  display: block;
  background:
    radial-gradient(ellipse 90% 75% at 50% 42%,
      var(--zh-indigo) 0%,
      var(--zh-navy) 48%,
      #02060f 100%);
}
@media (max-width: 768px) {
  .zh-stage { height: 60vh; min-height: 300px; }
}

/* ============ BACKDROP ============ */
.zh-sky {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* ---- Nebula clouds (move via transform only; blur is STATIC) ---- */
.zh-nebula {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);          /* static — never animated */
  opacity: 0.4;
  will-change: transform;
  pointer-events: none;
}
.zh-nebula--1 {
  width: 60vw; height: 60vw;
  top: -12%; left: -8%;
  background: radial-gradient(circle, var(--zh-violet), transparent 70%);
  animation: zh-drift-1 28s ease-in-out infinite alternate;
}
.zh-nebula--2 {
  width: 55vw; height: 55vw;
  bottom: -16%; right: -10%;
  background: radial-gradient(circle, var(--zh-indigo), transparent 70%);
  opacity: 0.5;
  animation: zh-drift-2 34s ease-in-out infinite alternate;
}
.zh-nebula--3 {
  width: 40vw; height: 40vw;
  top: 26%; right: 16%;
  background: radial-gradient(circle, rgba(212,175,55,0.30), transparent 70%);
  opacity: 0.28;
  animation: zh-drift-3 24s ease-in-out infinite alternate;
}

/* ---- Starfield (3 layers, filled by zolara-hero.js) ---- */
.zh-starfield { position: absolute; inset: 0; }
.zh-stars { position: absolute; inset: 0; will-change: transform; }
.zh-stars[data-zh-layer="1"] { animation: zh-pan 140s linear infinite; }
.zh-stars[data-zh-layer="2"] { animation: zh-pan 100s linear infinite reverse; }
.zh-stars[data-zh-layer="3"] { animation: zh-pan  70s linear infinite; }

.zh-star {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  opacity: 0.85;
  animation-name: zh-twinkle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* Shooting stars (created by JS, removed after run) */
.zh-shoot {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.8);
  opacity: 0;
  animation-name: zh-shoot;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.zh-shoot::after {
  content: "";
  position: absolute;
  right: 2px; top: 50%;
  width: 90px; height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7));
}

/* ============ SOLAR SYSTEM ============ */
/* .zh-galaxy is a grid so abs-positioned children center automatically;
   a child's transform: rotate() then spins it in place around center. */
.zh-galaxy {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

/* ---- The Sun (breathing light core) ---- */
.zh-sun {
  position: absolute;
  width: clamp(90px, 24vw, 150px);
  height: clamp(90px, 24vw, 150px);
  display: grid;
  place-items: center;
  z-index: 2;
}
.zh-sun__glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  filter: blur(8px);          /* static */
  background: radial-gradient(circle at center,
    #ffffff 0%,
    var(--zh-core) 18%,
    var(--zh-gold) 40%,
    rgba(212,175,55,0.45) 60%,
    transparent 76%);
  animation: zh-breathe var(--zh-breath) ease-in-out infinite;
  will-change: transform, opacity;
}
.zh-sun__core {
  position: absolute;
  width: 40%; height: 40%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--zh-core) 50%, var(--zh-gold) 100%);
  box-shadow: 0 0 22px 6px rgba(255, 246, 216, 0.45);
  animation: zh-breathe var(--zh-breath) ease-in-out infinite;
  will-change: transform, opacity;
}

/* ---- Orbits + planets (different radii, speeds, directions) ---- */
.zh-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.12);
  will-change: transform;
}
/* a planet rides the top edge of its orbit; orbit rotation revolves it */
.zh-planet {
  position: absolute;
  top: 0; left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.zh-orbit--1 { width: clamp(110px, 30vw, 190px); height: clamp(110px, 30vw, 190px); animation: zh-spin calc(var(--zh-spin) * 0.18) linear infinite; }
.zh-orbit--2 { width: clamp(160px, 42vw, 270px); height: clamp(160px, 42vw, 270px); border-color: rgba(139,108,224,0.14); animation: zh-spin calc(var(--zh-spin) * 0.30) linear infinite reverse; }
.zh-orbit--3 { width: clamp(215px, 54vw, 350px); height: clamp(215px, 54vw, 350px); animation: zh-spin calc(var(--zh-spin) * 0.46) linear infinite; }
.zh-orbit--4 { width: clamp(280px, 68vw, 450px); height: clamp(280px, 68vw, 450px); border-color: rgba(139,108,224,0.12); animation: zh-spin calc(var(--zh-spin) * 0.68) linear infinite reverse; }
.zh-orbit--5 { width: clamp(340px, 80vw, 530px); height: clamp(340px, 80vw, 530px); animation: zh-spin calc(var(--zh-spin) * 0.92) linear infinite; }
.zh-orbit--6 { width: clamp(390px, 92vw, 600px); height: clamp(390px, 92vw, 600px); border-color: rgba(212,175,55,0.08); animation: zh-spin calc(var(--zh-spin) * 1.2) linear infinite reverse; }

/* Mercury — small gold */
.zh-planet--1 { width: 9px;  height: 9px;  background: radial-gradient(circle at 35% 30%, #fff, var(--zh-gold)); box-shadow: 0 0 7px 1px rgba(212,175,55,0.55); }
/* Venus — warm cream */
.zh-planet--2 { width: 13px; height: 13px; background: radial-gradient(circle at 35% 30%, #fff, var(--zh-core)); box-shadow: 0 0 9px 2px rgba(255,246,216,0.5); }
/* a blue world */
.zh-planet--3 { width: 11px; height: 11px; background: radial-gradient(circle at 35% 30%, #cfe0ff, #6f8fd6); box-shadow: 0 0 8px 2px rgba(120,150,220,0.5); }
/* violet gas giant (largest) */
.zh-planet--4 { width: 18px; height: 18px; background: radial-gradient(circle at 35% 30%, #d9caff, var(--zh-violet)); box-shadow: 0 0 12px 3px rgba(139,108,224,0.55); }
/* pale icy world */
.zh-planet--5 { width: 8px;  height: 8px;  background: radial-gradient(circle at 35% 30%, #fff, #b9c6e8); box-shadow: 0 0 7px 1px rgba(185,198,232,0.5); }
/* distant gold-dim */
.zh-planet--6 { width: 7px;  height: 7px;  background: radial-gradient(circle at 35% 30%, #fff, #9A7B1A); box-shadow: 0 0 6px 1px rgba(154,123,26,0.5); }

/* ---- Zodiac belt (12 signs floating like constellations) ---- */
.zh-zodiac {
  --r: min(54vw, 340px);     /* belt radius — just outside the outer orbit */
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  animation: zh-spin var(--zh-zodiac-spin) linear infinite; /* very slow drift */
  will-change: transform;
}
.zh-sign {
  position: absolute;
  top: 0; left: 0;
  /* place each sign on the belt at its angle (--a), then un-rotate the box */
  transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1));
}
/* counter-rotate (around the sign anchor) so the belt's slow turn keeps
   each glyph upright. Separate node from the glyph so float + spin don't
   both fight over `transform`. */
.zh-sign__rot {
  position: absolute;
  top: 0; left: 0;
  transform-origin: 0 0;
  animation: zh-spin var(--zh-zodiac-spin) linear infinite reverse;
  will-change: transform;
}
.zh-glyph {
  display: inline-block;
  transform: translate(-50%, -50%);
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: clamp(13px, 3.4vw, 21px);
  line-height: 1;
  color: var(--zh-gold);
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
  opacity: 0.85;
  animation: zh-float 6s ease-in-out infinite;
  will-change: transform, opacity;
}
/* stagger the gentle float so signs twinkle out of sync */
.zh-sign:nth-child(2n) .zh-glyph { animation-delay: -1.5s; }
.zh-sign:nth-child(3n) .zh-glyph { animation-delay: -3s; }
.zh-sign:nth-child(5n) .zh-glyph { animation-delay: -4.5s; }

/* ============ KEYFRAMES (transform/opacity only) ============ */
@keyframes zh-breathe {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.12); opacity: 1; }
}
@keyframes zh-spin {
  to { transform: rotate(360deg); }
}
@keyframes zh-twinkle {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 1; }
}
@keyframes zh-pan {
  to { transform: translate3d(-6%, -3%, 0); }
}
@keyframes zh-float {
  0%, 100% { transform: translate(-50%, -50%);            opacity: 0.6; }
  50%      { transform: translate(-50%, calc(-50% - 4px)); opacity: 1; }
}
@keyframes zh-drift-1 {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(8%, 6%, 0); }
}
@keyframes zh-drift-2 {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-7%, -5%, 0); }
}
@keyframes zh-drift-3 {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(5%, -8%, 0); }
}
@keyframes zh-shoot {
  0%   { transform: translate3d(0, 0, 0) rotate(18deg);         opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: translate3d(240px, 150px, 0) rotate(18deg); opacity: 0; }
}

/* ============ ACCESSIBILITY: reduced motion ============ */
/* Freeze to a static luminous state — scoped to the hero stage only. */
@media (prefers-reduced-motion: reduce) {
  .zh-stage *,
  .zh-stage *::before,
  .zh-stage *::after {
    animation: none !important;
  }
  .zh-sun__glow,
  .zh-sun__core { opacity: 1; }
  .zh-star { opacity: 0.85; }
  .zh-glyph { opacity: 0.9; }
}