/* Live atmosphere (nodes built by js/ambience.js only when motion is welcome).
   Only transform and opacity animate. Scenes off screen (no .fx-live) and hidden tabs (.fx-hidden) stay paused. */

.fx-leaves, .fx-steam { position: absolute; pointer-events: none; }

/* Steam: faint warm wisps that rise, widen, lean with the air and dissolve */
.fx-steam { z-index: 1; width: var(--w); height: calc(var(--w) * 2.6); translate: -50% -96%; contain: layout paint style; }
.kind__link .fx-steam { z-index: -1; }
/* Small photos already show painted steam over the cup: live wisps there need more body to read as moving */
:is(.tea-card__media, .kind__link) .fx-steam { --gain: 2; }
.fx-steam i {
  position: absolute;
  inset: 0;
  background: var(--tex) center bottom / 100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 35%, transparent 96%);
  mask-image: linear-gradient(to top, #000 0%, #000 35%, transparent 96%);
  mix-blend-mode: screen;
  opacity: 0;
  transform-origin: 50% 100%;
  animation: steam-rise var(--d) cubic-bezier(0.25, 0.1, 0.35, 1) var(--delay) infinite paused;
  will-change: transform, opacity;
}
@keyframes steam-rise {
  0% { opacity: 0; transform: translate3d(0, 8%, 0) scale(calc(var(--flip) * 0.55), 0.7) rotate(0deg); }
  18% { opacity: calc(var(--peak) * var(--gain, 1)); }
  55% { opacity: calc(var(--peak) * var(--gain, 1) * 0.7); }
  100% { opacity: 0; transform: translate3d(var(--drift), -38%, 0) scale(calc(var(--flip) * 1.8), 1.25) rotate(var(--rot)); }
}

/* Leaves: three depth planes, each leaf on three layers (fall + wind, pendulum sway, 3D tumble) */
.fx-leaves { inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; contain: strict; perspective: 600px; }
.kind__link .fx-leaves { z-index: -1; }
/* The menu photo has a filter, so it paints as its own layer; Safari puts it over leaves that sit at z-index 0 */
.tea-card__media .fx-leaves { z-index: 1; }
.fx-leaves i { position: absolute; inset-block: 0; left: var(--x); width: 1px; animation: leaf-fall var(--fall) linear var(--delay) infinite paused; will-change: transform; }
.fx-leaves s { position: absolute; top: 0; left: 0; animation: leaf-sway var(--sway) ease-in-out var(--delay) infinite alternate paused; will-change: transform; }
.fx-leaves b {
  display: block;
  width: var(--size);
  height: var(--size);
  margin-left: calc(var(--size) / -2);
  background: center / contain no-repeat;
  opacity: var(--o);
  backface-visibility: visible;
  animation: leaf-tumble var(--spin) linear var(--delay) infinite paused;
  will-change: transform;
}
@keyframes leaf-fall {
  0% { transform: translate3d(0, -14%, 0); }
  10% { transform: translate3d(calc(var(--wind) * 0.06), -6%, 0); } /* lets go of the branch slowly, then falls steadily */
  100% { transform: translate3d(var(--wind), 100%, 0); }
}
@keyframes leaf-sway {
  0% { transform: translate3d(calc(var(--amp) * -1), -6px, 0) rotate(-18deg); }
  50% { transform: translate3d(0, 8px, 0) rotate(0deg); }
  100% { transform: translate3d(var(--amp), -6px, 0) rotate(22deg); }
}
@keyframes leaf-tumble {
  from { transform: rotate3d(var(--ax), var(--ay), 1, 0deg); }
  to { transform: rotate3d(var(--ax), var(--ay), 1, 360deg); }
}

.fx-live :is(.fx-steam i, .fx-leaves i, .fx-leaves s, .fx-leaves b) { animation-play-state: running; }
.fx-hidden .fx-live :is(.fx-steam i, .fx-leaves i, .fx-leaves s, .fx-leaves b) { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .fx-leaves, .fx-steam { display: none; }
}