/* Per-room ambient motion. Transform and opacity only; everything pauses
   with .amb-paused; nothing here ever overlays a painting surface. */
.amb-paused * { animation-play-state: paused !important; }

/* The Deep: caustic light drift */
body[data-room="deep"] .room-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .16;
  background:
    repeating-radial-gradient(ellipse 900px 300px at 30% 0%, rgba(180,230,215,.25) 0 2px, transparent 2px 90px),
    repeating-radial-gradient(ellipse 700px 260px at 75% 10%, rgba(160,220,205,.2) 0 2px, transparent 2px 70px);
  animation: caustic-a 17s ease-in-out infinite alternate;
}
@keyframes caustic-a { from { transform: translateX(-30px) } to { transform: translateX(30px) } }

/* Night City: rain streaks */
body[data-room="night_city"] .room-hero::before {
  content: ""; position: absolute; inset: -10% 0; pointer-events: none; opacity: .12;
  background:
    repeating-linear-gradient(12deg, transparent 0 46px, rgba(200,220,255,.5) 46px 47px),
    repeating-linear-gradient(12deg, transparent 0 89px, rgba(200,220,255,.35) 89px 90px);
  animation: rain-fall 1.1s linear infinite;
}
@keyframes rain-fall { from { transform: translateY(-90px) } to { transform: translateY(0) } }

/* The Wild: fireflies */
.amb-fireflies { position: absolute; inset: 0; pointer-events: none; }
.amb-fireflies i {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: #d8e8a0; box-shadow: 0 0 8px 2px rgba(216,232,160,.6);
  opacity: 0; animation: firefly 8s ease-in-out infinite;
}
@keyframes firefly {
  0%, 100% { opacity: 0; transform: translate(0, 0) }
  25% { opacity: .9; transform: translate(14px, -10px) }
  55% { opacity: .15; transform: translate(-8px, -22px) }
  75% { opacity: .7; transform: translate(10px, -30px) }
}

/* Far Out: three star layers drifting at different speeds */
.amb-stars { position: absolute; inset: -20%; pointer-events: none;
  background-image: radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 40% 70%, #cdb4f0, transparent),
    radial-gradient(2px 2px at 60% 20%, #fff, transparent),
    radial-gradient(1px 1px at 80% 50%, #ffd88a, transparent),
    radial-gradient(1.5px 1.5px at 90% 80%, #fff, transparent),
    radial-gradient(1px 1px at 10% 85%, #c9a6ff, transparent);
  background-size: 400px 400px; }
.amb-stars-0 { opacity: .8; animation: drift 240s linear infinite; }
.amb-stars-1 { opacity: .5; background-size: 640px 640px; animation: drift 150s linear infinite reverse; }
.amb-stars-2 { opacity: .35; background-size: 260px 260px; animation: drift 90s linear infinite; }
@keyframes drift { from { transform: translate(0, 0) } to { transform: translate(-400px, 60px) } }

/* The Realm: candle flicker on the hero light */
body[data-room="realm"] .room-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 80% at 50% 10%, rgba(212,168,76,.14), transparent 65%);
  animation: candle 3.4s ease-in-out infinite;
}
@keyframes candle { 0%,100% { opacity: .85 } 45% { opacity: 1 } 60% { opacity: .7 } 75% { opacity: .95 } }

/* Dreamscape: the wall breathes */
body[data-room="dreamscape"] .room-hero { animation: breathe 9s ease-in-out infinite; }
@keyframes breathe { 0%,100% { filter: hue-rotate(0deg) } 50% { filter: hue-rotate(6deg) } }

/* Carnival: bulb twinkle */
body[data-room="carnival"] .room-hero::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 60px; pointer-events: none;
  background: radial-gradient(4px 4px at 6% 26px, #ffd23f, transparent),
    radial-gradient(4px 4px at 16% 20px, #fff3c0, transparent),
    radial-gradient(4px 4px at 26% 30px, #ffd23f, transparent),
    radial-gradient(4px 4px at 37% 22px, #fff3c0, transparent),
    radial-gradient(4px 4px at 48% 28px, #ffd23f, transparent),
    radial-gradient(4px 4px at 59% 21px, #fff3c0, transparent),
    radial-gradient(4px 4px at 70% 29px, #ffd23f, transparent),
    radial-gradient(4px 4px at 81% 23px, #fff3c0, transparent),
    radial-gradient(4px 4px at 92% 27px, #ffd23f, transparent);
  animation: twinkle 2.8s ease-in-out infinite;
}
@keyframes twinkle { 0%,100% { opacity: .95 } 30% { opacity: .55 } 65% { opacity: .8 } }

/* Hometown: the moth circles the porch light */
body[data-room="hometown"] .room-hero::before {
  content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%;
  right: 16%; top: 24%; background: rgba(240,230,200,.9); pointer-events: none;
  offset-path: ellipse(46px 30px at 0px 0px); animation: moth 7s linear infinite;
}
@keyframes moth { from { offset-distance: 0% } to { offset-distance: 100% } }

/* The Workshop: a brass gear turning */
body[data-room="workshop"] .room-hero::before {
  content: ""; position: absolute; right: 8%; top: 18%; width: 74px; height: 74px;
  pointer-events: none; opacity: .5;
  background:
    radial-gradient(circle at center, transparent 20px, rgba(212,170,90,.9) 21px 26px, transparent 27px),
    repeating-conic-gradient(rgba(212,170,90,.9) 0 14deg, transparent 14deg 30deg);
  border-radius: 50%;
  animation: gear 14s linear infinite;
}
@keyframes gear { from { transform: rotate(0) } to { transform: rotate(360deg) } }

/* Tiny Worlds: the mouse peeks */
.amb-mouse { position: absolute; left: 7%; bottom: 0; width: 46px; height: 30px;
  pointer-events: none; transform: translateY(100%); transition: transform 1s ease;
  background: radial-gradient(22px 18px at 50% 100%, #6e5a48 60%, transparent 62%),
    radial-gradient(6px 6px at 30% 34%, #4a3a2c, transparent),
    radial-gradient(6px 6px at 70% 34%, #4a3a2c, transparent);
}
.amb-mouse.peek { transform: translateY(38%); }

@media (prefers-reduced-motion: reduce) {
  .room-hero::before, .amb-fireflies, .amb-stars, .amb-mouse { animation: none !important; display: none; }
  body[data-room="dreamscape"] .room-hero { animation: none; }
}