/* ══════════════════════════════════════════
   PLANET JOURNEY — funnel-embedded (v2)
   Planets live ON the funnel: positioned children of
   #funnelContainer, mapped via FunnelUtils.svgToScreen.
   Tokens from shared.css. Illustrative scene colors
   (Earth, ship, portal) are hardcoded, consistent with
   the funnel's own SVG/legend.
   ══════════════════════════════════════════ */

/* Single travelling ship replaces the funnel's per-phase ships */
.ship { display: none !important; }

/* Declutter the funnel mouth so Earth + Kontext planets sit clean on the spine */
.funnel-container [class*="idea-drift"] { display: none; }

/* Overlay for webinar spurs (lane stays implied by the funnel's flow arrows) */
.pl-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 2;
}

/* Phase → planet color binding (tokens) */
.pl-conv { --pc: var(--orange); }
.pl-p1   { --pc: var(--p1); }
.pl-p2a  { --pc: var(--p2); }
.pl-p2b  { --pc: var(--p2); }
.pl-p3   { --pc: var(--p3); }

/* Planets — a lit sphere: crisp terminator (day→night), bright limb highlight,
   faint atmospheric halo in the zone colour. Gently drifts (var(--float-*)). */
.pl-planet {
  position: absolute; z-index: 4; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer; color: #050510;
  font-family: var(--font-mono); font-weight: 500;
  background: radial-gradient(circle at var(--hl-x, 34%) var(--hl-y, 28%),
    rgba(255,255,255,0.66) 0%,
    color-mix(in srgb, var(--pc) 88%, #fff) 24%,
    var(--pc) 50%,
    color-mix(in srgb, var(--pc) 66%, #000) 84%,
    color-mix(in srgb, var(--pc) 46%, #000) 100%);
  box-shadow:
    inset -3px -4px 8px rgba(0,0,0,0.42),
    0 0 0 1px var(--glass-8),
    0 0 16px 1px color-mix(in srgb, var(--pc) 22%, transparent);
  transition: box-shadow 0.2s ease, opacity 0.2s ease;
  animation: pl-float var(--float-dur, 9s) ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
}
/* Hover/focus = the rocket is scanning this planet: a rotating dashed radar ring
   sweeps it (no size change — we only present here). */
.pl-planet::before {
  content: ''; position: absolute; inset: -7px; border-radius: 50%;
  border: 1.5px dashed color-mix(in srgb, var(--pc) 72%, #fff);
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.pl-planet:hover { z-index: 7; }
.pl-planet:hover::before, .pl-planet:focus-visible::before {
  opacity: 0.9; animation: pl-scan 3.5s linear infinite;
}
.pl-planet:hover { box-shadow:
  inset -3px -4px 8px rgba(0,0,0,0.42), 0 0 0 1px var(--glass-12),
  0 0 22px 4px color-mix(in srgb, var(--pc) 38%, transparent); }
.pl-planet:focus-visible { outline: none; }
.pl-planet.is-active { box-shadow:
  inset -3px -4px 8px rgba(0,0,0,0.42), 0 0 0 2px var(--glass-15), 0 0 22px 4px var(--pc); }
.pl-planet.is-webinar { opacity: 0.45; --float-amp: 7px; --float-dur: 6s; }
.pl-planet.is-webinar:hover { opacity: 1; }
.pl-planet .pl-num { position: relative; z-index: 2; line-height: 1; opacity: 0.5; font-weight: 500; }
@keyframes pl-scan { to { transform: rotate(360deg); } }
@keyframes pl-float {
  0%, 100% { transform: translate(-50%, -50%); }
  50%      { transform: translate(-50%, calc(-50% - var(--float-amp, 3px))); }
}

/* Per-planet surface variety — each planet looks individual but keeps its zone
   color (--pc). The ::after carries the texture and sits below the number. */
.pl-planet[class*="pl-surf-"]::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
}
.pl-planet.pl-surf-0::after { display: none; }          /* smooth */
.pl-planet.pl-surf-1::after {                            /* cratered */
  background:
    radial-gradient(circle at 64% 38%, color-mix(in srgb, var(--pc) 32%, #000) 0 11%, transparent 12%),
    radial-gradient(circle at 38% 64%, color-mix(in srgb, var(--pc) 38%, #000) 0 8%, transparent 9%),
    radial-gradient(circle at 72% 70%, color-mix(in srgb, var(--pc) 26%, #000) 0 6%, transparent 7%);
  opacity: 0.5;
}
.pl-planet.pl-surf-2::after {                            /* banded (gas giant) */
  background: repeating-linear-gradient(var(--surf-rot, 16deg),
    transparent 0 4px,
    color-mix(in srgb, var(--pc) 34%, #000) 4px 7px,
    transparent 7px 12px);
  opacity: 0.38; mix-blend-mode: soft-light;
}
.pl-planet.pl-surf-3::after {                            /* ringed */
  inset: auto; left: 50%; top: 50%; width: 165%; height: 44%;
  transform: translate(-50%, -50%) rotate(var(--surf-rot, -22deg));
  border: 2px solid color-mix(in srgb, var(--pc) 60%, transparent);
  border-bottom-color: transparent; background: none; opacity: 0.75;
}

/* Earth (home) — illustrative */
.pl-planet.is-home {
  color: #eaf6ff;
  background: radial-gradient(circle at 36% 30%, #d8f3ff, #4aa8e6 32%, #1d6fae 62%, #0c4474 100%);
  box-shadow: inset -3px -4px 9px rgba(0,0,0,0.4), 0 0 18px 3px rgba(94,160,224,0.45);
}
/* Off-lane labels (webinar pill) */
.pl-tag {
  position: absolute; z-index: 4; transform: translate(-50%, 0);
  font-family: var(--font-heading); font-weight: 700; font-size: 0.52rem;
  text-transform: uppercase; letter-spacing: 0.07em; white-space: nowrap; pointer-events: none;
  color: var(--p2); background: color-mix(in srgb, var(--p2) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--p2) 25%, transparent);
  padding: 2px 7px; border-radius: 20px;
}
.pl-tag.pl-tag-muted {
  color: var(--text-faint); background: transparent; border: none;
  font-weight: 600; font-size: 0.5rem;
}
/* Webinar pill: sits ABOVE the cluster and only fades in while a webinar planet
   is hovered (the planets themselves stay dim until then). */
.pl-tag-webinar { transform: translate(-50%, -100%); opacity: 0; transition: opacity 0.2s ease; }
#funnelContainer:has(.pl-planet.is-webinar:hover) .pl-tag-webinar { opacity: 1; }

/* Slot 17 — the Meta-Level "star": a larger, special body with a soft corona.
   Red-dwarf feel, but in the p3 zone colour (purple). Sits past the funnel's eye. */
.pl-star {
  position: absolute; z-index: 5; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer; color: #f4ecff;
  font-family: var(--font-mono); font-weight: 600;
  background: radial-gradient(circle at 38% 32%,
    color-mix(in srgb, var(--pc) 25%, #fff) 0%,
    var(--pc) 36%,
    color-mix(in srgb, var(--pc) 72%, #160a26) 100%);
  box-shadow:
    inset -4px -5px 12px rgba(0,0,0,0.45),
    0 0 18px 3px color-mix(in srgb, var(--pc) 52%, transparent),
    0 0 44px 11px color-mix(in srgb, var(--pc) 24%, transparent);
  animation: pl-star-pulse 4.2s ease-in-out infinite;
}
.pl-star:hover { z-index: 8; }
.pl-star:focus-visible { outline: 2px solid var(--p3); outline-offset: 4px; }
.pl-star .pl-num { position: relative; z-index: 2; line-height: 1; opacity: 0.6; }
.pl-star-label {
  position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 0.55rem; color: var(--p3); white-space: nowrap;
}
@keyframes pl-star-pulse {
  0%, 100% {
    box-shadow: inset -4px -5px 12px rgba(0,0,0,0.45),
      0 0 18px 3px color-mix(in srgb, var(--pc) 52%, transparent),
      0 0 44px 11px color-mix(in srgb, var(--pc) 24%, transparent);
  }
  50% {
    box-shadow: inset -4px -5px 12px rgba(0,0,0,0.45),
      0 0 24px 5px color-mix(in srgb, var(--pc) 66%, transparent),
      0 0 60px 16px color-mix(in srgb, var(--pc) 32%, transparent);
  }
}

/* Ship — single travelling craft on the spine, reusing the funnel ship art
   (swaps per phase, see planet.js). Art points right; planet.js tilts it. */
.pl-ship {
  position: absolute; z-index: 6; transform: translate(-50%, -50%); pointer-events: none;
  transition: left 0.5s cubic-bezier(0.5, 0, 0.3, 1), top 0.5s cubic-bezier(0.5, 0, 0.3, 1);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.55));
}
.pl-ship img { width: 72px; height: auto; display: block; transition: transform 0.4s ease; }
.pl-ship .pl-ship-glow {
  position: absolute; inset: -6px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(255,85,0,0.28), transparent 68%);
}

/* Tooltip (appended to body) — a phase-tinted "scan readout" panel: glassy, blurred,
   with a coloured scan-edge and a corner bracket, to match the cockpit/scanner feel. */
.pl-tip {
  position: fixed; z-index: 60; pointer-events: none; opacity: 0;
  transition: opacity 0.14s ease; max-width: 250px;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  -webkit-backdrop-filter: blur(11px) saturate(1.15); backdrop-filter: blur(11px) saturate(1.15);
  color: var(--text);
  border: 1px solid var(--glass-12);
  border-left: 2px solid color-mix(in srgb, var(--pc, var(--orange)) 72%, transparent);
  border-radius: 4px 11px 11px 4px; padding: 9px 13px 10px;
  font-size: 0.74rem; line-height: 1.36;
  box-shadow: 0 10px 34px rgba(0,0,0,0.55), 0 0 0 1px var(--glass-4),
    inset 0 0 20px color-mix(in srgb, var(--pc, var(--orange)) 7%, transparent);
}
.pl-tip::after {  /* top-right scan bracket */
  content: ''; position: absolute; top: 6px; right: 6px; width: 9px; height: 9px;
  border-top: 1.5px solid color-mix(in srgb, var(--pc, var(--orange)) 55%, transparent);
  border-right: 1.5px solid color-mix(in srgb, var(--pc, var(--orange)) 55%, transparent);
  opacity: 0.7;
}
.pl-tip .pl-tip-meta {
  font-family: var(--font-mono); font-size: 0.57rem; letter-spacing: 0.05em;
  text-transform: uppercase; display: block; margin-bottom: 3px;
  color: color-mix(in srgb, var(--pc, var(--text-faint)) 70%, var(--text-faint));
}
.pl-tip .pl-tip-phase {
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 600;
  margin-top: 5px; display: block; color: var(--pc);
}

/* Route trail — a soft dashed curve threading BEHIND the planets (replaces the old
   straight centre flow-arrow). Drawn in screen space through the lane positions. */
.pl-trail { position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 2; overflow: visible; }
.pl-trail-path {
  fill: none; stroke: var(--glass-30); stroke-width: 1.5;
  stroke-dasharray: 2 9; stroke-linecap: round; opacity: 0.5;
}

/* ── Ambient gimmicks: a roaming satellite + an occasional meteor ── */
.pl-deco { position: absolute; pointer-events: none; z-index: 3; }
/* Satellite: roams the whole scene like an old DVD screensaver — two linear
   bounces at coprime periods, so it's constantly somewhere else and never
   repeats soon. Very slow, stately pace; the svg keeps a gentle bob on top. */
.pl-satellite { left: 4%; top: 7%; opacity: 0.4;
  animation: pl-sat-x 83s linear infinite, pl-sat-y 113s linear infinite; }
.pl-satellite svg { display: block; animation: pl-sat-bob 7s ease-in-out infinite; }
@keyframes pl-sat-x { 0% { left: 3%; } 50% { left: 92%; } 100% { left: 3%; } }
@keyframes pl-sat-y { 0% { top: 6%; } 50% { top: 83%; } 100% { top: 6%; } }
@keyframes pl-sat-bob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-5px) rotate(3deg); }
}
/* Meteor: a thin bright streak that shoots across every so often */
.pl-meteor { top: 8%; left: 16%; width: 90px; height: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--orange) 85%, #fff));
  border-radius: 2px; opacity: 0; transform: rotate(24deg);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--orange) 60%, transparent));
  animation: pl-meteor-shoot 13s linear infinite; }
.pl-meteor::after { content: ''; position: absolute; right: -2px; top: -1.5px;
  width: 5px; height: 5px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 8px 2px color-mix(in srgb, var(--orange) 70%, #fff); }
@keyframes pl-meteor-shoot {
  0%      { opacity: 0; transform: translate(0, 0) rotate(24deg); }
  4%      { opacity: 0.9; }
  16%     { opacity: 0.9; }
  22%     { opacity: 0; transform: translate(360px, 160px) rotate(24deg); }
  100%    { opacity: 0; transform: translate(360px, 160px) rotate(24deg); }
}
/* While a planet/star is being scanned, kill the meteor (animation:none reverts
   it to its base opacity:0) so a streak can't shoot past and distract. */
#funnelContainer:has(.pl-planet:hover, .pl-star:hover) .pl-meteor { animation: none; }

/* Sprinkled starfield — faint twinkling dots behind the whole scene (z below
   the trail). Positions/timings set per-dot in planet.js. */
.pl-starfield { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.pl-star-dot {
  position: absolute; border-radius: 50%; background: #fff;
  box-shadow: 0 0 3px 0.5px rgba(255,255,255,0.55);
  animation: pl-twinkle var(--tw-dur, 3.4s) ease-in-out infinite;
  animation-delay: var(--tw-delay, 0s);
}
@keyframes pl-twinkle {
  0%, 100% { opacity: 0.22; transform: scale(0.7); }
  50%      { opacity: 0.85; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .pl-star, .pl-planet, .pl-satellite, .pl-satellite svg, .pl-meteor, .pl-star-dot { animation: none; }
  .pl-planet:hover::before, .pl-planet:focus-visible::before { animation: none; }
  .pl-meteor { display: none; }
  .pl-ship, .pl-ship img, .pl-planet { transition: none; }
}