/* Talking organ hosts (see web/js/host-rig.js). */
.hostrig { position: relative; display: inline-block; height: 150px; flex: 0 0 auto; line-height: 0; user-select: none; transform-origin: 50% 90%; }
.hostrig > img { display: block; height: 100%; width: auto; filter: drop-shadow(0 4px 6px rgba(10, 25, 33, 0.3)); pointer-events: none; }
.hostrig > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

.hostrig .hr-seam, .hostrig .hr-inside { transition: opacity 30ms linear; }

/* eyelid: hidden until a blink drops it over the eye */
.hostrig .hr-lid { opacity: 0; transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0.02); }
.hostrig .hr-lid.hr-blink { animation: hr-blink 170ms ease-in-out 1; }
@keyframes hr-blink {
  0%   { opacity: 1; transform: scaleY(0.02); }
  45%  { opacity: 1; transform: scaleY(1); }
  100% { opacity: 1; transform: scaleY(0.02); }
}

/* idle: a slow breath at all times; talking adds a small bob on top */
.hostrig { animation: hr-breathe 3.8s ease-in-out infinite alternate; }
.hostrig.is-speaking { animation: hr-breathe 3.8s ease-in-out infinite alternate, hr-bob 520ms ease-in-out infinite alternate; }
@keyframes hr-breathe { from { scale: 1 1; } to { scale: 1.012 1.022; } }
@keyframes hr-bob { from { translate: 0 0; rotate: -0.5deg; } to { translate: 0 -2px; rotate: 0.5deg; } }

.cp-host .cp-host-hear { margin-top: 0.3rem; font-size: var(--text-sm); padding: 0.2rem 0.6rem; }
@media (max-width: 720px) { .hostrig { height: 108px; } }
@media (prefers-reduced-motion: reduce) {
  .hostrig, .hostrig.is-speaking { animation: none; }
  .hostrig .hr-lid.hr-blink { animation: none; }
  .hostrig .hr-seam, .hostrig .hr-inside { transition: none; }
}