/* Real cutout objects move over a small clean plate; the original scene stays still. */
.scene-elements,.scene-element{position:absolute;inset:0;pointer-events:none}
.scene-elements{z-index:2}
.scene-element-clean,.scene-element-sprite{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none;-webkit-user-drag:none;visibility:hidden}
.scene-element-clean{z-index:0}
.scene-element{z-index:1}
.scene-frame[data-motion="on"][data-elements-ready="true"] .scene-element-clean,
.scene-frame[data-motion="on"][data-elements-ready="true"] .scene-element-sprite{visibility:visible}
.clean-cloud{mask-image:radial-gradient(ellipse 12% 9% at 43% 11%,#000 78%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 12% 9% at 43% 11%,#000 78%,transparent 100%)}
.element-cloud .scene-element-sprite{clip-path:inset(4% 46% 82% 33%)}
.clean-leaves{mask-image:radial-gradient(ellipse 22% 19% at 59% 20%,#000 78%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 22% 19% at 59% 20%,#000 78%,transparent 100%)}
.element-leaves{transform-origin:39.1% 13.4%}
.clean-cup{mask-image:radial-gradient(ellipse 16% 19.5% at 54.5% 59.5%,#000 90%,transparent 100%),radial-gradient(ellipse 6% 13.5% at 55.5% 37.5%,#000 80%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 16% 19.5% at 54.5% 59.5%,#000 90%,transparent 100%),radial-gradient(ellipse 6% 13.5% at 55.5% 37.5%,#000 80%,transparent 100%)}
.element-cup{transform-origin:54% 71.5%}
.element-cup .scene-element-sprite{inset:auto;left:9.05%;top:7.83%;width:79.95%;height:81.72%;clip-path:inset(44.5% 30.2% 21.5% 42.2%)}
.clean-phone{-webkit-mask-image:linear-gradient(to right,transparent 64%,#000 69%),linear-gradient(to bottom,transparent 49%,#000 55%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 64%,#000 69%),linear-gradient(to bottom,transparent 49%,#000 55%);mask-composite:intersect}
.element-phone{transform-origin:98% 98%}
.element-phone .scene-element-sprite{clip-path:inset(51% 0 0 66%)}
.scene-frame[data-motion="on"][data-elements-ready="true"] .element-cloud{animation:cloud-float 10s ease-in-out infinite alternate}
.scene-frame[data-motion="on"][data-elements-ready="true"] .element-leaves{animation:leaves-sway 3.6s ease-in-out infinite alternate}
.scene-frame[data-motion="on"][data-elements-ready="true"] .element-cup{animation:cup-settle 3.2s ease-in-out infinite alternate}
.scene-frame[data-motion="on"][data-elements-ready="true"] .element-phone{animation:phone-tilt 3.8s ease-in-out infinite alternate}
.scene-frame[data-motion-paused="true"] .scene-element{animation-play-state:paused!important}
@keyframes cloud-float{from{transform:translate3d(-3.5%,-.45%,0)}to{transform:translate3d(3.5%,.45%,0)}}
@keyframes leaves-sway{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes cup-settle{from{transform:translateY(.05%) rotate(-1.2deg)}to{transform:translateY(-.5%) rotate(1.2deg)}}
@keyframes phone-tilt{from{transform:rotate(-1.8deg)}to{transform:rotate(1.8deg)}}
@media(prefers-reduced-motion:reduce){.scene-element{animation:none!important;transform:none!important}.scene-element-clean,.scene-element-sprite{visibility:hidden!important}}

/* Ambient light and steam sit over the illustration, below the word markers. */
.scene-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  contain: paint;
}
.scene-atmosphere i,
.scene-atmosphere i::before,
.scene-atmosphere i::after {
  position: absolute;
  display: none;
  pointer-events: none;
}
.scene-atmosphere .atmosphere-light,
.scene-atmosphere .atmosphere-shadow {
  border-radius: 50%;
  -webkit-mask-image: radial-gradient(ellipse, #000 15%, transparent 72%);
  mask-image: radial-gradient(ellipse, #000 15%, transparent 72%);
  animation: scene-light-drift 10s ease-in-out infinite alternate;
}
.scene-atmosphere .atmosphere-light {
  background: rgba(255, 239, 184, .22);
}
.scene-atmosphere .atmosphere-shadow {
  background: rgba(48, 69, 70, .075);
  animation-duration: 12s;
  animation-direction: alternate-reverse;
}
.scene-atmosphere .atmosphere-wisp {
  -webkit-mask-image: linear-gradient(transparent 2%, #000 30%, #000 72%, transparent 98%);
  mask-image: linear-gradient(transparent 2%, #000 30%, #000 72%, transparent 98%);
  transform-origin: 50% 100%;
  animation: scene-steam-lift 8s ease-in-out infinite alternate;
}
.scene-atmosphere .atmosphere-wisp::before,
.scene-atmosphere .atmosphere-wisp::after {
  content: "";
  display: block;
  left: 22%;
  top: 1%;
  width: 43%;
  height: 98%;
  border-left: 2px solid rgba(255, 254, 247, .7);
  border-radius: 55% 45% 40% 60%;
  filter: blur(.7px);
  transform: rotate(9deg);
}
.scene-atmosphere .atmosphere-wisp::after {
  left: 50%;
  top: 15%;
  width: 34%;
  height: 80%;
  opacity: .6;
  transform: rotate(-10deg);
}
.scene-atmosphere .wisp-two { animation-duration: 10s; animation-direction: alternate-reverse; }
.scene-atmosphere .atmosphere-ripple {
  background: linear-gradient(180deg, transparent 28%, rgba(255, 255, 236, .55) 32%, transparent 36%, transparent 58%, rgba(255, 255, 240, .4) 61%, transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse, #000 8%, transparent 70%);
  mask-image: radial-gradient(ellipse, #000 8%, transparent 70%);
  animation: scene-water-glide 9s ease-in-out infinite alternate;
}
.scene-atmosphere .ripple-two { animation-duration: 12s; animation-direction: alternate-reverse; }

/* Weather: sunlight around the existing sun, cloud shade and river reflections. */
#scene-frame[data-scene="weather"] .atmosphere-light {
  display: block; left: -4%; top: -8%; width: 39%; height: 47%;
  background: rgba(255, 226, 132, .24);
}
#scene-frame[data-scene="weather"] .atmosphere-shadow {
  display: block; left: 59%; top: -8%; width: 44%; height: 42%;
  background: rgba(47, 62, 86, .095);
}
#scene-frame[data-scene="weather"] .ripple-one {
  display: block; left: 64%; top: 65%; width: 27%; height: 9%;
}
#scene-frame[data-scene="weather"] .ripple-two {
  display: block; left: 53%; top: 77%; width: 22%; height: 8%;
}

/* Breakfast: three staggered wisps rise from the buns; the food stays still. */
#scene-frame[data-scene="breakfast"] .atmosphere-wisp {
  display: block;
  animation: baozi-steam-rise 4.8s ease-in-out infinite;
  opacity: 0;
}
#scene-frame[data-scene="breakfast"] .wisp-one {
  left: 6%; top: 17%; width: 11%; height: 19%;
  animation-delay: -1.6s;
}
#scene-frame[data-scene="breakfast"] .wisp-two {
  left: 17%; top: 12%; width: 12%; height: 22%;
  animation-duration: 5.4s;
  animation-delay: -3.6s;
}
#scene-frame[data-scene="breakfast"] .wisp-three {
  left: 25%; top: 17%; width: 10%; height: 18%;
  animation-duration: 4.6s;
  animation-delay: -.4s;
}
#scene-frame[data-scene="breakfast"] .atmosphere-wisp::before {
  left: 15%; width: 60%;
  border-left: 4px solid rgba(255, 254, 247, .86);
  background: linear-gradient(90deg, rgba(255, 254, 247, .22), transparent 64%);
  filter: blur(1.6px);
  transform: rotate(9deg);
}
#scene-frame[data-scene="breakfast"] .atmosphere-wisp::after {
  left: 48%; width: 43%;
  border-left: 3px solid rgba(255, 254, 247, .65);
  filter: blur(2px);
  opacity: .72;
  transform: rotate(-12deg);
}
#scene-frame[data-scene="breakfast"] .atmosphere-light {
  display: block; left: 23%; top: 66%; width: 47%; height: 30%;
  background: rgba(255, 232, 175, .18);
  transform: rotate(-14deg);
}
@keyframes baozi-steam-rise {
  0% { transform: translate3d(-3%, 12%, 0) rotate(-5deg) scale(.88, .84); opacity: 0; }
  20% { opacity: .74; }
  55% { transform: translate3d(5%, -7%, 0) rotate(3deg) scale(1.04, 1.06); opacity: .86; }
  100% { transform: translate3d(14%, -30%, 0) rotate(7deg) scale(1.18, 1.2); opacity: 0; }
}

/* Café: preserve the drawn steam, adding slow movement in the same areas. */
#scene-frame[data-scene="cafe"] .wisp-one {
  display: block; left: 50%; top: 31%; width: 9%; height: 19%;
}
#scene-frame[data-scene="cafe"] .wisp-two {
  display: block; left: 16%; top: 32%; width: 8%; height: 15%;
}
#scene-frame[data-scene="cafe"] .atmosphere-light {
  display: block; left: 41%; top: 70%; width: 42%; height: 26%;
  background: rgba(255, 236, 194, .2);
}

