/* Sacos — tienda grande, sacos, bosque nevado y lobo | Motion CSS (mismo sistema que en3/hr3/il3) */
/* --sc3-smooth: cubic-bezier(0.22, 1, 0.36, 1) — respiración, pinos, luna, linterna */
/* --sc3-bounce: cubic-bezier(0.34, 1.56, 0.64, 1) — Zzz, pasos lobo */
/* --sc3-drift: cubic-bezier(0.16, 1, 0.3, 1) — copos con inercia al fondo */

.sc3-scene {
  --sc3-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --sc3-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --sc3-drift: cubic-bezier(0.16, 1, 0.3, 1);
  --sc3-loop: 16s;

  position: relative;
  width: 100%;
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #050a0f;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(16, 185, 129, 0.12);
}

.sc3-scene--hero {
  max-width: none;
  margin-inline: 0;
  height: 100%;
  min-height: 100%;
}

.sc3-scene__svg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 16rem;
}

/* —— GPU —— */
.sc3-enter,
.sc3-pine,
.sc3-moon,
.sc3-lantern,
.sc3-sleeper,
.sc3-wolf,
.sc3-wolf-body,
.sc3-wolf-leg,
.sc3-flake {
  will-change: transform;
}

.sc3-star,
.sc3-zzz,
.sc3-lantern-glow,
.sc3-wolf-steam,
.sc3-scene__glow {
  will-change: transform, opacity;
}

/* —— Entrada stagger —— */
.sc3-enter {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  animation: sc3EnterIn 0.9s var(--sc3-smooth) forwards;
}

.sc3-enter--sky { animation-delay: 0s; }
.sc3-enter--forest { animation-delay: 0.08s; }
.sc3-enter--tent { animation-delay: 0.16s; }
.sc3-enter--light { animation-delay: 0.22s; }
.sc3-enter--sleepers { animation-delay: 0.3s; }

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

/* —— Cielo —— */
.sc3-moon {
  transform-origin: 980px 48px;
  transform-box: fill-box;
  animation: sc3MoonPulse 7s var(--sc3-smooth) infinite;
}

.sc3-star {
  transform-origin: center;
  animation: sc3StarTwinkle 3.6s var(--sc3-smooth) infinite;
}

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

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

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

/* —— Pinos —— */
.sc3-pine {
  transform-origin: center bottom;
  transform-box: fill-box;
  animation: sc3PineSway 9s var(--sc3-smooth) infinite;
}

.sc3-pine--l2 { animation-delay: 1.2s; animation-duration: 10s; }
.sc3-pine--r1 { animation-delay: 0.65s; }
.sc3-pine--r2 { animation-delay: 1.85s; animation-duration: 9.5s; }

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

/* —— Nieve —— */
.sc3-flake {
  transform-origin: center;
  opacity: 0;
  animation: sc3SnowFall var(--sc3-loop) var(--sc3-drift) infinite;
}

.sc3-flake--1 { animation-delay: 0s; }
.sc3-flake--2 { animation-delay: 0.55s; }
.sc3-flake--3 { animation-delay: 1.1s; }
.sc3-flake--4 { animation-delay: 1.65s; }
.sc3-flake--5 { animation-delay: 2.2s; }
.sc3-flake--6 { animation-delay: 2.75s; }
.sc3-flake--7 { animation-delay: 3.3s; }
.sc3-flake--8 { animation-delay: 3.85s; }
.sc3-flake--9 { animation-delay: 4.4s; }
.sc3-flake--10 { animation-delay: 4.95s; }
.sc3-flake--11 { animation-delay: 5.5s; }
.sc3-flake--12 { animation-delay: 6.05s; }

@keyframes sc3SnowFall {
  0% {
    opacity: 0;
    transform: translate3d(0, -10px, 0) scale(0.6);
  }
  10% {
    opacity: 0.9;
  }
  90% {
    opacity: 0.65;
  }
  100% {
    opacity: 0;
    transform: translate3d(10px, 340px, 0) scale(1);
  }
}

.sc3-flake--2 { animation-name: sc3SnowFallB; }
.sc3-flake--4 { animation-name: sc3SnowFallB; animation-delay: 1.65s; }
.sc3-flake--6 { animation-name: sc3SnowFallB; animation-delay: 2.75s; }
.sc3-flake--8 { animation-name: sc3SnowFallB; animation-delay: 3.85s; }
.sc3-flake--10 { animation-name: sc3SnowFallB; animation-delay: 4.95s; }
.sc3-flake--12 { animation-name: sc3SnowFallB; animation-delay: 6.05s; }

