/* Pet Buddy — HERO SHOWROOM styles. Pairs with hero-stage.js.
 *
 * The stage is an absolutely-positioned takeover INSIDE section.hero. It sits
 * above the spiral canvas (z 0) and the veil (z 1) but below the site header,
 * so the nav stays usable while the concierge is presenting.
 *
 * Everything reads from the page's existing tokens (--accent, --panel, …) so a
 * theme change carries here for free.
 */

/* The hero needs a positioning context and room to hold a full panel. It is
   already position:relative with min-height:92vh; this only guards it. */
section.hero { position: relative; }

/* While the showroom is up, the hero's own text column steps aside. It is also
   marked inert from JS, so this is purely the visual half. */
.hero-inner { transition: opacity .34s ease, transform .34s ease; }
.hero.pc-takeover .hero-inner { opacity: 0; transform: scale(.985); pointer-events: none; }

#pcStage {
  /* FIXED, not absolute. The hero is min-height:92vh PLUS padding, so an
     absolutely-positioned inset:0 panel inherited the hero's 823px and hung
     ~100px below the fold — content at the bottom needed a PAGE scroll rather
     than scrolling inside the panel. Fixed makes the takeover exactly the
     viewport, whatever the hero grows to, and it also renders correctly if the
     tool fires while the visitor is scrolled far down the page, before the
     smooth scroll-to-top has finished.
     The hero has no transform/filter/will-change, so nothing traps this in a
     stacking context, and z-index 8 keeps it under the site header (z-50) —
     the nav stays usable while she is presenting. */
  position: fixed;
  inset: 0;
  z-index: 8;
  display: none;
  /* The site header is a sticky pill: top:16px + a ~64px bar. Everything in
     here — including the close button — has to start below it, or the nav
     (z-50) swallows the clicks. */
  --pcs-top: 104px;
  /* The panel itself does NOT scroll — .pcs-scroll inside it does. That keeps
     the close button (a direct child) anchored while a tall beat scrolls. */
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(99, 102, 241, 0.16), transparent 62%),
    linear-gradient(180deg, rgba(6, 9, 18, 0.93), rgba(6, 9, 18, 0.985));
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
#pcStage[hidden] { display: none; }
#pcStage.on { display: block; animation: pcsIn .42s cubic-bezier(.2, .7, .2, 1); }
#pcStage .pcs-scroll {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  padding: var(--pcs-top) clamp(14px, 4vw, 40px) clamp(20px, 4vh, 40px);
}

@keyframes pcsIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pcsUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* The close affordance: 44px, always reachable, never under the site header. */
#pcStage .pcs-close {
  position: absolute;
  top: calc(var(--pcs-top) - 16px); right: clamp(12px, 2.2vw, 28px);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; line-height: 1;
  color: var(--text);
  background: rgba(8, 12, 22, 0.72);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  cursor: pointer;
  z-index: 3;
  transition: background .2s ease, transform .25s ease;
}
#pcStage .pcs-close:hover { background: var(--accent); transform: rotate(90deg); }
#pcStage .pcs-close:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; }

/* ── the "she brought this up for you" ribbon ─────────────────────────────── */
#pcStage .pcs-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 14px;
}
#pcStage .pcs-eyebrow::before { content: "✦"; font-size: 13px; }

#pcStage h3 {
  font-family: 'Bebas Neue', 'Inter', sans-serif;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: .01em;
  margin: 0 0 10px;
  color: var(--text);
}
#pcStage .pcs-lead { color: var(--text-soft); font-size: clamp(14px, 1.5vw, 17px); line-height: 1.6; max-width: 68ch; margin: 0 0 22px; }
#pcStage .pcs-lang { display: block; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
#pcStage .pcs-price { font-size: clamp(1.1rem, 2vw, 1.6rem); font-weight: 800; color: var(--accent-soft); margin: 0 0 18px; }

/* ── layouts ──────────────────────────────────────────────────────────────── */
#pcStage .pcs-full { width: 100%; max-width: 1100px; margin: auto; text-align: center; }
#pcStage .pcs-full .pcs-lead { margin-left: auto; margin-right: auto; }
#pcStage .pcs-one { max-width: 820px; text-align: left; }
#pcStage .pcs-one .pcs-lead { margin-left: 0; }

/* a character: video beside the copy */
#pcStage .pcs-split {
  width: 100%; max-width: 1000px; margin: auto;
  display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 44px); align-items: center;
}
#pcStage .pcs-stage {
  position: relative; height: min(52vh, 420px);
  display: flex; align-items: flex-end; justify-content: center;
  border-radius: var(--radius);
  background: radial-gradient(circle at 50% 40%, rgba(99, 102, 241, .22), transparent 68%);
}
#pcStage .pcs-stage.stage-light { background: radial-gradient(circle at 50% 40%, rgba(226, 232, 240, .3), transparent 68%); }
#pcStage .pcs-stage video { height: 104%; width: auto; object-fit: contain; object-position: bottom center; display: block; }
#pcStage .pcs-stage.stage-tight video { height: 92%; }
#pcStage .pcs-stage.stage-light video { filter: drop-shadow(0 18px 28px rgba(10, 14, 26, .35)); }
#pcStage .pcs-body { text-align: left; }
#pcStage .pcs-body p { color: var(--text-soft); font-size: 15px; line-height: 1.6; max-width: 52ch; margin: 0 0 20px; }

