/* =============================================================
   ALFONSINA BORDADOS - background-deco.css
   Hojas otoñales, carreteles de hilo y agujas decorativas de fondo
   ============================================================= */

.bg-deco {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.bg-deco__item {
  position: absolute;
  display: block;
}

/* ----- Animaciones ----- */

@keyframes leaf-float {
  0%, 100% { translate: 0 0; }
  35%       { translate: 0 -11px; }
  70%       { translate: 0 6px; }
}

@keyframes leaf-sway {
  0%, 100% { translate: 0 0; }
  45%       { translate: 0 -8px; }
  78%       { translate: 0 5px; }
}

@keyframes yarn-bob {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50%       { translate: 0 -7px; rotate: 6deg; }
}

/* ----- Bordes y esquinas ----- */

.bg-deco__leaf--1 {
  top: -2%;
  left: -4%;
  width: 132px;
  opacity: 0.42;
  transform: rotate(-28deg);
  animation: leaf-float 9s ease-in-out 0s infinite;
}

.bg-deco__leaf--2 {
  top: 6%;
  right: -2%;
  width: 80px;
  opacity: 0.38;
  transform: rotate(44deg);
  animation: leaf-sway 11.5s ease-in-out 1.8s infinite;
}

.bg-deco__leaf--3 {
  top: 38%;
  left: -2%;
  width: 66px;
  opacity: 0.36;
  transform: rotate(-54deg);
  animation: leaf-float 13s ease-in-out 3.2s infinite;
}

.bg-deco__leaf--4 {
  top: 27%;
  right: 1%;
  width: 56px;
  opacity: 0.32;
  transform: rotate(62deg);
  animation: leaf-sway 10.5s ease-in-out 2.4s infinite;
}

.bg-deco__leaf--5 {
  bottom: 9%;
  left: -1%;
  width: 110px;
  opacity: 0.40;
  transform: rotate(14deg);
  animation: leaf-float 12s ease-in-out 4.5s infinite;
}

.bg-deco__leaf--6 {
  bottom: 2%;
  right: -3%;
  width: 88px;
  opacity: 0.38;
  transform: rotate(-38deg);
  animation: leaf-sway 14.5s ease-in-out 0.6s infinite;
}

.bg-deco__leaf--7 {
  top: 62%;
  right: 5%;
  width: 50px;
  opacity: 0.28;
  transform: rotate(-74deg);
  animation: leaf-float 16s ease-in-out 6.5s infinite;
}

.bg-deco__yarn--1 {
  bottom: 9%;
  right: 0%;
  width: 78px;
  opacity: 0.44;
  transform: rotate(-10deg);
  animation: yarn-bob 13s ease-in-out 1.2s infinite;
}

.bg-deco__yarn--2 {
  top: 22%;
  left: 0%;
  width: 62px;
  opacity: 0.38;
  transform: rotate(14deg);
  animation: yarn-bob 16s ease-in-out 5s infinite;
}

/* ----- Elementos centrales y dispersos ----- */

.bg-deco__leaf--8 {
  top: 14%;
  left: 22%;
  width: 58px;
  opacity: 0.25;
  transform: rotate(28deg);
  animation: leaf-float 10s ease-in-out 2.2s infinite;
}

.bg-deco__leaf--9 {
  top: 48%;
  left: 42%;
  width: 42px;
  opacity: 0.22;
  transform: rotate(-44deg);
  animation: leaf-sway 14s ease-in-out 7s infinite;
}

.bg-deco__leaf--10 {
  top: 68%;
  left: 28%;
  width: 55px;
  opacity: 0.24;
  transform: rotate(18deg);
  animation: leaf-float 11s ease-in-out 5.5s infinite;
}

.bg-deco__leaf--11 {
  top: 44%;
  right: 18%;
  width: 62px;
  opacity: 0.26;
  transform: rotate(-32deg);
  animation: leaf-sway 12s ease-in-out 3.8s infinite;
}

.bg-deco__leaf--12 {
  top: 28%;
  left: 14%;
  width: 46px;
  opacity: 0.22;
  transform: rotate(54deg);
  animation: leaf-float 15s ease-in-out 8s infinite;
}

.bg-deco__leaf--13 {
  top: 2%;
  left: 38%;
  width: 72px;
  opacity: 0.28;
  transform: rotate(-14deg);
  animation: leaf-sway 13s ease-in-out 1s infinite;
}

.bg-deco__yarn--3 {
  top: 58%;
  left: 16%;
  width: 58px;
  opacity: 0.28;
  transform: rotate(10deg);
  animation: yarn-bob 14s ease-in-out 3s infinite;
}

.bg-deco__yarn--4 {
  top: 32%;
  right: 10%;
  width: 52px;
  opacity: 0.26;
  transform: rotate(-18deg);
  animation: yarn-bob 17s ease-in-out 6s infinite;
}

/* ----- Piñas (centro, detrás del catálogo) ----- */

.bg-deco__pine--1 {
  top: 18%;
  left: 44%;
  width: 52px;
  opacity: 0.28;
  transform: rotate(-12deg);
  animation: leaf-float 14s ease-in-out 1s infinite;
}

.bg-deco__pine--2 {
  top: 42%;
  left: 26%;
  width: 42px;
  opacity: 0.24;
  transform: rotate(10deg);
  animation: leaf-sway 12s ease-in-out 4s infinite;
}

.bg-deco__pine--3 {
  top: 56%;
  left: 57%;
  width: 48px;
  opacity: 0.26;
  transform: rotate(-20deg);
  animation: leaf-float 16s ease-in-out 6s infinite;
}

.bg-deco__pine--4 {
  top: 28%;
  right: 20%;
  width: 38px;
  opacity: 0.22;
  transform: rotate(18deg);
  animation: leaf-sway 11s ease-in-out 3s infinite;
}

.bg-deco__pine--5 {
  top: 72%;
  left: 40%;
  width: 46px;
  opacity: 0.24;
  transform: rotate(-8deg);
  animation: leaf-float 13s ease-in-out 7.5s infinite;
}

/* ----- Agujas ----- */

.bg-deco__needle--1 {
  bottom: 18%;
  right: 9%;
  width: 16px;
  opacity: 0.52;
  transform: rotate(20deg);
  animation: leaf-float 12s ease-in-out 2.5s infinite;
}

.bg-deco__needle--2 {
  top: 44%;
  left: 4%;
  width: 14px;
  opacity: 0.46;
  transform: rotate(-16deg);
  animation: leaf-sway 15s ease-in-out 6.5s infinite;
}

/* ----- Responsive ----- */

@media (max-width: 1024px) {
  .bg-deco__leaf--4   { display: none; }
  .bg-deco__leaf--7   { display: none; }
  .bg-deco__leaf--9   { display: none; }
  .bg-deco__leaf--12  { display: none; }
  .bg-deco__yarn--4   { display: none; }
  .bg-deco__needle--2 { display: none; }
  .bg-deco__pine--4   { display: none; }
}

@media (max-width: 768px) {
  .bg-deco__leaf--1   { width: 88px; opacity: 0.30; }
  .bg-deco__leaf--2   { width: 58px; opacity: 0.28; }
  .bg-deco__leaf--3   { display: none; }
  .bg-deco__leaf--5   { width: 74px; opacity: 0.30; }
  .bg-deco__leaf--6   { width: 62px; opacity: 0.28; }
  .bg-deco__leaf--8   { display: none; }
  .bg-deco__leaf--10  { display: none; }
  .bg-deco__leaf--11  { display: none; }
  .bg-deco__leaf--13  { width: 50px; opacity: 0.22; }
  .bg-deco__yarn--1   { width: 58px; opacity: 0.32; }
  .bg-deco__yarn--2   { display: none; }
  .bg-deco__yarn--3   { display: none; }
  .bg-deco__needle--1 { width: 13px; opacity: 0.40; }
  .bg-deco__pine--1   { width: 40px; opacity: 0.20; }
  .bg-deco__pine--2   { display: none; }
  .bg-deco__pine--3   { display: none; }
  .bg-deco__pine--5   { display: none; }
}

@media (max-width: 480px) {
  .bg-deco__leaf--1   { width: 68px; opacity: 0.26; }
  .bg-deco__leaf--5   { width: 55px; opacity: 0.26; }
  .bg-deco__leaf--6   { width: 50px; opacity: 0.26; }
  .bg-deco__leaf--13  { display: none; }
  .bg-deco__yarn--1   { width: 48px; opacity: 0.28; }
  .bg-deco__needle--1 { display: none; }
  .bg-deco__pine--1   { display: none; }
}

/* Respeta preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .bg-deco__item { animation: none !important; }
}