/* ============================================================
   walkers.css — Animerte styremedlemmer rundt bordet
   ------------------------------------------------------------
   Hver figur har sin egen unike bevegelse og rytme.
   Inspirasjon: Apple memoji-loops, Lottie character animations,
   Pixar idle-loops (varier mikrobevegelser i hånd, hode, kropp).
============================================================ */

/* ============ ORBIT-CONTAINER ============ */
.orbit {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Navne-tooltip på hover — vises over hodet til figuren */
.walker::after {
  content: attr(data-name);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 4px 10px;
  background: rgba(10, 15, 30, 0.92);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 100px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 10;
  border: 1px solid rgba(234, 225, 206, 0.18);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.walker:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============ BASIS-FIGUR ============ */
.walker {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 66px;
  height: 92px;
  margin: -46px 0 0 -33px;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4));

  --angle: 0deg;
  --r-from: 285px;
  --r-to: 165px;
  --r-orbit: 215px;
  --orbit-dur: 22s;

  opacity: 0;
  pointer-events: auto;
  cursor: pointer;
}
.walker__svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: var(--rik-cream);
  overflow: visible;
}
/* Ida har samme cream-farge som de andre */

/* ============ KROPPS-DETALJER ============ */
.walker__shadow {
  transform-box: fill-box;
  transform-origin: center;
  animation: shadow-pulse 0.55s ease-in-out infinite;
}
@keyframes shadow-pulse {
  0%, 100% { transform: scaleX(1); opacity: 0.35; }
  50%      { transform: scaleX(0.82); opacity: 0.22; }
}

/* ============ GANGE-LEMMER ============ */
.walker__limb { transform-box: fill-box; }
.walker__arm-back  { transform-origin: 50% 4%; animation: arm-swing-a 1.2s ease-in-out infinite; }
.walker__arm-front { transform-origin: 50% 4%; animation: arm-swing-b 1.2s ease-in-out infinite; }
.walker__leg-back  { transform-origin: 50% 1%; animation: limb-swing-b 0.55s ease-in-out infinite; }
.walker__leg-front { transform-origin: 50% 1%; animation: limb-swing-a 0.55s ease-in-out infinite; }

@keyframes limb-swing-a {
  0%, 100% { transform: rotate(22deg); }
  50%      { transform: rotate(-22deg); }
}
@keyframes limb-swing-b {
  0%, 100% { transform: rotate(-22deg); }
  50%      { transform: rotate(22deg); }
}
/* Armer svinger saktere og mykere enn bena — mer naturlig gangart */
@keyframes arm-swing-a {
  0%, 100% { transform: rotate(15deg); }
  50%      { transform: rotate(-15deg); }
}
@keyframes arm-swing-b {
  0%, 100% { transform: rotate(-15deg); }
  50%      { transform: rotate(15deg); }
}

/* ============ ROLLER-ITEMS ============ */
.walker__item { fill: var(--rik-cream); }
.walker__bubble {
  fill: #fff;
  animation: bubble-pulse 2.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes bubble-pulse {
  0%, 100% { opacity: 0; transform: translateY(2px) scale(0.85); }
  20%, 80% { opacity: 1; transform: translateY(0) scale(1); }
  90%      { opacity: 0; }
}

/* ============ KONFETTI ============ */
.walker__confetti .confetti {
  transform-box: fill-box;
  transform-origin: center;
  animation: confetti-spin 2.4s ease-in-out infinite;
}
.walker__confetti .confetti--1  { animation-delay: -0.1s; animation-duration: 2.6s; }
.walker__confetti .confetti--2  { animation-delay: -0.5s; animation-duration: 2.2s; }
.walker__confetti .confetti--3  { animation-delay: -0.9s; animation-duration: 2.8s; }
.walker__confetti .confetti--4  { animation-delay: -1.3s; animation-duration: 2.4s; }
.walker__confetti .confetti--5  { animation-delay: -1.7s; animation-duration: 3.0s; }
.walker__confetti .confetti--6  { animation-delay: -0.3s; animation-duration: 2.5s; }
.walker__confetti .confetti--7  { animation-delay: -0.7s; animation-duration: 2.3s; }
.walker__confetti .confetti--8  { animation-delay: -1.1s; animation-duration: 2.7s; }
.walker__confetti .confetti--9  { animation-delay: -1.5s; animation-duration: 2.9s; }
.walker__confetti .confetti--10 { animation-delay: -1.9s; animation-duration: 2.1s; }
@keyframes confetti-spin {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.95; }
  50%      { transform: translateY(-8px) rotate(180deg); opacity: 0.6; }
}

