/* ============================================================
   PERSONAJES: articulaciones, acciones, escenas y vegetación
   ============================================================ */

/* ---------- Articulaciones ---------- */
.person .arm,
.person .leg,
.person .held,
.person .blade,
.person .tail,
.person .flipper {
  transform-box: view-box;
}

.person .arm-l { transform-origin: 22px 52px; transform: rotate(var(--armL, 0deg)); transition: transform 0.5s ease; }
.person .arm-r { transform-origin: 42px 52px; transform: rotate(var(--armR, 0deg)); transition: transform 0.5s ease; }
.person .arm-l .held { transform-origin: 9px 66px; transform: rotate(calc(var(--armL, 0deg) * -1)); transition: transform 0.5s ease; }
.person .arm-r .held { transform-origin: 55px 66px; transform: rotate(calc(var(--armR, 0deg) * -1)); transition: transform 0.5s ease; }
.person .leg-l { transform-origin: 25px 72px; }
.person .leg-r { transform-origin: 38px 72px; }

.prop {
  position: absolute;
  pointer-events: none;
}

/* ---------- Mascotas ---------- */
.figure.dog .person { width: 50px; }
.figure.dog.pequeno .person { width: 38px; }
.figure.dog .person .head { transform-origin: 32px 40px; }
.figure.dog.look .person .head { transform: rotate(-18deg) translateY(-2px); }
.figure.dog .tail { transform-origin: left bottom; animation: wag 0.3s ease-in-out infinite alternate; }
.figure.dog.pequeno .tail { animation-duration: 0.5s; }
.figure.dog.pequeno .person { animation-name: sway; }

@keyframes wag {
  from { transform: rotate(-14deg); }
  to   { transform: rotate(14deg); }
}

.bark {
  position: absolute;
  left: 50%;
  top: -16px;
  transform: translate(-50%, 6px);
  background: #fffaf0;
  color: #4a2c17;
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}

.figure.barking .bark { opacity: 1; transform: translate(-50%, 0); }
.figure.dog { cursor: pointer; }

.figure.pinguino .person {
  width: 28px;
  animation: waddle 0.7s ease-in-out infinite alternate;
}

.figure.pinguino .flipper { transform-origin: top center; animation: flap 0.7s ease-in-out infinite alternate; }

@keyframes waddle {
  from { transform: rotate(-7deg); }
  to   { transform: rotate(7deg); }
}

@keyframes flap {
  from { transform: rotate(-8deg); }
  to   { transform: rotate(8deg); }
}

/* ---------- Acciones ---------- */

/* Barbero */
.act-tijeras { --armR: -70deg; }
.act-tijeras .blade { transform-origin: 55px 66px; animation: snip 0.7s ease-in-out infinite alternate; }

@keyframes snip {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-28deg); }
}

/* Selfie y grabar */
.act-selfie { --armR: -95deg; }
.act-grabar .arm-r { animation: grabar 7s ease-in-out infinite; }
.act-grabar .arm-r .held { animation: grabar-held 7s ease-in-out infinite; }
.act-grabar .person { animation-name: sway-big; animation-duration: 2.6s; }
.flash { opacity: 0; animation: flash 3.5s steps(1) infinite; }

@keyframes grabar {
  0%, 30% { transform: rotate(-95deg); }
  45%, 80% { transform: rotate(-55deg); }
  100% { transform: rotate(-95deg); }
}

@keyframes grabar-held {
  0%, 30% { transform: rotate(95deg); }
  45%, 80% { transform: rotate(55deg); }
  100% { transform: rotate(95deg); }
}

@keyframes flash {
  0%, 92% { opacity: 0; }
  93%, 97% { opacity: 0.95; }
  98%, 100% { opacity: 0; }
}

/* Embarazada: mano en la barriga */
.act-embarazada { --armL: -60deg; }

/* Cantar */
.act-cantar { --armR: -150deg; }
.act-cantar .arm-r .held { transform: rotate(7deg); } /* la cabeza del micrófono apunta a la boca */
.act-cantar .head { animation: headbob 0.9s ease-in-out infinite alternate; }

@keyframes headbob {
  from { transform: rotate(-6deg); }
  to   { transform: rotate(6deg); }
}

