/* =========================================================
   ZAP SECTION — lifeline
   Scroll-pinned scene with three explicit horizontal bands:
   copy on top, full-bleed lifeline in the middle, contact chip
   on the bottom. A green glow blooms inside the section when
   the zap lands and persists as long as the section is on screen.
   ========================================================= */
.zap-section {
  --online:      #3DDC84;
  --online-deep: #16A34A;
  --online-glow: rgba(61, 220, 132, .55);
  --online-soft: rgba(61, 220, 132, .14);
  --line-dim:    rgba(255, 255, 255, .22);

  position: relative;
  height: 600vh;        /* 5 viewports of runway — real breathing room */
  margin: 0;
}

.zap-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  --p: 0;

  display: grid;
  grid-template-rows: 1fr auto 1fr;
  align-items: center;
  justify-items: center;
  padding: 96px 0;
  box-sizing: border-box;
}

/* ---------- Copy band (top) ---------- */
.zap-copy {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1240px;
  padding: 0 24px;
  text-align: center;
  align-self: end;
  margin-bottom: 12px;

  /* Scene 1a: copy in (0.00 → 0.06), then a real hold */
  --copy: clamp(0, calc(var(--p) * 18), 1);
  opacity: var(--copy);
  filter: blur(calc((1 - var(--copy)) * 8px));
  transform: translateY(calc((1 - var(--copy)) * 14px));
}
.zap-copy .rn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 22px;
}
.zap-copy .rn .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-3);
  transition: background .6s var(--ease), box-shadow .6s var(--ease);
}
.zap-title {
  margin: 0 0 22px;
  font-size: clamp(40px, 7vw, 96px);
  letter-spacing: -0.045em;
  font-weight: 800;
  line-height: 1.04;          /* room for descenders (g, q, y) */
  padding-bottom: .08em;      /* gradient-clip safety for descenders */
  background: linear-gradient(180deg, #fff 0%, #9a9a9a 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.zap-lede {
  margin: 0 auto;
  max-width: 52ch;
  color: var(--text-3);
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.6;
}

/* ---------- Lifeline band (middle, full-bleed) ---------- */
.zap-line-band {
  position: relative;
  z-index: 1;
  width: 100vw;
  height: 220px;
  display: grid;
  align-items: center;
  justify-self: stretch;
}
.zap-lifeline {
  display: block;
  width: 100vw;
  height: 220px;
  pointer-events: none;
  /* Scene 1b: wave appears (0.16 → 0.22) — copy has had time to breathe */
  opacity: clamp(0, calc((var(--p) - .16) * 17), 1);
}
.zap-lifeline path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition:
    stroke .9s var(--ease),
    stroke-width .6s var(--ease),
    filter .9s var(--ease),
    opacity .9s var(--ease);
}
#zapLifelinePath {
  stroke: var(--line-dim);
  stroke-width: 1.5;
}
#zapLifelineGlow {
  stroke: transparent;
  stroke-width: 6;
  opacity: 0;
  filter: blur(8px);
}

/* ---------- Contact chip ---------- */
.zap-contact {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 22px 10px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 24px 50px -22px rgba(0,0,0,.7);
  transition:
    background .6s var(--ease),
    border-color .6s var(--ease),
    box-shadow .6s var(--ease);
}
.zc-avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
  flex: 0 0 auto;
  position: relative;
  transition: box-shadow .8s var(--ease), border-color .8s var(--ease);
}
.zc-avatar img {
  width: 36px;
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: saturate(.25) brightness(.55) contrast(.95);
  transition: filter .9s var(--ease);
  pointer-events: none;
}
.zc-meta {
  display: grid; gap: 2px;
  text-align: left;
}
.zc-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
}
.zc-status {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: lowercase;
  color: var(--text-4);
  transition: color .6s var(--ease);
}
.zc-presence {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--text-4);
  box-shadow: 0 0 0 2px rgba(255,255,255,.04);
  margin-left: 6px;
  flex: 0 0 auto;
  transition: background .6s var(--ease), box-shadow .6s var(--ease);
}

/* Action stack — chip + standalone Send Zap button */
.zap-actions {
  position: relative;
  z-index: 2;
  align-self: start;
  margin-top: 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;

  --card: clamp(0, calc((var(--p) - .32) * 17), 1);
  opacity: var(--card);
  transform: translateY(calc((1 - var(--card)) * 14px));
}