/* ============================================================
   BEVEGELSESMØNSTRE — generelle baseanimasjoner
============================================================ */

/* MØNSTER 1: Task-cycle (går inn → gjør oppgave ved bordet → går ut → loop)
   animation-fill-mode: backwards → bruker 0% (utenfor synsfeltet) under delay */
.walker--to-chair {
  animation: walk-task-cycle 14s ease-in-out infinite both;
}
@keyframes walk-task-cycle {
  0% {
    transform: rotate(var(--angle)) translateY(calc(var(--r-from) * -1)) rotate(calc(var(--angle) * -1));
    opacity: 0;
  }
  6% { opacity: 1; }
  25% {
    transform: rotate(var(--angle)) translateY(calc(var(--r-to) * -1)) rotate(calc(var(--angle) * -1));
    opacity: 1;
  }
  70% {
    /* står ved stolen og jobber med sin oppgave */
    transform: rotate(var(--angle)) translateY(calc(var(--r-to) * -1)) rotate(calc(var(--angle) * -1));
    opacity: 1;
  }
  85% {
    /* går litt utover til en "ny oppgave" */
    transform: rotate(calc(var(--angle) + 25deg)) translateY(calc((var(--r-to) + 40px) * -1)) rotate(calc((var(--angle) + 25deg) * -1));
    opacity: 1;
  }
  94% { opacity: 1; }
  100% {
    /* tilbake til utenfor (usynlig) — sømløst loop */
    transform: rotate(var(--angle)) translateY(calc(var(--r-from) * -1)) rotate(calc(var(--angle) * -1));
    opacity: 0;
  }
}

/* MØNSTER 2: Vanlig orbit (jevn sirkel) */
.walker--orbit {
  animation: walker-orbit var(--orbit-dur) linear infinite;
  opacity: 1;
}
@keyframes walker-orbit {
  from { transform: rotate(0deg)   translateY(calc(var(--r-orbit) * -1)) rotate(0deg);   opacity: 1; }
  to   { transform: rotate(360deg) translateY(calc(var(--r-orbit) * -1)) rotate(-360deg); opacity: 1; }
}

/* MØNSTER 7: Rullering — banen "ruller", radius og fase varierer for en mer
   organisk og uforutsigbar bevegelse (som en figur som vandrer rundt en bygning) */
.walker--drift {
  animation: walker-drift var(--orbit-dur) ease-in-out infinite;
  opacity: 1;
}
@keyframes walker-drift {
  0%   { transform: rotate(0deg)   translateY(calc(var(--r-orbit) * -1)) rotate(0deg); opacity: 1; }
  18%  { transform: rotate(60deg)  translateY(calc((var(--r-orbit) + 25px) * -1)) rotate(-60deg); }
  35%  { transform: rotate(130deg) translateY(calc((var(--r-orbit) - 18px) * -1)) rotate(-130deg); }
  52%  { transform: rotate(195deg) translateY(calc((var(--r-orbit) + 30px) * -1)) rotate(-195deg); }
  68%  { transform: rotate(260deg) translateY(calc((var(--r-orbit) - 22px) * -1)) rotate(-260deg); }
  84%  { transform: rotate(320deg) translateY(calc((var(--r-orbit) + 15px) * -1)) rotate(-320deg); }
  100% { transform: rotate(360deg) translateY(calc(var(--r-orbit) * -1)) rotate(-360deg); opacity: 1; }
}

