/* Hallmark · ghl_prompt motion scenes. Default = finished state; `.motion-ready` lets GSAP start
 * from the gray "sameness" state (design.md motif: gray = everyone else, color = your page). */
.gp {
  /* Illustrative page palettes for the style choices and the scene (not brand colors). */
  --gp-style-bold-a: oklch(28% 0.04 260);
  --gp-style-bold-b: oklch(72% 0.17 60);
  --gp-style-clean-a: oklch(98% 0.003 255);
  --gp-style-clean-b: oklch(63% 0.16 253);
  --gp-style-warm-a: oklch(93% 0.04 70);
  --gp-style-warm-b: oklch(60% 0.13 40);
  --gp-style-premium-a: oklch(22% 0.01 80);
  --gp-style-premium-b: oklch(78% 0.08 85);
}

/* ---------- builder scene (landing hero) ---------- */
.gp-scene { position: relative; margin: 0; display: grid; gap: var(--gp-space-md); }
.gp-scene__prompt { padding: var(--gp-space-md); border-radius: var(--gp-radius-md); background: var(--color-ink); color: var(--color-paper); }
.gp-scene__label { margin: 0 0 var(--gp-space-xs); color: var(--color-brand-border); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.gp-scene__text { margin: 0; min-height: 4.65em; font: 400 0.875rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
.gp-scene__text.is-typing::after { content: ""; display: inline-block; width: 0.5em; height: 1em; margin-left: 2px; vertical-align: -0.15em; background: var(--color-brand-border); animation: gp-blink 900ms steps(1) infinite; }
@keyframes gp-blink { 50% { opacity: 0; } }

.gp-scene__page {
  position: relative; display: grid; gap: var(--gp-space-sm); padding: var(--gp-space-md);
  border-radius: var(--gp-radius-lg); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-rule), var(--gp-shadow);
}
.gp-block { display: grid; gap: var(--gp-space-xs); padding: var(--gp-space-md); border-radius: var(--gp-radius-sm); background: var(--color-paper); transition: background-color 500ms var(--gp-ease-out); }
.gp-block__headline { font-family: var(--font-serif-display); font-weight: 600; font-size: 1.125rem; line-height: 1.2; color: var(--gp-style-bold-a); transition: color 500ms var(--gp-ease-out); }
.gp-block__line { display: block; height: 0.5rem; width: 85%; border-radius: 4px; background: var(--gp-gray-block); }
.gp-block__line--short { width: 55%; }
.gp-block__tag { justify-self: start; padding: 0.125rem var(--gp-space-xs); border-radius: 999px; background: var(--gp-style-bold-b); color: var(--gp-style-bold-a); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; transition: background-color 500ms var(--gp-ease-out), color 500ms var(--gp-ease-out); }
.gp-block__cta { justify-self: start; padding: var(--gp-space-xs) var(--gp-space-md); border-radius: var(--gp-radius-sm); background: var(--gp-style-bold-b); color: var(--gp-style-bold-a); font-size: 0.8125rem; font-weight: 700; transition: background-color 500ms var(--gp-ease-out), color 500ms var(--gp-ease-out); }
.gp-block--hero { background: var(--color-brand-soft); }
.gp-block--proof { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gp-block__review { display: block; height: 2.25rem; border-radius: var(--gp-radius-sm); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-rule); }
.gp-block--form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; }
.gp-block__input { display: block; height: 2rem; border-radius: var(--gp-radius-sm); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-rule-strong); }
@media (max-width: 29.99rem) {
  .gp-block--form { grid-template-columns: minmax(0, 1fr); }
  .gp-block--offer { display: none; }
}
.gp-scene__toast {
  position: absolute; right: var(--gp-space-md); bottom: calc(-1 * var(--gp-space-md)); margin: 0;
  display: inline-flex; gap: var(--gp-space-xs); align-items: center; padding: var(--gp-space-xs) var(--gp-space-md);
  border-radius: 999px; background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-rule), var(--gp-shadow);
  font-size: var(--gp-text-sm); font-weight: 600; white-space: nowrap;
}
.gp-scene__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-create); }
.gp-scene__caption { margin-top: var(--gp-space-sm); color: var(--color-muted); font-size: 0.75rem; text-align: right; }

