/* ─── §6  Hero portal visual (CSS art) ─────────────────────────────────── */

.lp-portal {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 520px;
  margin: 0 auto;
  animation: lpFadeIn 1s var(--ease-soft) 0.4s both;
}
.lp-portal-ring {
  position: absolute;
  inset: 50% 50% 50% 50%;
  border-radius: 50%;
  border: 1px solid var(--hairline-2);
  transform-origin: center;
}
.lp-portal-ring-1 {
  inset: 0;
  border-color: color-mix(in oklab, var(--primary) 28%, transparent);
  animation: lpRingSpin 40s linear infinite;
}
.lp-portal-ring-1::before,
.lp-portal-ring-1::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 18px var(--primary);
}
.lp-portal-ring-1::before { top: -5px; left: 50%; transform: translateX(-50%); }
.lp-portal-ring-1::after  { bottom: -5px; left: 50%; transform: translateX(-50%); opacity: 0.5; }

.lp-portal-ring-2 {
  inset: 12%;
  border: 1px dashed color-mix(in oklab, var(--primary) 30%, transparent);
  animation: lpRingSpin 60s linear infinite reverse;
}
.lp-portal-ring-3 {
  inset: 24%;
  border-color: color-mix(in oklab, var(--primary) 18%, transparent);
  border-style: solid;
  border-width: 1px;
  animation: lpRingSpin 50s linear infinite;
}

@keyframes lpRingSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Glowing core */
.lp-portal-core {
  position: absolute;
  inset: 36%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, color-mix(in oklab, white 25%, var(--primary)) 0%, var(--primary) 40%, var(--primary-deep) 100%);
  box-shadow:
    inset 0 4px 14px rgba(255,255,255,0.30),
    inset 0 -6px 18px rgba(0,0,0,0.20),
    0 0 60px var(--halo),
    0 0 120px var(--halo-soft);
  animation: lpCorePulse 6s ease-in-out infinite;
  display: grid; place-items: center;
  color: white;
}
.lp-portal-core svg {
  width: 38%; height: 38%;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.30));
}
@keyframes lpCorePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

/* Orbiting subject pills */
.lp-portal-pill {
  position: absolute;
  top: 50%; left: 50%;
  transform-origin: center;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--hairline-2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 10px 28px -8px rgba(0,0,0,0.45),
    0 0 0 1px color-mix(in oklab, var(--primary) 16%, transparent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  will-change: transform;
}
:root[data-theme="light"] .lp-portal-pill {
  background: #ffffff;
  box-shadow:
    0 10px 28px -10px rgba(15,23,42,0.18),
    0 0 0 1px color-mix(in oklab, var(--primary) 16%, transparent);
}
.lp-portal-pill .lp-pill-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 8px var(--primary);
}
/* 6 pills positioned along orbit + gentle float */
.lp-portal-pill:nth-child(1) { top: 8%; left: 50%; transform: translate(-50%, 0); animation: lpFloat 5s ease-in-out infinite; }
.lp-portal-pill:nth-child(2) { top: 30%; left: 92%; transform: translate(-50%, -50%); animation: lpFloat 6s ease-in-out 0.4s infinite; }
.lp-portal-pill:nth-child(3) { top: 72%; left: 86%; transform: translate(-50%, -50%); animation: lpFloat 5.5s ease-in-out 0.8s infinite; }
.lp-portal-pill:nth-child(4) { top: 92%; left: 50%; transform: translate(-50%, -50%); animation: lpFloat 5.2s ease-in-out 1.1s infinite; }
.lp-portal-pill:nth-child(5) { top: 72%; left: 14%; transform: translate(-50%, -50%); animation: lpFloat 6.2s ease-in-out 0.6s infinite; }
.lp-portal-pill:nth-child(6) { top: 30%; left: 8%; transform: translate(-50%, -50%); animation: lpFloat 5.8s ease-in-out 0.2s infinite; }

@keyframes lpFloat {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50%      { transform: translate(-50%, -50%) translateY(-8px); }
}
/* override 1st pill (top center) to keep its translate(-50%, 0) base */
.lp-portal-pill:nth-child(1) { animation-name: lpFloatTop; }
@keyframes lpFloatTop {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, -8px); }
}

@media (max-width: 480px) {
  .lp-portal { max-width: 360px; }
  .lp-portal-pill { padding: 6px 11px; font-size: 0.72rem; }
}