/* Email-capture modal + reopen chip. Body-level, above the HUD (z 100002).
   Aesthetic: athletic / festival energy — dark glass, per-segment accent colors,
   condensed display type, staggered reveal, springy micro-interactions. */
.ec-root { position: fixed; inset: 0; z-index: 100002;
  --ec-display: 'Saira Condensed', 'Oswald', ui-sans-serif, system-ui, sans-serif;
  font: 14px/1.4 system-ui, sans-serif; }
.ec-backdrop { position: absolute; inset: 0; background: rgba(6,8,12,.62);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

.ec-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(94vw, 520px); box-sizing: border-box; color: #eef1f6;
  background: linear-gradient(180deg, #191d25 0%, #0f1217 100%);
  border: 1px solid rgba(255,255,255,.09); border-radius: 18px; padding: 26px 26px 22px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.72); overflow: hidden;
  transform-origin: center center; will-change: transform, opacity; }
/* colorful festival strip up top (all four option accents); step 2 → the chosen accent */
.ec-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, #ff8a1e, #25c9dc, #37d191, #b98cff); }
.ec-step2::before, .ec-step-done::before {
  background: linear-gradient(90deg, var(--seg), color-mix(in srgb, var(--seg) 35%, transparent)); }

.ec-x { position: absolute; top: 12px; right: 14px; background: none; border: 0; color: rgba(255,255,255,.5);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 4px; transition: color .15s, transform .15s; }
.ec-x:hover { color: #fff; transform: rotate(90deg); }

.ec-kicker { font-family: var(--ec-display); font-weight: 700; font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: #f5af1b; margin: 0 0 7px; }
.ec-h { font-family: var(--ec-display); font-weight: 700; font-size: 28px; line-height: 1.03;
  letter-spacing: .004em; margin: 0 0 18px; color: #fff; }
.ec-h2 { margin: 0 0 6px; }
.ec-sub { margin: 0 0 16px; opacity: .72; font-size: 14px; line-height: 1.42; }
/* optional per-race offer/incentive line (manifest.capture.segments[id].offer) —
   accent-tinted pill, mirrors .ec-note; colored text on the dark card (never on fill) */
.ec-offer { margin: -4px 0 15px; padding: 8px 12px; border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--seg) 40%, transparent);
  background: color-mix(in srgb, var(--seg) 12%, transparent);
  color: color-mix(in srgb, var(--seg) 78%, #fff);
  font-family: var(--ec-display); font-weight: 700; font-size: 12.5px; letter-spacing: .01em; }

/* narration caption (demo showcase), inside the modal above the backdrop */
.ec-note { margin: 0 0 14px; padding: 9px 12px; border-radius: 9px; border: 1px solid rgba(245,175,27,.25);
  background: rgba(245,175,27,.12); color: #ffd98a; font-size: 12.5px; font-weight: 600; }

/* ---- step 1: 2×2 icon grid (1 col on narrow) ---- */
.ec-segs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .ec-segs { grid-template-columns: 1fr; } }
.ec-seg { display: flex; align-items: center; gap: 13px; padding: 15px 15px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: #eef1f6;
  font: inherit; text-align: left; cursor: pointer; position: relative; overflow: hidden;
  transition: transform .16s, border-color .16s, background .16s, box-shadow .16s;
  animation: ec-pop .42s cubic-bezier(.2,.9,.3,1) both; }
.ec-seg:hover, .ec-seg:focus-visible { transform: translateY(-3px); border-color: var(--seg); outline: none;
  background: color-mix(in srgb, var(--seg) 13%, rgba(255,255,255,.03));
  box-shadow: 0 0 0 1px var(--seg), 0 16px 32px -16px var(--seg); }
.ec-ic { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px;
  color: var(--seg); background: color-mix(in srgb, var(--seg) 16%, transparent); transition: transform .18s; }
.ec-ic svg { width: 24px; height: 24px; }
.ec-seg:hover .ec-ic, .ec-seg:focus-visible .ec-ic { transform: scale(1.12) rotate(-4deg); }
.ec-lb { flex: 1 1 auto; font-family: var(--ec-display); font-weight: 700; font-size: 17px; letter-spacing: .012em; }
.ec-go { flex: none; color: var(--seg); font-weight: 700; opacity: 0; transform: translateX(-6px);
  transition: opacity .16s, transform .16s; }
.ec-seg:hover .ec-go, .ec-seg:focus-visible .ec-go { opacity: 1; transform: translateX(0); }

/* ---- step 2: badge + form ---- */
.ec-badge { width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; margin: 2px 0 15px;
  color: var(--seg); background: color-mix(in srgb, var(--seg) 18%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--seg) 42%, transparent), 0 12px 34px -12px var(--seg);
  animation: ec-badge-in .5s cubic-bezier(.2,1.35,.4,1) both; }
.ec-badge svg { width: 32px; height: 32px; }
.ec-badge-done { color: #0b0d11; background: var(--seg); box-shadow: 0 12px 34px -10px var(--seg); }

.ec-form { display: grid; gap: 12px; }
.ec-field { position: relative; }
.ec-email { width: 100%; box-sizing: border-box; padding: 14px 16px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16); background: #0d1016; color: #fff; font: 15px system-ui, sans-serif;
  transition: border-color .15s, box-shadow .15s; }
.ec-email::placeholder { color: rgba(255,255,255,.35); }
.ec-email:focus { outline: none; border-color: var(--seg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--seg) 28%, transparent); }
.ec-turnstile:empty { display: none; }
.ec-submit { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
  padding: 14px 18px; border: 0; border-radius: 12px; cursor: pointer; color: #0b0d11;
  font-family: var(--ec-display); font-weight: 700; font-size: 18px; letter-spacing: .02em;
  background: linear-gradient(135deg, var(--seg), color-mix(in srgb, var(--seg) 72%, #ffffff));
  box-shadow: 0 12px 28px -12px var(--seg); transition: transform .14s, box-shadow .14s, filter .14s; }
.ec-submit:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 18px 36px -14px var(--seg); }
.ec-submit:active { transform: translateY(0); }
.ec-submit:disabled { opacity: .55; cursor: default; transform: none; filter: none; }
.ec-arrow { transition: transform .16s; }
.ec-submit:hover:not(:disabled) .ec-arrow { transform: translateX(5px); }
.ec-err { color: #ff8a8a; font-size: 13px; }
.ec-fine { margin: 1px 0 0; font-size: 11px; opacity: .48; text-align: center; }

/* ---- reopen chip (prominent — the modal shrinks into it on close) ---- */
.ec-chip { position: fixed; right: 18px; bottom: 18px; z-index: 100001; display: inline-flex; align-items: center;
  gap: 7px; padding: 11px 17px; border-radius: 999px; border: 1px solid rgba(245,175,27,.55);
  background: linear-gradient(180deg, rgba(245,175,27,.2), rgba(245,175,27,.1));
  color: #ffe0a3; font: 700 14px var(--ec-display, ui-sans-serif, system-ui); letter-spacing: .03em;
  cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 8px 22px -6px rgba(245,175,27,.4), 0 4px 12px rgba(0,0,0,.35);
  transition: transform .15s, box-shadow .15s, background .15s, border-color .15s; }
.ec-chip:hover { transform: translateY(-2px); border-color: rgba(245,175,27,.85);
  background: linear-gradient(180deg, rgba(245,175,27,.32), rgba(245,175,27,.16));
  box-shadow: 0 12px 28px -6px rgba(245,175,27,.6); }

@keyframes ec-pop { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ec-badge-in { 0% { opacity: 0; transform: scale(.5); } 60% { transform: scale(1.14); } 100% { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .ec-card, .ec-backdrop, .ec-seg, .ec-badge { animation: none; }
  .ec-x, .ec-ic, .ec-go, .ec-submit, .ec-arrow, .ec-chip { transition: none; }
}