* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body { background: #0d0820; }

.scroll-space { height: 500vh; }

/* ── SZENE ───────────────────────────────────────────── */
.scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(160deg, #0d0820 0%, #150d2e 55%, #0a0618 100%);
}

/* ── ARM-GRUPPE (alles bewegt sich gemeinsam) ────────── */
.arm-group {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%) translateY(-320px);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 20;
}

/* Emoji-Hand, 180° gedreht → Finger zeigen nach unten */
.hand {
  font-size: 4rem;
  line-height: 1;
  transform: rotate(180deg);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6));
}

/* ── FADEN ───────────────────────────────────────────── */
.string-line {
  width: 2px;
  height: 100px;
  background: linear-gradient(
    to bottom,
    rgba(210, 185, 130, 0.9),
    rgba(210, 185, 130, 0.3)
  );
}

/* ── TEEBEUTEL ───────────────────────────────────────── */
.teabag {
  width: 44px;
  height: 52px;
  background: linear-gradient(145deg, #5a3268, #321542);
  border-radius: 5px 5px 10px 10px;
  position: relative;
  box-shadow:
    0 4px 14px rgba(60, 10, 100, 0.5),
    inset 0 1px 4px rgba(255, 255, 255, 0.08);
}

/* Kleines Etikett oben */
.teabag::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 11px;
  height: 7px;
  background: rgba(210, 185, 130, 0.7);
  border-radius: 3px;
}

/* ── TASSENBEREICH ───────────────────────────────────── */
.cup-area {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 5;
}

.cup-wrapper {
  position: relative;
  width: 200px;
}

/* ── DAMPF (innerhalb cup-wrapper, überragt oben) ────── */
.steam-container {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 70px;
  display: flex;
  justify-content: center;
  gap: 12px;
  align-items: flex-end;
  pointer-events: none;
}

.wisp {
  border-radius: 4px;
  background: rgba(200, 190, 235, 0.18);
  animation: steam 3.2s ease-out infinite;
  flex-shrink: 0;
}

/* Zufällig wirkende Delays und unterschiedliche Größen */
.wisp:nth-child(1) { width: 7px;  height: 42px; animation-delay: 1.3s; }
.wisp:nth-child(2) { width: 9px;  height: 58px; animation-delay: 0.2s; }
.wisp:nth-child(3) { width: 6px;  height: 50px; animation-delay: 2.7s; }
.wisp:nth-child(4) { width: 8px;  height: 45px; animation-delay: 0.9s; }
.wisp:nth-child(5) { width: 10px; height: 62px; animation-delay: 1.8s; }
.wisp:nth-child(6) { width: 7px;  height: 38px; animation-delay: 3.1s; }

@keyframes steam {
  0%   { transform: translateY(0)     scaleX(1);   opacity: 0.5; }
  45%  { transform: translateY(-18px) scaleX(1.3); opacity: 0.22; }
  100% { transform: translateY(-38px) scaleX(0.6); opacity: 0; }
}

/* ── TASSE ───────────────────────────────────────────── */
.cup {
  width: 200px;
  height: 190px;
  border: 2.5px solid rgba(255, 255, 255, 0.3);
  border-top: 2.5px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0 0 40px 40px;
  overflow: hidden;
  position: relative;
  box-shadow:
    inset -4px 0 18px rgba(255, 255, 255, 0.03),
    0 8px 30px rgba(0, 0, 0, 0.55);
}

/* Glas-Reflexstreifen */
.cup::before {
  content: '';
  position: absolute;
  top: 5%;
  left: 10px;
  width: 10px;
  height: 55%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.13), transparent);
  border-radius: 5px;
  pointer-events: none;
}

/* ── WASSER ──────────────────────────────────────────── */
.water {
  position: absolute;
  inset: auto 0 0 0;
  height: 65%;
  background: rgba(180, 220, 245, 0.38);
  overflow: hidden;
}

.water::before {
  content: '';
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  height: 2px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 50%;
}

/* ── HENKEL ──────────────────────────────────────────── */
.handle {
  position: absolute;
  right: -34px;
  top: 35%;
  width: 36px;
  height: 62px;
  border: 2.5px solid rgba(255, 255, 255, 0.28);
  border-left: none;
  border-radius: 0 22px 22px 0;
}

/* ── UNTERTASSE ──────────────────────────────────────── */
.saucer {
  width: 242px;
  height: 20px;
  margin-top: 3px;
  background: rgba(255, 255, 255, 0.03);
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

/* ── DYE-RING (erscheint beim ersten Wasserkontakt) ─────── */
#dyeRing {
  position: absolute;
  border-radius: 50%;
  border: none;
  box-shadow: 0 0 10px 4px rgba(120, 40, 180, 0.06);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
}

/* ── TEXT-ZEILEN ────────────────────────────────────────── */
.tea-line {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  color: #ffffff;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.05rem;
  font-style: italic;
  letter-spacing: 0.05em;
  line-height: 1.5;
  max-width: 210px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}

.tea-line.left  { right: calc(50% + 120px); text-align: right; }
.tea-line.right { left:  calc(50% + 150px); text-align: left;  }

/* ── SCROLL-HINWEIS ──────────────────────────────────── */
.scroll-hint {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(200, 180, 255, 0.4);
  font-family: sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  animation: bob 2.2s ease-in-out infinite;
  pointer-events: none;
  transition: opacity 0.5s;
}

@keyframes bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(7px); }
}