@charset "utf-8";
/* CSS Document */

.glowBox{position: relative; transition: 0.3s ease-out}

.glowBox::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      border: 1px solid rgba(255, 255, 255, 0.08);
    }


.glow-line {
      position: absolute;
      inset: -1px;
      border-radius: inherit;
      padding: 1.5px;
      background: conic-gradient(
        from var(--angle),
        transparent 0%,
        transparent 60%,
        rgba(168, 85, 247, 0.1) 70%,
        rgba(168, 85, 247, 0.3) 80%,
        #a855f7 90%,
        #ec4899 97%,
        transparent 100%
      );
      -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;
      animation: rotateAngle 3s linear infinite;
      opacity: 0;
      transition: opacity 0.5s ease-in-out;
    }

    /* Glow difuminado con cola */
    .glow-blur {
      position: absolute;
      inset: -4px;
      border-radius: inherit;
      padding: 4px;
      background: conic-gradient(
        from var(--angle),
        transparent 0%,
        transparent 60%,
        rgba(168, 85, 247, 0.05) 70%,
        rgba(168, 85, 247, 0.2) 80%,
        rgba(168, 85, 247, 0.6) 90%,
        rgba(236, 72, 153, 0.8) 97%,
        transparent 100%
      );
      -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;
      filter: blur(12px);
      animation: rotateAngle 3s linear infinite;
      opacity: 0;
      transition: opacity 0.5s ease-in-out;
    }

    /* Activar en hover - solo cambia opacidad */
.glowBox:hover{transform: scale(1.05)}
    .glowBox:hover .glow-line,
    .glowBox:hover .glow-blur {
      opacity: 1;
    }

    @property --angle {
      syntax: '<angle>';
      initial-value: 0deg;
      inherits: false;
    }

    @keyframes rotateAngle {
      to {
        --angle: 360deg;
      }
    }
      
      /* Delays */
.delay-100 {
  animation-delay: 0.1s;
}

.delay-200 {
  animation-delay: 0.2s;
}

.delay-300 {
  animation-delay: 0.3s;
}

.delay-400 {
  animation-delay: 0.4s;
}

.delay-500 {
  animation-delay: 0.5s;
}

.delay-600 {
  animation-delay: 0.6s;
}

.delay-700 {
  animation-delay: 0.7s;
}

.delay-800 {
  animation-delay: 0.8s;
}