/*!
 * Magic UI - https://magicui.design
 * Portado a CSS/JS puro (sin React ni Tailwind) para sitios HTML estáticos.
 * Solo incluye los efectos que no dependen de React. Los componentes React
 * originales se instalan con: npx shadcn@latest add @magicui/<componente>
 *
 * Uso: agrega la clase magicui-* al elemento que quieras animar y ajusta el
 * efecto con las variables CSS --magicui-* de cada bloque.
 *
 * Indice de clases:
 *   .magicui-dotted-pattern         fondo de puntos (capa absoluta)
 *   .magicui-animated-grid-pattern  cuadricula animada (capa absoluta)
 *   .magicui-retro-grid             rejilla retro en perspectiva
 *   .magicui-shiny-text             texto con brillo que se desliza
 *   .magicui-animated-gradient-text texto con degradado animado
 *   .magicui-line-shadow-text       texto con sombra de lineas (::after)
 *   .magicui-shine-border           borde que brilla siguiendo el puntero (js)
 *   .magicui-meteors                lluvia de meteoros (js, data-count="12")
 *   .magicui-blur-fade              entrada con desenfoque
 *   .magicui-marquee                cinta infinita (2 grupos iguales dentro)
 *
 * Nota: los textos con color degradado (.magicui-shiny-text y
 * .magicui-animated-gradient-text) mantienen el texto real con un color
 * solido y superponen en un pseudo-elemento (::after) una copia recortada.
 * Asi el texto nunca queda invisible si el recorte del fondo falla.
 */

/* --------------------------------------------------------------------------
   Dotted Pattern
   <div class="magicui-dotted-pattern"></div>
   -------------------------------------------------------------------------- */
.magicui-dotted-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(var(--magicui-dot-color, #d4d4d8) 1px, transparent 1px);
  background-size: var(--magicui-dot-size, 16px) var(--magicui-dot-size, 16px);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 40%, transparent 100%);
}

/* --------------------------------------------------------------------------
   Animated Grid Pattern
   <div class="magicui-animated-grid-pattern"></div>
   -------------------------------------------------------------------------- */
