/* Animación de carga con cerdito dorado brillante */
.page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  /* Fondo blanco semi-transparente */
  backdrop-filter: blur(10px);
  /* Efecto de desenfoque */
  -webkit-backdrop-filter: blur(10px);
  /* Safari */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loader-content {
  position: relative;
}

.piggy-wrapper {
  position: relative;
  width: 350px;
  height: 350px;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 10px 30px rgba(255, 215, 0, 0.3));
  overflow: visible;
}

.piggy-wrap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  transform-origin: bottom center;
  animation: trembling 5s linear infinite;
}

@keyframes trembling {

  0%,
  19% {
    transform: scale(1);
  }

  21%,
  23%,
  25%,
  27%,
  29% {
    transform: scale(0.99);
  }

  22%,
  24%,
  26%,
  28%,
  30% {
    transform: scale(1);
  }

  60% {
    transform: scale(0.95);
  }

  61%,
  100% {
    transform: scale(1);
  }
}

.piggy {
  position: absolute;
  bottom: 40px;
  left: 50%;
  margin-left: -160px;
  width: 270px;
  height: 200px;
  display: block;
  border-radius: 100px;
  background: linear-gradient(145deg, #ffd700, #ffed4e);
  box-shadow:
    inset -5px -5px 15px rgba(218, 165, 32, 0.6),
    inset 5px 5px 15px rgba(255, 250, 205, 0.8),
    0 5px 20px rgba(255, 215, 0, 0.3);
}

.nose {
  position: absolute;
  top: 80px;
  left: -25px;
  width: 40px;
  height: 60px;
  display: block;
  background: linear-gradient(145deg, #ffd700, #ffed4e);
  box-shadow:
    inset -2px -2px 8px rgba(218, 165, 32, 0.6),
    inset 2px 2px 8px rgba(255, 250, 205, 0.8);
  z-index: 1;
  border-radius: 4px;
}

.mouth {
  display: none;
  /* Ocultar el triángulo de la nariz */
}

.ear {
  position: absolute;
  top: -35px;
  left: 70px;
  width: 45px;
  height: 40px;
  display: block;
  border-top-right-radius: 60px;
  background: linear-gradient(145deg, #ffd700, #ffed4e);
  box-shadow:
    inset -2px -2px 8px rgba(218, 165, 32, 0.5),
    inset 2px 2px 8px rgba(255, 250, 205, 0.7);
  z-index: 1;
}

.piggy:before {
  position: absolute;
  content: '';
  top: -25px;
  left: 55px;
  width: 60px;
  height: 60px;
  display: block;
  border-top-right-radius: 60px;
  background: linear-gradient(145deg, #daa520, #ffd700);
  box-shadow: inset -3px -3px 10px rgba(184, 134, 11, 0.4);
  z-index: -1;
}

.tail {
  position: absolute;
  left: 254px;
  top: 125px;
}

.tail span:nth-child(1) {
  display: none;
  /* Ocultar solo el primer elemento recto de la cola */
}

.tail span:nth-child(2) {
  left: 3px;
  top: -38px;
  width: 50px;
  height: 50px;
  transform: rotate(-20deg);
  background-color: transparent;
  border-radius: 50%;
  border-width: 8px;
  border-style: solid;
  border-color: transparent #daa520 #daa520 transparent;
}

.tail span:nth-child(3) {
  left: 22px;
  top: -36px;
  width: 30px;
  height: 30px;
  transform: rotate(-40deg);
  background-color: transparent;
  border-radius: 50%;
  border-width: 8px;
  border-style: solid;
  border-color: #daa520 transparent transparent #daa520;
}

.tail span:nth-child(4) {
  left: 7px;
  top: -66px;
  width: 60px;
  height: 60px;
  transform: rotate(-40deg);
  background-color: transparent;
  border-radius: 50%;
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent #daa520 transparent;
}

.eye {
  position: absolute;
  left: 35px;
  top: 75px;
  width: 30px;
  height: 30px;
  transform: rotate(45deg);
  border-radius: 50%;
  border-width: 4px;
  border-style: solid;
  border-color: #2c3e50 transparent transparent #2c3e50;
  animation: blink 5s linear infinite;
}

@keyframes blink {

  0%,
  19%,
  61%,
  100% {
    border-color: #2c3e50 transparent transparent #2c3e50;
  }

  20%,
  60% {
    border-color: transparent #2c3e50 #2c3e50 transparent;
  }
}

.hole {
  position: absolute;
  left: 121px;
  top: 0;
  width: 60px;
  height: 5px;
  background-color: #8b6914;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
}

.coin-wrap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.coin {
  position: absolute;
  left: 143px;
  z-index: 999;
  width: 61.5px;
  height: 61.5px;
  border-radius: 50%;
  border: 6px solid #ff8c00;
  background: radial-gradient(circle at 30% 30%, #ffd700, #ff9500);
  text-align: center;
  line-height: 68px;
  font-size: 45px;
  font-weight: 700;
  color: rgba(139, 69, 19, 0.6);
  box-shadow:
    inset 0 0 4px #ff8c00,
    0 4px 15px rgba(255, 140, 0, 0.5);
  animation: coinFly 3s ease-out infinite;
}

@keyframes coinFly {
  0% {
    top: 40px;
    opacity: 0;
    transform: translateY(0) scale(0.5);
  }

  10% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  90% {
    top: -200px;
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    top: -250px;
    opacity: 0;
    transform: translateY(0) scale(0.8);
  }
}

.legs {
  position: absolute;
  bottom: 14px;
  left: 96px;
  width: 40px;
  height: 60px;
  display: block;
  background: linear-gradient(145deg, #daa520, #ffd700);
  box-shadow:
    inset -2px -2px 8px rgba(184, 134, 11, 0.5),
    0 3px 10px rgba(255, 215, 0, 0.3);
  border-radius: 3px;
  z-index: 1;
}

.legs:after {
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  width: 30px;
  height: 12px;
  display: block;
  background: linear-gradient(145deg, #ffd700, #ffed4e);
  border-bottom-left-radius: 3px;
  border-top-right-radius: 3px;
  z-index: 1;
}

.legs.back {
  left: 206px;
}

/* Efecto de brillo pulsante */
@keyframes shine {

  0%,
  100% {
    filter: drop-shadow(0 10px 30px rgba(255, 215, 0, 0.3));
  }

  50% {
    filter: drop-shadow(0 10px 40px rgba(255, 215, 0, 0.5));
  }
}

.piggy-wrapper {
  animation: shine 2s ease-in-out infinite;
}

/*================================================

===================================================*/

/* From Uiverse.io by harman-kanda */
/* From cssbuttons.io by @harmankanda.github.io/New */

.pl {
  width: 5em;
  height: 5em;
}

.pl circle {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.pl__ring1 {
  animation: ring1 4s 0s ease-in-out infinite;
}

.pl__ring2 {
  animation: ring2 4s 0.04s ease-in-out infinite;
}

.pl__ring3 {
  animation: ring3 4s 0.08s ease-in-out infinite;
}

.pl__ring4 {
  animation: ring4 4s 0.12s ease-in-out infinite;
}

.pl__ring5 {
  animation: ring5 4s 0.16s ease-in-out infinite;
}

.pl__ring6 {
  animation: ring6 4s 0.2s ease-in-out infinite;
}

/* Animations */
@keyframes ring1 {
  from {
    stroke-dashoffset: -376.237129776;
    transform: rotate(-0.25turn);
    animation-timing-function: ease-in;
  }

  23% {
    stroke-dashoffset: -94.247778;
    transform: rotate(1turn);
    animation-timing-function: ease-out;
  }

  46%,
  50% {
    stroke-dashoffset: -376.237129776;
    transform: rotate(2.25turn);
    animation-timing-function: ease-in;
  }

  73% {
    stroke-dashoffset: -94.247778;
    transform: rotate(3.5turn);
    animation-timing-function: ease-out;
  }

  96%,
  to {
    stroke-dashoffset: -376.237129776;
    transform: rotate(4.75turn);
  }
}

@keyframes ring2 {
  from {
    stroke-dashoffset: -329.207488554;
    transform: rotate(-0.25turn);
    animation-timing-function: ease-in;
  }

  23% {
    stroke-dashoffset: -82.46680575;
    transform: rotate(1turn);
    animation-timing-function: ease-out;
  }

  46%,
  50% {
    stroke-dashoffset: -329.207488554;
    transform: rotate(2.25turn);
    animation-timing-function: ease-in;
  }

  73% {
    stroke-dashoffset: -82.46680575;
    transform: rotate(3.5turn);
    animation-timing-function: ease-out;
  }

  96%,
  to {
    stroke-dashoffset: -329.207488554;
    transform: rotate(4.75turn);
  }
}

@keyframes ring3 {
  from {
    stroke-dashoffset: -288.4484661616;
    transform: rotate(-0.25turn);
    animation-timing-function: ease-in;
  }

  23% {
    stroke-dashoffset: -72.2566298;
    transform: rotate(1turn);
    animation-timing-function: ease-out;
  }

  46%,
  50% {
    stroke-dashoffset: -288.4484661616;
    transform: rotate(2.25turn);
    animation-timing-function: ease-in;
  }

  73% {
    stroke-dashoffset: -72.2566298;
    transform: rotate(3.5turn);
    animation-timing-function: ease-out;
  }

  96%,
  to {
    stroke-dashoffset: -288.4484661616;
    transform: rotate(4.75turn);
  }
}

@keyframes ring4 {
  from {
    stroke-dashoffset: -253.9600625988;
    transform: rotate(-0.25turn);
    animation-timing-function: ease-in;
  }

  23% {
    stroke-dashoffset: -63.61725015;
    transform: rotate(1turn);
    animation-timing-function: ease-out;
  }

  46%,
  50% {
    stroke-dashoffset: -253.9600625988;
    transform: rotate(2.25turn);
    animation-timing-function: ease-in;
  }

  73% {
    stroke-dashoffset: -63.61725015;
    transform: rotate(3.5turn);
    animation-timing-function: ease-out;
  }

  96%,
  to {
    stroke-dashoffset: -253.9600625988;
    transform: rotate(4.75turn);
  }
}

@keyframes ring5 {
  from {
    stroke-dashoffset: -225.7422778656;
    transform: rotate(-0.25turn);
    animation-timing-function: ease-in;
  }

  23% {
    stroke-dashoffset: -56.5486668;
    transform: rotate(1turn);
    animation-timing-function: ease-out;
  }

  46%,
  50% {
    stroke-dashoffset: -225.7422778656;
    transform: rotate(2.25turn);
    animation-timing-function: ease-in;
  }

  73% {
    stroke-dashoffset: -56.5486668;
    transform: rotate(3.5turn);
    animation-timing-function: ease-out;
  }

  96%,
  to {
    stroke-dashoffset: -225.7422778656;
    transform: rotate(4.75turn);
  }
}

@keyframes ring6 {
  from {
    stroke-dashoffset: -203.795111962;
    transform: rotate(-0.25turn);
    animation-timing-function: ease-in;
  }

  23% {
    stroke-dashoffset: -51.05087975;
    transform: rotate(1turn);
    animation-timing-function: ease-out;
  }

  46%,
  50% {
    stroke-dashoffset: -203.795111962;
    transform: rotate(2.25turn);
    animation-timing-function: ease-in;
  }

  73% {
    stroke-dashoffset: -51.05087975;
    transform: rotate(3.5turn);
    animation-timing-function: ease-out;
  }

  96%,
  to {
    stroke-dashoffset: -203.795111962;
    transform: rotate(4.75turn);
  }
}