/* Jomnuy signature scene (product-sites/design.md v1.2 §9.3): question -> typing -> Khmer answer -> handed to staff,
   4.6 s, once. Without animation the screen shows the final frame (all 5 items, header "Staff · Dara"). */
:root { --scene-delay: 1.1s; --scene-len: 4.6s; }
.jo-head { position: absolute; left: 0; right: 0; top: 0; height: 13%; display: flex; align-items: center; gap: 3cqw; padding: 0 5cqw; background: var(--surface); border-bottom: 1px solid var(--line); }
.jo-av { display: grid; place-items: center; flex: none; width: 10cqw; height: 10cqw; border-radius: 50%; background: var(--brand); color: var(--on-brand); font-weight: 700; font-size: 5cqw; }
.jo-who { display: grid; line-height: 1.2; font-weight: 700; }
.jo-st { position: relative; display: block; height: 1.3em; font-size: 4cqw; font-weight: 500; color: var(--ink-2); }
.jo-st span { position: absolute; left: 0; top: 0; white-space: nowrap; }
.jo-status-ai { opacity: 0; }
.jo-b { position: absolute; margin: 0; max-width: 76%; padding: 2.4cqw 3.6cqw; border-radius: 4cqw; font-size: 4.6cqw; line-height: 1.45; box-shadow: 0 1px 1px rgb(15 23 42 / .08); }
.jo-me { right: 5%; background: var(--brand-soft); border-bottom-right-radius: 1cqw; transform-origin: bottom right; }
.jo-bot { left: 5%; background: var(--surface); border-bottom-left-radius: 1cqw; transform-origin: bottom left; }
.jo-q1 { top: 17%; }
.jo-typing, .jo-a1 { top: 29%; }
.jo-typing { display: flex; gap: 1.6cqw; padding: 3.6cqw 4cqw; opacity: 0; }
.jo-typing i { width: 2cqw; height: 2cqw; border-radius: 50%; background: var(--ink-2); }
.jo-src { display: inline-block; margin-top: 1.5cqw; padding: .3cqw 2cqw; border-radius: 99px; background: var(--brand-soft); color: var(--brand); font-size: 3.6cqw; font-weight: 600; transform-origin: left center; }
.jo-q2 { top: 50%; }
.jo-hand { position: absolute; margin: 0; max-width: none; left: 50%; top: 68%; transform: translateX(-50%); display: flex; align-items: center; gap: 1.5cqw; padding: 1cqw 3.5cqw; border-radius: 99px;
  background: var(--accent-soft); color: var(--accent-ink); font-size: 3.8cqw; font-weight: 600; white-space: nowrap; }
.jo-hand svg { width: 4.4cqw; height: 4.4cqw; }
.jo-staff { top: 77%; background: var(--accent-soft); }
.jo-staff small { display: block; font-size: 3.4cqw; font-weight: 700; color: var(--accent-ink); }

@media (prefers-reduced-motion: no-preference) {
  .ps-tile { animation: lsk-pop 500ms var(--ease-spring) both; }
  .jo-scene .jo-q1 { animation: jo-in-r var(--scene-len) var(--ease-out) var(--scene-delay) 1 both; }
  .jo-scene .jo-typing { animation: jo-typing var(--scene-len) var(--ease-out) var(--scene-delay) 1 both; }
  .jo-scene .jo-typing i { animation: jo-dot .6s ease-in-out calc(var(--scene-delay) + .7s) 2 both; }
  .jo-scene .jo-typing i:nth-child(2) { animation-delay: calc(var(--scene-delay) + .82s); }
  .jo-scene .jo-typing i:nth-child(3) { animation-delay: calc(var(--scene-delay) + .94s); }
  .jo-scene .jo-a1 { animation: jo-a1 var(--scene-len) var(--ease-out) var(--scene-delay) 1 both; }
  .jo-scene .jo-src { animation: jo-src var(--scene-len) var(--ease-spring) var(--scene-delay) 1 both; }
  .jo-scene .jo-q2 { animation: jo-q2 var(--scene-len) var(--ease-out) var(--scene-delay) 1 both; }
  .jo-scene .jo-hand { animation: jo-hand var(--scene-len) var(--ease-spring) var(--scene-delay) 1 both; }
  .jo-scene .jo-status-ai { animation: jo-ai var(--scene-len) linear var(--scene-delay) 1 both; }
  .jo-scene .jo-status-staff { animation: jo-staff-st var(--scene-len) linear var(--scene-delay) 1 both; }
  .jo-scene .jo-staff { animation: jo-staff var(--scene-len) var(--ease-out) var(--scene-delay) 1 both; }
  @keyframes jo-in-r { 0% { opacity: 0; transform: translateX(12px); } 8.7%, 100% { opacity: 1; transform: none; } }
  @keyframes jo-typing { 0%, 10.9% { opacity: 0; transform: scale(.9); } 15.2% { opacity: 1; transform: none; } 41.3% { opacity: 1; transform: none; } 50%, 100% { opacity: 0; transform: scale(.96); } }
  @keyframes jo-dot { 0%, 100% { transform: none; } 30% { transform: translateY(-3px); } }
  @keyframes jo-a1 { 0%, 41.3% { opacity: 0; transform: scale(.96); } 50%, 100% { opacity: 1; transform: none; } }
  @keyframes jo-src { 0%, 50% { opacity: 0; transform: scale(.7); } 56.5%, 100% { opacity: 1; transform: none; } }
  @keyframes jo-q2 { 0%, 60.9% { opacity: 0; transform: translateX(12px); } 67.4%, 100% { opacity: 1; transform: none; } }
  @keyframes jo-hand { 0%, 73.9% { opacity: 0; transform: translateX(-50%) translateY(8px); } 82.6%, 100% { opacity: 1; transform: translateX(-50%); } }
  @keyframes jo-ai { 0%, 78.3% { opacity: 1; } 84.8%, 100% { opacity: 0; } }
  @keyframes jo-staff-st { 0%, 78.3% { opacity: 0; } 84.8%, 100% { opacity: 1; } }
  @keyframes jo-staff { 0%, 91.3% { opacity: 0; transform: translateX(-12px); } 100% { opacity: 1; transform: none; } }
  @supports (animation-timeline: view()) {  /* feature-card icon tiles: "pop" once on reveal (§9.4) */
    .ps-teaser .lsk-icon { animation: ps-pop var(--ease-out) both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
    @keyframes ps-pop { from { transform: translateY(6px) scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
  }
}