/**
 * Owl mascot — reactive only.
 *
 * The owl never idles for decoration, never follows the cursor and never
 * speaks unprompted. It changes face in response to a real value or a real
 * user action, plays ONE shot, and settles.
 *
 * The artwork is the owner's own six drawings, traced to SVG and inlined once
 * per page as <symbol>s by ChromeV2::owl_sprite(); each owl is a <use> pointing
 * at one of them. Colours are baked into those files (the five site colours,
 * verified on build), so this stylesheet only handles box, swap and motion —
 * there are deliberately no fill rules here to inherit or fight over.
 */

/* Reserve the box so nothing shifts when a face swaps (CLS = 0). */
.owl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  vertical-align: middle;
  line-height: 0;
}
.owl svg { width: 100%; height: 100%; display: block; overflow: visible }
.owl--sm { width: 26px; height: 26px }
.owl--lg { width: 64px; height: 64px }
.owl--xl { width: 92px; height: 92px }

/* Dark backgrounds need no special treatment here: the artwork itself carries
   a fine white sticker contour (painted first in each SVG), which reads on the
   black heroes and disappears into light sections. The earlier .owl--plate
   workaround is gone — the contour replaced it. */

/* ---- motion ----------------------------------------------------------
   Every animation is one-shot except think, which loops while the advisor
   is actually working. Idle is at most a slow breathe.                   */
.owl svg { transform-origin: 50% 65%; will-change: transform }

@keyframes owl-breathe { 0%,100% { transform: scale(1) } 50% { transform: scale(1.035) } }
@keyframes owl-nod     { 0% { transform: translateY(0) rotate(0) }
                         35% { transform: translateY(-3px) rotate(-6deg) }
                         70% { transform: translateY(1px) rotate(3deg) }
                         100% { transform: translateY(0) rotate(0) } }
@keyframes owl-shrink  { 0% { transform: scale(1) }
                         45% { transform: scale(.93) translateY(1px) }
                         100% { transform: scale(1) } }
@keyframes owl-tilt    { 0%,100% { transform: rotate(0) }
                         50% { transform: rotate(-7deg) } }
@keyframes owl-lean    { 0% { transform: translateX(0) rotate(0) }
                         40% { transform: translateX(3px) rotate(7deg) }
                         100% { transform: translateX(0) rotate(0) } }

.owl.is-idle    svg { animation: owl-breathe 3s ease-in-out infinite }
.owl.is-happy   svg { animation: owl-nod .5s cubic-bezier(.3,1.4,.5,1) 1 }
.owl.is-concern svg { animation: owl-shrink .45s ease-out 1 }
.owl.is-think   svg { animation: owl-tilt 1.6s ease-in-out infinite }
.owl.is-point   svg { animation: owl-lean .6s cubic-bezier(.3,1.3,.5,1) 1 }
/* investigate is a standing header pose — it holds still on purpose. */

/* A steeper renewal jump gets a slightly stronger reaction, nothing more. */
.owl.is-concern.owl--strong svg { animation-duration: .6s }

/* ---- inline placements ---- */
.owl-inline { display: inline-flex; align-items: center; gap: 7px }

/* ----------------------------------------------------------------------
   Reduced motion: the owl still shows the correct FACE (it carries meaning)
   but nothing moves at all.                                              */
@media (prefers-reduced-motion: reduce) {
  .owl svg,
  .owl.is-idle svg,
  .owl.is-happy svg,
  .owl.is-concern svg,
  .owl.is-think svg,
  .owl.is-point svg { animation: none !important }
}