/* pbgai-talk.css — hero talk control (ORDER-028 art redo, 2026-07-31)
   The SECOND door. The corner widget (widget.pbgai.net) is the first and stays
   exactly as it is: casual visitors use the corner, anyone landing straight on
   this page uses the hero. Both feed the same lead path — this is deliberately
   NOT a de-duplication.
   Rules here are new; nothing in pbgai.css or pbgai-media.css is restated, so
   there is one source for each rule. Fold into pbgai.css whenever Grok does a
   craft pass — just don't leave a copy in both. */

/* Two hero figures carry the control: the home split (.hero-media) and the
   guide (.guide-hero-photo). Same control, same anchor rules, one definition. */
.hero-media,
.guide-hero-photo { position: relative; }

.hero-talk {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem 1.1rem .7rem .8rem;
  text-decoration: none;
  color: var(--cream);
  /* Mini-seal: same light source (32% 26%) and the same inset cream highlight /
     inset bottom darkening as the talk-page seal, on a pill instead of a 148px
     orb. Photo real estate, not a stage. */
  background: radial-gradient(circle at 32% 26%,
    var(--green-mid) 0%, var(--green) 52%, var(--green-lo, #142B21) 100%);
  border: 1px solid var(--green-lo, #142B21);
  border-radius: 999px;
  box-shadow:
    0 12px 26px rgba(27, 58, 45, .28),
    0 3px 8px rgba(33, 30, 27, .20),
    inset 0 1px 1px rgba(245, 241, 232, .22),
    inset 0 -8px 14px rgba(10, 20, 15, .28);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background .25s var(--ease), border-color .2s var(--ease);
}

.hero-talk:hover,
.hero-talk:focus-visible {
  background: radial-gradient(circle at 32% 26%,
    var(--green-mid) 0%, var(--green-mid) 46%, var(--green) 100%);
  border-color: var(--brass);
  transform: translateY(-2px);
  box-shadow:
    0 18px 38px rgba(27, 58, 45, .34),
    0 4px 10px rgba(33, 30, 27, .22),
    inset 0 1px 1px rgba(245, 241, 232, .26),
    inset 0 -8px 14px rgba(10, 20, 15, .24);
}

.hero-talk:active { transform: translateY(0) scale(.985); }

.hero-talk:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

.hero-talk__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  border-radius: 50%;
  /* Brass disc with the seal's specular: a fixed highlight at the same angle as
     the pill's radial, so the two read as one material. */
  background: radial-gradient(circle at 33% 25%,
    #C9A868 0%, var(--brass) 55%, #8A6E3E 100%);
  color: var(--green-deep);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .45),
    inset 0 -3px 6px rgba(10, 20, 15, .28);
}

.hero-talk__icon svg { width: 1.1rem; height: 1.1rem; display: block; }

/* Breathing ring — signals "live", the way talk.pbgai.net's call control does. */
.hero-talk__ring {
  position: absolute;
  inset: -.35rem;
  border-radius: 50%;
  border: 2px solid var(--brass);
  opacity: .55;
  animation: pbgai-talk-pulse 2.4s var(--ease) infinite;
}

@keyframes pbgai-talk-pulse {
  0%   { transform: scale(.85); opacity: .55; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}

.hero-talk__text { display: flex; flex-direction: column; line-height: 1.15; }

.hero-talk__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .01em;
}

.hero-talk__sub {
  font-family: var(--font-data);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brass);
  margin-top: .15rem;
}

/* Under the image on narrow screens: a full-width control, never a chip floating
   over someone's face on a 390px phone. */
@media (max-width: 900px) {
  .hero-talk {
    position: static;
    display: flex;
    width: 100%;
    margin-top: .85rem;
    justify-content: center;
    border-radius: var(--radius);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-talk { transition: none; }
  .hero-talk:hover, .hero-talk:focus-visible { transform: none; }
  .hero-talk__ring { animation: none; opacity: .4; }
}

@media print { .hero-talk { display: none; } }