/* MØNSTER 8: Spiral — banen "ruller" gradvis innover og utover (lengre syklus) */
.walker--spiral {
  animation: walker-spiral calc(var(--orbit-dur) * 1.5) linear infinite;
  opacity: 1;
}
@keyframes walker-spiral {
  0%   { transform: rotate(0deg)   translateY(calc((var(--r-orbit) + 35px) * -1)) rotate(0deg); }
  25%  { transform: rotate(90deg)  translateY(calc(var(--r-orbit) * -1))         rotate(-90deg); }
  50%  { transform: rotate(180deg) translateY(calc((var(--r-orbit) - 30px) * -1)) rotate(-180deg); }
  75%  { transform: rotate(270deg) translateY(calc(var(--r-orbit) * -1))         rotate(-270deg); }
  100% { transform: rotate(360deg) translateY(calc((var(--r-orbit) + 35px) * -1)) rotate(-360deg); }
}

/* KROPPS-ROTASJON — figuren "skanner" subtilt rundt seg mens den beveger seg */
.walker--scan .walker__svg {
  animation: body-scan 7s ease-in-out infinite;
  transform-origin: 50% 80%;
}
@keyframes body-scan {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}

/* MØNSTER 3: Zigzag-orbit (radius bølger, gir sikksakk-følelse) */
.walker--zigzag {
  animation: walker-zigzag var(--orbit-dur) linear infinite;
  opacity: 1;
}
@keyframes walker-zigzag {
  0%   { transform: rotate(0deg)   translateY(calc(var(--r-orbit) * -1)) rotate(0deg); opacity: 1; }
  12%  { transform: rotate(45deg)  translateY(calc((var(--r-orbit) + 15px) * -1)) rotate(-45deg); }
  25%  { transform: rotate(90deg)  translateY(calc((var(--r-orbit) - 15px) * -1)) rotate(-90deg); }
  37%  { transform: rotate(135deg) translateY(calc((var(--r-orbit) + 15px) * -1)) rotate(-135deg); }
  50%  { transform: rotate(180deg) translateY(calc((var(--r-orbit) - 15px) * -1)) rotate(-180deg); }
  62%  { transform: rotate(225deg) translateY(calc((var(--r-orbit) + 15px) * -1)) rotate(-225deg); }
  75%  { transform: rotate(270deg) translateY(calc((var(--r-orbit) - 15px) * -1)) rotate(-270deg); }
  87%  { transform: rotate(315deg) translateY(calc((var(--r-orbit) + 15px) * -1)) rotate(-315deg); }
  100% { transform: rotate(360deg) translateY(calc(var(--r-orbit) * -1)) rotate(-360deg); opacity: 1; }
}

/* MØNSTER 4: Orbit med pauser (går, stopper og kikker, går videre) */
.walker--pause {
  animation: walker-orbit-pause var(--orbit-dur) ease-in-out infinite;
  opacity: 1;
}
@keyframes walker-orbit-pause {
  0%   { transform: rotate(0deg)   translateY(calc(var(--r-orbit) * -1)) rotate(0deg); opacity: 1; }
  20%  { transform: rotate(80deg)  translateY(calc(var(--r-orbit) * -1)) rotate(-80deg); }
  25%  { transform: rotate(80deg)  translateY(calc(var(--r-orbit) * -1)) rotate(-80deg); } /* pause */
  45%  { transform: rotate(180deg) translateY(calc(var(--r-orbit) * -1)) rotate(-180deg); }
  50%  { transform: rotate(180deg) translateY(calc(var(--r-orbit) * -1)) rotate(-180deg); } /* pause */
  75%  { transform: rotate(280deg) translateY(calc(var(--r-orbit) * -1)) rotate(-280deg); }
  80%  { transform: rotate(280deg) translateY(calc(var(--r-orbit) * -1)) rotate(-280deg); } /* pause */
  100% { transform: rotate(360deg) translateY(calc(var(--r-orbit) * -1)) rotate(-360deg); opacity: 1; }
}

/* MØNSTER 5: Sammen-par (samme orbit, samme retning, lik fart) */
.walker--together {
  animation: walker-orbit var(--orbit-dur) linear infinite;
  opacity: 1;
}

