/* Extra first-aid animations. Pure CSS, transform/opacity only. Base state = final state. */

/* helpers */
.fig .rt { stroke: var(--ink); stroke-width: 4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fig .at { stroke: var(--blue); stroke-width: 3; fill: none; stroke-linecap: round; }
.fig .rs { stroke: var(--red); stroke-width: 5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fig .chair { stroke: var(--line); stroke-width: 7; fill: none; stroke-linecap: round; }
.fig .bag { fill: var(--muted); opacity: .8; }
.fig .fold { stroke: var(--card); stroke-width: 3; fill: none; stroke-linecap: round; opacity: .7; }
.fig .wall { fill: var(--line); }
.fig .shadow { fill: var(--line); }
.fig .shade { fill: var(--blue); opacity: .2; }
.fig .sun { fill: #F2A900; }
.fig .sunS { stroke: #F2A900; stroke-width: 6; fill: none; stroke-linecap: round; }
.fig .cross { fill: #FFFFFF; }
.fig .anSpark, .fig .anHive, .fig .anLid, .fig .anBeat, .fig .anDrop, .fig .anDrip { transform-box: fill-box; transform-origin: center; }

/* seizure */
.anShake { animation: anShake .16s linear infinite; }
@keyframes anShake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(2px, -1px); }
  40% { transform: translate(-2px, 1px); }
  60% { transform: translate(1px, 2px); }
  80% { transform: translate(-1px, -2px); }
}
.anCushion { animation: anCushion 3.2s ease-in-out infinite; transform-origin: 47px 186px; }
@keyframes anCushion {
  0% { transform: translateY(-36px) scale(.8); opacity: 0; }
  30% { transform: translateY(0) scale(1); opacity: 1; }
  42% { transform: scale(1.1); }
  54% { transform: scale(1); }
  66% { transform: scale(1.1); }
  78% { transform: scale(1); opacity: 1; }
  96% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

/* clear */
.anZone { stroke-dasharray: 2 11; animation: fade 1.4s ease-in-out infinite; }
.anMv { animation: anMv 3.4s ease-in-out infinite; }
@keyframes anMv {
  0% { transform: translate(0, 0); opacity: 0; }
  8% { transform: translate(0, 0); opacity: 1; }
  16% { transform: translate(0, 0); opacity: 1; }
  56% { transform: translate(var(--dx), var(--dy)); opacity: 1; }
  88% { transform: translate(var(--dx), var(--dy)); opacity: 1; }
  96% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 0; }
}

/* swell */
.anLips { animation: anSwell 1.8s ease-in-out infinite; transform-origin: 160px 143px; }
@keyframes anSwell { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.4, 1.6); } }
.anLid { animation: anLid 1.8s ease-in-out infinite; }
@keyframes anLid { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.25, 1.9); } }
.anHive { animation: anHive 3.6s ease-in-out infinite; }
@keyframes anHive {
  0% { transform: scale(0); opacity: 0; }
  14% { transform: scale(1.3); opacity: 1; }
  20%, 82% { transform: scale(1); opacity: 1; }
  94%, 100% { transform: scale(0); opacity: 0; }
}

