@charset "UTF-8";
/* Coordinates refer to the original scene, not the viewport. */
.world {
  --motion-steam-x: 25%;
  --motion-steam-y: 45%;
  --motion-cinema-x: 77%;
  --motion-cinema-y: 43%;
  --motion-water-top: 93%;
  --motion-water-height: 5%;
}
.scene-motion {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.world.image-error .scene-motion { display: none; }
.scene-motion__water {
  position: absolute;
  top: var(--motion-water-top);
  height: var(--motion-water-height);
  left: 8%;
  width: 84%;
  overflow: hidden;
  fill: none;
  stroke: #fff7da;
  stroke-width: 1.6;
  opacity: .75;
}
.scene-motion .scene-motion__ripple {
  animation: scene-water 3.4s ease-in-out infinite alternate !important;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
}
.scene-motion .scene-motion__ripple:nth-child(2) { animation-delay: -3s !important; }
.scene-motion .scene-motion__ripple:nth-child(3) { animation-delay: -5s !important; }
.scene-motion__steam {
  position: absolute;
  left: var(--motion-steam-x);
  top: var(--motion-steam-y);
  width: clamp(36px, 4.2vw, 60px);
  height: clamp(48px, 5.6vw, 80px);
  transform: translate(-50%, -100%);
  fill: none;
  stroke: #fff8de;
  stroke-width: 2.2;
  stroke-linecap: round;
  overflow: visible;
}
.scene-motion .scene-motion__wisp {
  opacity: 0;
  animation: scene-steam 3.2s ease-out infinite !important;
}
.scene-motion .scene-motion__wisp:nth-child(2) { animation-delay: -2.1s !important; }
.scene-motion .scene-motion__wisp:nth-child(3) { animation-delay: -3.9s !important; }
.scene-motion .scene-motion__beam {
  position: absolute;
  left: var(--motion-cinema-x);
  top: var(--motion-cinema-y);
  width: 9%;
  height: 6%;
  transform: translate(-10%, -50%);
  clip-path: polygon(0 48%, 100% 0, 100% 100%, 0 52%);
  background: linear-gradient(90deg, #fff0bcd9, #fff4d366);
  opacity: .45;
  animation: scene-projector 3.6s ease-in-out infinite alternate !important;
}
.scene-motion .scene-motion__ripple,
.scene-motion .scene-motion__wisp,
.scene-motion .scene-motion__beam { animation-play-state: paused !important; }
.world[data-motion-running="true"] .scene-motion__ripple,
.world[data-motion-running="true"] .scene-motion__wisp,
.world[data-motion-running="true"] .scene-motion__beam { animation-play-state: running !important; }
.scene-motion-toggle {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #8c9987;
  border-radius: 3px;
  background: #fff8e9;
  color: #355547;
  font: inherit;
  cursor: pointer;
}
.scene-motion-toggle:hover { background: #ece8d6; }
.scene-motion-toggle:focus-visible { outline: 3px solid #a6462b; outline-offset: 3px; }
@keyframes scene-water {
  from { opacity: .3; transform: translateX(-16px) scaleX(.94); }
  to { opacity: .9; transform: translateX(16px) scaleX(1.06); }
}
@keyframes scene-steam {
  0% { opacity: 0; transform: translate(0, 6px); }
  25% { opacity: .8; }
  65% { opacity: .5; }
  100% { opacity: 0; transform: translate(6px, -20px); }
}
@keyframes scene-projector {
  0%, 100% { opacity: .2; }
  45% { opacity: .65; }
  70% { opacity: .4; }
}
.scene-motion__water--upper{display:none}
.scene-motion-toggle{margin-top:16px;font-size:12px}
@media (max-width: 700px) {
  .world {
    --motion-steam-x: 70%;
    --motion-steam-y: 48%;
    --motion-cinema-x: 28%;
    --motion-cinema-y: 64%;
  }
  .scene-motion__beam { width: 15%; height: 3%; }
  .scene-motion-toggle { margin-top: 10px; font-size: 12px; }
  .scene-motion__water--upper{display:block;top:1%;height:10%;left:1%;width:45%}
}
.world{--motion-steam-x:27.5%;--motion-steam-y:44%;--motion-cinema-x:70%;--motion-cinema-y:42%}@media(max-width:700px){.world{--motion-steam-x:78%;--motion-steam-y:44%;--motion-cinema-x:16%;--motion-cinema-y:58%}.scene-motion__beam{transform:translate(0,-100%) rotate(-40deg);transform-origin:left bottom}}