/* MØNSTER 6: Stasjonær (står ved bordet, gjør sin egen mikrobevegelse) */
.walker--stationary {
  opacity: 1;
  transform: rotate(var(--angle)) translateY(calc(var(--r-orbit) * -1)) rotate(calc(var(--angle) * -1));
}

/* ============================================================
   UNIKE FIGUR-TWEAKS — finjustering per medlem
============================================================ */

/* m1 — Leder (Ida): går opp nedenfra → stopper kort ved stolen → orbiterer rundt bordet */
.walker--m1 {
  --r-from: 285px;
  --r-to: 160px;
  --r-orbit: 185px;
  animation:
    leader-walk-up 6.5s ease-out 1 forwards,
    leader-tour 28s linear 6.5s infinite;
}
.walker--m1 .walker__arm-front {
  animation: arm-present 2.2s ease-in-out infinite;
}
@keyframes arm-present {
  0%, 60%, 100% { transform: rotate(-15deg); }
  20%, 40%      { transform: rotate(-50deg); }
}

/* Ida bytter mellom bok og bakeutstyr — 14s syklus, hver vises ~6.5s */
.walker--m1 .ida-item {
  opacity: 0;
  animation: ida-item-cycle 14s ease-in-out infinite;
}
.walker--m1 .ida-item--book { animation-delay: 0s; }
.walker--m1 .ida-item--bake { animation-delay: -7s; }
@keyframes ida-item-cycle {
  0%, 100% { opacity: 0; }
  5%       { opacity: 1; }
  47%      { opacity: 1; }
  52%      { opacity: 0; }
}

