/* ------------------------------------------------------------------
   Steam, smoke and music notes over the tea shop — from v4.
   The stage below is the coordinate system: the image and every emitter
   share it, so the hotspot percentages stay locked to the kettle, the
   glass and the beedi at any window shape. The page shell (.app) plays
   the part of .chaiya-scene, so only the stage and the effects live here.
   ------------------------------------------------------------------ */

/*
  The artwork and all emitters live inside the same 3:2 stage.
  The stage uses "cover" sizing but is anchored to TOP + LEFT instead of center.
  Result:
  - the radio is no longer cropped off the left edge
  - the logo sits lower in the visible viewport instead of being clipped
  - all animation hotspots remain perfectly locked to the artwork
*/
.chaiya-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: max(100vw, 150dvh);
  aspect-ratio: 3 / 2;
  overflow: visible;
}

.chaiya-scene__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  pointer-events: none;
  z-index: 0;
}

.fx-emitter {
  position: absolute;
  width: 1px;
  height: 1px;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}

/* Hotspots calibrated for chaiyakada-bg.png (1536 × 1024). */
.fx-radio          { left: 42.7%; top: 49.2%; }
.fx-kettle         { left: 54.8%; top: 51.7%; }
.fx-drinking-glass { left: 88.4%; top: 50.2%; }
.fx-beedi          { left: 73.2%; top: 58.1%; }

/* ---------- MUSIC NOTES ---------- */
.music-note {
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(247, 218, 151, .94);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(40, 18, 4, .9), 0 0 8px rgba(247, 218, 151, .28);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.2));
  will-change: transform, opacity;
  animation: music-float var(--life) cubic-bezier(.2,.55,.22,1) forwards;
}

@keyframes music-float {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(var(--r0)) scale(.72);
  }
  12% { opacity: .96; }
  72% { opacity: .74; }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) rotate(var(--r1)) scale(1.15);
  }
}

/* ---------- STEAM ---------- */
.steam-puff {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--size);
  height: calc(var(--size) * 1.35);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 55%,
      rgba(248,240,219,.42) 0%,
      rgba(248,240,219,.18) 42%,
      rgba(248,240,219,0) 74%);
  filter: blur(var(--blur));
  transform-origin: center bottom;
  mix-blend-mode: screen;
  will-change: transform, opacity;
  animation: steam-rise var(--life) ease-out forwards;
}

@keyframes steam-rise {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(.5,.35) rotate(var(--r0));
  }
  16% { opacity: var(--alpha); }
  55% { opacity: calc(var(--alpha) * .72); }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), var(--dy)) scale(1.45, 1.85) rotate(var(--r1));
  }
}

/* ---------- BEEDI SMOKE ---------- */
.smoke-puff {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--size);
  height: var(--size);
  border-radius: 48% 52% 58% 42% / 55% 44% 56% 45%;
  background:
    radial-gradient(circle at 45% 55%,
      rgba(210,205,190,.28) 0%,
      rgba(175,168,151,.16) 42%,
      rgba(150,140,122,0) 72%);
  filter: blur(var(--blur));
  mix-blend-mode: screen;
  will-change: transform, opacity;
  animation: smoke-drift var(--life) ease-out forwards;
}

@keyframes smoke-drift {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.32) rotate(var(--r0));
  }
  13% { opacity: var(--alpha); }
  60% { opacity: calc(var(--alpha) * .62); }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), var(--dy)) scale(1.9) rotate(var(--r1));
  }
}


@media (max-width: 760px) {
  .chaiya-stage {
    /* Preserve the radio/logo side on narrow screens; crop primarily from the right. */
    left: 0;
    top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .music-note, .steam-puff, .smoke-puff { display: none !important; }
}