/*
Belinda Jackson — Radial Universe
The homepage "solar system" — Belinda at the center, four story worlds
orbiting as real linked pages, a Free Resources "moon" satellite.

Ported directly from the approved prototype. The one deliberate change:
in the prototype the sun/planets/moon were <button> elements that toggled
a JS view; here they are real <a href> links to real WordPress pages (see
the Technical Spec's URL Architecture), so a right-click → "open in new
tab" and every search engine crawl works exactly as expected. Only the
overlap-bug fix and the orbit math are unchanged.
*/

#hub{
  min-height:100vh; position:relative; display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:6.5em 1.5em 3em; overflow:hidden;
  background:
    radial-gradient(circle at 50% 40%, #ffffff 0%, var(--ivory) 45%, #f1ead9 100%);
}
#hub .starfield{
  position:absolute; inset:-10%; z-index:0; opacity:.55;
  background-image:
    radial-gradient(2px 2px at 10% 20%, var(--sand) 0, transparent 60%),
    radial-gradient(2px 2px at 80% 15%, var(--sand) 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 30% 70%, var(--gold) 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 65% 80%, var(--sand) 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 90% 60%, var(--gold) 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 45% 35%, var(--sand) 0, transparent 60%);
  animation:driftField 90s linear infinite;
}
@keyframes driftField{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
@media (prefers-reduced-motion: reduce){ #hub .starfield{ animation:none; } }

.hubIntro{ text-align:center; max-width:640px; margin:0 auto 1.2em; position:relative; z-index:2;}
.hubIntro .kicker{ font-family:var(--fantasy); letter-spacing:.14em; text-transform:uppercase; font-size:.72rem; color:var(--teal); display:block; margin-bottom:.7em;}
.hubIntro h1{ font-size:clamp(2.1rem, 5vw, 3.4rem); color:var(--ink);}
.hubIntro h1 em{ font-style:italic; color:var(--gold);}
.hubIntro p{ color:#5b5048; font-size:1.05rem;}

.orbitWrap{
  position:relative; width:min(92vw, 720px); aspect-ratio:1/1; margin:1.2em auto 0; z-index:2;
}
.orbitRing{
  position:absolute; inset:0; border-radius:50%; border:1px dashed var(--sand);
}
.orbitRing.r2{ inset:9%; border-color:#e7ddc6;}

/* The gentle float/bob motion lives on an inner .orbFloat wrapper, never on
   the positioned .sun/.planet/.moon element itself — a running CSS
   animation overrides the whole `transform` property, so animating the
   same element that also carries the centering transform
   (translate(-50%,0) etc.) would wipe that centering out and misplace
   every orbiting node. This is the fix for the homepage icon-overlap bug
   found during prototype review — keep animation and position on separate
   elements. */
@keyframes floatY{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
/* display:block is required here, not cosmetic: .orbFloat is a <span>, and
   percentage width/height (needed so the absolutely-positioned .planet img
   inside can fill it) are ignored on inline elements per the CSS spec. Without
   this, .orbFloat collapses to 0×0, its img's containing block is 0×0, and
   every planet/moon photo silently renders at 0×0 — invisible despite having
   a perfectly valid src and loading fine over the network. This was the real
   cause of the "logos aren't showing in the radial buttons" bug reported at
   the start of this project: not a missing-image problem, a layout one. Only
   .sun happened to look right because .sun .orbFloat below already set its
   own display:flex, which incidentally also makes width/height percentages
   apply. */
.orbFloat{ position:relative; display:block; width:100%; height:100%; animation:floatY 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .orbFloat{ animation:none; } }

.sun{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:34%; aspect-ratio:1/1; border-radius:50%; overflow:hidden; border:4px solid #fff;
  box-shadow:0 10px 40px rgba(20,35,59,.25), 0 0 0 2px var(--gold);
  background:var(--navy); text-align:center; z-index:5; text-decoration:none; display:block;
}
.sun .orbFloat{ display:flex; align-items:center; justify-content:center; flex-direction:column; animation-duration:7s;}
.sun img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55;}
.sun .sunLabel{ position:relative; z-index:2; color:#fff; padding:0 8%;}
.sun .sunLabel small{ display:block; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:.3em; font-family:var(--fantasy);}
.sun .sunLabel strong{ font-family:var(--display); font-size:1.15rem; font-weight:600; display:block;}

.planet{
  position:absolute; width:33.75%; aspect-ratio:1/1; border-radius:50%; border:3px solid #fff;
  box-shadow:0 8px 24px rgba(20,35,59,.18); overflow:hidden; background:#eee; cursor:pointer;
  transition:transform .3s ease, box-shadow .3s ease; text-decoration:none; display:block;
}
.planet:hover, .planet:focus-visible{ box-shadow:0 14px 34px rgba(20,35,59,.3);}
.planet img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.planet .tint{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.72) 100%);}
.planet .pLabel{
  position:absolute; left:0; right:0; bottom:8%; text-align:center; color:#fff; z-index:2;
  font-family:var(--fantasy); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; padding:0 6%;
}
.planet.watchers{ top:0; left:30%; transform:translate(-50%,0);}
.planet.childrens{ top:0; left:70%; transform:translate(-50%,0);}
.planet.journals{ width:30.375%; top:50%; left:-4%; transform:translate(0,-50%);}
.planet.speaking{ width:27%; bottom:0; left:25%; transform:translate(-50%,0);}
.planet.watchers .orbFloat{ animation-delay:.2s;}
.planet.childrens .orbFloat{ animation-delay:1s;}
.planet.journals .orbFloat{ animation-delay:1.6s;}
.planet.speaking .orbFloat{ animation-delay:.6s;}
.planet.watchers:hover, .planet.watchers:focus-visible{ transform:translate(-50%,0) scale(1.08);}
.planet.childrens:hover, .planet.childrens:focus-visible{ transform:translate(-50%,0) scale(1.08);}
.planet.journals:hover, .planet.journals:focus-visible{ transform:translate(0,-50%) scale(1.08);}
.planet.speaking:hover, .planet.speaking:focus-visible{ transform:translate(-50%,0) scale(1.08);}

.moon{
  position:absolute; width:27%; aspect-ratio:1/1; border-radius:50%; background:var(--gold); color:var(--navy);
  font-family:var(--fantasy); font-size:.7rem;
  text-align:center; padding:4%; border:2px solid #fff; box-shadow:0 6px 16px rgba(20,35,59,.2);
  bottom:0; left:75%; transform:translate(-50%,0); cursor:pointer; transition:transform .3s ease; text-decoration:none; display:block;
}
.moon .orbFloat{ display:flex; align-items:center; justify-content:center; animation-duration:5s; animation-delay:.4s;}
.moon:hover, .moon:focus-visible{ transform:translate(-50%,0) scale(1.12);}

.prereaders{
  position:absolute; width:30.375%; aspect-ratio:1/1; border-radius:50%; background:var(--gold); color:var(--navy);
  font-family:var(--fantasy); font-size:.55rem; overflow:hidden;
  text-align:center; border:2px solid #fff; box-shadow:0 6px 16px rgba(20,35,59,.2);
  top:50%; right:-4%; transform:translate(0,-50%); cursor:pointer; transition:transform .3s ease; text-decoration:none; display:block;
}
.prereaders .orbFloat{ animation-duration:5.5s; animation-delay:.8s;}
.prereaders:hover, .prereaders:focus-visible{ transform:translate(0,-50%) scale(1.12);}

.hubHint{ text-align:center; margin-top:1.6em; font-size:.85rem; color:#8a7d6f; position:relative; z-index:2;}

/* Mobile: collapse radial map into stacked orbit cards, keep radial motif */
@media (max-width:720px){
  .orbitWrap{ display:none; }
  .orbitStack{ display:flex; flex-direction:column; gap:1em; width:100%; max-width:420px; margin:1.4em auto 0; position:relative; z-index:2;}
  .orbitCard{
    display:flex; align-items:center; gap:1em; background:#fff; border-radius:20px; padding:.9em; text-align:left;
    border:1px solid var(--sand); box-shadow:0 6px 18px rgba(20,35,59,.08); min-height:44px; text-decoration:none; color:inherit;
  }
  .orbitCard .thumb{ width:64px; height:64px; border-radius:50%; overflow:hidden; flex:none; border:2px solid var(--gold);}
  .orbitCard .thumb img{ width:100%; height:100%; object-fit:cover;}
  .orbitCard strong{ font-family:var(--display); font-size:1.05rem; display:block;}
  .orbitCard span{ font-size:.82rem; color:#6b5f54;}
}
@media (min-width:721px){ .orbitStack{ display:none; } }