/* Rødhalsen, egernene og julemanden (styres af js/life.js) */
#life { position: absolute; inset: 0; pointer-events: none; }
.critter { position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; will-change: transform; }
.critter svg { display: block; overflow: visible; }
.day-only { opacity: var(--day); transition: opacity 4s ease; }
.fx { position: absolute; pointer-events: none; }
.sleeper { position: absolute; width: 120px; height: 80px; background: none; border: 0; padding: 0; pointer-events: auto; cursor: pointer; }

/* ---- rødhalsen */
.robin.awake { opacity: 1; }
.robin { filter: drop-shadow(0 3px 3px rgba(0,0,0,.25)); z-index: 2; }
.robin .breathe { animation: breathe 2.6s ease-in-out infinite; transform-box: view-box; transform-origin: 60px 78px; }
@keyframes breathe { 50% { transform: scale(1.035, .97); } }
.robin .wing { transform-box: view-box; transform-origin: 62px 40px; }
.robin.flying .wing { animation: flap .14s ease-in-out infinite alternate; }
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(-1.1); } }
.robin.flying .legs { opacity: 0; }
.robin.flying .breathe { animation: none; }
.robin.peck svg { animation: peck .5s ease-in-out; transform-origin: 60% 100%; }
@keyframes peck { 40% { transform: rotate(16deg); } }
.robin .tail { transform-box: view-box; transform-origin: 44px 52px; }
.robin.flick .tail { animation: flick .45s ease-out; }
@keyframes flick { 30% { transform: rotate(-24deg); } 60% { transform: rotate(8deg); } }
.robin .head { transform-box: view-box; transform-origin: 86px 36px; }
.robin.chirp .head { animation: chirp .3s ease-out; }
@keyframes chirp { 50% { transform: rotate(-14deg); } }
.note { color: #7a3b16; font-size: 24px; font-weight: 700; text-shadow: 0 0 4px #fff, 0 0 8px #fff; animation: note 1.8s ease-out forwards; }
@keyframes note { to { transform: translate(20px, -55px) rotate(15deg); opacity: 0; } }
.zzz { color: #e8eefc; font: italic 700 24px Georgia, serif; text-shadow: 0 0 6px rgba(150,180,255,.8); animation: zzz 2.6s ease-out forwards; }
@keyframes zzz { 0% { opacity: 0; transform: translate(0,0) scale(.6); } 20% { opacity: .95; } 100% { opacity: 0; transform: translate(28px,-55px) scale(1.4); } }

/* ---- egern */
.squirrel { filter: drop-shadow(0 5px 3px rgba(60,40,30,.28)); }
.squirrel .pose-sit, .squirrel .nut { display: none; }
.squirrel.sitting .pose-run { display: none; }
.squirrel.sitting .pose-sit, .squirrel.has-nut .nut { display: inline; }
.squirrel .pose-run .sq-tail { transform-box: view-box; transform-origin: 34px 58px; }
.squirrel .pose-run, .squirrel .sq-body { transform-box: view-box; transform-origin: 70px 78px; }
.squirrel.running .sq-body { animation: sqhop .26s ease-in-out infinite alternate; }
.squirrel.running .pose-run .sq-tail { animation: sqtail .26s ease-in-out infinite alternate; }
@keyframes sqhop { to { transform: translateY(-9px); } }
@keyframes sqtail { from { transform: rotate(-6deg); } to { transform: translateY(-9px) rotate(12deg); } }
.squirrel.digging .pose-run { animation: dig .2s ease-in-out infinite alternate; }
@keyframes dig { from { transform: rotate(8deg); } to { transform: rotate(17deg) translateY(2px); } }
.squirrel .nib { transform-box: view-box; transform-origin: 58px 42px; }
.squirrel.nibbling .nib { animation: nib .22s ease-in-out infinite alternate; }
@keyframes nib { to { transform: rotate(7deg) translateY(1.5px); } }
.squirrel .pose-sit .sq-tail { transform-box: view-box; transform-origin: 40px 74px; animation: sway 2.4s ease-in-out infinite; }
@keyframes sway { 50% { transform: rotate(6deg); } }
.spray { width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 3px #fff; animation: spray .9s ease-out forwards; }
@keyframes spray { 50% { opacity: 1; } to { transform: translate(var(--sx), var(--sy)); opacity: 0; } }

/* ---- julemanden: silhuetter mod nattehimlen */
.sil { fill: #0b0e18; stroke: #0b0e18; filter: drop-shadow(0 0 1px rgba(255,236,190,.9)) drop-shadow(0 0 4px rgba(255,236,190,.45)); }
.sil .pompom { fill: #f4efe6; stroke: none; }
.team .rudolph { fill: #ff3b2f; stroke: none; filter: drop-shadow(0 0 5px #ff3b2f); animation: glow 1.4s ease-in-out infinite; }
@keyframes glow { 50% { opacity: .55; } }
.team .leg-a, .team .leg-b, .walker .leg-a, .walker .leg-b { transform-box: fill-box; transform-origin: 50% 0; }
.team.flying .leg-a { animation: gal .3s ease-in-out infinite alternate; }
.team.flying .leg-b { animation: gal .3s ease-in-out infinite alternate-reverse; }
@keyframes gal { from { transform: rotate(-24deg); } to { transform: rotate(24deg); } }
.team.empty .santa-in { display: none; }
.walker.walking .leg-a { animation: step .36s ease-in-out infinite alternate; }
.walker.walking .leg-b { animation: step .36s ease-in-out infinite alternate-reverse; }
@keyframes step { from { transform: rotate(-20deg); } to { transform: rotate(20deg); } }
.walker .body { transform-box: view-box; transform-origin: 22px 55px; }
.walker.walking .body { animation: wb .18s ease-in-out infinite alternate; }
@keyframes wb { to { transform: translateY(-1.5px); } }
.walker.climb .body { animation: wb .12s infinite alternate; }
.chimney-clip { position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; pointer-events: none; }
.glit { color: #ffe08a; font-size: 15px; text-shadow: 0 0 8px #ffd76a; animation: glit 1.4s ease-out forwards; }
@keyframes glit { to { opacity: 0; transform: translateY(26px) scale(.4); } }
.glit.up { animation: glitup 1.8s ease-out forwards; }
@keyframes glitup { 0% { opacity: 0; } 20% { opacity: 1; } to { opacity: 0; transform: translateY(-80px) scale(.5); } }
.hoho { font-family: var(--hand); font-size: 32px; color: #fff3dc; white-space: nowrap; text-shadow: 0 0 10px rgba(255,210,120,.9); animation: hoho 2.2s ease-out forwards; }
@keyframes hoho { 0% { opacity: 0; transform: translateY(10px); } 15%, 80% { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-20px); } }

@media (prefers-reduced-motion: reduce) {
  .robin .breathe, .squirrel .pose-sit .sq-tail, .team .rudolph { animation: none; }
}

/* røgen er stærkere mod nattehimlen – dæmp den */
body[data-phase="night"] #smoke, body[data-phase="dusk"] #smoke { opacity: .4; transition: opacity 4s; }