/* Ki — Second Charge (battery). Scoped under .ki-scope .ki-second-charge.
   Dark section: eyebrow + light headline + sub, then a battery visual beside
   three editable callouts, closing on a centered anchor line. The battery's
   bright "Ki" charge slides in and the glow pulses when scrolled into view. */

.ki-scope .ki-second-charge {
  background: #0F1C26; color: #EAEFF2;
  padding: clamp(56px, 7vw, 104px) 0;   /* decent breathing room around the section */
}
.ki-scope .ki-second-charge .sc-inner { max-width: 1180px; margin: 0 auto; }

/* ── compact 2-column layout: copy on the left, battery visual on the right ── */
.ki-scope .ki-second-charge .sc-main {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.ki-scope .ki-second-charge .sc-copy { min-width: 0; }

/* ── head ── */
.ki-scope .ki-second-charge .sc-eyebrow {
  display: flex; align-items: center; gap: 22px;
  font-family: var(--ki-sans); font-size: 13px; font-weight: 600;
  letter-spacing: 0.34em; text-transform: uppercase; color: #5BD0EA;
}
.ki-scope .ki-second-charge .sc-eyebrow::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, #26404C, transparent);
}
.ki-scope .ki-second-charge .sc-head {
  margin: 30px 0 0; font-family: var(--ki-sans);
  font-size: clamp(32px, 5.4vw, 58px); font-weight: 300; line-height: 1.08;
  letter-spacing: -0.01em; color: #EAEFF2;
}
.ki-scope .ki-second-charge .sc-head strong { font-weight: 600; color: #fff; }
.ki-scope .ki-second-charge .sc-sub {
  margin: 18px 0 0; max-width: 520px; font-family: var(--ki-sans);
  font-size: clamp(15px, 2vw, 18px); font-weight: 300; line-height: 1.6; color: #8294A0;
}

/* ── stage: battery figure (right column) ── */
.ki-scope .ki-second-charge .sc-stage { min-width: 0; }

/* Desktop figure — battery + connector lines + labels in one aligned SVG. */
.ki-scope .ki-second-charge .sc-figure--desktop { display: flex; justify-content: center; }
.ki-scope .ki-second-charge .sc-battery-full {
  width: 100%; max-width: 620px; height: auto; display: block;
}
/* Mobile figure — battery only + stacked callouts; hidden on desktop. */
.ki-scope .ki-second-charge .sc-figure--mobile { display: none; }
.ki-scope .ki-second-charge .sc-battery { height: auto; display: block; }

/* stacked callouts (mobile) */
.ki-scope .ki-second-charge .sc-callouts {
  width: 100%; max-width: 360px; text-align: center;
  display: flex; flex-direction: column; gap: 26px;
}
.ki-scope .ki-second-charge .sc-callout {
  padding-top: 24px; border-top: 1px solid #1d3340;
}
.ki-scope .ki-second-charge .sc-callout:first-child { border-top: 0; padding-top: 0; }
.ki-scope .ki-second-charge .co-pct {
  font-family: var(--ki-sans); font-weight: 300;
  font-size: clamp(44px, 13vw, 64px); line-height: 0.95; letter-spacing: -0.01em;
}
.ki-scope .ki-second-charge .co-strong {
  font-family: var(--ki-sans); font-size: 16px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: #E8EEF1; margin-top: 8px;
}
.ki-scope .ki-second-charge .co-sub {
  font-family: var(--ki-sans); font-size: 13px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: #7E909B; margin-top: 6px;
}

/* ── anchor ── */
.ki-scope .ki-second-charge .sc-anchor {
  margin: clamp(34px, 4.5vw, 52px) auto 0; text-align: center;
  font-family: var(--ki-sans); font-size: clamp(15px, 2vw, 19px); font-weight: 300;
  letter-spacing: 0.01em; color: #8294A0;
}
.ki-scope .ki-second-charge .sc-anchor strong { color: #5BD0EA; font-weight: 500; }

/* ════════ animation ════════
   Only active when the widget opted in (.sc-animate) and has been revealed
   (.go added by ki-widgets.js when scrolled into view). Without .sc-animate
   everything renders fully visible. */
.ki-scope .ki-second-charge.sc-animate .sc-charge { opacity: 0; }
.ki-scope .ki-second-charge.sc-animate .sc-lab { opacity: 0; }
.ki-scope .ki-second-charge.sc-animate .sc-callout { opacity: 0; }

.ki-scope .ki-second-charge.sc-animate.go .sc-charge {
  animation: kiScChargeIn 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) forwards 0.5s;
}
.ki-scope .ki-second-charge.sc-animate.go .sc-glow {
  animation: kiScPulse 4.5s ease-in-out infinite 1.7s;
}
/* SVG label groups (desktop) — fade in after the charge fills, bottom → top */
.ki-scope .ki-second-charge.sc-animate.go .sc-lab.l-wake { animation: kiScFade 0.8s ease forwards 0.9s; }
.ki-scope .ki-second-charge.sc-animate.go .sc-lab.l-ki   { animation: kiScFade 0.8s ease forwards 1.4s; }
.ki-scope .ki-second-charge.sc-animate.go .sc-lab.l-full { animation: kiScFade 0.8s ease forwards 1.65s; }
/* HTML callouts (mobile) — staggered fade */
.ki-scope .ki-second-charge.sc-animate.go .sc-callout:nth-child(1) { animation: kiScFade 0.8s ease forwards 1.3s; }
.ki-scope .ki-second-charge.sc-animate.go .sc-callout:nth-child(2) { animation: kiScFade 0.8s ease forwards 1.5s; }
.ki-scope .ki-second-charge.sc-animate.go .sc-callout:nth-child(n+3) { animation: kiScFade 0.8s ease forwards 1.7s; }

@keyframes kiScChargeIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes kiScFade { to { opacity: 1; } }
@keyframes kiScPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.66; } }