/* Mail som flyr rundt henne (orbit-stil som Kim sine bilder) */
.walker--m1 .mail {
  transform-origin: 0 0;
  animation: mail-orbit-spin 9s linear infinite;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
.walker--m1 .mail--1 { animation-duration: 9s;  animation-delay:  0s; }
.walker--m1 .mail--2 { animation-duration: 12s; animation-delay: -3s; animation-direction: reverse; }
.walker--m1 .mail--3 { animation-duration: 11s; animation-delay: -6s; }
.walker--m1 .mail--4 { animation-duration: 14s; animation-delay: -9s; animation-direction: reverse; }
@keyframes mail-orbit-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* "SLAY"-bobla dukker opp av og til */
.walker--m1 .walker__bubble--slay {
  opacity: 0;
  animation: slay-pop 11s ease-in-out infinite;
  animation-delay: 5s;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
@keyframes slay-pop {
  0%, 88%, 100% { opacity: 0; transform: scale(0.55) translateY(6px); }
  4%, 6%        { opacity: 1; transform: scale(1.18) translateY(-2px); }
  10%, 60%      { opacity: 1; transform: scale(1) translateY(0); }
  70%           { opacity: 0.4; transform: scale(0.9) translateY(2px); }
}
/* Ida kommer nedenfra (180°) og går rett opp til sin stol */
@keyframes leader-walk-up {
  0% {
    transform: rotate(180deg) translateY(calc(var(--r-from) * -1)) rotate(-180deg);
    opacity: 0;
  }
  15% { opacity: 1; }
  100% {
    transform: rotate(180deg) translateY(calc(var(--r-to) * -1)) rotate(-180deg);
    opacity: 1;
  }
}
/* Etter ankomst orbiterer hun rundt bordet — som om hun "vandrer rundt og presenterer" */
@keyframes leader-tour {
  0% {
    transform: rotate(180deg) translateY(calc(var(--r-to) * -1)) rotate(-180deg);
  }
  8% {
    transform: rotate(200deg) translateY(calc(var(--r-orbit) * -1)) rotate(-200deg);
  }
  100% {
    transform: rotate(540deg) translateY(calc(var(--r-orbit) * -1)) rotate(-540deg);
  }
}

/* m2 — Nestleder (Feven): tapper, tar bilde, hører på musikk 🎧 */
.walker--m2  { --angle:  30deg; animation-delay: 1.4s; }
.walker--m2 .walker__arm-front {
  animation: arm-tap 1.8s ease-in-out infinite;
}
@keyframes arm-tap {
  0%, 60%, 100% { transform: rotate(-15deg); }
  30%, 45%      { transform: rotate(-42deg); }
}
.walker--m2 .walker__item {
  animation: tablet-glow 2.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
@keyframes tablet-glow {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.5) drop-shadow(0 0 4px rgba(10, 95, 209, 0.6)); }
}

/* Kamera-blits — periodisk hvit pop som om hun tar bilde */
.walker--m2 .walker__camera-flash {
  transform-box: fill-box;
  transform-origin: center;
  animation: camera-flash-pop 6s ease-in-out infinite;
  animation-delay: 2.5s;
}
@keyframes camera-flash-pop {
  0%, 85%, 100% { opacity: 0; transform: scale(0.5); }
  3%, 6%        { opacity: 0.95; transform: scale(2.2); }
  10%           { opacity: 0; transform: scale(2.4); }
}

/* Musikknoter flyr rundt henne — hun hører på musikk via hodetelefoner */
.walker--m2 .note {
  transform-origin: 0 0;
  animation: note-orbit 8s linear infinite;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}
.walker--m2 .note--1 { animation-duration: 8s;  animation-delay:  0s; }
.walker--m2 .note--2 { animation-duration: 10s; animation-delay: -3s; animation-direction: reverse; }
.walker--m2 .note--3 { animation-duration: 12s; animation-delay: -6s; }
@keyframes note-orbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* m3 — Økonomi (Mia): zigzag, jobber på PC, tall flyr rundt 💻💸 */
.walker--m3 {
  --r-orbit: 200px;
  --orbit-dur: 28s;
  animation-delay: -3s;
}
.walker--m3 .walker__item {
  animation: laptop-tilt 3.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
/* Tall som flyr rundt henne */
.walker--m3 .num {
  transform-origin: 0 0;
  animation: num-orbit 9s linear infinite;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.3));
}
.walker--m3 .num--1 { animation-duration:  9s; animation-delay:  0s; }
.walker--m3 .num--2 { animation-duration: 12s; animation-delay: -3s; animation-direction: reverse; }
.walker--m3 .num--3 { animation-duration: 10s; animation-delay: -5s; }
.walker--m3 .num--4 { animation-duration: 14s; animation-delay: -7s; animation-direction: reverse; }
.walker--m3 .num--5 { animation-duration: 11s; animation-delay: -2s; }
.walker--m3 .num--6 { animation-duration: 13s; animation-delay: -8s; animation-direction: reverse; }
@keyframes num-orbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* m4 — Bedriftskontakt (Erling): går med Emil, prater i telefon, kort flyr rundt */
.walker--m4 {
  --r-orbit: 230px;
  --orbit-dur: 24s;
  animation-delay: 0s;
}
.walker--m4 .walker__phone-call {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: phone-vibrate 0.4s ease-in-out infinite;
}
@keyframes phone-vibrate {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg); }
}
.walker--m4 .phone-wave {
  transform-box: fill-box;
  transform-origin: left center;
  animation: signal-pulse 1.6s ease-out infinite;
  opacity: 0;
}
.walker--m4 .phone-wave.wave--1 { animation-delay: 0s; }
.walker--m4 .phone-wave.wave--2 { animation-delay: 0.4s; }
@keyframes signal-pulse {
  0%   { opacity: 0; transform: scale(0.5); }
  30%  { opacity: 0.9; }
  100% { opacity: 0; transform: scale(1.4); }
}

/* m5 — Bedriftskontakt (Emil): følger Erling tett, prater */
.walker--m5 {
  --r-orbit: 230px;
  --orbit-dur: 24s;
  animation-delay: -1.6s; /* ~24° bak Erling */
}

/* Visittkort som flyr rundt begge bedriftskontaktene */
.walker--m4 .card,
.walker--m5 .card {
  transform-origin: 0 0;
  animation: card-orbit 9s linear infinite;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}
