/* Chef-Maskottchen (übernommen 1:1 aus eden-kds) ----------------------- */

/* CSS-Variablen aus base.css (KDS) — werden vom Chef erwartet */
:root {
  --bg-ink:          #0e0d0a;
  --bg-paper:        #17140f;
  --bg-elev:         #201c15;
  --bg-elev-hi:      #2a2519;
  --line-hair:       #2d2a22;
  --line-hair-hi:    #3a362b;

  --text-bone:       #f5f0e6;
  --text-paper:      #e4ddcb;
  --text-soft:       #a89f88;
  --text-faded:      #6b6454;
  --text-ghost:      #3f3a2f;

  --terracotta:      #d48653;
  --terracotta-deep: #a75a2a;

  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'IBM Plex Mono', 'SF Mono', 'Menlo', monospace;

  --space-3: 12px;
  --space-5: 24px;

  --shadow-soft:   0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.3);
  --shadow-strong: 0 4px 12px rgba(0,0,0,0.5), 0 16px 48px rgba(0,0,0,0.4);
}

/* Sleepy chef ----------------------------------------------------------- */
.sleepy-chef {
  display: flex;
  justify-content: center;
  margin: 0 auto var(--space-5);
  position: relative;
  width: 220px;
  min-height: 176px;
}
.sleepy-chef .sc-svg {
  animation: sc-breathe 4s ease-in-out infinite;
  transform-origin: center bottom;
  transition: transform 600ms cubic-bezier(0.34, 1.4, 0.4, 1);
  overflow: visible;
}
.sleepy-chef.sc-phase-wake .sc-svg,
.sleepy-chef.sc-phase-speak .sc-svg,
.sleepy-chef.sc-phase-gesture .sc-svg {
  animation: sc-bob 1.6s ease-in-out infinite;
  transform: translateY(-6px);
}
.sleepy-chef.sc-phase-back-to-sleep .sc-svg {
  animation: none;
  transform: translateY(0) scale(0.99);
}