/* a wall of cards */
#pcStage .pcs-grid {
  display: grid; gap: clamp(10px, 1.4vw, 16px);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  text-align: left;
}
#pcStage .pcs-tile {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 18px;
  animation: pcsUp .4s ease both; animation-delay: calc(var(--i, 0) * 42ms);
}
#pcStage .pcs-tile-icon { font-size: 20px; display: block; margin-bottom: 8px; opacity: .9; }
#pcStage .pcs-tile h4 { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--text); }
#pcStage .pcs-tile p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
#pcStage .pcs-tile-sub { color: var(--accent-soft) !important; font-weight: 600; margin-bottom: 4px !important; }

/* the roster wall */
#pcStage .pcs-faces { display: grid; gap: clamp(8px, 1.2vw, 14px); grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); }
#pcStage .pcs-face {
  margin: 0; background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 10px 8px 12px; text-align: center;
  animation: pcsUp .4s ease both; animation-delay: calc(var(--i, 0) * 30ms);
}
#pcStage .pcs-face img { width: 100%; height: 108px; object-fit: contain; object-position: bottom center; display: block; }
#pcStage .pcs-face-ph { display: block; height: 108px; border-radius: 10px; background: rgba(255,255,255,.04); }
#pcStage .pcs-face figcaption { margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--text); }
#pcStage .pcs-face figcaption span { display: block; font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin-top: 2px; }

/* the live beat: a tappable face swaps the concierge */
#pcStage .pcs-hint { font-size: 13px; color: var(--accent-soft); margin: -6px 0 18px; }
#pcStage button.pcs-face { cursor: pointer; font: inherit; width: 100%; transition: border-color .18s ease, transform .18s ease, background .18s ease; }
#pcStage button.pcs-face:hover { border-color: var(--accent); transform: translateY(-2px); background: var(--panel-strong); }
#pcStage button.pcs-face:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; }
#pcStage .pcs-face.is-current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-glow); }

/* the logo wall */
#pcStage .pcs-count { font-size: 13px; color: var(--warn); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 16px; }
#pcStage .pcs-logos { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
#pcStage .pcs-logo {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 8px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  animation: pcsUp .36s ease both; animation-delay: calc(var(--i, 0) * 26ms);
}
#pcStage .pcs-logo img { width: 30px; height: 30px; object-fit: contain; }
#pcStage .pcs-logo span { font-size: 11px; color: var(--muted); text-align: center; line-height: 1.3; }

/* the outcome flow — the four steps of a real conversation, in sequence */
#pcStage .pcs-flow { list-style: none; counter-reset: pcs; margin: 4px 0 22px; padding: 0; display: grid; gap: 10px; }
#pcStage .pcs-flow li {
  counter-increment: pcs;
  position: relative; padding: 13px 16px 13px 50px;
  background: var(--panel); border: 1px solid var(--border); border-left: 2px solid var(--accent);
  border-radius: 12px; color: var(--text-soft); font-size: 14px; line-height: 1.5;
  animation: pcsUp .42s ease both; animation-delay: calc(var(--i, 0) * 150ms);
}
#pcStage .pcs-flow li::before {
  content: counter(pcs);
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 800;
}
#pcStage .pcs-bullets { list-style: none; margin: 4px 0 22px; padding: 0; display: grid; gap: 8px; }
#pcStage .pcs-bullets li {
  padding: 11px 14px 11px 34px; position: relative;
  background: var(--panel); border: 1px solid var(--border); border-radius: 11px;
  color: var(--text-soft); font-size: 14px; line-height: 1.5;
  animation: pcsUp .38s ease both; animation-delay: calc(var(--i, 0) * 60ms);
}
#pcStage .pcs-bullets li::before { content: "✓"; position: absolute; left: 13px; color: var(--mint); font-weight: 800; }

/* ── phones ───────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  #pcStage { --pcs-top: 92px; }
  #pcStage .pcs-split { grid-template-columns: 1fr; max-width: 460px; gap: 14px; }
  #pcStage .pcs-stage { height: 30vh; }
  #pcStage .pcs-body { text-align: center; }
  #pcStage .pcs-body p { margin-left: auto; margin-right: auto; }
  #pcStage .pcs-one { text-align: left; }
  #pcStage .pcs-face img, #pcStage .pcs-face-ph { height: 84px; }
  #pcStage .pcs-hint { font-size: 12px; }
}

/* ── reduced motion: show it, do not perform it ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #pcStage.on,
  #pcStage .pcs-tile, #pcStage .pcs-face, #pcStage .pcs-logo,
  #pcStage .pcs-flow li, #pcStage .pcs-bullets li { animation: none; }
  .hero-inner, #pcStage .pcs-close { transition: none; }
}