.walker--m4 .card--1, .walker--m5 .card--1 { animation-duration:  9s; animation-delay:  0s; }
.walker--m4 .card--2, .walker--m5 .card--2 { animation-duration: 12s; animation-delay: -3s; animation-direction: reverse; }
.walker--m4 .card--3, .walker--m5 .card--3 { animation-duration: 11s; animation-delay: -6s; }
@keyframes card-orbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* m6 — Event (Veslemøy): ballonger svever, solbrille, tar selfie ✨ */
.walker--m6 {
  --r-orbit: 220px;
  --orbit-dur: 26s;
  animation-direction: reverse;
  animation-delay: -6s;
}
.walker--m6 .walker__item {
  animation: balloon-float 2.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 50% 80%;
}
@keyframes balloon-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-3px) rotate(2deg); }
}
/* Sparkles rundt henne — beveger seg uavhengig */
.walker--m6 .sparkle {
  transform-box: fill-box;
  transform-origin: center;
  animation: sparkle-twinkle 2.4s ease-in-out infinite;
}
.walker--m6 .sparkle--1 { animation-duration: 2.2s; animation-delay: -0.2s; }
.walker--m6 .sparkle--2 { animation-duration: 2.7s; animation-delay: -0.9s; }
.walker--m6 .sparkle--3 { animation-duration: 3.0s; animation-delay: -1.5s; }
.walker--m6 .sparkle--4 { animation-duration: 2.5s; animation-delay: -0.6s; }
.walker--m6 .sparkle--5 { animation-duration: 2.9s; animation-delay: -1.2s; }
@keyframes sparkle-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  40%      { opacity: 1; transform: scale(1.1) rotate(40deg); }
  60%      { opacity: 0.85; transform: scale(1) rotate(60deg); }
  85%      { opacity: 0; transform: scale(0.5) rotate(90deg); }
}
/* Selfie-mobilen: skjermen "blitser" periodisk */
.walker--m6 .walker__selfie-preview {
  animation: selfie-flash 4.5s ease-in-out infinite;
  animation-delay: 1.6s;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes selfie-flash {
  0%, 60%, 100% { filter: brightness(1); }
  10%, 16%      { filter: brightness(2.8) drop-shadow(0 0 4px rgba(255,255,255,0.9)); }
  35%, 45%      { filter: brightness(1.4); }
}

/* m7 — Event (Tobias): hvit Monster i hånda, sjekker mobil av og til */
.walker--m7   { --angle: 110deg; animation-delay: 2.8s; }
.walker--m7 .walker__item {
  animation: monster-sip 5s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
@keyframes monster-sip {
  0%, 65%, 100% { transform: translateY(0) rotate(0deg); }
  35%, 50%      { transform: translateY(-3px) rotate(-22deg); }
}
.walker--m7 .walker__phone {
  opacity: 0;
  animation: phone-check 7s ease-in-out infinite;
  animation-delay: 2.4s;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
@keyframes phone-check {
  0%, 88%, 100% { opacity: 0; transform: translateY(6px) rotate(-12deg); }
  12%           { opacity: 1; transform: translateY(0) rotate(0deg); }
  72%           { opacity: 1; transform: translateY(0) rotate(0deg); }
}

/* m8 — Event (Mats): partyhatt + konfetti, sikksakk i ytre bane */
.walker--m8 {
  --r-orbit: 245px;
  --orbit-dur: 30s;
  animation-delay: -9s;
}

/* m9 — Sekretær (Dan): til stol, skriver på laptop, blader faller rundt ham 🍂💻 */
.walker--m9   { --angle: 230deg; animation-delay: 4.2s; }
.walker--m9 .walker__arm-front {
  animation: arm-write 0.7s ease-in-out infinite;
}
@keyframes arm-write {
  0%, 100% { transform: rotate(-18deg); }
  50%      { transform: rotate(-12deg); }
}
.walker--m9 .walker__item {
  animation: laptop-tilt 3.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
@keyframes laptop-tilt {
  0%, 100% { transform: rotate(-1.5deg); }
  50%      { transform: rotate(1.5deg); }
}

/* Fallende blader rundt Dan */
.walker--m9 .leaf {
  transform-box: fill-box;
  transform-origin: center;
  animation: leaf-fall 3.6s ease-in-out infinite;
  opacity: 0;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.3));
}
.walker--m9 .leaf--1 { animation-duration: 3.2s; animation-delay:  0s;   }
.walker--m9 .leaf--2 { animation-duration: 4.0s; animation-delay: -0.7s; }
.walker--m9 .leaf--3 { animation-duration: 3.6s; animation-delay: -1.4s; }
.walker--m9 .leaf--4 { animation-duration: 4.2s; animation-delay: -2.1s; }
.walker--m9 .leaf--5 { animation-duration: 3.4s; animation-delay: -2.8s; }
.walker--m9 .leaf--6 { animation-duration: 3.8s; animation-delay: -1.0s; }
@keyframes leaf-fall {
  0%   { opacity: 0; transform: translateY(-25px) rotate(0deg); }
  20%  { opacity: 1; }
  50%  { transform: translateY(15px) rotate(180deg) translateX(4px); }
  80%  { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(50px) rotate(360deg) translateX(-3px); }
}

/* m10 — Lounge (Simon): orbit m/ pause, drikker kaffe + setter ut kaffemaskin periodisk */
.walker--m10 {
  --r-orbit: 235px;
  --orbit-dur: 32s;
  animation-direction: reverse;
  animation-delay: -14s;
}
.walker--m10 .walker__item {
  animation: cup-sip 4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
@keyframes cup-sip {
  0%, 70%, 100% { transform: translateY(0) rotate(0deg); }
  40%, 55%      { transform: translateY(-4px) rotate(-25deg); }
}

/* Kaffemaskin — venter 5s etter sideload, så dukker den opp periodisk */
.walker__coffee-machine {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: machine-deploy 16s ease-in-out 5s infinite;
}
@keyframes machine-deploy {
  0%   { opacity: 0; transform: translateY(15px) scale(0.7); }
  10%  { opacity: 1; transform: translateY(0) scale(1); }
  78%  { opacity: 1; transform: translateY(0) scale(1); }
  92%  { opacity: 0; transform: translateY(15px) scale(0.7); }
  100% { opacity: 0; }
}
.walker__steam {
  animation: steam-rise 1.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
@keyframes steam-rise {
  0%   { opacity: 0; transform: translateY(2px); }
  40%  { opacity: 0.7; transform: translateY(-2px); }
  100% { opacity: 0; transform: translateY(-6px); }
}

/* m11 — SoMe (Kim): til stol, kamera blitser + flytende bilder orbiterer rundt henne */
.walker--m11  { --angle: 290deg; animation-delay: 5.6s; }
.walker--m11 .walker__item {
  animation: camera-flash 3.5s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 50% 80%;
}
@keyframes camera-flash {
  0%, 20%, 100% { transform: rotate(-3deg); filter: brightness(1); }
  10%, 12%      { filter: brightness(2.5); }
  50%, 70%      { transform: rotate(3deg); }
}

/* Flytende bilder rundt Kim — hvert bilde orbiterer i sin egen takt */
.walker--m11 .photo {
  transform-origin: 0 0;
  animation: photo-circle 7s linear infinite;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}
.walker--m11 .photo--1 {
  animation-duration: 7s;
  animation-delay: 0s;
}
.walker--m11 .photo--2 {
  animation-duration: 9s;
  animation-delay: -2.3s;
  animation-direction: reverse;
}
.walker--m11 .photo--3 {
  animation-duration: 11s;
  animation-delay: -5s;
}
.walker--m11 .photo--4 {
  animation-duration: 8s;
  animation-delay: -3.6s;
  animation-direction: reverse;
}

@keyframes photo-circle {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ============================================================
   RESPONSIVE
============================================================ */

/* Mellomstørrelse — to-kolonners layout men smal skjerm */
@media (max-width: 1200px) and (min-width: 981px) {
  .walker {
    width: 56px;
    height: 80px;
    margin: -40px 0 0 -28px;
    --r-from: 240px;
    --r-to: 145px;
    --r-orbit: 185px;
  }
  .walker--m1  { --r-from: 240px; --r-to: 140px; --r-orbit: 170px; }
  .walker--m3  { --r-orbit: 175px; }
  .walker--m4, .walker--m5 { --r-orbit: 200px; }
  .walker--m6  { --r-orbit: 195px; }
  .walker--m8  { --r-orbit: 210px; }
  .walker--m10 { --r-orbit: 200px; }
}

@media (max-width: 980px) {
  .walker {
    width: 52px;
    height: 74px;
    margin: -37px 0 0 -26px;
    --r-from: 215px;
    --r-to: 130px;
    --r-orbit: 165px;
  }
  .walker--m1  { --r-from: 215px; --r-to: 125px; --r-orbit: 152px; }
  .walker--m3  { --r-orbit: 155px; }
  .walker--m4, .walker--m5 { --r-orbit: 175px; }
  .walker--m6  { --r-orbit: 168px; }
  .walker--m8  { --r-orbit: 185px; }
  .walker--m10 { --r-orbit: 178px; }
}
@media (max-width: 640px) {
  .walker {
    width: 40px;
    height: 56px;
    margin: -28px 0 0 -20px;
    --r-from: 165px;
    --r-to: 98px;
    --r-orbit: 120px;
  }
  .walker--m1  { --r-from: 165px; --r-to: 95px; --r-orbit: 110px; }
  .walker--m3  { --r-orbit: 112px; }
  .walker--m4, .walker--m5 { --r-orbit: 128px; }
  .walker--m6  { --r-orbit: 122px; }
  .walker--m8  { --r-orbit: 135px; }
  .walker--m10 { --r-orbit: 130px; }
}

/* ============================================================
   KAFFE-LEVERING — figurene får kopp i hånda, Simon "går rundt"
   (ingen avbrudd i bevegelsene — koppene bare dukker opp)
============================================================ */

/* Kaffekopp dukker opp ved siden av figuren når Simon har "fylt på" */
.walker--has-coffee::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 18px;
  top: 42%;
  right: -6px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18'><rect x='2' y='3.5' width='10' height='12' rx='1.5' fill='%23ffffff'/><path d='M12 6.5 q 4 0 4 4 q 0 4 -4 4' fill='none' stroke='%23ffffff' stroke-width='2'/><rect x='2.5' y='3.5' width='9' height='2.4' fill='%235a3a1a'/><path d='M5 2.5 q -0.8 -1.6 0.6 -2.5 M8 2.5 q -0.8 -1.6 0.6 -2.5' fill='none' stroke='%23ffffff' stroke-width='0.7' opacity='0.6'/></svg>") no-repeat center / contain;
  opacity: 0;
  animation: cup-served 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  pointer-events: none;
  z-index: 5;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}
@keyframes cup-served {
  0%   { opacity: 0; transform: translateY(8px) scale(0.4) rotate(-15deg); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}

/* Simon på sin "kaffe-stasjon" — fast posisjon, ikke teleport/run */
.walker--m10.walker--simon-station {
  animation: none !important;
  opacity: 1 !important;
  transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  transform: rotate(var(--simon-angle, 180deg))
             translateY(calc(var(--simon-r, 310px) * -1))
             rotate(calc(var(--simon-angle, 180deg) * -1)) !important;
}
/* Når Simon er på stasjon: kaffekanne tilter periodisk (heller i kopp) */
.walker--simon-station .walker__item {
  animation: cup-pour 1.6s ease-in-out infinite !important;
}
@keyframes cup-pour {
  0%, 70%, 100% { transform: translateY(0) rotate(0deg); }
  30%, 50%      { transform: translateY(-2px) rotate(-30deg); }
}
/* Kaffemaskinen forblir synlig hele stasjon-tiden */
.walker--simon-station .walker__coffee-machine {
  opacity: 1 !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .walker, .walker__limb, .walker__shadow,
  .walker__item, .walker__bubble,
  .walker__confetti .confetti { animation: none !important; }
  .walker { opacity: 1; }
}