/* ============================================================
   FLEXING DATA — Homepage hero: STAR / PLANET cosmos
   (PREVIEW build — loaded only by preview.html)
   ------------------------------------------------------------
   The warm-LIGHT brand hero: a star field on the cream page (faint
   brand-glow depth in the margins), with each keyword rendered as an
   actual PLANET (a glowing sphere) — its tagline always visible beside
   it and a CTA that appears on hover / as the cursor nears.
   (Drive it with `.space-hero.is-light`; hero-space.js switches the
   star palette to brand colours for the light page.)

   Self-contained class names (.space-hero, .sf-net, .space-planets,
   .planet-system…) so it never touches the live hero. Because this
   file is loaded ONLY by preview.html, the dark text overrides below
   affect the preview only — the live homepage is untouched.

     .sf-net        — canvas star field (drawn by hero-space.js)
     .planet-system — a keyword "planet" + label, on a layer ABOVE the
                      content so it stays clickable in the margins
   ============================================================ */

/* ---- LIGHT cosmos backdrop: the warm-light brand page with a faint brand-glow
   depth in the margins (the "light + subtle space depth" look). ---- */
.space-hero {
  position: absolute; top: 0; left: 0; right: 0;
  height: clamp(760px, 122vh, 1180px);
  overflow: hidden; z-index: 0; pointer-events: none;
  background:
    radial-gradient(46% 52% at 4% 22%,  rgba(10,150,199,.07), transparent 70%),
    radial-gradient(46% 52% at 96% 30%, rgba(124,92,255,.07), transparent 70%),
    radial-gradient(55% 45% at 50% -8%, rgba(255,122,89,.05), transparent 70%);
}
@media (max-width: 760px) { .space-hero { height: min(150vh, 1320px); } }

