/* ============================================================
   Hireanex landing prototypes — ROUND 2 (motion / demo styles)
   Layers on top of proto.css. In use on the landing preview: the
   hero scene wrapper, the webcam tiles + speaking pulse, the live
   captions, and the demo "app canvas" browser frame.
   ============================================================ */

.scene { position: relative; }

/* ---------- webcam tiles (hero live room) ---------- */
.cam {
  position: relative; overflow: hidden; border-radius: 16px;
  background: linear-gradient(155deg,#222a3c,#0f1320); border:1px solid var(--room-line);
}
.cam .nm {
  position:absolute; left:8px; bottom:7px; font-size:11px; font-weight:600; color:#fff;
  background: rgba(0,0,0,.45); padding: 2px 8px; border-radius: 6px; z-index:3;
}
.cam .ring { position:absolute; inset:0; border-radius:inherit; pointer-events:none; }
.cam.talking .ring { box-shadow: inset 0 0 0 2px rgba(123,216,143,.0); animation: speakRing 1.7s ease-in-out infinite; }
.cam.talking.amber .ring { animation-name: speakRingAmber; }
@keyframes speakRing {
  0%,100%{ box-shadow: inset 0 0 0 2px rgba(123,216,143,.25), 0 0 0 0 rgba(123,216,143,.0); }
  50%    { box-shadow: inset 0 0 0 3px rgba(123,216,143,.85), 0 0 0 5px rgba(123,216,143,.12); }
}
@keyframes speakRingAmber {
  0%,100%{ box-shadow: inset 0 0 0 2px rgba(255,166,77,.25); }
  50%    { box-shadow: inset 0 0 0 3px rgba(255,166,77,.9), 0 0 0 5px rgba(255,166,77,.12); }
}

/* ---------- live caption ---------- */
.livecap {
  display:inline-flex; align-items:center; gap:8px; max-width: 90%;
  background: rgba(0,0,0,.55); color:#fff; font-size:13.5px; line-height:1.4;
  padding: 8px 13px; border-radius: 10px; backdrop-filter: blur(4px);
}
.livecap .who { color: var(--brand); font-weight:700; }
.livecap.amber .who { color:#ffd9a8; }
.caretline::after {
  content:""; display:inline-block; width:7px; height:15px; margin-left:3px;
  background: var(--brand); vertical-align:-2px; animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50%{opacity:0} }
.cap-stack .livecap { opacity:0; transform: translateY(6px); }
.scene.play .cap-stack .livecap { animation: capUp .5s ease both; }
.scene.play .cap-stack .livecap:nth-child(2){ animation-delay:1.1s; }
.scene.play .cap-stack .livecap:nth-child(3){ animation-delay:2.2s; }
@keyframes capUp { to{opacity:1; transform:none;} }

/* ---------- demo browser "app canvas" ---------- */
.appcanvas { border-radius: 16px; overflow:hidden; border:1px solid var(--line); box-shadow: var(--shadow-pop); background:#fff; }
.appcanvas.dark { background: var(--room); border-color: var(--room-line); color: var(--room-fg); }
.appcanvas .top {
  display:flex; align-items:center; gap:7px; padding:11px 14px; background:var(--soft); border-bottom:1px solid var(--line);
}
.appcanvas.dark .top { background:#0e1118; border-bottom-color:var(--room-line); }
.appcanvas .top .pill { margin-left:8px; font-size:12px; color:var(--muted-2); background:#fff; border:1px solid var(--line); border-radius:7px; padding:3px 12px; }
.appcanvas.dark .top .pill { background:#0b0d12; border-color:var(--room-line); color:var(--room-muted); }
.recbadge { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:#fff; background:#d34a2a; padding:3px 9px; border-radius:7px; }
.recbadge .d { width:7px;height:7px;border-radius:50%; background:#fff; animation: blink 1.4s infinite; }
@keyframes blink { 50%{opacity:.25} }

@media (prefers-reduced-motion: reduce) {
  .scene.play .cap-stack .livecap,
  .cam.talking .ring, .recbadge .d, .caretline::after { animation: none !important; }
  .cap-stack .livecap { opacity:1; transform:none; }
}