/* Herramientas — animación v2 (preview) | hr4-* */
.herr-scene--v2 {
  --hr4-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --hr4-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --hr4-loop: 16s;
}

.herr-scene--v2 .herr-scene__svg {
  min-height: 16rem;
}

/* Entrada */
.herr-scene--v2 .hr4-enter {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  animation: hr4EnterIn 1s var(--hr4-smooth) forwards;
}

.herr-scene--v2 .hr4-enter--sky { animation-delay: 0s; }
.herr-scene--v2 .hr4-enter--forest { animation-delay: 0.1s; }
.herr-scene--v2 .hr4-enter--fire { animation-delay: 0.2s; }

@keyframes hr4EnterIn {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Cielo */
.herr-scene--v2 .hr4-star {
  transform-origin: center;
  animation: hr4StarTwinkle 4s var(--hr4-smooth) infinite;
}

.herr-scene--v2 .hr4-star--2 { animation-delay: 0.6s; }
.herr-scene--v2 .hr4-star--3 { animation-delay: 1.2s; }
.herr-scene--v2 .hr4-star--4 { animation-delay: 0.3s; }
.herr-scene--v2 .hr4-star--5 { animation-delay: 1.8s; }

.herr-scene--v2 .hr4-moon {
  transform-origin: 1010px 46px;
  transform-box: fill-box;
  animation: hr4MoonPulse 7s var(--hr4-smooth) infinite;
}

@keyframes hr4StarTwinkle {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

@keyframes hr4MoonPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.92;
  }
  50% {
    transform: scale(1.04);
    opacity: 1;
  }
}

/* Bosque */
.herr-scene--v2 .hr4-pine {
  transform-origin: center bottom;
  transform-box: fill-box;
  animation: hr4PineSway 10s var(--hr4-smooth) infinite;
}

.herr-scene--v2 .hr4-pine--2 { animation-delay: 1.8s; animation-duration: 11s; }
.herr-scene--v2 .hr4-pine--3 { animation-delay: 0.9s; animation-duration: 9.5s; }

@keyframes hr4PineSway {
  0%,
  100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(0.8deg);
  }
}

/* Corte de pino — sin triángulo flotante */
.herr-scene--v2 .hr4-pine-top {
  transform-origin: 285px 198px;
  transform-box: fill-box;
  animation: hr4PineFall var(--hr4-loop) var(--hr4-smooth) infinite;
}

.herr-scene--v2 .hr4-chop-dust {
  transform-origin: 285px 208px;
  animation: hr4ChopDust var(--hr4-loop) var(--hr4-smooth) infinite;
}

.herr-scene--v2 .hr4-chop-ring {
  transform-origin: 285px 208px;
  animation: hr4ChopRing var(--hr4-loop) var(--hr4-smooth) infinite;
}

@keyframes hr4PineFall {
  0%,
  11% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  13% {
    transform: translate3d(-4px, 2px, 0) rotate(-4deg);
  }
  17% {
    opacity: 0.7;
    transform: translate3d(-40px, 45px, 0) rotate(-28deg);
  }
  20%,
  100% {
    opacity: 0;
    transform: translate3d(-80px, 90px, 0) rotate(-42deg);
  }
}

@keyframes hr4ChopDust {
  0%,
  10%,
  100% {
    opacity: 0;
    transform: scale(0.4);
  }
  13% {
    opacity: 0.65;
    transform: scale(1);
  }
  19% {
    opacity: 0;
    transform: scale(1.5);
  }
}

@keyframes hr4ChopRing {
  0%,
  10%,
  100% {
    opacity: 0;
    transform: scale(0.6);
  }
  13% {
    opacity: 0.35;
    transform: scale(1);
  }
  18% {
    opacity: 0;
    transform: scale(1.35);
  }
}

/* Personaje */
.herr-scene--v2 .hr4-actor {
  transform: translate3d(285px, 228px, 0);
  animation: hr4ActorJourney var(--hr4-loop) var(--hr4-smooth) infinite;
}

.herr-scene--v2 .hr4-actor-body {
  animation: hr4ActorBob var(--hr4-loop) var(--hr4-smooth) infinite;
}

