/* ============================================
   EFECTO RAINBOW ANIMADO (Slow Motion)
   ============================================ */

article {
  background: linear-gradient(
    90deg,
    hsl(330, 100%, 65%),  /* Rosa intenso */
    hsl(280, 100%, 65%),  /* Púrpura */
    hsl(240, 100%, 65%),  /* Azul */
    hsl(200, 100%, 60%),  /* Cian */
    hsl(180, 100%, 55%),  /* Turquesa */
    hsl(200, 100%, 60%),  /* Cian */
    hsl(240, 100%, 65%),  /* Azul */
    hsl(280, 100%, 65%),  /* Púrpura */
    hsl(330, 100%, 65%)   /* Rosa intenso */
  );
  
  background-size: 400% 100%;
  
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  
  animation: rainbow-shift 8s linear infinite;
}

@keyframes rainbow-shift {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 400% 50%;
  }
}

/* ============================================
   EFECTO SPOTLIGHT CIRCULAR EN HOVER (Solo PC)
   ============================================ */

@media (hover: hover) and (pointer: fine) {
  article {
    position: relative;
    cursor: default;
  }
  
  /* Crear capa para el efecto spotlight */
  article::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
      circle 150px at var(--mouse-x, 50%) var(--mouse-y, 50%),
      rgba(255, 255, 255, 0.3) 0%,
      transparent 100%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    mix-blend-mode: overlay;
  }
  
  article:hover::before {
    opacity: 1;
  }
}

/* ============================================
   DEGRADADOS ALTERNATIVOS (Opcionales)
   ============================================ */

/* Rainbow más suave (colores pastel) */
article.gradient-soft-rainbow {
  background: linear-gradient(
    90deg,
    hsl(330, 70%, 75%),  /* Rosa pastel */
    hsl(280, 70%, 75%),  /* Púrpura pastel */
    hsl(240, 70%, 75%),  /* Azul pastel */
    hsl(200, 70%, 75%),  /* Cian pastel */
    hsl(180, 70%, 75%),  /* Turquesa pastel */
    hsl(200, 70%, 75%),  /* Cian pastel */
    hsl(240, 70%, 75%),  /* Azul pastel */
    hsl(280, 70%, 75%),  /* Púrpura pastel */
    hsl(330, 70%, 75%)   /* Rosa pastel */
  );
  
  background-size: 400% 100%;
  
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  
  animation: rainbow-shift 10s linear infinite;
}

/* Rainbow más intenso (colores vibrantes) */
article.gradient-vibrant-rainbow {
  background: linear-gradient(
    90deg,
    hsl(330, 100%, 55%),  /* Rosa vibrante */
    hsl(280, 100%, 55%),  /* Púrpura vibrante */
    hsl(240, 100%, 55%),  /* Azul vibrante */
    hsl(200, 100%, 50%),  /* Cian vibrante */
    hsl(180, 100%, 50%),  /* Turquesa vibrante */
    hsl(200, 100%, 50%),  /* Cian vibrante */
    hsl(240, 100%, 55%),  /* Azul vibrante */
    hsl(280, 100%, 55%),  /* Púrpura vibrante */
    hsl(330, 100%, 55%)   /* Rosa vibrante */
  );
  
  background-size: 400% 100%;
  
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  
  animation: rainbow-shift 6s linear infinite;
}

/* Rainbow ultra lento (más dramático) */
article.gradient-slow-rainbow {
  background: linear-gradient(
    90deg,
    hsl(330, 100%, 65%),  /* Rosa intenso */
    hsl(280, 100%, 65%),  /* Púrpura */
    hsl(240, 100%, 65%),  /* Azul */
    hsl(200, 100%, 60%),  /* Cian */
    hsl(180, 100%, 55%),  /* Turquesa */
    hsl(200, 100%, 60%),  /* Cian */
    hsl(240, 100%, 65%),  /* Azul */
    hsl(280, 100%, 65%),  /* Púrpura */
    hsl(330, 100%, 65%)   /* Rosa intenso */
  );
  
  background-size: 400% 100%;
  
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  
  animation: rainbow-shift 15s linear infinite;
}

/* ============================================
   EFECTO CHROME GLASS
   ============================================ */

article.gradient-chrome-glass {
  background: linear-gradient(
    135deg,
    #667eea 0%,
    #764ba2 25%,
    #f093fb 50%,
    #4facfe 75%,
    #667eea 100%
  );
  
  background-size: 300% 300%;
  
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  
  filter: drop-shadow(0 0 20px rgba(102, 126, 234, 0.3));
  
  animation: chrome-glass-shift 10s ease infinite;
  
  position: relative;
}

/* Añadir brillo metálico */
article.gradient-chrome-glass::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: glass-shine 3s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: overlay;
}

@keyframes chrome-glass-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes glass-shine {
  0%, 100% {
    background-position: -200% 0;
  }
  50% {
    background-position: 200% 0;
  }
}

/* Chrome Glass Variante Fría (azules y plateados) */
article.gradient-chrome-cold {
  background: linear-gradient(
    135deg,
    #a8edea 0%,
    #fed6e3 25%,
    #c2e9fb 50%,
    #a1c4fd 75%,
    #a8edea 100%
  );
  
  background-size: 300% 300%;
  
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  
  filter: drop-shadow(0 0 15px rgba(168, 237, 234, 0.4));
  
  animation: chrome-glass-shift 12s ease infinite;
}

/* Chrome Glass Variante Cálida (rosas y dorados) */
article.gradient-chrome-warm {
  background: linear-gradient(
    135deg,
    #ffecd2 0%,
    #fcb69f 25%,
    #ff9a9e 50%,
    #fecfef 75%,
    #ffecd2 100%
  );
  
  background-size: 300% 300%;
  
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  
  filter: drop-shadow(0 0 15px rgba(255, 154, 158, 0.4));
  
  animation: chrome-glass-shift 12s ease infinite;
}

/* ============================================
   SOPORTE DE CAPAS Y ESTILOS BASE
   ============================================ */

@layer demo.support {
  h1 {
    font-size: 10vmin;
    line-height: 1.1;
  }
  
  body {
    background: hsl(204 100% 5%);
    min-block-size: 100%;
    box-sizing: border-box;
    display: grid;
    place-content: center;
    font-family: system-ui;
    font-size: min(200%, 4vmin);
    padding: 5vmin;
  }
  
  h1, p, body {
    margin: 0;
    text-wrap: balance;
  }
  
  h1 {
    line-height: 1.25cap;
  }
  
  p {
    font-family: "Dank Mono", ui-monospace, monospace;
  }
  
  html {
    block-size: 100%;
  }
  
  article {
    display: grid;
    gap: 1lh;
    text-align: center;
  }
}

/* ============================================
   JAVASCRIPT PARA EFECTO SPOTLIGHT
   (Copia en Footer Scripts de Woowy)
   ============================================ */

/*

document.addEventListener('DOMContentLoaded', function() {
  const articles = document.querySelectorAll('article');
  
  articles.forEach(article => {
    article.addEventListener('mousemove', function(e) {
      const rect = this.getBoundingClientRect();
      const x = ((e.clientX - rect.left) / rect.width) * 100;
      const y = ((e.clientY - rect.top) / rect.height) * 100;
      
      this.style.setProperty('--mouse-x', x + '%');
      this.style.setProperty('--mouse-y', y + '%');
    });
  });
});

*/