/* Metro: a broad, soft reflection crosses the actual window band and floor. */
#scene-frame[data-scene="metro"] .atmosphere-light {
  display: block; left: 25%; top: 28%; width: 50%; height: 18%;
  background: linear-gradient(105deg, transparent 20%, rgba(255, 246, 211, .2) 48%, transparent 70%);
  animation: scene-window-sheen 11s ease-in-out infinite alternate;
}
#scene-frame[data-scene="metro"] .atmosphere-shadow {
  display: block; left: 33%; top: 55%; width: 40%; height: 32%;
  background: linear-gradient(115deg, transparent 22%, rgba(255, 247, 214, .19) 46%, transparent 67%);
}

/* Park: a little canopy light, with highlights confined to the water. */
#scene-frame[data-scene="park"] .atmosphere-light {
  display: block; left: 14%; top: -2%; width: 45%; height: 35%;
  background: rgba(255, 246, 185, .21);
}
#scene-frame[data-scene="park"] .atmosphere-shadow {
  display: block; left: 9%; top: 22%; width: 31%; height: 29%;
  background: rgba(43, 76, 47, .075);
}
#scene-frame[data-scene="park"] .ripple-one {
  display: block; left: 30%; top: 55%; width: 31%; height: 8%;
}
#scene-frame[data-scene="park"] .ripple-two {
  display: block; left: 46%; top: 60%; width: 27%; height: 8%;
}