@keyframes hr4ActorJourney {
  0%,
  9% {
    transform: translate3d(285px, 228px, 0);
  }
  22% {
    transform: translate3d(470px, 228px, 0);
  }
  30%,
  36% {
    transform: translate3d(470px, 228px, 0);
  }
  40% {
    transform: translate3d(510px, 228px, 0);
  }
  64% {
    transform: translate3d(810px, 228px, 0);
  }
  70%,
  76% {
    transform: translate3d(810px, 228px, 0);
  }
  90%,
  100% {
    transform: translate3d(285px, 228px, 0);
  }
}

@keyframes hr4ActorBob {
  0%,
  9%,
  30%,
  36%,
  70%,
  76%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  15%,
  55% {
    transform: translate3d(0, -2px, 0);
  }
  18%,
  58% {
    transform: translate3d(0, 0, 0);
  }
  21%,
  61% {
    transform: translate3d(0, -2px, 0);
  }
  24%,
  64% {
    transform: translate3d(0, 0, 0);
  }
}

.herr-scene--v2 .hr4-arm {
  transform-origin: 12px -4px;
  transform-box: fill-box;
  animation: hr4ArmChop var(--hr4-loop) var(--hr4-bounce) infinite;
}

@keyframes hr4ArmChop {
  0%,
  7% {
    transform: rotate(-52deg);
  }
  3.5% {
    transform: rotate(34deg);
  }
  5.5% {
    transform: rotate(-42deg);
  }
  9% {
    transform: rotate(30deg);
  }
  11%,
  100% {
    transform: rotate(-10deg);
  }
}

.herr-scene--v2 .hr4-log-hand {
  animation: hr4LogHand var(--hr4-loop) var(--hr4-smooth) infinite;
}

@keyframes hr4LogHand {
  0%,
  20%,
  100% {
    opacity: 0;
  }
  24%,
  34% {
    opacity: 1;
  }
  38% {
    opacity: 0;
  }
}

/* Carrito + ruedas */
.herr-scene--v2 .hr4-cart {
  transform: translate3d(478px, 236px, 0);
  animation: hr4CartMove var(--hr4-loop) var(--hr4-smooth) infinite;
}

.herr-scene--v2 .hr4-wheel {
  transform-origin: center;
  transform-box: fill-box;
  animation: hr4WheelSpin var(--hr4-loop) linear infinite;
}

.herr-scene--v2 .hr4-wheel--r {
  animation-direction: reverse;
}

@keyframes hr4CartMove {
  0%,
  38% {
    transform: translate3d(478px, 236px, 0);
  }
  64% {
    transform: translate3d(810px, 236px, 0);
  }
  90%,
  100% {
    transform: translate3d(478px, 236px, 0);
  }
}

@keyframes hr4WheelSpin {
  0%,
  38%,
  90%,
  100% {
    transform: rotate(0deg);
  }
  64% {
    transform: rotate(720deg);
  }
}

.herr-scene--v2 .hr4-cart-log--1 { animation: hr4CartLog1 var(--hr4-loop) var(--hr4-smooth) infinite; }
.herr-scene--v2 .hr4-cart-log--2 { animation: hr4CartLog2 var(--hr4-loop) var(--hr4-smooth) infinite; }
.herr-scene--v2 .hr4-cart-log--3 { animation: hr4CartLog3 var(--hr4-loop) var(--hr4-smooth) infinite; }