@keyframes sc-bob {
  0%, 100% { transform: translateY(-6px) rotate(-1deg); }
  50%      { transform: translateY(-9px) rotate(1deg); }
}
.sc-belly {
  fill: var(--bg-elev, #2a2520);
  stroke: var(--text-soft, #b8a890);
  stroke-width: 1.5;
}
.sc-hat-puff {
  fill: #c9bda1;
  stroke: #6a5d4a;
  stroke-width: 1;
  opacity: 0.92;
}
.sc-hat-base {
  fill: #b8aa8c;
  stroke: #5a4f3e;
  stroke-width: 1;
  opacity: 0.95;
}
.sc-hat-band {
  fill: var(--terracotta, #c87456);
  stroke: var(--terracotta-deep, #a75a2a);
  stroke-width: 0.8;
  opacity: 0.95;
}
.sc-eye {
  stroke: var(--text-soft, #b8a890);
  stroke-width: 2;
  stroke-linecap: round;
}
.sc-mouth {
  fill: var(--text-faded, #6a5d4a);
  opacity: 0.6;
}
.sc-shadow {
  fill: rgba(0,0,0,0.35);
}
.sc-z {
  font-family: var(--font-display, serif);
  font-style: italic;
  fill: var(--text-soft, #b8a890);
  opacity: 0;
}
.sc-z1 { font-size: 18px; animation: sc-zfloat 3.6s ease-in-out infinite; }
.sc-z2 { font-size: 22px; animation: sc-zfloat 3.6s ease-in-out infinite 1.2s; }
.sc-z3 { font-size: 26px; animation: sc-zfloat 3.6s ease-in-out infinite 2.4s; }

.sc-eyes-closed {
  stroke: var(--text-soft, #b8a890);
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
  opacity: 1;
  transition: opacity 260ms ease;
  transform-origin: center;
}
.sc-eyes-open  {
  fill: var(--text-bone, #f5f0e6);
  opacity: 0;
  transition: opacity 260ms ease;
}
.sleepy-chef.sc-phase-wake .sc-eyes-closed,
.sleepy-chef.sc-phase-speak .sc-eyes-closed,
.sleepy-chef.sc-phase-gesture .sc-eyes-closed { opacity: 0; }
.sleepy-chef.sc-phase-wake .sc-eyes-open,
.sleepy-chef.sc-phase-speak .sc-eyes-open,
.sleepy-chef.sc-phase-gesture .sc-eyes-open { opacity: 1; }

.sleepy-chef.sc-phase-yawn .sc-eyes-open {
  opacity: 0;
  transition: opacity 500ms ease;
}
.sleepy-chef.sc-phase-yawn .sc-eyes-closed {
  opacity: 1;
  transition: opacity 500ms ease;
}

.sleepy-chef.sc-phase-back-to-sleep .sc-eyes-open,
.sleepy-chef.sc-phase-back-to-sleep .sc-eyes-closed,
.sleepy-chef.sc-phase-back-to-sleep .sc-mouth-sleep,
.sleepy-chef.sc-phase-back-to-sleep .sc-mouth-awake,
.sleepy-chef.sc-phase-back-to-sleep .sc-mouth-yawn {
  transition: opacity 1600ms ease-in-out, transform 1600ms ease-in-out;
}
.sleepy-chef.sc-phase-back-to-sleep .sc-eyes-closed { opacity: 1; }
.sleepy-chef.sc-phase-back-to-sleep .sc-eyes-open   { opacity: 0; transform: scaleY(0.05); }
.sleepy-chef.sc-phase-back-to-sleep .sc-mouth-sleep { opacity: 1; }
.sleepy-chef.sc-phase-back-to-sleep .sc-mouth-awake { opacity: 0; }
.sleepy-chef.sc-phase-back-to-sleep .sc-mouth-yawn  { opacity: 0; transform: scale(0.4); }

.sc-mouth-sleep  { fill: var(--text-faded, #6a5d4a); opacity: 1; transition: opacity 260ms ease; }
.sc-mouth-awake  { stroke: var(--text-soft, #b8a890); stroke-width: 2.2; stroke-linecap: round; opacity: 0; transition: opacity 260ms ease; }
.sc-mouth-yawn   { fill: #1a1610; stroke: var(--text-soft, #b8a890); stroke-width: 1.5; opacity: 0; transform-origin: 100px 122px; transform: scale(0.2); }

.sleepy-chef.sc-phase-speak .sc-mouth-sleep,
.sleepy-chef.sc-phase-gesture .sc-mouth-sleep,
.sleepy-chef.sc-phase-yawn .sc-mouth-sleep { opacity: 0; }
.sleepy-chef.sc-phase-speak .sc-mouth-awake,
.sleepy-chef.sc-phase-gesture .sc-mouth-awake { opacity: 1; }
.sleepy-chef.sc-phase-yawn .sc-mouth-awake { opacity: 0; }

.sleepy-chef.sc-phase-yawn .sc-mouth-yawn {
  animation: yawn-pulse 1100ms ease-in-out forwards;
}
@keyframes yawn-pulse {
  0%   { opacity: 0; transform: scale(0.2); }
  35%  { opacity: 1; transform: scale(1.1); }
  65%  { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(0.2); }
}

.sc-hand { opacity: 0; transform-origin: 145px 95px; transition: opacity 240ms ease; }
.sc-hand-blob { fill: var(--text-soft, #b8a890); }
.sleepy-chef.sc-phase-gesture .sc-hand {
  opacity: 1;
  animation: sc-wave 0.6s ease-in-out 3;
}
@keyframes sc-wave {
  0%   { transform: rotate(0deg)  translate(0, 0); }
  25%  { transform: rotate(-22deg) translate(-2px, -3px); }
  75%  { transform: rotate(22deg)  translate(2px, -3px); }
  100% { transform: rotate(0deg)  translate(0, 0); }
}

.sc-zzz { transition: opacity 800ms ease; }
.sleepy-chef.sc-phase-wake .sc-zzz,
.sleepy-chef.sc-phase-speak .sc-zzz,
.sleepy-chef.sc-phase-gesture .sc-zzz,
.sleepy-chef.sc-phase-yawn .sc-zzz { opacity: 0; transition: opacity 200ms ease; }

.sc-bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 24px);
  transform: translateX(-30%);
  width: max-content;
  max-width: min(420px, 80vw);
  background: var(--bg-elev-hi, #2a2519);
  color: var(--text-bone);
  border: 1px solid var(--terracotta);
  border-radius: 14px;
  padding: 12px 18px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  line-height: 1.4;
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
  hyphens: auto;
  box-shadow: var(--shadow-strong);
  animation: sc-bubble-pop 360ms cubic-bezier(0.34, 1.6, 0.4, 1) both;
  z-index: 2;
}
.sc-bubble-tail {
  position: absolute;
  bottom: -8px;
  left: 36%;
  width: 14px;
  height: 14px;
  background: var(--bg-elev-hi, #2a2519);
  border-right: 1px solid var(--terracotta);
  border-bottom: 1px solid var(--terracotta);
  transform: rotate(45deg);
}
@keyframes sc-bubble-pop {
  0%   { opacity: 0; transform: translateX(-30%) translateY(8px) scale(0.7); }
  60%  { opacity: 1; transform: translateX(-30%) translateY(-2px) scale(1.04); }
  100% { opacity: 1; transform: translateX(-30%) translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .sleepy-chef .sc-svg,
  .sleepy-chef.sc-phase-wake .sc-svg,
  .sleepy-chef.sc-phase-speak .sc-svg,
  .sleepy-chef.sc-phase-gesture .sc-svg,
  .sc-hand, .sc-bubble {
    animation: none;
  }
}

@keyframes sc-breathe {
  0%, 100% { transform: scale(1, 1); }
  50%      { transform: scale(1.03, 0.97); }
}
@keyframes sc-zfloat {
  0%   { opacity: 0; transform: translate(0, 4px) scale(0.7); }
  20%  { opacity: 0.85; transform: translate(2px, -2px) scale(1); }
  70%  { opacity: 0.6;  transform: translate(6px, -10px) scale(1.05); }
  100% { opacity: 0; transform: translate(10px, -18px) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .sleepy-chef, .sc-z1, .sc-z2, .sc-z3 { animation: none; }
}

/* ============ Chef Mascot — Skits ===================================== */
.mascot {
  position: fixed;
  z-index: 80;
  pointer-events: none;
}
.mascot-svg { display: block; }

.mc-face-smile, .mc-face-shock, .mc-face-scared, .mc-sweat { opacity: 0; }
.mc-face-smile.face-smile-then-shock { opacity: 1; animation: mc-shock-swap 5.5s steps(1, end) forwards; }
.mc-face-shock.face-smile-then-shock { opacity: 0; animation: mc-shock-in 5.5s steps(1, end) forwards; }
.mc-face-scared.face-scared { opacity: 1; }

.mc-sweat.face-scared {
  opacity: 1;
  transform-origin: 50px 90px;
  animation: sweat-fly 0.55s ease-out infinite;
}
@keyframes sweat-fly {
  0%   { opacity: 0; transform: translate(0, 0); }
  30%  { opacity: 1; transform: translate(-4px, -2px); }
  100% { opacity: 0; transform: translate(-14px, 6px); }
}

.mouse-tail {
  transform-origin: 80px 56px;
  animation: mouse-tail-wiggle 0.18s ease-in-out infinite;
}
@keyframes mouse-tail-wiggle {
  0%, 100% { transform: rotate(-12deg); }
  50%      { transform: rotate(14deg); }
}
.mouse-leg-back  { animation: mouse-leg-back 0.16s linear infinite; transform-origin: 62px 64px; }
.mouse-leg-front { animation: mouse-leg-front 0.16s linear infinite; transform-origin: 32px 64px; }
@keyframes mouse-leg-back {
  0%, 100% { transform: translate(-3px, 0) scaleX(0.9); }
  50%      { transform: translate(3px, -2px) scaleX(1.1); }
}
@keyframes mouse-leg-front {
  0%, 100% { transform: translate(3px, -2px) scaleX(1.1); }
  50%      { transform: translate(-3px, 0) scaleX(0.9); }
}

.pd-speed-lines, .mc-speed-lines {
  position: absolute;
  pointer-events: none;
  opacity: 0;
}
.pd-speed-chef {
  position: absolute;
  top: -100px; left: 50%;
  transform: translateX(-50%);
  width: 130px; height: 100px;
  background:
    linear-gradient(to top, rgba(245,240,230,0.20), transparent 90%) 5% 0/1px 100% no-repeat,
    linear-gradient(to top, rgba(245,240,230,0.16), transparent 80%) 22% 10%/1px 90% no-repeat,
    linear-gradient(to top, rgba(245,240,230,0.22), transparent 95%) 39% 0/1px 100% no-repeat,
    linear-gradient(to top, rgba(245,240,230,0.14), transparent 75%) 56% 18%/1px 80% no-repeat,
    linear-gradient(to top, rgba(245,240,230,0.18), transparent 85%) 72% 8%/1px 95% no-repeat,
    linear-gradient(to top, rgba(245,240,230,0.13), transparent 70%) 88% 22%/1px 75% no-repeat;
  opacity: 0;
  animation: speed-vert-rise 0.55s linear infinite, line-fade-soft 2.5s ease-out 3.7s forwards;
}
.pd-speed-hat {
  position: absolute;
  top: -100px; left: 50%;
  transform: translateX(-50%);
  width: 110px; height: 100px;
  background:
    linear-gradient(to top, rgba(245,240,230,0.22), transparent 90%) 8% 0/1px 100% no-repeat,
    linear-gradient(to top, rgba(245,240,230,0.16), transparent 80%) 28% 14%/1px 86% no-repeat,
    linear-gradient(to top, rgba(245,240,230,0.24), transparent 95%) 48% 0/1px 100% no-repeat,
    linear-gradient(to top, rgba(245,240,230,0.15), transparent 75%) 68% 20%/1px 80% no-repeat,
    linear-gradient(to top, rgba(245,240,230,0.20), transparent 88%) 88% 5%/1px 95% no-repeat;
  opacity: 0;
  animation: speed-vert-rise 0.5s linear infinite, line-fade-soft 4s ease-out 1.8s forwards;
}
@keyframes speed-vert-rise {
  0%   { background-position-y: 100%, 110%, 95%, 105%, 100%, 115%; }
  100% { background-position-y: -120%, -110%, -130%, -100%, -120%, -105%; }
}
@keyframes line-fade-soft {
  0%   { opacity: 0; }
  15%  { opacity: 0.7; }
  85%  { opacity: 0.7; }
  100% { opacity: 0; }
}

.mc-speed-runner, .mc-speed-mouse {
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  width: 100px; height: 60px;
  background:
    linear-gradient(to left, rgba(245,240,230,0.18), transparent 85%) 0 22%/100% 1px no-repeat,
    linear-gradient(to left, rgba(245,240,230,0.14), transparent 75%) 12% 42%/85% 1px no-repeat,
    linear-gradient(to left, rgba(245,240,230,0.20), transparent 90%) 0 60%/100% 1px no-repeat,
    linear-gradient(to left, rgba(245,240,230,0.12), transparent 70%) 6% 80%/82% 1px no-repeat;
  opacity: 0;
  animation: speed-horiz-trail 0.4s linear infinite, line-fade-soft 5.6s ease-out forwards;
}
.mc-speed-mouse { width: 65px; height: 30px; }
@keyframes speed-horiz-trail {
  0%   { background-position-x: -120%, -110%, -130%, -100%; }
  100% { background-position-x: 100%, 110%, 95%, 105%; }
}

@keyframes mc-shock-swap {
  0%   { opacity: 1; }
  35%  { opacity: 1; }
  36%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes mc-shock-in {
  0%   { opacity: 0; }
  35%  { opacity: 0; }
  36%  { opacity: 1; }
  100% { opacity: 1; }
}

/* ---- Skit 1: peek-dive ---- */
.mascot-peek-dive {
  top: 0;
  left: var(--mascot-x, 50%);
  width: 170px;
  height: 136px;
  transform: translateX(-50%);
}
.mascot-peek-dive .pd-chef {
  position: absolute;
  inset: 0;
  animation:
    pd-chef-peek 4.5s cubic-bezier(0.34, 1.3, 0.4, 1) forwards,
    pd-chef-fall 2.6s linear 4.5s forwards;
}
.mascot-peek-dive .pd-chef-shake {
  animation: pd-confused 0.55s ease-in-out 2.4s 3 alternate;
}
.mascot-peek-dive .pd-chef .mascot-svg {
  transform-origin: center center;
  animation: pd-flip 7.1s linear forwards;
}
@keyframes pd-confused {
  0%   { transform: translateX(-4px) rotate(-1.5deg); }
  100% { transform: translateX(4px) rotate(1.5deg); }
}
.mascot-peek-dive .pd-hat {
  position: absolute;
  inset: 0;
  animation:
    pd-hat-peek 2.1s cubic-bezier(0.34, 1.3, 0.4, 1) forwards,
    pd-hat-fall 5s linear 2.1s forwards;
}
.mascot-peek-dive .pd-hat-inner {
  width: 100%;
  height: 100%;
  transform: rotate(180deg);
  animation: pd-hat-spin 7.1s linear forwards;
}
@keyframes pd-chef-peek {
  0%   { transform: translateY(-100%); }
  27%  { transform: translateY(-10%); }
  64%  { transform: translateY(-10%); }
  76%  { transform: translateY(-18%); }
  100% { transform: translateY(-10%); }
}
@keyframes pd-chef-fall {
  0%   { transform: translateY(-10%); }
  100% { transform: translateY(115vh); }
}
@keyframes pd-flip {
  0%   { transform: rotate(180deg); }
  65%  { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}
@keyframes pd-hat-peek {
  0%   { transform: translateY(-100%); }
  43%  { transform: translateY(-10%); }
  100% { transform: translateY(-10%); }
}
@keyframes pd-hat-fall {
  0%   { transform: translateY(-10%); }
  100% { transform: translateY(115vh); }
}
@keyframes pd-hat-spin {
  0%   { transform: rotate(180deg); }
  35%  { transform: rotate(180deg); }
  100% { transform: rotate(720deg); }
}

/* ---- Skit 2: mouse-chase ---- */
.mascot-mouse-chase {
  left: 0;
  bottom: 0;
  height: 110px;
  width: 100vw;
}
.mascot-mouse-chase .mc-runner {
  position: absolute;
  bottom: 6px;
  left: 0;
  animation: mc-runner 5.8s cubic-bezier(0.4, 0.05, 0.5, 0.95) forwards;
}
.mascot-mouse-chase .mc-runner .mascot-svg {
  animation: mc-runner-bob 0.18s linear infinite;
}
.mascot-mouse-chase .mc-mouse {
  position: absolute;
  bottom: 12px;
  left: 0;
  animation: mc-mouse 5.8s cubic-bezier(0.4, 0.05, 0.5, 0.95) forwards;
}
.mascot-mouse-chase .mc-mouse .mascot-mouse-svg {
  transform: scaleX(-1);
  animation: mc-mouse-hop 0.32s ease-in-out infinite;
}
@keyframes mc-runner {
  0%   { transform: translateX(-20vw); }
  100% { transform: translateX(120vw); }
}
@keyframes mc-mouse {
  0%   { transform: translateX(-50vw); }
  100% { transform: translateX(120vw); }
}
@keyframes mc-runner-bob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-6px) rotate(3deg); }
}
@keyframes mc-mouse-hop {
  0%, 100% { transform: scaleX(-1) translateY(0); }
  50%      { transform: scaleX(-1) translateY(-9px); }
}

@media (prefers-reduced-motion: reduce) {
  .mascot { display: none; }
}