/* inject */
.anPen { animation: anPen 3.8s ease-in-out infinite; }
@keyframes anPen {
  0%, 6% { transform: translateY(-26px); }
  20% { transform: translateY(0); }
  25% { transform: translateY(6px); }
  72% { transform: translateY(6px); }
  86%, 100% { transform: translateY(-26px); }
}
.anPlunger { animation: anPlunger 3.8s ease-in-out infinite; }
@keyframes anPlunger {
  0%, 24% { transform: translateY(0); }
  30%, 72% { transform: translateY(16px); }
  86%, 100% { transform: translateY(0); }
}
.anArc { stroke-dasharray: 100; animation: anArc 3.8s linear infinite; }
@keyframes anArc {
  0%, 25% { stroke-dashoffset: 100; opacity: 0; }
  26% { stroke-dashoffset: 100; opacity: 1; }
  70% { stroke-dashoffset: 0; opacity: 1; }
  88% { stroke-dashoffset: 0; opacity: 1; }
  95%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
.anTick1 { animation: anTick1 3.8s linear infinite; }
.anTick2 { animation: anTick2 3.8s linear infinite; }
.anTick3 { animation: anTick3 3.8s linear infinite; }
@keyframes anTick1 { 0%, 25% { opacity: 0; } 27%, 88% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes anTick2 { 0%, 39% { opacity: 0; } 41%, 88% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes anTick3 { 0%, 53% { opacity: 0; } 55%, 88% { opacity: 1; } 95%, 100% { opacity: 0; } }

/* legs */
.anLegs { animation: anLegs 3.4s ease-in-out infinite; transform-origin: 170px 166px; }
@keyframes anLegs {
  0%, 8% { transform: rotate(0); }
  38% { transform: rotate(-41deg); }
  52% { transform: rotate(-44deg); }
  66% { transform: rotate(-41deg); }
  80% { transform: rotate(-44deg); }
  88% { transform: rotate(-41deg); }
  98%, 100% { transform: rotate(0); }
}
.anBag { animation: anBag 3.4s ease-in-out infinite; }
@keyframes anBag {
  0%, 12% { opacity: 0; transform: translateY(10px); }
  36%, 88% { opacity: 1; transform: translateY(0); }
  98%, 100% { opacity: 0; transform: translateY(10px); }
}

/* sit */
.anAche { animation: anAche 1.2s ease-out infinite; transform-origin: 80px 116px; }
@keyframes anAche { 0% { transform: scale(.55); opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }
.anBeat { animation: anBeat 1.2s ease-in-out infinite; }
@keyframes anBeat { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.25); } 40% { transform: scale(1); } }
.anPat { animation: anPat 1.1s ease-in-out infinite; transform-origin: 182px 80px; }
@keyframes anPat { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-4deg); } }

/* still */
.anPad { animation: anPad 3.4s ease-in-out infinite; transform-origin: 148px 112px; }
@keyframes anPad { 0%, 10% { transform: scaleY(.4); opacity: 0; } 35%, 90% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(.4); opacity: 0; } }
.anStrap { animation: anStrap 3.4s ease-in-out infinite; transform-origin: 148px 112px; }
@keyframes anStrap { 0%, 24% { transform: scaleY(0); } 46%, 90% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
.anBrL { animation: anBrL 3.4s ease-in-out infinite; }
.anBrR { animation: anBrR 3.4s ease-in-out infinite; }
@keyframes anBrL { 0%, 6% { transform: translateX(-26px); opacity: 0; } 30% { transform: translateX(0); opacity: 1; } 48% { transform: translateX(5px); } 62%, 90% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(-26px); opacity: 0; } }
@keyframes anBrR { 0%, 6% { transform: translateX(26px); opacity: 0; } 30% { transform: translateX(0); opacity: 1; } 48% { transform: translateX(-5px); } 62%, 90% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(26px); opacity: 0; } }

/* cold */
.anPack { animation: anPack 2s ease-in-out infinite; }
@keyframes anPack { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.anSpark { animation: anSpark 1.8s ease-in-out infinite; }
@keyframes anSpark { 0%, 100% { transform: scale(.2) rotate(0); opacity: 0; } 50% { transform: scale(1.1) rotate(45deg); opacity: 1; } }

/* pinch */
.anLean { animation: anLean 2.4s ease-in-out infinite; transform-origin: 114px 126px; }
@keyframes anLean { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(6deg); } }
.anFing { animation: anFing 1s ease-in-out infinite; }
@keyframes anFing { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.88); } }
.anFing { transform-origin: 210px 70px; }
.anDrop { animation: anDrop 1.3s ease-in infinite; }
@keyframes anDrop { 0% { transform: translateY(0) scale(.6); opacity: 0; } 12% { opacity: 1; transform: translateY(0) scale(1); } 85% { opacity: 1; } 100% { transform: translateY(62px) scale(1); opacity: 0; } }

/* shade */
.anSun { animation: anSun 8s linear infinite; transform-origin: 46px 44px; }
@keyframes anSun { to { transform: rotate(360deg); } }
.anShade { animation: anShade 4s ease-in-out infinite; }
@keyframes anShade {
  0%, 6% { transform: translateX(150px); opacity: 0; }
  14% { opacity: 1; }
  50%, 88% { transform: translateX(0); opacity: 1; }
  98%, 100% { transform: translateX(0); opacity: 0; }
}