@keyframes scene-light-drift {
  from { transform: translate3d(-2%, 1%, 0) scale(.98); opacity: .48; }
  to { transform: translate3d(3%, -2%, 0) scale(1.04); opacity: .9; }
}
@keyframes scene-steam-lift {
  from { transform: translate3d(-4%, 5%, 0) rotate(-4deg) scale(.95); opacity: .28; }
  to { transform: translate3d(9%, -13%, 0) rotate(5deg) scale(1.04); opacity: .64; }
}
@keyframes scene-water-glide {
  from { transform: translate3d(-3%, 0, 0) scaleX(.91); opacity: .24; }
  to { transform: translate3d(4%, 4%, 0) scaleX(1.07); opacity: .64; }
}
@keyframes scene-window-sheen {
  from { transform: translate3d(-5%, 0, 0); opacity: .3; }
  to { transform: translate3d(5%, 0, 0); opacity: .78; }
}

#scene-frame[data-motion="off"] .scene-atmosphere { display: none; }
#scene-frame[data-motion-paused="true"] .scene-atmosphere i,
#scene-frame[data-motion-paused="true"] .scene-atmosphere i::before,
#scene-frame[data-motion-paused="true"] .scene-atmosphere i::after {
  animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce) {
  .scene-atmosphere { display: none !important; }
}