/* Baterías — familia en tienda cargando dispositivos | Motion CSS optimizado */
/* --en-smooth: desaceleración natural (carga, entrada, ambiente) */
/* --en-bounce: rebote elástico (LEDs, pulso estación) */

.energy-scene {
  --en-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --en-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --en-loop: 8s;

  position: relative;
  width: 100%;
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #020408;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(56, 189, 248, 0.12);
}

.energy-scene--hero {
  max-width: none;
  margin-inline: 0;
  aspect-ratio: auto;
  height: 100%;
  min-height: 100%;
  display: block;
}

.energy-scene__svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 16rem;
}

.energy-scene--hero .energy-scene__svg {
  min-height: 100%;
}

/* —— GPU —— */
.en3-enter,
.en3-member,
.en3-station-wrap,
.en3-station-glow,
.en3-lantern,
.en3-pine,
.en3-moon,
.en3-flow,
.en3-battery-fill,
.en3-device-laptop {
  will-change: transform;
}

.en3-star,
.en3-cable,
.en3-screen,
.en3-led,
.en3-battery-text,
.en3-air,
.en3-flow {
  will-change: transform, opacity;
}

/* —— Entrada stagger —— */
.en3-enter {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  animation: en3EnterIn 0.85s var(--en-smooth) forwards;
}

.en3-enter--sky { animation-delay: 0s; }
.en3-enter--forest { animation-delay: 0.07s; }
.en3-enter--tent { animation-delay: 0.14s; }
.en3-enter--light { animation-delay: 0.2s; }
.en3-enter--station { animation-delay: 0.26s; }
.en3-enter--m1 { animation-delay: 0.34s; }
.en3-enter--m2 { animation-delay: 0.4s; }
.en3-enter--m3 { animation-delay: 0.46s; }
.en3-enter--m4 { animation-delay: 0.52s; }
.en3-enter--m5 { animation-delay: 0.58s; }
.en3-enter--m6 { animation-delay: 0.64s; }

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

/* —— Miembros: respiro sutil —— */
.en3-member {
  transform-origin: center bottom;
  transform-box: fill-box;
  animation: en3MemberIdle 3.6s var(--en-smooth) infinite;
}

.en3-member--1 {
  transform-origin: 200px 278px;
  animation-delay: 0s;
}
.en3-member--2 {
  transform-origin: 340px 280px;
  animation-delay: 0.35s;
}
.en3-member--3 {
  transform-origin: 460px 282px;
  animation-delay: 0.7s;
}
.en3-member--4 {
  transform-origin: 580px 284px;
  animation-delay: 1.05s;
}
.en3-member--5 {
  transform-origin: 740px 280px;
  animation-delay: 1.4s;
}
.en3-member--6 {
  transform-origin: 920px 282px;
  animation-delay: 1.75s;
}

@keyframes en3MemberIdle {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -3px, 0);
  }
}

/* —— Estación y batería —— */
.en3-station-glow {
  transform-origin: 600px 228px;
  transform-box: fill-box;
  animation: en3StationGlow 3.8s var(--en-smooth) infinite;
}

.en3-battery-fill {
  transform-origin: 536px 223px;
  transform-box: fill-box;
  animation: en3BatteryFill var(--en-loop) var(--en-smooth) infinite;
}

.en3-battery-text {
  animation: en3BatteryText var(--en-loop) var(--en-smooth) infinite;
}

@keyframes en3StationGlow {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.96);
  }
  50% {
    opacity: 0.95;
    transform: scale(1.06);
  }
}

@keyframes en3BatteryFill {
  0%,
  100% {
    transform: scale3d(0.42, 1, 1);
  }
  45%,
  55% {
    transform: scale3d(0.92, 1, 1);
  }
}

