/* Shared idle life for every kit mark. CSS transforms only.
   Stagger by --oe-life-i / --oeh-i so a screen of marks is not one looping GIF.
   Reduced-motion stays still. html.oe-life-paused (tab hidden or no mark on screen)
   freezes the loop. */

.oe-life-float, .oe-life-look, .oe-life-blink,
.oeh-life-float, .oeh-life-look, .oeh-life-blink {
  transform-box: view-box;
  transform-origin: 50% 47%;
}

@media (prefers-reduced-motion: no-preference) {
  .oe-life .oe-life-float, .oeh-life .oeh-life-float {
    animation: oe-life-float 4.6s ease-in-out infinite;
    animation-delay: calc(var(--oe-life-i, var(--oeh-i, 0)) * -0.7s);
  }
  .oe-life .oe-life-look, .oeh-life .oeh-life-look {
    animation: oe-life-look 8.8s ease-in-out infinite;
    animation-delay: calc(var(--oe-life-i, var(--oeh-i, 0)) * -1.35s);
  }
  .oe-life .oe-life-blink, .oeh-life .oeh-life-blink {
    /* Interval stays 11s. v48 keyframes (3.1s) are remapped so each
       close/open keeps the same wall-clock ms as on that loop. */
    animation: oe-life-blink 11s linear infinite;
    animation-delay: calc(var(--oe-life-i, var(--oeh-i, 0)) * -0.42s);
  }
  .oe-life--hero .oe-life-float, .oeh-life--hero .oeh-life-float { animation-duration: 4.1s; }
  .oe-life--hero .oe-life-look, .oeh-life--hero .oeh-life-look { animation-duration: 7.6s; }
  .oe-life--row .oe-life-float, .oeh-life--row .oeh-life-float { animation-duration: 5.4s; }
  .oe-life--row .oe-life-look, .oeh-life--row .oeh-life-look { animation-name: oe-life-look-soft; animation-duration: 11s; }
  .oe-life--me .oe-life-float, .oeh-life--me .oeh-life-float { animation-duration: 5s; }
  .oe-life--me .oe-life-look, .oeh-life--me .oeh-life-look { animation-name: oe-life-look-soft; animation-duration: 10.4s; }
  /* Each helper keeps one quiet signature motion. The difference is readable
     without turning a roster into eight competing looping stickers. */
  .oe-life[data-shape="drop"] .oe-life-float,
  .oeh-life[data-shape="drop"] .oeh-life-float { animation-name: oe-life-drop; animation-duration: 4.2s; }
  .oe-life[data-shape="mountain"] .oe-life-float,
  .oeh-life[data-shape="mountain"] .oeh-life-float { animation-name: oe-life-mountain; animation-duration: 6.4s; }
  .oe-life[data-shape="cloud"] .oe-life-float,
  .oeh-life[data-shape="cloud"] .oeh-life-float { animation-name: oe-life-cloud; animation-duration: 6.8s; }
  .oe-life[data-shape="flame"] .oe-life-float,
  .oeh-life[data-shape="flame"] .oeh-life-float { animation-name: oe-life-flame; animation-duration: 2.8s; }
  .oe-life[data-shape="spark"] .oe-life-float,
  .oeh-life[data-shape="spark"] .oeh-life-float { animation-name: oe-life-spark; animation-duration: 4.8s; }
  .oe-life[data-shape="moon"] .oe-life-float,
  .oeh-life[data-shape="moon"] .oeh-life-float { animation-name: oe-life-moon; animation-duration: 6.2s; }
  .oe-life[data-shape="leaf"] .oe-life-float,
  .oeh-life[data-shape="leaf"] .oeh-life-float { animation-name: oe-life-leaf; animation-duration: 4.9s; }
  .oe-life[data-shape="pebble"] .oe-life-float,
  .oeh-life[data-shape="pebble"] .oeh-life-float { animation-name: oe-life-pebble; animation-duration: 5.8s; }
  .oe-life[data-state="thinking"] .oe-body,
  .oeh-life[data-state="thinking"] .oeh-body { animation: oe-life-working 1.25s ease-in-out infinite; }
  @keyframes oe-life-float {
    0%, 100% { transform: translateY(0); }
    40% { transform: translateY(-5px); }
  }
  @keyframes oe-life-drop { 0%,100%{transform:translateY(0) scaleY(1)} 45%{transform:translateY(-5px) scaleY(1.025)} }
  @keyframes oe-life-mountain { 0%,100%{transform:translateY(0)} 48%{transform:translateY(-2px)} }
  @keyframes oe-life-cloud { 0%,100%{transform:translate(-2px,0)} 50%{transform:translate(3px,-3px)} }
  @keyframes oe-life-flame { 0%,100%{transform:translateY(0) rotate(-1deg) scaleY(1)} 45%{transform:translateY(-4px) rotate(2deg) scaleY(1.035)} 72%{transform:translateY(-2px) rotate(-2deg) scaleY(.99)} }
  @keyframes oe-life-spark { 0%,100%{transform:translateY(0) scale(1)} 48%{transform:translateY(-4px) scale(1.045)} }
  @keyframes oe-life-moon { 0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-4px) rotate(3deg)} }
  @keyframes oe-life-leaf { 0%,100%{transform:translateY(0) rotate(-2deg)} 45%{transform:translateY(-4px) rotate(4deg)} 72%{transform:translateY(-2px) rotate(1deg)} }
  @keyframes oe-life-pebble { 0%,100%{transform:translateY(0) scaleX(1)} 50%{transform:translateY(-1.5px) scaleX(1.012)} }
  @keyframes oe-life-working { 0%,100%{opacity:1} 50%{opacity:.78} }
  @keyframes oeh-float {
    0%, 100% { transform: translateY(0); }
    40% { transform: translateY(-5px); }
  }
  @keyframes oe-life-look {
    0%, 100% { transform: rotate(0deg) translateX(0); }
    16% { transform: rotate(-12deg) translateX(-2.4px); }
    34% { transform: rotate(-2deg) translateX(0); }
    56% { transform: rotate(13deg) translateX(2.6px); }
    76% { transform: rotate(3deg) translateX(0); }
  }
  @keyframes oeh-look {
    0%, 100% { transform: rotate(0deg) translateX(0); }
    16% { transform: rotate(-12deg) translateX(-2.4px); }
    34% { transform: rotate(-2deg) translateX(0); }
    56% { transform: rotate(13deg) translateX(2.6px); }
    76% { transform: rotate(3deg) translateX(0); }
  }
  @keyframes oe-life-look-soft {
    0%, 100% { transform: rotate(0deg) translateX(0); }
    20% { transform: rotate(-7deg) translateX(-1.4px); }
    52% { transform: rotate(8deg) translateX(1.5px); }
    78% { transform: rotate(2deg) translateX(0); }
  }
  @keyframes oeh-look-soft {
    0%, 100% { transform: rotate(0deg) translateX(0); }
    20% { transform: rotate(-7deg) translateX(-1.4px); }
    52% { transform: rotate(8deg) translateX(1.5px); }
    78% { transform: rotate(2deg) translateX(0); }
  }
  /* v48 on 3.1s (4c30d440): 0/54/66/78/88/100 open, 58/62 closed, 82 almost-closed.
     Shifted into the last 3.1s of 11s so each dip has the same absolute ms. */
  @keyframes oe-life-blink {
    0%, 87.036%, 90.418%, 93.8%, 96.618%, 100% { transform: scaleY(1); }
    88.164%, 89.291% { transform: scaleY(0.05); }
    94.927% { transform: scaleY(0.06); }
  }
  @keyframes oeh-blink {
    0%, 87.036%, 90.418%, 93.8%, 96.618%, 100% { transform: scaleY(1); }
    88.164%, 89.291% { transform: scaleY(0.05); }
    94.927% { transform: scaleY(0.06); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .oe-life-float, .oe-life-look, .oe-life-blink,
  .oeh-life-float, .oeh-life-look, .oeh-life-blink { animation: none !important; }
}

html.oe-life-paused .oe-life-float,
html.oe-life-paused .oe-life-look,
html.oe-life-paused .oe-life-blink,
html.oeh-life-paused .oeh-life-float,
html.oeh-life-paused .oeh-life-look,
html.oeh-life-paused .oeh-life-blink {
  animation-play-state: paused;
}

/* Title pill and any other static mark: still frame, no blink / look / breathe. */
.oe-life--static .oe-life-float,
.oe-life--static .oe-life-look,
.oe-life--static .oe-life-blink,
.oe-life--static .oeh-life-float,
.oe-life--static .oeh-life-look,
.oe-life--static .oeh-life-blink,
[data-alive="false"] .oe-life-float,
[data-alive="false"] .oe-life-look,
[data-alive="false"] .oe-life-blink,
[data-alive="false"] .oeh-life-float,
[data-alive="false"] .oeh-life-look,
[data-alive="false"] .oeh-life-blink {
  animation: none !important;
}