@keyframes sc3SnowFallB {
  0% {
    opacity: 0;
    transform: translate3d(0, -10px, 0) scale(0.55);
  }
  10% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: translate3d(-16px, 340px, 0) scale(0.95);
  }
}

/* —— Linterna —— */
.sc3-lantern-glow {
  transform-origin: 920px 165px;
  transform-box: fill-box;
  animation: sc3LanternGlow 3.2s var(--sc3-smooth) infinite;
}

.sc3-lantern {
  transform-origin: 920px 176px;
  transform-box: fill-box;
  animation: sc3LanternSway 4s var(--sc3-smooth) infinite;
}

@keyframes sc3LanternGlow {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.94);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes sc3LanternSway {
  0%,
  100% {
    transform: rotate(-1.5deg);
  }
  50% {
    transform: rotate(1.5deg);
  }
}

/* —— Sacos: expansión de confort → sacos-comfort-expand.css —— */

.sc3-zzz {
  transform-origin: center;
  animation: sc3Zzz 2.6s var(--sc3-bounce) infinite;
}

.sc3-zzz--2 { animation-delay: 0.4s; }
.sc3-zzz--3 { animation-delay: 0.8s; }
.sc3-zzz--4 { animation-delay: 1.2s; }

@keyframes sc3Zzz {
  0%,
  100% {
    opacity: 0.3;
    transform: translate3d(0, 0, 0) scale(0.88);
  }
  50% {
    opacity: 0.9;
    transform: translate3d(5px, -7px, 0) scale(1.12);
  }
}

/* —— Lobo —— */
.sc3-wolf {
  transform: translate3d(1100px, 268px, 0);
  animation: sc3WolfPatrol var(--sc3-loop) var(--sc3-smooth) infinite;
}

@keyframes sc3WolfPatrol {
  0%,
  6% {
    transform: translate3d(1100px, 268px, 0);
  }
  44% {
    transform: translate3d(120px, 268px, 0);
  }
  52%,
  60% {
    transform: translate3d(100px, 268px, 0) scaleX(-1);
  }
  94%,
  100% {
    transform: translate3d(1100px, 268px, 0);
  }
}

.sc3-wolf-body {
  transform-origin: center;
  animation: sc3WolfBob 1s var(--sc3-smooth) infinite;
}

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

.sc3-wolf-leg--fl,
.sc3-wolf-leg--br {
  transform-origin: top center;
  transform-box: fill-box;
  animation: sc3WolfLegA 1s var(--sc3-bounce) infinite;
}

.sc3-wolf-leg--fr,
.sc3-wolf-leg--bl {
  transform-origin: top center;
  transform-box: fill-box;
  animation: sc3WolfLegB 1s var(--sc3-bounce) infinite;
}

@keyframes sc3WolfLegA {
  0%,
  100% {
    transform: rotate(14deg);
  }
  50% {
    transform: rotate(-20deg);
  }
}

@keyframes sc3WolfLegB {
  0%,
  100% {
    transform: rotate(-14deg);
  }
  50% {
    transform: rotate(18deg);
  }
}

.sc3-wolf-steam {
  transform-origin: -38px -12px;
  transform-box: fill-box;
  animation: sc3WolfSteam 2.2s var(--sc3-smooth) infinite;
}

@keyframes sc3WolfSteam {
  0%,
  100% {
    opacity: 0.08;
    transform: scale(0.75);
  }
  50% {
    opacity: 0.3;
    transform: scale(1.12);
  }
}

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

.sc3-scene__glow--left {
  width: 28%;
  height: 55%;
  left: 18%;
  top: 22%;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.28), transparent 70%);
  animation: sc3GlowWarm 4.2s var(--sc3-smooth) infinite;
}

.sc3-scene__glow--center {
  width: 22%;
  height: 48%;
  right: 8%;
  top: 18%;
  background: radial-gradient(circle, rgba(254, 243, 199, 0.22), transparent 70%);
  animation: sc3GlowLantern 3s var(--sc3-smooth) infinite;
}

.sc3-scene__glow--right {
  width: 26%;
  height: 50%;
  right: 2%;
  top: 0;
  background: radial-gradient(circle, rgba(226, 232, 240, 0.12), transparent 70%);
  animation: sc3GlowMoon 6s var(--sc3-smooth) infinite;
}

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

@keyframes sc3GlowLantern {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

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

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

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

  .sc3-wolf {
    transform: translate3d(350px, 268px, 0);
  }

  .sc3-flake {
    opacity: 0.45;
    transform: translate3d(0, 100px, 0);
  }
}