/* ============================================================
   RestartME, Get Involved
   ============================================================ */

.involved-hero {
  background: radial-gradient(120% 80% at 88% 0%, color-mix(in srgb, var(--sky-soft) 70%, transparent) 0%, transparent 52%);
}
/* Hero grid: head + body stack in the left column, the cycle fills the right.
   On mobile the cycle slots between the heading and the paragraph. */
.involved-hero__grid {
  display: grid; align-items: center;
  column-gap: clamp(1.5rem, 4vw, 4rem); row-gap: clamp(0.75rem, 2vw, 1.25rem);
  grid-template-columns: 1.1fr 0.9fr;
  grid-template-areas: "head cycle" "body cycle";
}
.involved-hero__head { grid-area: head; }
.involved-hero__body { grid-area: body; }
.involved-hero .lead { max-width: 46ch; margin-top: 0; }

/* Recovery-cycle diagram (replaces the hero image) */
.involved-hero__cycle { grid-area: cycle; margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); }
.cyc { width: 100%; max-width: 480px; height: auto; display: block; }
.involved-hero__cyclecap { font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--sky-ink); font-weight: 600; }

.cyc-ring { stroke: var(--hairline-accent); stroke-width: 2; stroke-dasharray: 943; stroke-dashoffset: 943; }
.cyc-spoke { stroke: var(--hairline-accent); stroke-width: 1.4; stroke-dasharray: 70; stroke-dashoffset: 70; }
.cyc-chev { stroke: var(--sky); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.cyc-node-disc { fill: var(--warm-white); stroke: var(--sky); stroke-width: 1.6; filter: drop-shadow(0 4px 10px rgba(46,134,192,0.18)); }
.cyc-glyph { stroke: var(--sky-deep); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.cyc-label { fill: var(--ink); font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: 0.01em; opacity: 0; }
.cyc-comet-h { fill: var(--sky-deep); filter: drop-shadow(0 0 5px rgba(46,134,192,0.75)); }
.cyc-comet-t { fill: var(--sky); }
.cyc-core { filter: drop-shadow(0 8px 18px rgba(30,95,134,0.35)); }
.cyc-core-logo { filter: brightness(0) invert(1); }
.cyc-core-halo { fill: var(--sky); opacity: 0.16; }

/* Nodes pop, ring + spokes draw in, labels + chevrons fade — all on reveal */
.cyc-node { transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(0.4); }
.cyc-orbit { opacity: 0; transform-box: view-box; transform-origin: 270px 238px; }

.involved-hero__cycle.is-visible .cyc-ring { animation: cycDraw 1.5s var(--ease-out) 0.1s forwards; }
.involved-hero__cycle.is-visible .cyc-spoke { animation: cycDraw 0.7s var(--ease-out) 0.6s forwards; }
.involved-hero__cycle.is-visible .cyc-node { animation: cycPop 0.6s var(--ease-out) calc(0.7s + var(--i) * 0.14s) forwards; }
.involved-hero__cycle.is-visible .cyc-label { animation: cycFade 0.6s ease calc(0.95s + var(--i) * 0.14s) forwards; }
.involved-hero__cycle.is-visible .cyc-chev { animation: cycChev 0.6s ease 1.35s forwards; }
.involved-hero__cycle.is-visible .cyc-orbit { animation: cycReveal 0.5s ease 1.4s forwards, cycOrbit 12s linear 1.4s infinite; }
.involved-hero__cycle.is-visible .cyc-core-halo { animation: cycHalo 3.6s var(--ease-in-out) infinite; }

@keyframes cycDraw { to { stroke-dashoffset: 0; } }
@keyframes cycPop { to { opacity: 1; transform: scale(1); } }
@keyframes cycFade { to { opacity: 1; } }
@keyframes cycChev { to { opacity: 0.5; } }
@keyframes cycReveal { to { opacity: 1; } }
@keyframes cycOrbit { to { transform: rotate(360deg); } }
@keyframes cycHalo { 0%, 100% { transform: scale(1); opacity: 0.16; } 50% { transform: scale(1.14); opacity: 0.05; } }

@media (prefers-reduced-motion: reduce) {
  .cyc-ring, .cyc-spoke { stroke-dashoffset: 0; }
  .cyc-node { opacity: 1; transform: none; }
  .cyc-label { opacity: 1; }
  .cyc-chev { opacity: 0.5; }
  .cyc-orbit { opacity: 1; animation: none; }
  .cyc-core-halo { animation: none; }
}

.actions__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter); }
.action {
  padding: clamp(2rem, 3vw, 3rem);
  background: var(--bg-elevated);
  border: 1px solid var(--divider);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
  display: flex; flex-direction: column; gap: var(--space-md);
}
.action:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.action__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--sky) 16%, transparent); color: var(--accent);
  margin-bottom: var(--space-xs);
}
.action__icon svg { width: 28px; height: 28px; }
.action h3 { font-size: var(--text-xl); }
.action p { flex: 1; }
.action .link-arrow { margin-top: var(--space-sm); }

.involved-impact__stats { display: flex; flex-direction: column; gap: var(--space-xl); border-left: 1px solid var(--hairline-accent); padding-left: var(--space-2xl); }
.involved-impact__stats .stat__num { color: var(--sky-deep); }

@media (max-width: 900px) {
  /* Stack: heading → cycle → paragraph + buttons */
  .involved-hero__grid { grid-template-columns: 1fr; grid-template-areas: "head" "cycle" "body"; gap: clamp(1.25rem, 4vw, 2rem); }
  .involved-hero__body { margin-top: 0.5rem; }
  .cyc { max-width: 420px; }
}
@media (max-width: 768px) {
  .actions__grid { grid-template-columns: 1fr; }
  .involved-impact__stats { border-left: none; padding-left: 0; border-top: 1px solid var(--hairline-accent); padding-top: var(--space-xl); }
}