.prop.notas { left: 100%; top: 8px; width: 30px; height: 50px; }
.prop.notas i {
  position: absolute;
  left: 0;
  bottom: 0;
  font-style: normal;
  color: #fff;
  font-size: 15px;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  opacity: 0;
  animation: note 2.4s ease-out infinite;
}
.prop.notas i:nth-child(2) { left: 8px; animation-delay: 0.8s; }
.prop.notas i:nth-child(3) { left: 4px; animation-delay: 1.6s; }

@keyframes note {
  0%   { transform: translate(0, 0) rotate(0); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(10px, -40px) rotate(20deg); opacity: 0; }
}

/* Bailar */
.act-bailar .arm-l, .act-bailar-pro .arm-l, .act-fiesta .arm-l { animation: dance-l 0.8s ease-in-out infinite alternate; }
.act-bailar .arm-r, .act-bailar-pro .arm-r { animation: dance-r 0.8s ease-in-out infinite alternate-reverse; }
.figure.act-bailar .person { animation-name: bounce-dance; animation-duration: 0.8s; }
.figure.act-bailar-pro .arm-l, .figure.act-bailar-pro .arm-r { animation-duration: 0.45s; }
.figure.act-bailar-pro .person { animation: bounce-dance 0.45s ease-in-out infinite alternate; }

@keyframes dance-l {
  from { transform: rotate(-20deg); }
  to   { transform: rotate(150deg); }
}

@keyframes dance-r {
  from { transform: rotate(20deg); }
  to   { transform: rotate(-150deg); }
}

@keyframes bounce-dance {
  from { transform: translateY(0) rotate(-4deg); }
  to   { transform: translateY(-6px) rotate(4deg); }
}

