/* ════════ the coffee house theme ════════ */

body.theme-coffee .theme-site {
  display: flex;
  flex-direction: column;
  background: var(--paper);
}

.cafe-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  perspective: 1500px;
  overflow: hidden;
}
.cafe-stage.closed { cursor: pointer; }

.interior-wrap,
.wall-half {
  position: absolute;
  inset: 0;
}
.interior-wrap svg,
.wall-half svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* interior sits behind; dim until the wall opens */
.interior-wrap { filter: brightness(0.62) saturate(0.85); transition: filter 1s ease 0.35s; }
.cafe-stage.open .interior-wrap { filter: none; }

/* the facade split into two door-halves */
.wall-half { transition: transform 1.35s cubic-bezier(0.65, 0, 0.3, 1); will-change: transform; }
.wall-half.left  { clip-path: inset(0 50% 0 0); transform-origin: left center; }
.wall-half.right { clip-path: inset(0 0 0 50%); transform-origin: right center; }
.cafe-stage.open .wall-half.left  { transform: translateX(-104%) rotateY(14deg); }
.cafe-stage.open .wall-half.right { transform: translateX(104%) rotateY(-14deg); }

.open-hint {
  position: absolute;
  left: 50%;
  bottom: 9%;
  transform: translateX(-50%);
  z-index: 5;
  font-family: var(--hand-display);
  font-weight: 700;
  font-size: clamp(19px, 2.6vw, 27px);
  color: var(--cream);
  background: rgba(47, 42, 38, 0.82);
  border: 2.5px solid var(--cream);
  border-radius: 20px 24px 22px 8px / 24px 18px 24px 18px;
  padding: 6px 22px;
  pointer-events: none;
  animation: hint-bob 1.7s ease-in-out infinite;
  transition: opacity 0.4s ease;
}
.cafe-stage.open .open-hint { opacity: 0; }
@keyframes hint-bob { 50% { transform: translateX(-50%) translateY(-7px); } }

.cafe-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 9px 12px;
  font-family: var(--hand-body);
  font-size: 15.5px;
  color: var(--cream);
  background: var(--ink);
  border-top: 3px solid var(--coffee-dark);
}

/* ── svg scene animations ── */
.sway { animation: sway 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% -60%; }
.sway-slow { animation: sway 6.5s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% -40%; }
@keyframes sway {
  0%, 100% { transform: rotate(-1.1deg); }
  50% { transform: rotate(1.1deg); }
}

.bulbs circle { animation: bulb-glow 2.6s ease-in-out infinite; }
.bulbs circle:nth-child(2n) { animation-delay: 0.9s; }
.bulbs circle:nth-child(3n) { animation-delay: 1.6s; }
@keyframes bulb-glow { 50% { opacity: 0.55; } }

.lamp-glow { animation: lamp-flicker 5s ease-in-out infinite; }
@keyframes lamp-flicker { 50% { opacity: 0.17; } }

.steam-s { animation: minisip 2.2s ease-in-out infinite; }
@keyframes minisip { 50% { opacity: 0.35; } }

/* rising steam inside the interior scene */
.steam {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: scene-steam 2.8s ease-in-out infinite;
}
.sm2 { animation-delay: 0.7s; }
.sm3 { animation-delay: 1.3s; }
.sd1 { animation-delay: 0.3s; }
.sd2 { animation-delay: 1s; }
@keyframes scene-steam {
  0% { opacity: 0; transform: translateY(10px) scaleY(0.8); }
  30% { opacity: 0.75; }
  100% { opacity: 0; transform: translateY(-26px) scaleY(1.15); }
}

/* the cat */
.cat { cursor: pointer; outline: none; }
.cat:focus { outline: none; }
.cat:focus-visible { outline: 3px dashed var(--terracotta); outline-offset: 6px; }
.cat-tail {
  transform-box: fill-box;
  transform-origin: 90% 8%;
  animation: tail-swish 3.4s ease-in-out infinite;
}
.cat.excited .cat-tail { animation: tail-swish 0.7s ease-in-out 3; }
@keyframes tail-swish {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(9deg); }
}
.cat-eyes {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: cat-blink 6.2s infinite;
}
@keyframes cat-blink {
  0%, 91.5%, 95.5%, 100% { transform: scaleY(1); }
  93.5% { transform: scaleY(0.06); }
}
.mew { transition: opacity 0.25s ease; }
.mew.show { opacity: 1 !important; }