/* A natural engagement portrait carries the invitation; the neutral lower scrim keeps faces clear. */
.scene.ask .bg { --scrim: 12, 20, 22; will-change: transform; }
.scene.ask .bg img { filter: none; }
.scene.ask .bg::after { background: linear-gradient(to bottom, rgba(12,20,22,.03) 0%, rgba(12,20,22,.06) 28%, rgba(12,20,22,.35) 43%, rgba(12,20,22,.76) 63%, rgba(12,20,22,.93) 100%); }
.ask-glow { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0; background: radial-gradient(72% 26% at 50% 36%, rgba(255,220,174,.16), transparent 72%); }

/* Fireflies over the portrait: a layer between the plate and the type, transform/opacity only. */
.ask-flies { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: clip; }
.ask-flies .fly { position: absolute; left: 0; top: 0; width: 4px; height: 4px; opacity: 0; will-change: transform, opacity; }
.ask-flies .fly b {
  display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--cream);
  box-shadow: 0 0 2px 0 rgba(255, 255, 255, 0.9), 0 0 9px 3px rgba(244, 238, 227, 0.42);
}
.ask-flies .fly.gold b { background: var(--gold); box-shadow: 0 0 2px 0 rgba(255, 240, 200, 0.9), 0 0 9px 3px rgba(201, 164, 92, 0.5); }

/* Kicker with a short clay hairline that draws in. */
.ask-kicker { display: flex; align-items: center; gap: 10px; }
.ask-rule { display: block; width: 20px; height: var(--hairline); min-height: 1px; background: var(--clay); transform-origin: left center; }

/* Beat 1 — the lead: italic 22px, cream-60, wonky Fraunces. */
.ask-lead {
  font-family: var(--display); font-style: italic; font-weight: 400; font-size: 22px; line-height: 1.3;
  color: var(--cream-60); font-variation-settings: var(--wonk); margin: 0 0 8px; text-wrap: balance;
}
/* Beat 2 — the line: .title (opsz 96). */
.ask-line { font-size: clamp(25px,7vw,31px); line-height: 1.12; margin: 0 0 20px; max-width: 390px; }
/* Beat 3 — the invitation, with a separate hand-drawn underline beneath each emphasized word. */
.ask-xl { margin: 0; line-height: 1.13; text-wrap: balance; }
.ask-xl em { font-weight: 300; color: #efaa83; }
.ask-em-word { position: relative; display: inline-block; white-space: nowrap; }
.ask-underline { position: absolute; left: -.03em; bottom: -.18em; width: calc(100% + .06em); height: .24em; overflow: visible; pointer-events: none; }
.ask-underline path { fill: none; stroke: currentColor; stroke-width: 1.8px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ask .answers { margin-top: 28px; }
.ask-fg { padding-bottom: calc(var(--safe-bottom) + 48px + var(--kb)) !important; }
@media(max-height:700px) { .ask-lead { font-size: 17px; margin-bottom: 6px; } .ask-line { font-size: 22px; margin-bottom: 14px; } .ask .ask-xl { font-size: 34px; } .ask .answers { margin-top: 22px; } .ask-fg { padding-bottom: calc(var(--safe-bottom) + 28px + var(--kb)) !important; }
.ask-xl .sl, .ask-line .sw, .ask-lead .sw { will-change: transform; }

/* CTA + one clay ring pulse (clip-path grows a 14px spread out of the pill, then fades). */
.ask-cta { position: relative; }
.ask-ring {
  position: absolute; inset: -14px; border-radius: var(--r-pill); background: rgba(210, 104, 74, 0.5);
  opacity: 0; pointer-events: none; clip-path: inset(14px round 999px);
}

@media (prefers-reduced-motion: reduce) {
  .ask-ring, .ask-flies { display: none; }
  .ask-glow { opacity: 0.12; }
}