/* ── The porter's desk — scene animations ──────────────────────────────
   One SVG stage, fifteen little scenes. The hero carries data-scene =
   "o1".."o10" (desk open) or "c1".."c5" (closed); portal.html rotates them.
   All 15 are on show in desk-animations.html.
   Source of truth for the SVG markup: portal.html #desk-hero.
   Stage: viewBox 0 0 320 200 — floor y=182, desk top y=124 (x 132–308),
   porter behind the desk at x≈210, visitors walk in from the left. */

.desk-hero { display: flex; justify-content: center; padding: 6px 0 10px; }
.desk-hero svg { width: min(64%, 210px); height: auto; color: var(--black, #111); overflow: visible; }
.desk-hero svg g { transform-box: view-box; }

/* visibility: porter + bell when open; sign when closed; props per scene */
.desk-hero .sc-porter, .desk-hero .pr { display: none; }
.desk-hero.is-open .sc-porter { display: block; }
.desk-hero .sc-closed { display: block; }
.desk-hero.is-open .sc-closed { display: none; }
.desk-hero:not(.is-open) .sc-bell { display: none; }

/* she breathes whenever the desk is open, whatever the task */
.desk-hero.is-open .sc-breathe { animation: dk-breathe 4.5s ease-in-out infinite; }

/* pivots */
.desk-hero .sc-arm { transform-origin: 224px 82px; }
.desk-hero .sc-head { transform-origin: 210px 64px; }
.desk-hero .sc-bell { transform-origin: 246px 124px; }
.desk-hero .sc-ding { transform-origin: 246px 92px; }
.desk-hero .sc-closed { transform-origin: 225px 124px; }
.desk-hero .sit-head { transform-origin: 134px 88px; }
.desk-hero .sit-leg1 { transform-origin: 130px 126px; }
.desk-hero .sit-leg2 { transform-origin: 140px 126px; }
.desk-hero .pr-keysup { transform-origin: 256px 95px; }
.desk-hero .pr-hand { transform-box: view-box; transform-origin: 52px 60px; }
.desk-hero .cat-tail { transform-box: view-box; transform-origin: 2px 176px; }

/* ── open scenes ── */
/* o1 — waving hello: the whole arm up, a proper wave */
.desk-hero[data-scene="o1"] .sc-arm { animation: dk-wave 4.5s ease-in-out infinite; }
.desk-hero[data-scene="o1"] .sc-head { animation: dk-thanks 4.5s ease-in-out infinite; }

/* o2 — a parcel arrives: a courier walks up, hands it over, heads off */
.desk-hero[data-scene="o2"] .sc-vis,
.desk-hero[data-scene="o2"] .vis-parcel { display: block; }
.desk-hero[data-scene="o2"] .sc-vis { animation: dk-visit 12s ease-in-out infinite; }
.desk-hero[data-scene="o2"] .vis-parcel { animation: dk-carry 12s linear infinite; }
.desk-hero[data-scene="o2"] .sc-parcel { display: block; animation: dk-land 12s ease infinite; }
.desk-hero[data-scene="o2"] .sc-head { animation: dk-thanks 12s ease infinite; }

/* o3 — a resident stops to chat: bubbles take turns */
.desk-hero[data-scene="o3"] .sc-vis { display: block; animation: dk-visit 12s ease-in-out infinite; }
.desk-hero[data-scene="o3"] .bub-vis { display: block; animation: dk-chat-vis 12s ease infinite; }
.desk-hero[data-scene="o3"] .bub-port { display: block; animation: dk-chat-port 12s ease infinite; }
.desk-hero[data-scene="o3"] .sc-head { animation: dk-thanks 12s ease infinite; }

/* o4 — ding! at the bell */
.desk-hero[data-scene="o4"] .sc-ding { display: block; animation: dk-ding 4s ease-out infinite; }
.desk-hero[data-scene="o4"] .sc-arm { animation: dk-tap 4s ease-in-out infinite; }
.desk-hero[data-scene="o4"] .sc-bell { animation: dk-ring 4s ease-in-out infinite; }

/* o5 — sorting the post: letters fly off the stack, her eyes follow */
.desk-hero[data-scene="o5"] .pr-post { display: block; }
.desk-hero[data-scene="o5"] .pr-env { display: block; animation: dk-env 5s ease-in-out infinite; }
.desk-hero[data-scene="o5"] .sc-head { animation: dk-watch 5s ease-in-out infinite; }

/* o6 — tea break: cup all the way up for a sip */
.desk-hero[data-scene="o6"] .pr-cup { display: block; }
.desk-hero[data-scene="o6"] .sc-arm { animation: dk-sip 7s ease-in-out infinite; }
.desk-hero[data-scene="o6"] .sc-head { animation: dk-sip-head 7s ease-in-out infinite; }

/* o7 — on the corner of the desk, ankles swinging */
.desk-hero[data-scene="o7"] .sc-porter { display: none; }
.desk-hero[data-scene="o7"] .sc-sit { display: block; animation: dk-breathe 4.5s ease-in-out infinite; }
.desk-hero[data-scene="o7"] .sit-leg1 { animation: dk-sitleg 3s ease-in-out infinite; }
.desk-hero[data-scene="o7"] .sit-leg2 { animation: dk-sitleg 3s ease-in-out -1.5s infinite; }
.desk-hero[data-scene="o7"] .sit-head { animation: dk-look 8s ease-in-out infinite; }

/* o8 — pondering: hand to chest, thoughts rising */
.desk-hero[data-scene="o8"] .pr-think { display: block; }
.desk-hero[data-scene="o8"] .pr-think circle { animation: dk-think 4s ease infinite; }
.desk-hero[data-scene="o8"] .pr-think circle:nth-child(2) { animation-delay: 0.5s; }
.desk-hero[data-scene="o8"] .pr-think circle:nth-child(3) { animation-delay: 1s; }
.desk-hero[data-scene="o8"] .sc-arm { transform: rotate(85deg); }
.desk-hero[data-scene="o8"] .sc-head { animation: dk-ponder 8s ease-in-out infinite; }

/* o9 — fixing the desk: three good whacks, the desk jumps */
.desk-hero[data-scene="o9"] .pr-wrench { display: block; }
.desk-hero[data-scene="o9"] .sc-arm { animation: dk-fix 5s ease-in-out infinite; }
.desk-hero[data-scene="o9"] .sc-desk { animation: dk-jolt 5s linear infinite; }

/* o10 — keys for a guest: held up high, having a jangle */
.desk-hero[data-scene="o10"] .sc-vis { display: block; animation: dk-visit 12s ease-in-out infinite; }
.desk-hero[data-scene="o10"] .sc-arm { animation: dk-keys-arm 12s ease-in-out infinite; }
.desk-hero[data-scene="o10"] .pr-keysup { display: block; animation: dk-keysup 12s ease-in-out infinite; }

/* ── closed scenes ── */
/* c1 — the sign sways */
.desk-hero[data-scene="c1"] .sc-closed { animation: dk-sway 5s ease-in-out infinite; }
/* c2 — zzz */
.desk-hero[data-scene="c2"] .pr-zzz { display: block; }
.desk-hero[data-scene="c2"] .pr-zzz text { animation: dk-zzz 4s ease-out infinite; }
.desk-hero[data-scene="c2"] .pr-zzz text:nth-child(2) { animation-delay: 0.7s; }
.desk-hero[data-scene="c2"] .pr-zzz text:nth-child(3) { animation-delay: 1.4s; }
/* c3 — watching the clock */
.desk-hero[data-scene="c3"] .pr-clock { display: block; }
.desk-hero[data-scene="c3"] .pr-hand { animation: dk-clock 10s linear infinite; }
/* c4 — the night moth */
.desk-hero[data-scene="c4"] .pr-moth { display: block; animation: dk-moth 7s ease-in-out infinite; }
/* c5 — the night cat crosses the lobby */
.desk-hero[data-scene="c5"] .sc-cat { display: block; animation: dk-cat 16s linear infinite; }
.desk-hero[data-scene="c5"] .cat-tail { animation: dk-tail 2s ease-in-out infinite; }

/* ── keyframes ── */
@keyframes dk-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }

/* the visitor: walks in (bobbing), waits at the desk, walks off */
@keyframes dk-visit {
  0% { transform: translate(-185px, 0); }
  4% { transform: translate(-162px, -3px); }
  8% { transform: translate(-139px, 0); }
  12% { transform: translate(-116px, -3px); }
  16% { transform: translate(-93px, 0); }
  20% { transform: translate(-70px, -3px); }
  24% { transform: translate(-47px, 0); }
  27% { transform: translate(-26px, -2px); }
  30%, 66% { transform: translate(0, 0); }
  70% { transform: translate(-26px, -3px); }
  74% { transform: translate(-52px, 0); }
  78% { transform: translate(-78px, -3px); }
  82% { transform: translate(-104px, 0); }
  86% { transform: translate(-130px, -3px); }
  90% { transform: translate(-156px, 0); }
  94%, 100% { transform: translate(-185px, 0); }
}
@keyframes dk-carry { 0%, 46% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes dk-land {
  0%, 46% { opacity: 0; transform: translateY(-10px); }
  54% { opacity: 1; transform: translateY(0); }
  88% { opacity: 1; transform: translateY(0); }
  94%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes dk-thanks {
  0%, 44%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-6deg); } 56% { transform: rotate(0deg); }
  62% { transform: rotate(-6deg); } 68% { transform: rotate(0deg); }
}
@keyframes dk-chat-vis { 0%, 30% { opacity: 0; } 34%, 46% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes dk-chat-port { 0%, 50% { opacity: 0; } 54%, 66% { opacity: 1; } 70%, 100% { opacity: 0; } }

@keyframes dk-wave {
  0%, 46%, 100% { transform: rotate(0deg); }
  10% { transform: rotate(-55deg); } 16% { transform: rotate(-38deg); }
  22% { transform: rotate(-58deg); } 28% { transform: rotate(-40deg); }
  34% { transform: rotate(-56deg); } 42% { transform: rotate(0deg); }
}
@keyframes dk-tap {
  0%, 52%, 100% { transform: rotate(0deg); }
  12% { transform: rotate(-30deg); } 20% { transform: rotate(-14deg); }
  28% { transform: rotate(-30deg); } 36% { transform: rotate(-14deg); }
  44% { transform: rotate(0deg); }
}
@keyframes dk-ring {
  0%, 12% { transform: rotate(0deg); }
  16% { transform: rotate(-10deg); } 22% { transform: rotate(8deg); }
  28% { transform: rotate(-7deg); } 34% { transform: rotate(5deg); }
  40% { transform: rotate(-3deg); } 48%, 100% { transform: rotate(0deg); }
}
@keyframes dk-ding {
  0%, 14% { opacity: 0; transform: scale(0.5); }
  26% { opacity: 0.9; transform: scale(1); }
  46% { opacity: 0; transform: scale(1.45); }
  100% { opacity: 0; transform: scale(1.45); }
}
@keyframes dk-env {
  0% { transform: translate(0, 0); opacity: 1; }
  20% { transform: translate(-2px, -28px); opacity: 1; }
  45% { transform: translate(42px, -32px); opacity: 1; }
  62% { transform: translate(72px, -10px); opacity: 1; }
  68% { transform: translate(76px, 2px); opacity: 0; }
  80% { transform: translate(0, 0); opacity: 0; }
  86%, 100% { transform: translate(0, 0); opacity: 1; }
}
@keyframes dk-watch {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(5deg); }
  45% { transform: rotate(-6deg); }
  62% { transform: rotate(-3deg); }
  78% { transform: rotate(0deg); }
}
@keyframes dk-sip {
  0%, 10% { transform: rotate(18deg); }
  30%, 54% { transform: rotate(100deg); }
  60% { transform: rotate(88deg); }
  66% { transform: rotate(100deg); }
  84%, 100% { transform: rotate(18deg); }
}
@keyframes dk-sip-head {
  0%, 26%, 100% { transform: rotate(0deg); }
  36%, 60% { transform: rotate(-7deg); }
  72% { transform: rotate(0deg); }
}
@keyframes dk-sitleg { 0%, 100% { transform: rotate(4deg); } 50% { transform: rotate(-8deg); } }
@keyframes dk-look {
  0%, 24%, 78%, 100% { transform: rotate(0deg); }
  32%, 46% { transform: rotate(6deg); }
  56%, 70% { transform: rotate(-6deg); }
}
@keyframes dk-think {
  0%, 12% { opacity: 0; }
  24%, 68% { opacity: 1; }
  80%, 100% { opacity: 0; }
}
@keyframes dk-ponder { 0%, 16%, 88%, 100% { transform: rotate(0deg); } 32%, 70% { transform: rotate(-7deg); } }
@keyframes dk-fix {
  0%, 36%, 100% { transform: rotate(0deg); }
  6% { transform: rotate(-34deg); } 10% { transform: rotate(4deg); }
  14% { transform: rotate(-34deg); } 18% { transform: rotate(4deg); }
  22% { transform: rotate(-34deg); } 26% { transform: rotate(4deg); }
  30% { transform: rotate(0deg); }
  56% { transform: rotate(-34deg); } 60% { transform: rotate(4deg); }
  64% { transform: rotate(-34deg); } 68% { transform: rotate(4deg); }
  74% { transform: rotate(0deg); }
}
@keyframes dk-jolt {
  0%, 9%, 13%, 17%, 21%, 25%, 29%, 55%, 59%, 63%, 67%, 71%, 100% { transform: translateY(0); }
  10%, 18%, 26%, 60%, 68% { transform: translateY(2px); }
}
@keyframes dk-keys-arm {
  0%, 28% { transform: rotate(0deg); }
  36%, 64% { transform: rotate(-50deg); }
  72%, 100% { transform: rotate(0deg); }
}
@keyframes dk-keysup {
  0%, 33% { opacity: 0; transform: rotate(0deg); }
  37% { opacity: 1; transform: rotate(10deg); }
  42% { transform: rotate(-12deg); }
  47% { transform: rotate(10deg); }
  52% { transform: rotate(-10deg); }
  57% { transform: rotate(8deg); }
  62% { opacity: 1; transform: rotate(0deg); }
  66%, 100% { opacity: 0; transform: rotate(0deg); }
}
@keyframes dk-sway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(4deg); } }
@keyframes dk-zzz {
  0% { opacity: 0; transform: translateY(3px); }
  25% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-14px); }
}
@keyframes dk-clock { to { transform: rotate(360deg); } }
@keyframes dk-moth {
  0%, 100% { transform: translate(0, 0); }
  18% { transform: translate(14px, -12px); }
  40% { transform: translate(26px, 2px); }
  62% { transform: translate(10px, 10px); }
  82% { transform: translate(-6px, 3px); }
}
@keyframes dk-cat { 0% { transform: translateX(-70px); } 100% { transform: translateX(400px); } }
@keyframes dk-tail { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-12deg); } }

@media (prefers-reduced-motion: reduce) {
  .desk-hero svg, .desk-hero svg * { animation: none !important; }
  .desk-hero .pr { display: none !important; }
}