.zap-fire {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 18px 40px -18px rgba(0,0,0,.7);
  transition:
    background .25s var(--ease),
    border-color .25s var(--ease),
    color .25s var(--ease),
    transform .15s var(--ease),
    box-shadow .3s var(--ease);
}
.zap-fire svg {
  width: 16px; height: 16px;
  color: var(--text);
  transition: transform .2s var(--ease);
}
.zap-fire:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.2);
}
.zap-fire:hover svg {
  transform: scale(1.08) rotate(-4deg);
}
.zap-fire:active { transform: scale(.97); }
.zap-fire:focus-visible {
  outline: 2px solid rgba(255,255,255,.4);
  outline-offset: 3px;
}

/* ---------- Strike flash ---------- */
.zap-strike {
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
  opacity: 0;
  z-index: 4;
  color: #fff;
  mix-blend-mode: screen;
}
.zap-strike svg {
  width: min(36vmin, 420px);
  height: auto;
  filter:
    drop-shadow(0 0 40px #fff)
    drop-shadow(0 0 120px var(--online))
    drop-shadow(0 0 220px var(--online-deep));
}
.zap-section.is-striking .zap-strike {
  animation: zapStrikeAnim .65s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes zapStrikeAnim {
  0%   { opacity: 0; transform: scale(.35) rotate(-6deg); filter: blur(24px); }
  18%  { opacity: 1; transform: scale(1.12) rotate(0deg); filter: blur(0); }
  55%  { opacity: 1; transform: scale(1) rotate(2deg); }
  100% { opacity: 0; transform: scale(.96) rotate(0deg); filter: blur(10px); }
}
.zap-section.is-striking::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.18), transparent 70%);
  pointer-events: none;
  z-index: 3;
  animation: zapStrikeWash .55s var(--ease) forwards;
}
@keyframes zapStrikeWash {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------- Contained green ambient (inside the section) ---------- */
/* Lives inside the sticky stage so it scrolls out naturally with the
   section. A soft vertical mask kills the hard top/bottom edges so the
   green dissolves into transparency rather than clipping at a clean line.
   `--glow-bloom` (registered, so it animates) handles the initial bloom;
   `--p` handles the scroll-end fade — multiplied together for opacity. */
@property --glow-bloom {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
.zap-glow {
  position: absolute;
  inset: -10% 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(55% 42% at 50% 50%, rgba(61,220,132,.13), transparent 72%),
    radial-gradient(90% 70% at 50% 100%, rgba(61,220,132,.06), transparent 72%),
    radial-gradient(90% 70% at 50% 0%,   rgba(22,163,74,.04),  transparent 72%);
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0%, #000 14%, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg,
    transparent 0%, #000 14%, #000 78%, transparent 100%);
  opacity: calc(var(--glow-bloom)
              * clamp(0, calc((1 - var(--p)) * 10), 1));
  transition: --glow-bloom 1.4s var(--ease);
  mix-blend-mode: screen;
  will-change: opacity;
}
.zap-section.is-online .zap-glow { --glow-bloom: 1; }

/* ---------- Online state (lifeline + chip + dot) ---------- */
.zap-section.is-online #zapLifelinePath {
  stroke: var(--online);
  stroke-width: 1.75;
  filter: drop-shadow(0 0 14px var(--online-glow));
}
.zap-section.is-online #zapLifelineGlow {
  stroke: var(--online);
  opacity: .55;
}
.zap-section.is-online .zap-copy .rn .dot {
  background: var(--online);
  box-shadow: 0 0 12px var(--online);
}
.zap-section.is-online .zc-avatar {
  border-color: rgba(255,255,255,.12);
}
.zap-section.is-online .zc-avatar img {
  filter: saturate(1) brightness(1) contrast(1);
}
.zap-section.is-online .zc-status { color: var(--online); }
.zap-section.is-online .zc-presence {
  background: var(--online);
  box-shadow: 0 0 0 2px rgba(61,220,132,.22), 0 0 12px var(--online);
}

/* ---------- Particles canvas (legacy global overlay) ---------- */
#zapCanvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .zap-section { height: 240vh; }
  .zap-stage   { padding: 72px 0; }
  .zap-line-band, .zap-lifeline { height: 160px; }
  .zap-title   { font-size: clamp(36px, 11vw, 64px); }
}

@media (prefers-reduced-motion: reduce) {
  .zap-section { height: auto; }
  .zap-stage {
    position: relative; height: auto;
    display: block; padding: 100px 0;
  }
  .zap-copy, .zap-contact {
    opacity: 1 !important; transform: none !important; filter: none !important;
    margin: 28px auto;
  }
  .zap-line-band, .zap-lifeline { width: 100%; height: 180px; }
}