.magicui-animated-grid-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(to right, var(--magicui-grid-color, #d4d4d8) 1px, transparent 1px),
    linear-gradient(to bottom, var(--magicui-grid-color, #d4d4d8) 1px, transparent 1px);
  background-size: var(--magicui-grid-size, 40px) var(--magicui-grid-size, 40px);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 40%, transparent 100%);
  animation: magicui-grid-move var(--magicui-grid-speed, 20s) linear infinite;
}

@keyframes magicui-grid-move {
  from {
    background-position: 0 0, 0 0;
  }

  to {
    background-position: var(--magicui-grid-size, 40px) var(--magicui-grid-size, 40px),
      var(--magicui-grid-size, 40px) var(--magicui-grid-size, 40px);
  }
}

/* --------------------------------------------------------------------------
   Retro Grid
   <div class="magicui-retro-grid"><div class="magicui-retro-grid-floor"></div></div>
   -------------------------------------------------------------------------- */
.magicui-retro-grid {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  perspective: 200px;
}

.magicui-retro-grid-floor {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 400%;
  height: 50%;
  transform-origin: 50% 0%;
  transform: rotateX(65deg);
  background-image: linear-gradient(to right, var(--magicui-grid-color, #d4d4d8) 1px, transparent 1px),
    linear-gradient(to bottom, var(--magicui-grid-color, #d4d4d8) 1px, transparent 1px);
  background-size: var(--magicui-grid-size, 60px) var(--magicui-grid-size, 60px);
  animation: magicui-retro-grid var(--magicui-grid-speed, 15s) linear infinite;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000);
  mask-image: linear-gradient(to bottom, transparent, #000);
}

@keyframes magicui-retro-grid {
  from {
    background-position: 0 0, 0 0;
  }

  to {
    background-position: 0 var(--magicui-grid-size, 60px), 0 var(--magicui-grid-size, 60px);
  }
}

/* --------------------------------------------------------------------------
   Animated Shiny Text
   <span class="magicui-shiny-text" data-text="Texto">Texto</span>
   El atributo data-text debe repetir el texto (es la copia iluminada).
   Equivalente al componente original (animacion "shiny-text 8s infinite").
   Personaliza con: --magicui-shiny-highlight (color del brillo) y
   --magicui-shiny-width (ancho de la banda); el color base se hereda.
   -------------------------------------------------------------------------- */
.magicui-shiny-text {
  --magicui-shiny-highlight: #ffffff;
  --magicui-shiny-width: 120px;
  position: relative;
  display: inline-block;
  /* El texto base hereda el color del contenedor; se mantiene siempre visible */
  color: inherit;
}

/* Copia iluminada: se pinta encima del texto base y solo se muestra
   la banda de la mascara, asi el brillo se desliza sin recortar el texto. */
.magicui-shiny-text::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Hereda tipografia del elemento y, si el color base es claro, usa ese
     mismo tono como brillo para que siempre se note el deslizamiento. */
  color: var(--magicui-shiny-highlight, inherit);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right,
      transparent 0%,
      #000 50%,
      transparent 100%);
  mask-image: linear-gradient(to right,
      transparent 0%,
      #000 50%,
      transparent 100%);
  -webkit-mask-size: var(--magicui-shiny-width) 100%;
  mask-size: var(--magicui-shiny-width) 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  animation: magicui-shiny-text 8s infinite;
}

@keyframes magicui-shiny-text {

  0%,
  90%,
  100% {
    -webkit-mask-position: calc(0px - var(--magicui-shiny-width)) 0;
    mask-position: calc(0px - var(--magicui-shiny-width)) 0;
  }

  30%,
  60% {
    -webkit-mask-position: calc(100% + var(--magicui-shiny-width)) 0;
    mask-position: calc(100% + var(--magicui-shiny-width)) 0;
  }
}

/* --------------------------------------------------------------------------
   Animated Gradient Text
   <span class="magicui-animated-gradient-text" data-text="Texto">Texto</span>
   El texto base toma --magicui-gradient-from (siempre legible) y encima
   se superpone una copia con el degradado recortado a las letras.
   Personaliza con: --magicui-gradient-from, --magicui-gradient-via,
   --magicui-gradient-to y --magicui-gradient-speed.
   -------------------------------------------------------------------------- */
.magicui-animated-gradient-text {
  position: relative;
  display: inline-block;
  color: var(--magicui-gradient-from, #ffaa40);
}

.magicui-animated-gradient-text::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to right,
      var(--magicui-gradient-from, #ffaa40),
      var(--magicui-gradient-via, #9c40ff),
      var(--magicui-gradient-to, #ffaa40));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: magicui-animated-gradient-text var(--magicui-gradient-speed, 8s) linear infinite;
  pointer-events: none;
}

@keyframes magicui-animated-gradient-text {
  from {
    background-position: 0 50%;
  }

  to {
    background-position: 100% 50%;
  }
}

/* --------------------------------------------------------------------------
   Line Shadow Text
   <span class="magicui-line-shadow-text" data-shadow="texto">Texto</span>
   -------------------------------------------------------------------------- */
.magicui-line-shadow-text {
  position: relative;
  z-index: 1;
  display: inline-block;
}

.magicui-line-shadow-text::after {
  content: attr(data-shadow);
  position: absolute;
  top: .06em;
  left: .06em;
  z-index: -1;
  color: transparent;
  background-image: repeating-linear-gradient(45deg,
      transparent 45%,
      var(--magicui-shadow-color, #aaa) 45%,
      var(--magicui-shadow-color, #aaa) 55%,
      transparent 0);
  background-size: .05em .05em;
  -webkit-background-clip: text;
  background-clip: text;
  animation: magicui-line-shadow-text .8s linear infinite;
}

@keyframes magicui-line-shadow-text {
  from {
    background-position: .05em .05em;
  }

  to {
    background-position: -.05em 0;
  }
}

/* --------------------------------------------------------------------------
   Shine Border (necesita js/magicui.js para seguir el puntero)
   <div class="magicui-shine-border magicui-shine-border--follow">...</div>
   -------------------------------------------------------------------------- */
.magicui-shine-border {
  position: relative;
}

.magicui-shine-border::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--magicui-shine-width, 1px);
  /* El degradado debe pintarse solo en el borde (padding) y recortarse con la máscara */
  background: radial-gradient(circle at center,
      transparent 0,
      var(--magicui-shine-color, #fff) 20%,
      transparent 60%) border-box;
  background-size: 300% 300%;
  background-position: var(--magicui-shine-x, 0%) var(--magicui-shine-y, 0%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

.magicui-shine-border:hover::before,
.magicui-shine-border.magicui-shine-border--active::before {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Meteors (los meteoritos los genera js/magicui.js)
   <div class="magicui-meteors" data-count="18"></div>
   -------------------------------------------------------------------------- */
.magicui-meteors {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.magicui-meteor {
  position: absolute;
  top: -5px;
  width: 2px;
  height: 2px;
  border-radius: 9999px;
  background: var(--magicui-meteor-color, #64748b);
  box-shadow: 0 0 0 1px var(--magicui-meteor-shadow, rgba(255, 255, 255, .1));
  transform: rotate(215deg);
  animation: magicui-meteor var(--magicui-meteor-speed, 5s) linear infinite;
}

.magicui-meteor::before {
  content: "";
  position: absolute;
  top: 50%;
  width: var(--magicui-meteor-tail, 50px);
  height: 1px;
  background: linear-gradient(90deg, var(--magicui-meteor-color, #64748b), transparent);
  transform: translateY(-50%);
}

@keyframes magicui-meteor {
  0% {
    transform: rotate(215deg) translateX(0);
    opacity: 1;
  }

  70% {
    opacity: 1;
  }

  100% {
    transform: rotate(215deg) translateX(-500px);
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   Blur Fade
   <div class="magicui-blur-fade" style="animation-delay: 150ms">...</div>
   -------------------------------------------------------------------------- */
.magicui-blur-fade {
  animation: magicui-blur-fade var(--magicui-blur-duration, .8s) both ease-out;
}

@keyframes magicui-blur-fade {
  from {
    opacity: 0;
    transform: translateY(var(--magicui-blur-y, 6px));
    filter: blur(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* --------------------------------------------------------------------------
   Marquee
   <div class="magicui-marquee">
     <div class="magicui-marquee-group">...contenido...</div>
     <div class="magicui-marquee-group">...el mismo contenido...</div>
   </div>
   -------------------------------------------------------------------------- */
.magicui-marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

.magicui-marquee-group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--magicui-marquee-gap, 1rem);
  padding-right: var(--magicui-marquee-gap, 1rem);
  animation: magicui-marquee var(--magicui-marquee-duration, 40s) linear infinite;
}

.magicui-marquee--reverse .magicui-marquee-group {
  animation-direction: reverse;
}

.magicui-marquee--pause:hover .magicui-marquee-group {
  animation-play-state: paused;
}

@keyframes magicui-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

/* --------------------------------------------------------------------------
   Respeta prefers-reduced-motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

  .magicui-animated-grid-pattern,
  .magicui-retro-grid-floor,
  .magicui-shiny-text,
  .magicui-animated-gradient-text,
  .magicui-line-shadow-text::after,
  .magicui-meteor,
  .magicui-blur-fade,
  .magicui-marquee-group {
    animation: none !important;
  }
}