/* The "sameness" state GSAP starts from: every block gray, no voice, no action color. */
.motion-ready .gp-scene.is-gray .gp-block { background: var(--gp-gray-block); }
.motion-ready .gp-scene.is-gray .gp-block__headline { color: var(--color-muted); }
.motion-ready .gp-scene.is-gray .gp-block__cta,
.motion-ready .gp-scene.is-gray .gp-block__tag { background: var(--gp-gray-block-strong); color: var(--color-muted); }
.motion-ready .gp-scene .gp-block.is-lit { background: var(--color-paper); }
.motion-ready .gp-scene .gp-block--hero.is-lit { background: var(--color-brand-soft); }
.motion-ready .gp-scene .gp-block.is-lit .gp-block__headline { color: var(--gp-style-bold-a); }
.motion-ready .gp-scene .gp-block.is-lit .gp-block__cta,
.motion-ready .gp-scene .gp-block.is-lit .gp-block__tag { background: var(--gp-style-bold-b); color: var(--gp-style-bold-a); }

/* ---------- generating scene ---------- */
.gp-generating { padding-block: var(--gp-space-xl); text-align: center; }
.gp-generating[hidden] { display: none; }
.gp-gen-stage { position: relative; display: grid; place-items: center; min-height: 15rem; margin-bottom: var(--gp-space-lg); }
.gp-gen-card { position: relative; z-index: 1; display: grid; gap: var(--gp-space-sm); width: min(100%, 20rem); padding: var(--gp-space-lg); border-radius: var(--gp-radius-lg); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-rule), var(--gp-shadow); text-align: left; }
.gp-gen-card__label { margin: 0; color: var(--color-accent); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.gp-gen-line { display: block; height: 0.625rem; border-radius: 4px; background: linear-gradient(90deg, var(--color-rule) 0%, var(--color-brand-soft) 50%, var(--color-rule) 100%); background-size: 200% 100%; animation: gp-shimmer 1.4s linear infinite; }
.gp-gen-line:nth-child(odd) { width: 80%; }
@keyframes gp-shimmer { to { background-position: -200% 0; } }
.gp-gen-chips { position: absolute; inset: 0; pointer-events: none; }
.gp-gen-chip { position: absolute; max-width: 10rem; padding: 0.25rem var(--gp-space-sm); border-radius: 999px; background: var(--color-action-soft); color: var(--color-ink-2); font-size: 0.75rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; }
.gp-gen-status { margin: 0; font-size: var(--gp-text-lg); font-weight: 600; }
.gp-gen-tip { margin: var(--gp-space-sm) auto 0; max-width: 28rem; color: var(--color-muted); font-size: var(--gp-text-sm); min-height: 2.6em; }
.gp-gen-failed { margin-top: var(--gp-space-lg); }
.gp-gen-failed[hidden] { display: none; }

/* ---------- traffic scene (result page pitch) ---------- */
.gp-flowmap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 1.1fr); gap: var(--gp-space-sm); align-items: center; margin: 0; }
.gp-flowmap__ads { display: grid; gap: var(--gp-space-sm); }
.gp-ad { display: grid; gap: 0.375rem; padding: var(--gp-space-sm); border-radius: var(--gp-radius-sm); background: var(--color-paper); box-shadow: inset 0 0 0 1px var(--color-rule); }
.gp-ad__net { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-ink-2); }
.gp-ad--fb { background: var(--color-facebook-soft); }
.gp-ad--g { background: var(--color-google-soft); }
.gp-ad .gp-block__line { width: 90%; height: 0.375rem; }
.gp-flowmap__path { display: grid; gap: var(--gp-space-sm); justify-items: center; }
.gp-flowmap__path i { display: block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-action); }
.gp-flowmap__page { position: relative; display: grid; gap: var(--gp-space-xs); padding: var(--gp-space-md); border-radius: var(--gp-radius-md); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-rule-strong); }
.gp-flowmap__page .gp-block__cta { background: var(--color-action); color: var(--color-action-ink); }
.gp-ping { position: absolute; top: calc(-1 * var(--gp-space-xs)); right: calc(-1 * var(--gp-space-xs)); display: inline-flex; gap: 0.375rem; align-items: center; padding: 0.25rem var(--gp-space-sm); border-radius: 999px; background: var(--color-create-soft); color: var(--color-create-ink); font-size: 0.75rem; font-weight: 700; white-space: nowrap; }