/* Fiesta */
.act-fiesta { --armR: -120deg; }
.figure.act-fiesta .person { animation: bounce-dance 0.7s ease-in-out infinite alternate; }
.prop.confeti { left: -12px; right: -12px; top: -24px; height: 100%; overflow: visible; }
.prop.confeti i {
  position: absolute;
  top: 0;
  width: 5px;
  height: 8px;
  border-radius: 1px;
  background: var(--c, #ff6b8a);
  animation: confetti 3s linear infinite;
}

@keyframes confetti {
  0%   { transform: translateY(0) rotate(0); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(110px) rotate(540deg); opacity: 0; }
}

/* Boxeo */
.act-boxeo { margin-right: 24px; }
.act-boxeo .arm-r { animation: punch-r 0.9s ease-in-out infinite; }
.act-boxeo .arm-l { animation: punch-l 0.9s ease-in-out infinite; }
.act-boxeo .held { transform: none !important; }
.prop.saco { left: calc(100% - 6px); bottom: 0; width: 24px; height: 92px; transform-origin: top center; animation: swing 0.9s ease-in-out infinite alternate; }
.prop.saco svg { width: 100%; height: 100%; display: block; }

@keyframes punch-r {
  0%, 100% { transform: rotate(-40deg); }
  40%      { transform: rotate(-85deg); }
}

@keyframes punch-l {
  0%, 100% { transform: rotate(120deg); }
  70%      { transform: rotate(150deg); }
}

@keyframes swing {
  from { transform: rotate(-3deg); }
  to   { transform: rotate(5deg); }
}

/* Balón y Choys */
.act-balon .leg-r { animation: kick 2.4s ease-in-out infinite; }
.act-balon .arm-l { animation: comer-l 6s ease-in-out infinite; }
.act-balon .arm-l .held { animation: comer-l-held 6s ease-in-out infinite; }
.prop.balon {
  right: -10px;
  bottom: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff 0 44%, #222 45% 60%, #fff 61%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  animation: ballkick 2.4s ease-out infinite;
}

@keyframes kick {
  0%, 70%, 100% { transform: rotate(0); }
  80%           { transform: rotate(-38deg); }
  90%           { transform: rotate(10deg); }
}

@keyframes ballkick {
  0%, 80%  { transform: translate(0, 0) rotate(0); }
  90%      { transform: translate(10px, -16px) rotate(180deg); }
  100%     { transform: translate(0, 0) rotate(360deg); }
}

.act-comer .arm-l { animation: comer-l 6s ease-in-out infinite; }
.act-comer .arm-l .held { animation: comer-l-held 6s ease-in-out infinite; }

/* Mejenga: se pasan la bola en círculo */
.escena-bola .members { position: relative; }
.escena-bola .members > .figure + .figure { margin-left: 10px; }
.act-bola .leg-r { animation: kick-pass 6s ease-in-out infinite; }
.escena-bola .figure:nth-child(2) .leg-r { animation-delay: 2s; }
.escena-bola .figure:nth-child(3) .leg-r { animation-delay: 4s; }
.scene-soccer {
  position: absolute;
  left: 30px;
  bottom: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff 0 44%, #222 45% 60%, #fff 61%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  z-index: 2;
  animation: pase 6s ease-in-out infinite;
}

@keyframes kick-pass {
  0%        { transform: rotate(0); }
  1.5%      { transform: rotate(-38deg); }
  4%        { transform: rotate(12deg); }
  7%, 100%  { transform: rotate(0); }
}

@keyframes pase {
  0%, 3%    { transform: translate(0, 0) rotate(0); }
  17%       { transform: translate(34px, -24px) rotate(180deg); }
  30%, 36%  { transform: translate(68px, 0) rotate(360deg); }
  50%       { transform: translate(102px, -24px) rotate(540deg); }
  63%, 69%  { transform: translate(136px, 0) rotate(720deg); }
  83%       { transform: translate(68px, -30px) rotate(900deg); }
  97%, 100% { transform: translate(0, 0) rotate(1080deg); }
}

@keyframes comer-l {
  0%, 55%, 100% { transform: rotate(-20deg); }
  65%, 85%      { transform: rotate(150deg); }
}

@keyframes comer-l-held {
  0%, 55%, 100% { transform: rotate(20deg); }
  65%, 85%      { transform: rotate(-150deg); }
}

/* Piedras */
.figure.act-piedras { z-index: 4; } /* la figura crea su propio contexto; así la piedra pasa por delante de los vecinos */
.act-piedras .arm-r { animation: throw 3s ease-in-out infinite; }
.act-piedras .arm-r .held { transform: none; }
.prop.roca {
  left: 50px;
  top: 58px;
  width: 7px;
  height: 6px;
  border-radius: 50%;
  background: #8d8d8d;
  opacity: 0;
  z-index: 4; /* por delante de las escenas vecinas (la montaña de Romell) */
  animation: rock-fly 3s ease-in infinite;
}

@keyframes throw {
  0%, 55% { transform: rotate(0); }
  68%     { transform: rotate(-170deg); }
  76%     { transform: rotate(-50deg); }
  100%    { transform: rotate(0); }
}

@keyframes rock-fly {
  0%, 75% { transform: translate(0, 0); opacity: 0; }
  76%     { transform: translate(0, -12px); opacity: 1; }
  86%     { transform: translate(36px, -34px); opacity: 1; }
  94%     { transform: translate(64px, 26px); opacity: 1; }
  97%     { transform: translate(70px, 20px); opacity: 1; }
  100%    { transform: translate(74px, 26px); opacity: 0; }
}

/* Cafecito */
.act-cafe .arm-r { animation: sip 6s ease-in-out infinite; }
.act-cafe .arm-r .held { animation: sip-held 6s ease-in-out infinite; }
.steam { animation: steam 2s ease-in-out infinite; }

@keyframes sip {
  0%, 55%, 100% { transform: rotate(-30deg); }
  65%, 85%      { transform: rotate(-150deg); }
}

@keyframes sip-held {
  0%, 55%, 100% { transform: rotate(30deg); }
  65%, 85%      { transform: rotate(150deg); }
}

@keyframes steam {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50%      { opacity: 0.9; transform: translateY(-2px); }
}

/* Chineando al bebé */
.act-bebe { --armL: -70deg; --armR: 70deg; }
.act-bebe .person { animation-name: sway-big; animation-duration: 2.2s; }

/* Rezando */
.act-rezar { --armL: -110deg; --armR: 110deg; }
.act-rezar .eyes { animation: none !important; transform: scaleY(0.15); }
.act-rezar .head { transform: rotate(6deg); }

/* Parrillada */
.act-parrilla { margin-left: 44px; --armR: -45deg; }
.act-parrilla .arm-r { animation: flip 4s ease-in-out infinite; }
.act-parrilla .arm-r .held { transform: none !important; }
.prop.parrilla { right: calc(100% + 2px); bottom: 0; width: 44px; height: 64px; }
.prop.parrilla svg { width: 100%; height: 100%; display: block; }
.prop.parrilla .humo {
  position: absolute;
  left: 40%;
  top: 30%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  filter: blur(1.5px);
  animation: humo 2.4s ease-out infinite;
}
.prop.parrilla .humo:nth-child(3) { left: 55%; animation-delay: 0.8s; }
.prop.parrilla .humo:nth-child(4) { left: 25%; animation-delay: 1.6s; }

@keyframes flip {
  0%, 70%, 100% { transform: rotate(-45deg); }
  78%           { transform: rotate(-20deg); }
  88%           { transform: rotate(-75deg); }
}

@keyframes humo {
  0%   { transform: translateY(0) scale(0.6); opacity: 0; }
  20%  { opacity: 0.8; }
  100% { transform: translateY(-34px) scale(1.6); opacity: 0; }
}

/* Bastones de caminar */
.act-bastones .person { animation-name: step; animation-duration: 1.1s; }

@keyframes step {
  from { transform: translateY(0) rotate(-2deg); }
  to   { transform: translateY(-3px) rotate(2deg); }
}

/* Catan */
.act-catan .arm-l { animation: gesture 3.5s ease-in-out infinite; }

@keyframes gesture {
  0%, 60%, 100% { transform: rotate(0); }
  72%           { transform: rotate(90deg); }
  84%           { transform: rotate(60deg); }
}

.act-distraida { --armR: -115deg; }
.act-distraida .head { transform: rotate(16deg); }

.act-programar .laptop { opacity: 0; transition: opacity 0.3s; }
.act-programar.coding .laptop { opacity: 1; }
.act-programar.coding { --armL: -60deg; --armR: 60deg; }
.act-programar.coding .arm-l { animation: typing-l 0.18s ease-in-out infinite alternate; }
.act-programar.coding .arm-r { animation: typing-r 0.18s ease-in-out infinite alternate; }
.prop.code {
  left: 50%;
  top: -14px;
  transform: translate(-50%, 6px);
  font-family: monospace;
  font-size: 0.8rem;
  color: #c9f5c4;
  background: rgba(20, 40, 20, 0.7);
  border-radius: 8px;
  padding: 1px 6px;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
}
.act-programar.coding .prop.code { opacity: 1; transform: translate(-50%, 0); }

@keyframes typing-l { from { transform: rotate(-58deg); } to { transform: rotate(-66deg); } }
@keyframes typing-r { from { transform: rotate(58deg); } to { transform: rotate(66deg); } }

.scene-table { display: block; width: 92px; height: 60px; margin: 0 -10px; align-self: flex-end; position: relative; z-index: 1; }
.scene-table svg { width: 100%; height: 100%; display: block; }
.escena-catan .members > .figure + .figure { margin-left: -8px; }
.scene-cooler { display: block; width: 40px; height: 38px; align-self: flex-end; margin-left: 4px; margin-bottom: 2px; }
.scene-cooler svg { width: 100%; height: 100%; display: block; }

/* Cuidando a Aitana */
.act-cuidar { --armR: -35deg; }
.act-cuidar .head { transform: rotate(10deg); }

/* Mónica le tira la pelota a Camus */
.act-lanzar .arm-r { animation: lanzar 4s ease-in-out infinite; }
.escena-pelota .members { position: relative; }
.scene-ball {
  position: absolute;
  left: 44px;
  bottom: 42px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff8a65, #d84315);
  z-index: 2;
  animation: fetch 4s ease-in-out infinite;
}

@keyframes lanzar {
  0%, 12%  { transform: rotate(-20deg); }
  20%      { transform: rotate(-165deg); }
  30%, 100% { transform: rotate(-30deg); }
}

@keyframes fetch {
  0%, 20% { transform: translate(0, 0); opacity: 1; }
  45%     { transform: translate(62px, -50px); }
  62%     { transform: translate(112px, 0); }
  70%     { transform: translate(122px, -10px); }
  76%     { transform: translate(128px, 0); opacity: 1; }
  80%     { transform: translate(128px, 0); opacity: 0; }
  92%     { transform: translate(0, 0); opacity: 0; }
  100%    { transform: translate(0, 0); opacity: 1; }
}

/* Camus corre detrás de la pelota (mismo reloj que "fetch") */
.escena-pelota { margin-right: 56px; }
.figure.act-perseguir { animation: perseguir 4s ease-in-out infinite; }

@keyframes perseguir {
  0%, 22% { transform: translate(0, 0); }
  30%     { transform: translate(18px, -10px); }
  40%     { transform: translate(40px, 0); }
  50%     { transform: translate(62px, -10px); }
  62%     { transform: translate(84px, 0); }
  70%     { transform: translate(92px, -8px) rotate(-8deg); }
  76%     { transform: translate(96px, 0) rotate(0); }
  84%     { transform: translate(96px, 0); }
  92%     { transform: translate(40px, -8px); }
  100%    { transform: translate(0, 0); }
}

/* Cartas */
.act-cartasD { --armR: -125deg; }
.act-cartasI { --armL: 125deg; }
.act-cartasD .arm-r { animation: jugar-r 6s ease-in-out infinite; }
.act-cartasD .arm-r .held { animation: jugar-r-held 6s ease-in-out infinite; }
.act-cartasI .arm-l { animation: jugar-l 6s ease-in-out infinite 3s; }
.act-cartasI .arm-l .held { animation: jugar-l-held 6s ease-in-out infinite 3s; }
.scene-cards { width: 64px; height: 50px; margin: 0 -6px; }

@keyframes jugar-r {
  0%, 70%, 100% { transform: rotate(-125deg); }
  80%, 88%      { transform: rotate(-60deg); }
}
@keyframes jugar-r-held {
  0%, 70%, 100% { transform: rotate(125deg); }
  80%, 88%      { transform: rotate(60deg); }
}
@keyframes jugar-l {
  0%, 70%, 100% { transform: rotate(125deg); }
  80%, 88%      { transform: rotate(60deg); }
}
@keyframes jugar-l-held {
  0%, 70%, 100% { transform: rotate(-125deg); }
  80%, 88%      { transform: rotate(-60deg); }
}

/* Tejiendo */
.act-tejer { --armL: -62deg; --armR: 62deg; }
.act-tejer .arm-l { animation: tejer-l 0.55s ease-in-out infinite alternate; }
.act-tejer .arm-r { animation: tejer-r 0.55s ease-in-out infinite alternate-reverse; }
.act-tejer .arm-l .held, .act-tejer .arm-r .held { transform: none !important; }
.act-tejer .head { transform: rotate(5deg); }

@keyframes tejer-l { from { transform: rotate(-58deg); } to { transform: rotate(-70deg); } }
@keyframes tejer-r { from { transform: rotate(58deg); } to { transform: rotate(70deg); } }

/* Manejando */
.act-manejar { --armL: -75deg; --armR: 75deg; }

/* Playa */
.escena-playa .members { position: relative; padding-bottom: 6px; }
.escena-playa .figure { animation: bob 2.6s ease-in-out infinite alternate; }
.escena-playa .figure:nth-child(2) { animation-delay: -1.3s; }
.scene-waves {
  position: absolute;
  left: -14px;
  right: -14px;
  bottom: -6px;
  height: 40px;
  overflow: hidden;
  z-index: 2;
  border-radius: 0 0 12px 12px;
}
.scene-waves svg { width: 200%; height: 100%; display: block; animation: waves 3.2s linear infinite; }

@keyframes bob {
  from { transform: translateY(0); }
  to   { transform: translateY(-4px); }
}

@keyframes waves {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Audi */
.escena-audi .members { position: relative; padding: 0 22px 14px; animation: drive 2.6s ease-in-out infinite alternate; }
.scene-car { position: absolute; left: -6px; right: -6px; bottom: -6px; height: 66px; z-index: 2; }
.scene-car svg { width: 100%; height: 100%; display: block; }
.scene-car .wheel { transform-box: fill-box; transform-origin: center; animation: roll 0.9s linear infinite; }

@keyframes drive {
  from { transform: translateX(-8px) translateY(0); }
  to   { transform: translateX(8px) translateY(-1.5px); }
}

@keyframes roll {
  to { transform: rotate(360deg); }
}

/* Romell y la montaña */
.escena-montana .members { position: relative; width: 170px; height: 112px; justify-content: flex-start; }
.scene-slope { position: absolute; left: 0; bottom: 0; width: 170px; height: 110px; }
.scene-slope svg { width: 100%; height: 100%; display: block; }
.scene-slope .tree { transform-box: fill-box; transform-origin: bottom center; animation: tree-shake 4.5s ease-in-out infinite; }
.scene-slope .pum { opacity: 0; animation: pum 4.5s steps(1) infinite; }
.escena-montana .figure {
  position: absolute;
  left: 6px;
  bottom: 56px;
  transform-origin: center;
  animation: slide 4.5s ease-in infinite;
}
.escena-montana .figure::before {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  bottom: -5px;
  height: 10px;
  border-radius: 3px;
  background: #c9a46a;
  box-shadow: inset 0 -3px 0 #a9834f;
}

@keyframes slide {
  0%   { transform: translate(0, -24px) rotate(-32deg); opacity: 1; }
  52%  { transform: translate(78px, 30px) rotate(-32deg); opacity: 1; }
  58%  { transform: translate(86px, 34px) rotate(-32deg) scale(0.88, 1.1); }
  66%  { transform: translate(80px, 34px) rotate(-55deg) scale(1, 1); }
  84%  { transform: translate(80px, 34px) rotate(-55deg); opacity: 1; }
  90%  { transform: translate(80px, 34px) rotate(-55deg); opacity: 0; }
  94%  { transform: translate(0, -24px) rotate(-32deg); opacity: 0; }
  100% { transform: translate(0, -24px) rotate(-32deg); opacity: 1; }
}

@keyframes tree-shake {
  0%, 56%, 70%, 100% { transform: rotate(0); }
  59% { transform: rotate(4deg); }
  63% { transform: rotate(-4deg); }
  67% { transform: rotate(2deg); }
}

@keyframes pum {
  0%, 57% { opacity: 0; }
  58%, 76% { opacity: 1; }
  77%, 100% { opacity: 0; }
}

/* ---------- Vegetación en la colina ---------- */
.flora {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 80px;
  pointer-events: none;
}

.plant {
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
  display: block;
}

.plant svg { height: 100%; width: auto; display: block; }

/* La casita en el horizonte */
.house {
  position: absolute;
  left: 50%;
  bottom: 49px; /* apoyada en la línea del horizonte (la cresta de la colina) */
  width: 56px;
  height: 45px;
  transform: translateX(-50%);
}

.house svg { width: 100%; height: 100%; display: block; }

/* De noche se encienden las ventanas */
.house .window rect {
  fill: rgb(
    calc(191 + (255 - 191) * var(--night)),
    calc(227 + (216 - 227) * var(--night)),
    calc(245 + (107 - 245) * var(--night))
  );
  transition: fill 2s linear;
}

/* Lucecitas en la franja del techo */
.house .lucecitas circle {
  filter: drop-shadow(0 0 1.5px #ffd86b);
  animation: lucecita 1.6s ease-in-out infinite alternate;
}
.house .lucecitas circle:nth-child(3n) { animation-delay: -0.5s; }
.house .lucecitas circle:nth-child(3n+1) { animation-delay: -1.1s; }

@keyframes lucecita {
  from { opacity: 0.45; }
  to   { opacity: 1; }
}

.house .smoke {
  position: absolute;
  left: 63%; /* centrado en la boca de la chimenea */
  top: 2%;
  width: 9px;
  height: 9px;
  transform-origin: center bottom;
  border-radius: 50%;
  background: rgba(45, 45, 52, 0.9);
  box-shadow: 0 0 2px rgba(45, 45, 52, 0.5);
  filter: blur(0.5px);
  animation: humo-negro 3.6s ease-out infinite;
}

.house .smoke:nth-child(3) { animation-delay: 1.2s; }
.house .smoke:nth-child(4) { animation-delay: 2.4s; }

@keyframes humo-negro {
  0%   { transform: translate(0, 2px) scale(0.35); opacity: 0.95; }
  25%  { transform: translate(2px, -8px) scale(0.9); opacity: 0.9; }
  60%  { opacity: 0.65; }
  100% { transform: translate(14px, -46px) scale(2.6); opacity: 0; }
}
.plant-lavanda svg { transform-origin: bottom center; animation: sway 3s ease-in-out infinite alternate; }
.plant-palmera svg { transform-origin: bottom center; animation: sway 5s ease-in-out infinite alternate; }

@media (prefers-reduced-motion: reduce) {
  .act-grabar .arm-r, .act-grabar .arm-r .held, .flash, .act-cantar .head, .prop.notas i,
  .act-bailar .arm-l, .act-bailar .arm-r, .act-bailar-pro .arm-l, .act-bailar-pro .arm-r, .act-fiesta .arm-l,
  .prop.confeti i, .act-boxeo .arm-r, .act-boxeo .arm-l, .prop.saco, .act-balon .leg-r, .act-balon .arm-l,
  .act-balon .arm-l .held, .prop.balon, .act-piedras .arm-r, .prop.roca, .act-cafe .arm-r, .act-cafe .arm-r .held,
  .act-parrilla .arm-r, .prop.parrilla .humo, .act-catan .arm-l, .act-lanzar .arm-r, .scene-ball,
  .escena-playa .figure, .scene-waves svg, .escena-audi .members, .scene-car .wheel, .scene-slope .tree,
  .scene-slope .pum, .escena-montana .figure, .plant svg, .figure.dog .tail, .figure.pinguino .person,
  .figure.pinguino .flipper { animation: none !important; }
}

/* Michelle y Mark en bicis con luces (estilo Burning Man) */
.escena-bicis { margin: 0 10px; }
.escena-bicis .members { position: relative; width: 250px; height: 110px; animation: ride 0.45s ease-in-out infinite alternate; }
.scene-bikes { position: absolute; left: 0; bottom: 0; width: 250px; height: 110px; }
.scene-bikes svg { width: 100%; height: 100%; display: block; overflow: visible; }
.scene-bikes .wheel { transform-box: fill-box; transform-origin: center; animation: roll 1.4s linear infinite; }
.scene-bikes .led { animation: led-twinkle 1.1s ease-in-out infinite alternate; filter: drop-shadow(0 0 2px currentColor); }
.escena-bicis .figure { position: absolute; bottom: 26px; }
.escena-bicis .figure:nth-child(2) { left: 21px; }
.escena-bicis .figure:nth-child(3) { left: 149px; }
.act-pedalear { --armL: -55deg; --armR: 55deg; }
.act-pedalear .leg-l { animation: pedal 0.7s linear infinite; }
.act-pedalear .leg-r { animation: pedal 0.7s linear infinite -0.35s; }

@keyframes pedal {
  0%   { transform: rotate(-28deg); }
  50%  { transform: rotate(22deg); }
  100% { transform: rotate(-28deg); }
}

@keyframes ride {
  from { transform: translateY(0); }
  to   { transform: translateY(-1.5px); }
}

@keyframes led-twinkle {
  from { opacity: 0.35; }
  to   { opacity: 1; }
}

.scene-tucan {
  position: absolute;
  left: 0;
  bottom: 62px;
  width: 44px;
  height: 32px;
  z-index: 3;
  pointer-events: none;
  animation: tucan-vuelo 9s ease-in-out infinite;
}
.scene-tucan svg { width: 100%; height: 100%; display: block; overflow: visible; animation: tucan-giro 9s steps(1) infinite; }
.scene-tucan .wing { transform-box: fill-box; transform-origin: 10% 50%; animation: tucan-aleteo 0.28s ease-in-out infinite alternate; }

@keyframes tucan-vuelo {
  0%   { transform: translate(-34px, 0) scale(1); }
  25%  { transform: translate(104px, -58px) scale(0.72); }
  50%  { transform: translate(246px, -6px) scale(1); }
  75%  { transform: translate(104px, 22px) scale(1.15); }
  100% { transform: translate(-34px, 0) scale(1); }
}

@keyframes tucan-giro {
  0%, 49.9% { transform: scaleX(1); }
  50%, 100% { transform: scaleX(-1); }
}

@keyframes tucan-aleteo {
  from { transform: rotate(-28deg); }
  to   { transform: rotate(22deg); }
}

@media (prefers-reduced-motion: reduce) {
  .scene-tucan, .scene-tucan svg, .scene-tucan .wing, .scene-bikes .wheel, .scene-bikes .led,
  .escena-bicis .members, .act-pedalear .leg-l, .act-pedalear .leg-r { animation: none; }
}