.sf-net {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  -webkit-mask-image: linear-gradient(to bottom, #000 64%, transparent 98%);
          mask-image: linear-gradient(to bottom, #000 64%, transparent 98%);
}

/* LIGHT theme keeps the site's original DARK headline / sub colours — no text
   overrides needed (the warm-light page already reads correctly). */

/* ============================================================
   PLANETS
   ============================================================ */
.space-planets {
  position: absolute; top: 0; left: 0; right: 0;
  height: clamp(760px, 122vh, 1180px);
  z-index: 4; pointer-events: none;   /* layer is click-through; planets re-enable */
}
@media (max-width: 760px) { .space-planets { height: min(150vh, 1320px); } }

.planet-system {
  position: absolute; display: flex; align-items: center; gap: 11px;
  text-decoration: none; pointer-events: auto; cursor: pointer;
  max-width: 205px;   /* narrower so it clears the cards yet stays on-screen */
}
.pl-right { flex-direction: row-reverse; text-align: right; }
.pl-right .planet-label { align-items: flex-end; }

/* the sphere */
.planet-body {
  position: relative; flex: 0 0 auto;
  width: 60px; height: 60px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #cdecff 0%, #38a6db 40%, #0a72a6 72%, #064a6e 100%);
  box-shadow: inset -6px -8px 15px rgba(0,8,20,.55), inset 4px 5px 12px rgba(255,255,255,.3),
              0 0 26px rgba(10,150,199,.45);
  display: flex; align-items: center; justify-content: center;
  animation: plBob var(--bob, 7s) ease-in-out infinite;
  transition: box-shadow .3s ease, transform .3s ease;
}
.planet-system.ai .planet-body {
  background: radial-gradient(circle at 34% 30%, #ece2ff 0%, #9b78ff 40%, #6c43e0 72%, #3c1f9c 100%);
  box-shadow: inset -6px -8px 15px rgba(8,0,24,.55), inset 4px 5px 12px rgba(255,255,255,.3),
              0 0 26px rgba(124,92,255,.45);
}
/* a glossy spec highlight */
.planet-body::before {
  content: ""; position: absolute; top: 11%; left: 20%; width: 34%; height: 26%;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.85), transparent 70%);
  filter: blur(1px);
}
/* optional Saturn ring on a few planets (.ringed) */
.ringed .planet-body::after {
  content: ""; position: absolute; inset: -30% -14%; border-radius: 50%;
  border: 2px solid rgba(190,215,255,.45); border-bottom-color: rgba(190,215,255,.12);
  transform: rotate(-22deg); pointer-events: none;
}
.planet-system.ai.ringed .planet-body::after { border-color: rgba(206,190,255,.5); border-bottom-color: rgba(206,190,255,.14); }

@keyframes plBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* tech icon = the planet's "face" */
.planet-ic {
  width: 30px; height: 30px; border-radius: 9px; overflow: hidden;
  background: rgba(255,255,255,.94); box-shadow: 0 2px 7px rgba(0,8,20,.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1;
}
.planet-ic img { width: 100%; height: 100%; object-fit: contain; padding: 3px; display: block; }

/* label block beside the planet */
.planet-label { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.planet-name {
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 15px;
  color: #18222f; line-height: 1.15; letter-spacing: .01em;   /* dark ink on the light page */
}
.planet-tag {                          /* ALWAYS visible */
  font-family: 'Inter', system-ui, sans-serif; font-size: 11.5px; line-height: 1.32;
  color: #46566a; max-width: 132px;                           /* muted ink on the light page */
}
.planet-cta {                          /* appears on hover / when the cursor nears */
  display: inline-flex; align-items: center; gap: 5px; width: max-content; max-width: 180px;
  margin-top: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 11.5px;
  color: #fff; background: #0a96c7; padding: 0 12px; border-radius: 99px;
  max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; overflow: hidden;
  transform: translateY(-4px);
  transition: opacity .24s ease, transform .24s cubic-bezier(.22,1,.36,1), max-height .24s ease, margin-top .24s ease, padding .24s ease;
}
.planet-system.ai .planet-cta { background: #7c5cff; }
.planet-system:hover .planet-cta,
.planet-system:focus-visible .planet-cta,
.planet-system.is-near .planet-cta {
  opacity: 1; transform: none; max-height: 34px; margin-top: 6px; padding-top: 6px; padding-bottom: 6px;
}

/* lit state — glow the planet when hovered or the cursor is near */
.planet-system:hover .planet-body,
.planet-system:focus-visible .planet-body,
.planet-system.is-near .planet-body { transform: scale(1.07); box-shadow: 0 0 36px rgba(10,150,199,.7), inset -6px -8px 15px rgba(0,8,20,.55), inset 4px 5px 12px rgba(255,255,255,.35); }
.planet-system.ai:hover .planet-body,
.planet-system.ai:focus-visible .planet-body,
.planet-system.ai.is-near .planet-body { box-shadow: 0 0 36px rgba(124,92,255,.7), inset -6px -8px 15px rgba(8,0,24,.55), inset 4px 5px 12px rgba(255,255,255,.35); }
.planet-system:focus-visible { outline: none; }
.planet-system:focus-visible .planet-name { text-decoration: underline; }

/* keep planets OUTSIDE the centred content column; labels open toward centre.
   Cards are 960px wide (±480 from centre), so the inner edge sits at 500px out
   → a ~20px gap from the cards, no overlap. */
.pl-left  { right: calc(50% + 500px); left: auto; }
.pl-right { left:  calc(50% + 500px); right: auto; }

/* Symmetric 3-per-side mirror: both sides at 14% / 42% / 70% + staggered bob.
   The 42% row sits just BELOW the ~37–40% stat-chip band, so nothing overlaps
   the "↑30%" chip at the cards' top corners. */
.pl-sql     { top: 14%; --bob: 6.5s; }
.pl-powerbi { top: 42%; --bob: 8s;   }
.pl-aws     { top: 70%; --bob: 7s;   }
.pl-python  { top: 14%; --bob: 7.5s; }
.pl-genai   { top: 42%; --bob: 6.5s; }
.pl-rag     { top: 70%; --bob: 7s;   }

@media (prefers-reduced-motion: reduce) {
  /* the star field keeps animating (JS); only stop CSS-driven motion */
  .planet-body { animation: none !important; }
}

/* planets need real margin room; the star field stays full-bleed. Hidden below
   ~1400px where the side margins get too tight for a planet + label. */
@media (max-width: 1400px) {
  .space-planets .planet-system { display: none; }
}

/* ============================================================
   Neon arrow cursor (PREVIEW only)
   ------------------------------------------------------------
   A brand blue→violet pointer (white outline) replaces the cursor
   across the preview page. `cursor` inherits, so body covers most
   elements, but links/buttons have a UA pointer rule, hence the
   explicit list. Text fields keep a caret. "5 3" is the hotspot —
   the arrow's tip — so the click point lands exactly at the tip.
   Note: SVG cursors work in Chrome/Edge/Firefox; Safari falls back to
   the default pointer (we'd ship a PNG for full coverage at launch).
   ============================================================ */
:root { --ai-cursor: url("../images/cursor-arrow.svg") 5 3, auto; }
html, body { cursor: var(--ai-cursor); }
a, button, [role="button"], summary, label,
.planet-system, .planet-cta { cursor: var(--ai-cursor); }
input, textarea { cursor: text; }