@media (prefers-reduced-motion: reduce) {
  .ki-scope .ki-second-charge.sc-animate .sc-charge,
  .ki-scope .ki-second-charge.sc-animate .sc-lab,
  .ki-scope .ki-second-charge.sc-animate .sc-callout { opacity: 1 !important; animation: none !important; transform: none !important; }
  .ki-scope .ki-second-charge .sc-glow { animation: none !important; }
}

/* ════════ responsive ════════ */
/* Below 900px the 2-column split gets tight — stack it: copy on top, the
   battery figure centered below. */
@media (max-width: 900px) {
  .ki-scope .ki-second-charge .sc-main { grid-template-columns: 1fr; gap: clamp(34px, 6vw, 56px); }
  .ki-scope .ki-second-charge .sc-battery-full { max-width: 660px; margin: 0 auto; }
}
@media (max-width: 760px) {
  /* swap the one-piece desktop figure for the battery + stacked callouts */
  .ki-scope .ki-second-charge .sc-figure--desktop { display: none; }
  .ki-scope .ki-second-charge .sc-figure--mobile {
    display: flex; flex-direction: column; align-items: center; gap: 34px;
  }
  .ki-scope .ki-second-charge .sc-battery-wrap { display: flex; justify-content: center; }
  .ki-scope .ki-second-charge .sc-battery { width: clamp(150px, 46vw, 200px); }
  /* Mobile-only callout order: reverse the stack so it reads bottom → top
     (70% → 30% → 100%). Desktop uses the separate SVG figure and is unaffected. */
  .ki-scope .ki-second-charge .sc-callouts { flex-direction: column-reverse; }
  /* Re-point the "no divider on the top item" rule at the new visual top
     (last DOM child) and restore the border on the old first child. */
  .ki-scope .ki-second-charge .sc-callout:first-child { border-top: 1px solid #1d3340; padding-top: 24px; }
  .ki-scope .ki-second-charge .sc-callout:last-child { border-top: 0; padding-top: 0; }
}