@keyframes hr4CartLog1 {
  0%,
  34%,
  100% { opacity: 0; transform: translate3d(0, 8px, 0); }
  38%,
  88% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes hr4CartLog2 {
  0%,
  36%,
  100% { opacity: 0; transform: translate3d(0, 8px, 0); }
  40%,
  88% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes hr4CartLog3 {
  0%,
  38%,
  100% { opacity: 0; transform: translate3d(0, 8px, 0); }
  42%,
  88% { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Tronco al fuego */
.herr-scene--v2 .hr4-log-fly {
  transform: translate3d(810px, 228px, 0);
  animation: hr4LogThrow var(--hr4-loop) var(--hr4-bounce) infinite;
}

@keyframes hr4LogThrow {
  0%,
  62%,
  100% {
    opacity: 0;
    transform: translate3d(810px, 228px, 0) rotate(0deg);
  }
  63% {
    opacity: 1;
    transform: translate3d(810px, 224px, 0) rotate(-8deg);
  }
  66% {
    opacity: 0;
    transform: translate3d(920px, 252px, 0) rotate(22deg);
  }
  67% {
    opacity: 1;
    transform: translate3d(810px, 224px, 0) rotate(-8deg);
  }
  70% {
    opacity: 0;
    transform: translate3d(968px, 258px, 0) rotate(14deg);
  }
}

/* Hoguera + humo */
.herr-scene--v2 .hr4-fire {
  transform: translate3d(988px, 264px, 0) scale(1);
  transform-origin: 0 0;
  animation: hr4FireGrow var(--hr4-loop) var(--hr4-smooth) infinite;
}

.herr-scene--v2 .hr4-fire-light {
  animation: hr4FireLight var(--hr4-loop) var(--hr4-smooth) infinite;
}

@keyframes hr4FireGrow {
  0%,
  62% {
    transform: translate3d(988px, 264px, 0) scale(1);
  }
  66% {
    transform: translate3d(988px, 262px, 0) scale(1.15);
  }
  70% {
    transform: translate3d(988px, 260px, 0) scale(1.28);
  }
  74% {
    transform: translate3d(988px, 258px, 0) scale(1.38);
  }
  78%,
  96% {
    transform: translate3d(988px, 257px, 0) scale(1.42);
  }
  100% {
    transform: translate3d(988px, 260px, 0) scale(1.25);
  }
}

@keyframes hr4FireLight {
  0%,
  62% {
    opacity: 0.15;
  }
  74%,
  96% {
    opacity: 0.45;
  }
  100% {
    opacity: 0.3;
  }
}

.herr-scene--v2 .hr4-fire-core,
.herr-scene--v2 .hr4-fire-mid,
.herr-scene--v2 .hr4-fire-outer {
  transform-origin: 0 -20px;
  animation: hr4FireFlicker 1.6s var(--hr4-smooth) infinite;
}

.herr-scene--v2 .hr4-fire-mid { animation-delay: 0.15s; }
.herr-scene--v2 .hr4-fire-outer { animation-delay: 0.3s; }

@keyframes hr4FireFlicker {
  0%,
  100% {
    opacity: 0.9;
    transform: scaleY(1) scaleX(1);
  }
  40% {
    opacity: 1;
    transform: scaleY(1.1) scaleX(1.05);
  }
  70% {
    opacity: 0.94;
    transform: scaleY(0.95) scaleX(0.98);
  }
}

.herr-scene--v2 .hr4-smoke {
  transform-origin: center bottom;
  animation: hr4SmokeRise 3.2s var(--hr4-smooth) infinite;
}

.herr-scene--v2 .hr4-smoke--2 { animation-delay: 1.1s; }
.herr-scene--v2 .hr4-smoke--3 { animation-delay: 2s; }

@keyframes hr4SmokeRise {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.8);
  }
  15% {
    opacity: 0.35;
  }
  100% {
    opacity: 0;
    transform: translate3d(8px, -36px, 0) scale(1.4);
  }
}

.herr-scene--v2 .hr4-spark {
  transform-origin: center;
  animation: hr4SparkPop 1.5s var(--hr4-bounce) infinite;
}

.herr-scene--v2 .hr4-spark--2 { animation-delay: 0.4s; }
.herr-scene--v2 .hr4-spark--3 { animation-delay: 0.8s; }

@keyframes hr4SparkPop {
  0%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.3);
  }
  50% {
    opacity: 1;
    transform: translate3d(0, -12px, 0) scale(1.15);
  }
}

/* Glows */
.herr-scene--v2 .herr-scene__glow--left {
  animation: hr4GlowPulse 5.5s var(--hr4-smooth) infinite;
}

.herr-scene--v2 .herr-scene__glow--right {
  animation: hr4GlowFire 2.8s var(--hr4-smooth) infinite;
}

@keyframes hr4GlowPulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}

@keyframes hr4GlowFire {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.95;
    transform: scale(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .herr-scene--v2 *,
  .herr-scene--v2 .herr-scene__glow {
    animation: none !important;
  }

  .herr-scene--v2 .hr4-enter {
    opacity: 1;
    transform: none;
  }

  .herr-scene--v2 .hr4-actor {
    transform: translate3d(510px, 228px, 0);
  }

  .herr-scene--v2 .hr4-cart {
    transform: translate3d(478px, 236px, 0);
  }

  .herr-scene--v2 .hr4-fire {
    transform: translate3d(988px, 258px, 0) scale(1.3);
  }

  .herr-scene--v2 .hr4-cart-log--1,
  .herr-scene--v2 .hr4-cart-log--2 {
    opacity: 1;
  }
}

@media (max-width: 767px) {
  .herr-scene--v2 .herr-scene__glow {
    filter: blur(28px);
  }
}