/* cool */
.anFan { animation: anFan .5s linear infinite; transform-origin: 276px 92px; }
@keyframes anFan { to { transform: rotate(360deg); } }
.anCloth { animation: anPack 2.4s ease-in-out infinite; }
.anDrip { animation: anDrip 1.4s ease-in infinite; }
@keyframes anDrip { 0% { transform: translateY(0) scale(.5); opacity: 0; } 15% { opacity: 1; transform: translateY(0) scale(1); } 100% { transform: translateY(20px); opacity: 0; } }

/* pin */
.anPin { animation: anPin 3s ease-in infinite; }
@keyframes anPin {
  0% { transform: translateY(-110px); opacity: 0; animation-timing-function: ease-in; }
  8% { opacity: 1; }
  22% { transform: translateY(0); animation-timing-function: ease-out; }
  32% { transform: translateY(-26px); animation-timing-function: ease-in; }
  42% { transform: translateY(0); animation-timing-function: ease-out; }
  49% { transform: translateY(-9px); animation-timing-function: ease-in; }
  55%, 90% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(0); opacity: 0; }
}
.anRadar { animation: anRadar 2.4s ease-out infinite; transform-origin: 160px 164px; opacity: 0; }
@keyframes anRadar { 0% { transform: scale(.25); opacity: 0; } 15% { opacity: .9; } 100% { transform: scale(1.55); opacity: 0; } }

/* welcome */
.anHeart { animation: anHeart 1.2s ease-in-out infinite; transform-origin: 160px 106px; }
@keyframes anHeart { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.09); } 30% { transform: scale(1); } 45% { transform: scale(1.06); } 60% { transform: scale(1); } }
.anWave { animation: anWave 2.4s ease-out infinite; transform-origin: 160px 104px; opacity: 0; }
@keyframes anWave { 0% { transform: scale(.85); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }

/* shield */
.anShield { stroke-dasharray: 100; animation: anShield 4s ease-in-out infinite; }
@keyframes anShield {
  0%, 4% { stroke-dashoffset: 100; opacity: 0; }
  6% { opacity: 1; }
  38% { stroke-dashoffset: 0; opacity: 1; }
  90% { stroke-dashoffset: 0; opacity: 1; }
  98%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
.anCheck { stroke-dasharray: 100; animation: anCheck 4s ease-in-out infinite; }
@keyframes anCheck {
  0%, 36% { stroke-dashoffset: 100; opacity: 0; }
  38% { opacity: 1; }
  62% { stroke-dashoffset: 0; opacity: 1; }
  90% { stroke-dashoffset: 0; opacity: 1; }
  98%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

/* reduced motion: stop everything and show the finished picture */
@media (prefers-reduced-motion: reduce) {
  .anShake, .anCushion, .anZone, .anMv, .anLips, .anLid, .anHive, .anPen, .anPlunger, .anArc,
  .anTick1, .anTick2, .anTick3, .anLegs, .anBag, .anAche, .anBeat, .anPat, .anPad, .anStrap,
  .anBrL, .anBrR, .anPack, .anSpark, .anLean, .anFing, .anDrop, .anSun, .anShade, .anFan,
  .anCloth, .anDrip, .anPin, .anRadar, .anHeart, .anWave, .anShield, .anCheck { animation: none; }
  .anMv { transform: translate(var(--dx), var(--dy)); }
  .anLegs { transform: rotate(-41deg); }
  .anLips { transform: scale(1.3, 1.5); }
  .anLid { transform: scale(1.2, 1.7); }
  .anSpark { opacity: 1; }
  .anRadar { opacity: .5; transform: scale(1.1); }
  .anWave { opacity: .35; transform: scale(1.2); }
  .anDrop { opacity: 0; }
  .anAche { opacity: .6; }
  .anArc, .anShield, .anCheck { stroke-dashoffset: 0; }
  .anPen { transform: translateY(6px); }
  .anPlunger { transform: translateY(16px); }
}