@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .swing-line {
    @apply absolute top-[35vh] z-50 right-2/4 w-[0.03125rem] bg-gradient-to-b from-transparent to-[rgba(46,204,113,0.25)] list-none origin-top; /* Ajustado posición y grosor */
    animation: swing 4s ease-in-out infinite;
  }

  .swing-line::before {
    @apply content-[''] absolute left-[-1px] bottom-[1px] w-[2px] h-[2px]; /* Reducido el tamaño del punto */
  }

  .swing-line:nth-child(4n)::before {
    @apply bg-[#D8334A];
  }
  .swing-line:nth-child(4n + 1)::before {
    @apply bg-[#FFCE54];
  }
  .swing-line:nth-child(4n + 2)::before {
    @apply bg-[#2ECC71];
  }
  .swing-line:nth-child(4n + 3)::before {
    @apply bg-[#5D9CEC];
  }
}
.zoom-gift {
  zoom: 50%;
}

@keyframes swing {
  0%,
  100% {
    transform: rotate(-20deg);
  }
  5%,
  45% {
    opacity: 0.25;
  }
  50%,
  100%,
  0% {
    opacity: 1;
  }
  50% {
    transform: rotate(20deg);
  }
}
@font-face {
  font-family: "Mountains of Christmas";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/mountainsofchristmas/v22/3y9w6a4zcCnn5X0FDyrKi2ZRUBIy8uxoUo7eDNGsMQ.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

.font-christmas {
  font-family: "Mountains of Christmas", cursive;
}

.font-principal {
  font-size: 250%;
}

.font-secondary {
  font-size: 180%;
}

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  color: var(--foreground);
  background: var(--background);
  font-family: Arial, Helvetica, sans-serif;
}

img {
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.8));
}

@keyframes fall {
  0% {
    transform: translate(0, -10px) rotate(0deg);
    opacity: 1;
  }
  25% {
    transform: translate(15px, 25vh) rotate(45deg);
  }
  50% {
    transform: translate(-15px, 50vh) rotate(90deg);
  }
  75% {
    transform: translate(15px, 75vh) rotate(135deg);
  }
  100% {
    transform: translate(-15px, 100vh) rotate(180deg);
    opacity: 0;
  }
}

@keyframes fall2 {
  0% {
    opacity: 0;
    top: 0%;
  }
  5% {
    opacity: 0;
  }
  15%,
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    top: 100%;
  }
}
