.tarzan-scene,
.tarzan-scene * {
  box-sizing: border-box;
}

.tarzan-scene {
  --tarzan-duration: 5s;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 226px;
  height: 100px;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  line-height: 0;
}

.tarzan-scene img {
  position: absolute;
  display: block;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* ── Koreografin, rättad av Claude 2026-09-19 ────────────────────────────
   Ragnar såg tre fel i Codex version: hon flöt in, gångbilden ga-02 syntes
   aldrig, och sovande var 1,5 gånger för stor. Rättat så här:
   * STORLEK: alla bilder har samma skala (1 källpixel = 51/897 CSS-px), så
     varje höjd är källbildens höjd × 51/897 — inte satt på ögat.
   * GÅNG: cykeln 02 → 04 → 05 → 03 (mjukaste ordningen, uppmätt) upprepas
     med 0,15 s per bild, och hon flyttas bara 11–12 px per bild.
   * LAGEN: stolens sits ligger 30–38 px över golvet, bordsskivan 44–60 px;
     hon sitter på sitsen och dricker ur koppen på skivan, och somnar på golvet
     framför bordet där hon landar.
   Mätt ur bilderna: sits, skiva, nosens höjd i dricker (23,8 px). */

.tarzan-prop {
  object-fit: contain;
  object-position: center bottom;
}

.tarzan-prop--skylt { z-index: 1; bottom: 0; left: 2px;   height: 66px; }
.tarzan-prop--vaxt  { z-index: 0; bottom: 0; right: 0;    height: 54px; }
.tarzan-prop--stol  { z-index: 2; bottom: 0; left: 86px;  height: 70px; }
.tarzan-prop--bord  { z-index: 5; bottom: 0; left: 138px; height: 60px; }
/* Koppen är förstorad 1,8× mot verkligheten, annars blir den 9 px. */
.tarzan-prop--kopp  { z-index: 7; bottom: 49px; left: 142px; height: 13.5px; }

.tarzan-pose {
  z-index: 4;
  bottom: 0;
  left: 0;
  opacity: 0;
  object-fit: contain;
  object-position: center bottom;
  transform-origin: 50% 100%;
  will-change: opacity, transform;
}

.tarzan-pose--walk     { height: 51px; }
.tarzan-pose--sniff    { height: 49.6px; }
.tarzan-pose--hopp-01  { z-index: 6; height: 55.6px; }
.tarzan-pose--hopp-02  { z-index: 6; height: 53.5px; }
.tarzan-pose--sitter   { z-index: 4; bottom: 34px; left: 83px; height: 56.2px; }
.tarzan-pose--dricker  { z-index: 4; bottom: 34px; left: 83px; height: 45.8px; }
.tarzan-pose--kick     { z-index: 6; bottom: 33px; left: 81px; height: 66.4px; }
.tarzan-pose--hoppner  { z-index: 8; height: 59.9px; }
.tarzan-pose--ligger,
.tarzan-pose--sover    { z-index: 8; bottom: 0; left: 110px; height: 31.3px; }

/* Gången 0–1,2 s: åtta rutor à 0,15 s, två varv av cykeln 02 04 05 03. */
.tarzan-scene.tarzan-running .tarzan-pose--walk {
  animation-duration: 1.2s, 1.2s;
  animation-timing-function: linear, linear;
  animation-fill-mode: none, none;
}
.tarzan-scene.tarzan-running .tarzan-pose--ga-02 { animation-name: tarzan-walk-path, tarzan-ruta-1; }
.tarzan-scene.tarzan-running .tarzan-pose--ga-04 { animation-name: tarzan-walk-path, tarzan-ruta-2; }
.tarzan-scene.tarzan-running .tarzan-pose--ga-05 { animation-name: tarzan-walk-path, tarzan-ruta-3; }
.tarzan-scene.tarzan-running .tarzan-pose--ga-03 { animation-name: tarzan-walk-path, tarzan-ruta-4; }

@keyframes tarzan-walk-path {
  from { transform: translate(-82px, 0); }
  to   { transform: translate(12px, 0); }
}
@keyframes tarzan-ruta-1 { 0%, 12.4% { opacity: 1; } 12.5%, 49.9% { opacity: 0; } 50%, 62.4% { opacity: 1; } 62.5%, 100% { opacity: 0; } }
@keyframes tarzan-ruta-2 { 0%, 12.4% { opacity: 0; } 12.5%, 24.9% { opacity: 1; } 25%, 62.4% { opacity: 0; } 62.5%, 74.9% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes tarzan-ruta-3 { 0%, 24.9% { opacity: 0; } 25%, 37.4% { opacity: 1; } 37.5%, 74.9% { opacity: 0; } 75%, 87.4% { opacity: 1; } 87.5%, 100% { opacity: 0; } }
@keyframes tarzan-ruta-4 { 0%, 37.4% { opacity: 0; } 37.5%, 49.9% { opacity: 1; } 50%, 87.4% { opacity: 0; } 87.5%, 100% { opacity: 1; } }

/* Sniffar 1,2–1,9 s och kryper fram några pixlar. */
.tarzan-scene.tarzan-running .tarzan-pose--sniffar-01  { animation: tarzan-sniff-1 0.25s linear 1.2s 1 none, tarzan-visible 0.25s linear 1.2s 1 none; }
.tarzan-scene.tarzan-running .tarzan-pose--sniffar-02  { animation: tarzan-sniff-2 0.25s linear 1.45s 1 none, tarzan-visible 0.25s linear 1.45s 1 none; }
.tarzan-scene.tarzan-running .tarzan-pose--sniffar-01b { animation: tarzan-sniff-3 0.2s linear 1.7s 1 none, tarzan-visible 0.2s linear 1.7s 1 none; }
@keyframes tarzan-sniff-1 { from { transform: translate(12px, 0); } to { transform: translate(15px, 0); } }
@keyframes tarzan-sniff-2 { from { transform: translate(15px, 0); } to { transform: translate(18px, 0); } }
@keyframes tarzan-sniff-3 { from { transform: translate(18px, 0); } to { transform: translate(20px, 0); } }

/* Hoppar upp 1,9–2,45 s: avstamp på golvet, sedan i luften upp till sitsen. */
.tarzan-scene.tarzan-running .tarzan-pose--hopp-01 {
  animation: tarzan-hop-up-01 0.25s ease-out 1.9s 1 none, tarzan-visible 0.25s linear 1.9s 1 none;
}
.tarzan-scene.tarzan-running .tarzan-pose--hopp-02 {
  animation: tarzan-hop-up-02 0.3s ease-in-out 2.15s 1 none, tarzan-visible 0.3s linear 2.15s 1 none;
}
@keyframes tarzan-hop-up-01 {
  from { transform: translate(28px, 0) rotate(-3deg); }
  to   { transform: translate(36px, -6px) rotate(2deg); }
}
@keyframes tarzan-hop-up-02 {
  from { transform: translate(44px, -16px) rotate(-6deg); }
  to   { transform: translate(70px, -36px) rotate(2deg); }
}

/* Sitter 2,45–2,95, dricker 2,95–3,5 (samma plats: kropparna täcker varandra). */
.tarzan-scene.tarzan-running .tarzan-pose--sitter  { animation: tarzan-visible 0.5s linear 2.45s 1 none; }
.tarzan-scene.tarzan-running .tarzan-pose--dricker { animation: tarzan-visible 0.55s linear 2.95s 1 none; }

/* Koffeinkicken 3,5–3,95 s: upp på bakbenen på sitsen och vickar. */
.tarzan-scene.tarzan-running .tarzan-pose--kick {
  animation: tarzan-kick-path 0.45s linear 3.5s 1 none, tarzan-visible 0.45s linear 3.5s 1 none;
}
@keyframes tarzan-kick-path {
  0%   { transform: translate(0, 0) rotate(-2deg); }
  25%  { transform: translate(0, -2px) rotate(3deg); }
  50%  { transform: translate(-1px, 0) rotate(-3deg); }
  75%  { transform: translate(1px, -1px) rotate(2deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* Hoppar ner 3,95–4,4 s framåt, framtassarna först, och landar framför bordet. */
.tarzan-scene.tarzan-running .tarzan-pose--hoppner {
  animation: tarzan-hop-down 0.45s ease-in 3.95s 1 none, tarzan-visible 0.45s linear 3.95s 1 none;
}
@keyframes tarzan-hop-down {
  from { transform: translate(92px, -30px) rotate(-4deg); }
  to   { transform: translate(112px, 0) rotate(0deg); }
}

/* Lägger sig 4,4 s där hon landade, och somnar 4,65 s. */
.tarzan-scene.tarzan-running .tarzan-pose--ligger { animation: tarzan-visible 0.25s linear 4.4s 1 none; }
.tarzan-scene.tarzan-running .tarzan-pose--sover  { animation: tarzan-visible 0.35s linear 4.65s 1 forwards; }

@keyframes tarzan-visible {
  from, to { opacity: 1; }
}

/* Minskad rörelse: bara slutbilden. */
.tarzan-scene.tarzan-reduced .tarzan-pose { animation: none !important; opacity: 0 !important; }
.tarzan-scene.tarzan-reduced .tarzan-pose--sover { opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  .tarzan-scene .tarzan-pose { animation: none !important; opacity: 0 !important; }
  .tarzan-scene .tarzan-pose--sover { opacity: 1 !important; }
}