@keyframes en3BatteryText {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

/* —— LEDs —— */
.en3-led {
  animation: en3LedPulse 1.6s var(--en-bounce) infinite;
}

.en3-led--2 { animation-delay: 0.2s; }
.en3-led--3 { animation-delay: 0.4s; }
.en3-led--4 { animation-delay: 0.6s; }

@keyframes en3LedPulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* —— Pantallas —— */
.en3-screen {
  animation: en3ScreenGlow 2.8s var(--en-smooth) infinite;
}

.en3-screen--2 { animation-delay: 0.35s; }
.en3-screen--3 { animation-delay: 0.7s; }
.en3-screen--4 { animation-delay: 1.05s; }
.en3-screen--5 { animation-delay: 1.4s; }
.en3-screen--6 { animation-delay: 1.75s; }
.en3-screen--7 { animation-delay: 2.1s; }

@keyframes en3ScreenGlow {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

/* —— Cables: pulso de opacidad (sin stroke-dashoffset) —— */
.en3-cable {
  animation: en3CablePulse 2.4s var(--en-smooth) infinite;
}

.en3-cables .en3-cable:nth-child(2) { animation-delay: 0.15s; }
.en3-cables .en3-cable:nth-child(3) { animation-delay: 0.3s; }
.en3-cables .en3-cable:nth-child(4) { animation-delay: 0.45s; }
.en3-cables .en3-cable:nth-child(5) { animation-delay: 0.6s; }
.en3-cables .en3-cable:nth-child(6) { animation-delay: 0.75s; }
.en3-cables .en3-cable:nth-child(7) { animation-delay: 0.9s; }

@keyframes en3CablePulse {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 0.95;
  }
}

/* —— Partículas de carga (translate + opacity) —— */
.en3-flow {
  transform-origin: 0 0;
  opacity: 0;
}

.en3-flow--1 { animation: en3Flow1 2.8s var(--en-smooth) infinite; }
.en3-flow--2 { animation: en3Flow2 2.8s var(--en-smooth) infinite 0.35s; }
.en3-flow--3 { animation: en3Flow3 2.8s var(--en-smooth) infinite 0.7s; }
.en3-flow--4 { animation: en3Flow4 2.8s var(--en-smooth) infinite 1.05s; }
.en3-flow--5 { animation: en3Flow5 2.8s var(--en-smooth) infinite 0.5s; }
.en3-flow--6 { animation: en3Flow6 2.8s var(--en-smooth) infinite 0.85s; }

@keyframes en3Flow1 {
  0% { opacity: 0; transform: translate3d(600px, 224px, 0) scale(0.5); }
  12% { opacity: 1; }
  88% { opacity: 0.6; transform: translate3d(185px, 258px, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(175px, 260px, 0) scale(0.6); }
}

@keyframes en3Flow2 {
  0% { opacity: 0; transform: translate3d(600px, 226px, 0) scale(0.5); }
  12% { opacity: 1; }
  88% { opacity: 0.6; transform: translate3d(325px, 262px, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(318px, 264px, 0) scale(0.6); }
}

@keyframes en3Flow3 {
  0% { opacity: 0; transform: translate3d(600px, 226px, 0) scale(0.5); }
  12% { opacity: 1; }
  88% { opacity: 0.6; transform: translate3d(455px, 264px, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(448px, 266px, 0) scale(0.6); }
}

@keyframes en3Flow4 {
  0% { opacity: 0; transform: translate3d(600px, 224px, 0) scale(0.5); }
  12% { opacity: 1; }
  88% { opacity: 0.6; transform: translate3d(920px, 258px, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(910px, 260px, 0) scale(0.6); }
}

@keyframes en3Flow5 {
  0% { opacity: 0; transform: translate3d(600px, 252px, 0) scale(0.5); }
  12% { opacity: 1; }
  88% { opacity: 0.6; transform: translate3d(575px, 272px, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(572px, 274px, 0) scale(0.6); }
}

@keyframes en3Flow6 {
  0% { opacity: 0; transform: translate3d(640px, 228px, 0) scale(0.5); }
  12% { opacity: 1; }
  88% { opacity: 0.6; transform: translate3d(755px, 262px, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(748px, 264px, 0) scale(0.6); }
}

/* —— Ambiente —— */
.en3-pine {
  transform-origin: center bottom;
  transform-box: fill-box;
  animation: en3PineSway 9s var(--en-smooth) infinite;
}

.en3-pine--r1 { animation-delay: 1.2s; animation-duration: 10.5s; }
.en3-pine--c1 { animation-delay: 0.6s; animation-duration: 8.5s; }

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

.en3-lantern {
  transform-origin: 600px 118px;
  transform-box: fill-box;
  animation: en3LanternFlicker 2.8s var(--en-smooth) infinite;
}

@keyframes en3LanternFlicker {
  0%,
  100% {
    opacity: 0.82;
    transform: scale(1);
  }
  45% {
    opacity: 1;
    transform: scale(1.07);
  }
  70% {
    opacity: 0.9;
    transform: scale(0.98);
  }
}

.en3-moon {
  transform-origin: 600px 52px;
  transform-box: fill-box;
  animation: en3MoonPulse 6s var(--en-smooth) infinite;
}

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

.en3-star {
  transform-origin: center;
  animation: en3StarTwinkle 3.4s var(--en-smooth) infinite;
}

.en3-star--2 { animation-delay: 0.55s; }
.en3-star--3 { animation-delay: 1.1s; }
.en3-star--4 { animation-delay: 1.65s; }

@keyframes en3StarTwinkle {
  0%,
  100% {
    opacity: 0.2;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* —— Glows HTML (solo transform + opacity) —— */
.energy-scene__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(32px);
  will-change: transform, opacity;
}

.energy-scene__glow--left {
  width: 14rem;
  height: 10rem;
  left: 8%;
  bottom: 10%;
  background: rgba(52, 211, 153, 0.24);
  animation: en3GlowPulse 5s var(--en-smooth) infinite;
}

.energy-scene__glow--right {
  width: 12rem;
  height: 10rem;
  right: 6%;
  top: 6%;
  background: rgba(253, 224, 71, 0.16);
  animation: en3GlowPulse 6s var(--en-smooth) infinite;
  animation-delay: 0.8s;
}

.energy-scene__glow--center {
  width: 16rem;
  height: 8rem;
  left: 50%;
  bottom: 12%;
  margin-left: -8rem;
  background: rgba(52, 211, 153, 0.32);
  animation: en3GlowCenter 4.5s var(--en-smooth) infinite 0.4s;
}

@keyframes en3GlowPulse {
  0%,
  100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.08);
  }
}

@keyframes en3GlowCenter {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(1);
  }
  50% {
    opacity: 0.75;
    transform: scale(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .energy-scene *,
  .energy-scene__glow {
    animation: none !important;
    will-change: auto;
  }

  .en3-enter {
    opacity: 1;
    transform: none;
  }

  .en3-battery-fill {
    transform: scale3d(0.85, 1, 1);
  }

  .en3-flow {
    opacity: 0;
  }

  .en3-cable {
    opacity: 0.85;
  }
}