/* =====================================================================
   Kopou v2 — Home hero "the Sphere" (look layer)
   Locked 30 Oct 2026 · v1. Upload to /wp-content/uploads/kopou-hero-sphere/
   Loads AFTER kopou-hero-a.css (which keeps the layout, buttons and phone rules).
   Only changes the ground, the media layer, eyebrow, "Grow." and the stat bar.
   ===================================================================== */

/* ---------- 1. Ground: carbon with a deep purple glow behind the sphere ---------- */
body .kp-hero-a {
  background:
    radial-gradient(ellipse 38% 50% at 50% 50%, rgba(36, 26, 92, 1) 0%, rgba(36, 26, 92, 0) 100%),
    #0F1417;
}
/* soft dark veil behind the headline, above the sphere, so the copy always reads */
body .kp-hero-a::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 35.5%;
  width: min(980px, 100%);
  height: 520px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(15, 20, 23, .45), rgba(15, 20, 23, 0));
  pointer-events: none;
}

/* ---------- 2. The sphere (HTML widget) ---------- */
.kp-hero-a .kp-hero-a__media { mix-blend-mode: normal; }
.kp-hero-a .kp-sphere {
  position: absolute;
  inset: 0;
}
.kp-hero-a .kp-sphere__cv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* No WebGL2: show the approved still instead */
.kp-hero-a .kp-sphere.is-fallback .kp-sphere__cv { display: none; }
.kp-hero-a .kp-sphere.is-fallback {
  background: url("/wp-content/uploads/kopou-hero-sphere/kopou-sphere-still.webp") 50% 42% / auto 100% no-repeat;
}

/* ---------- 3. Copy accents ---------- */
.kp-hero-a .kp-eyebrow {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: #E4DEFF;
}
.kp-hero-a .kp-eyebrow::before { box-shadow: 0 0 10px var(--kp-mint); }
.kp-hero-a .kp-hero-a__accent {
  background: linear-gradient(92deg, #C9BCFF 0%, #8F78FA 38%, #53E6D4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none;
  padding-right: .04em;                 /* keeps the gradient on the final "." */
}

/* ---------- 4. Stat bar: lighter glass so the sphere glows through ---------- */
.kp-hero-a .kp-stats {
  width: min(860px, 100%);
  border-radius: 28px;
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .12);
}
.kp-hero-a .kp-stat__label { color: rgba(255, 255, 255, .62); }
.kp-hero-a .kp-stat__num { font-variant-numeric: tabular-nums; }

/* ---------- 5. Load-in ---------- */
@media (max-width: 767px) {
  body .kp-hero-a::after { top: 30%; height: 460px; }
}