/* 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; }
  @keyframes oe-life-float {
    0%, 100% { transform: translateY(0); }
    40% { transform: translateY(-5px); }
  }
  @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;
}