/* eMCy Modal Glow Effect - Adaptado para Maccloud con colores cyan/azul */

@property --bgrotate {
  initial-value: 120deg;
  inherits: false;
  syntax: "<angle>";
}

@property --bgrotate2 {
  initial-value: 255deg;
  inherits: false;
  syntax: "<angle>";
}

@property --text {
  initial-value: 220deg;
  inherits: false;
  syntax: "<angle>";
}

.emcy-modal-glow {
  --ar: 0.718;
  --br: 8px;
  --hl: 0;
  --t: all 0.66s linear(
    0,
    0.007,
    0.028 2.1%,
    0.112 4.6%,
    0.224 6.9%,
    0.604 14.2%,
    0.713,
    0.803,
    0.879,
    0.939,
    0.985 26.2%,
    1.019 28.9%,
    1.034 30.7%,
    1.045,
    1.051 34.8%,
    1.053 37.2%,
    1.046 41.6%,
    1.012 54.7%,
    1.001 62.8%,
    0.997 73%,
    1
  );

  position: relative;
  border-radius: var(--br);
  background-size: 100% 100%;
  background-position: 0px 0px, 0px 0px, 0px 0px, 50% 50%, 0px 0px, 0px 0px;
  background-image:
    /* Seguimiento del mouse con colores Maccloud */
    radial-gradient(
      farthest-side circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
      hsla(186, 100%, 94%, var(--hl)) 8%,
      hsla(186, 100%, 80%, var(--hl)) 22%,
      hsla(186, 100%, 70%, 0) 66%
    ),
    /* Gradiente cyan principal */
    radial-gradient(40% 51% at 7% 32%, #06B6D4ff 0%, #073aff00 100%),
    /* Gradiente azul secundario */
    radial-gradient(40% 52% at 85% 67%, #0EA5E9c4 0%, #073aff00 100%),
    /* Gradiente central cyan fuerte */
    radial-gradient(80% 80% at 50% 50%, #22D3EEff 27%, #073aff00 58%),
    /* Gradiente cónico rotativo 1 - Colores Maccloud */
    conic-gradient(
      from var(--bgrotate) at 50% 50%,
      #06B6D4 5%,
      #07c6ff00 17%,
      #07c6ff00 40%,
      #22D3EEff 48%,
      #22D3EEff 51%,
      #07c6ff00 59%,
      #07c6ff00 83%,
      #06B6D4 95%
    ),
    /* Gradiente cónico rotativo 2 - Azules y cyans */
    conic-gradient(
      from var(--bgrotate2) at 50% 50%,
      #0EA5E9ff 0%,
      #06B6D4ff 34%,
      #06B6D4ff 64%,
      #0EA5E9ff 100%
    );

  background-blend-mode: color-dodge, normal, normal, normal, normal;
  animation: emcy-glow-bg 44s linear infinite;
  transform: translate3d(0, 0, 0.1px);
  z-index: 1;
}

.emcy-modal-glow:hover {
  --hl: 1;
}

.emcy-modal-glow::before,
.emcy-modal-glow::after {
  border-radius: inherit;
  content: "";
  position: absolute;
  inset: 0;
}

.emcy-modal-glow::after {
  background: inherit;
  inset: -10px;
  scale: 0.8;
  filter: blur(36px) brightness(1) contrast(0.85) saturate(1.4);
  z-index: -1;
  transition: var(--t);
}

.emcy-modal-glow:hover::after {
  scale: 0.9;
  filter: blur(36px) brightness(1) contrast(1) saturate(1);
}

.emcy-modal-glow::before {
  content: "";
  inset: 0;
  box-shadow: rgba(0, 0, 0, 0.9) 0px 10px 20px -5px;
  z-index: -1;
}

/* Efecto interior del modal */
.emcy-modal-glow > * {
  position: relative;
  z-index: 2;
}

.emcy-modal-glow > *::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsl(186, 25%, 80%) 12%,
      hsla(186, 40%, 30%, 0.2) 90%
    );
  mix-blend-mode: overlay;
  filter: brightness(1) contrast(1.2);
  opacity: var(--hl);
  transition: var(--t);
  border-radius: inherit;
  pointer-events: none;
}

@keyframes emcy-glow-bg {
  0% {
    --bgrotate: 0deg;
    --bgrotate2: 0deg;
    --text: 90deg;
  }
  25% {
    --bgrotate2: 360deg;
    --text: 260deg;
  }
  50% {
    --bgrotate2: 720deg;
  }
  100% {
    --bgrotate: 720deg;
    --bgrotate2: 0deg;
    --text: 90deg;
  }
}

/* Animación sutil para el modal de eMCy */
@keyframes emcyGlow {
  0% {
    box-shadow:
      0 0 30px rgba(6, 182, 212, 0.3),
      0 0 15px rgba(167, 139, 250, 0.2),
      0 10px 25px -5px rgba(0, 0, 0, 0.1);
    border-color: rgba(6, 182, 212, 0.4);
  }
  100% {
    box-shadow:
      0 0 40px rgba(6, 182, 212, 0.5),
      0 0 25px rgba(167, 139, 250, 0.4),
      0 10px 25px -5px rgba(0, 0, 0, 0.1);
    border-color: rgba(167, 139, 250, 0.6);
  }
}

/* ===== EMCY MODAL BORDER ANIMATION ===== */

/* CSS Property para la rotación */
@property --modal-rotation {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* Clase para el modal con borde animado */
.emcy-modal-border-animation {
  position: relative;
}

.emcy-modal-border-animation::before {
  content: '';
  position: absolute;
  inset: -3px;
  border: solid 3px;
  border-image: conic-gradient(
    from var(--modal-rotation),
    transparent,
    rgba(6, 182, 212, 0.8), /* Cyan Maccloud */
    transparent,
    rgba(167, 139, 250, 0.8), /* Violet Maccloud */
    transparent,
    rgba(6, 182, 212, 0.8) /* Back to cyan */
  ) 1;
  border-radius: inherit;
  filter: blur(2px);
  animation: rotateModalBorder 6s linear infinite;
  opacity: 0.9;
  z-index: -1;
  pointer-events: none;
}

@keyframes rotateModalBorder {
  to {
    --modal-rotation: 360deg;
  }
}

/* ===== BOTÓN PRIMARY-AI CON ANIMACIÓN MACCLOUD ===== */

/* CSS Properties exactas del ejemplo original */
@property --blue-x {
    syntax: "<percentage>";
    initial-value: 50%;
    inherits: false;
}

@property --blue-y {
    syntax: "<percentage>";
    initial-value: 50%;
    inherits: false;
}

@property --purple-x {
    syntax: "<percentage>";
    initial-value: 50%;
    inherits: false;
}

@property --purple-y {
    syntax: "<percentage>";
    initial-value: 50%;
    inherits: false;
}

@property --red-x {
    syntax: "<percentage>";
    initial-value: 50%;
    inherits: false;
}

@property --red-y {
    syntax: "<percentage>";
    initial-value: 50%;
    inherits: false;
}

@property --orange-x {
    syntax: "<percentage>";
    initial-value: 50%;
    inherits: false;
}

@property --orange-y {
    syntax: "<percentage>";
    initial-value: 50%;
    inherits: false;
}

@property --green-x {
    syntax: "<percentage>";
    initial-value: 50%;
    inherits: false;
}

@property --green-y {
    syntax: "<percentage>";
    initial-value: 50%;
    inherits: false;
}

@property --yellow-x {
    syntax: "<percentage>";
    initial-value: 50%;
    inherits: false;
}

@property --yellow-y {
    syntax: "<percentage>";
    initial-value: 50%;
    inherits: false;
}

/* Botón AI con forma del sistema */
.btn-primary-ai {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    border-radius: 0.375rem;
    position: relative;
    color: white;
    background: black;
    isolate: isolate;
    overflow: clip;
    z-index: 0;
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.btn-primary-ai:hover {
    --after-opacity: 1;
}

.btn-primary-ai::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    border-radius: inherit;
    background-image: radial-gradient(
            circle at var(--blue-x, 50%) var(--blue-y, 50%),
            #0EA5E9 5%,
            transparent 30%
        ),
        radial-gradient(
            circle at var(--purple-x, 50%) var(--purple-y, 50%),
            #0284C7 5%,
            transparent 30%
        ),
        radial-gradient(
            circle at var(--red-x, 50%) var(--red-y, 50%),
            #06B6D4 5%,
            transparent 30%
        ),
        radial-gradient(
            circle at var(--orange-x, 50%) var(--orange-y, 50%),
            #0891B2 5%,
            transparent 30%
        ),
        radial-gradient(
            circle at var(--green-x, 50%) var(--green-y, 50%),
            #A78BFA 5%,
            transparent 30%
        ),
        radial-gradient(
            circle at var(--yellow-x, 50%) var(--yellow-y, 50%),
            #8B5CF6 5%,
            transparent 30%
        );
    background-size: 200% 200%;
    background-repeat: no-repeat;
    animation: moveGradients 10s linear infinite;
}

.btn-primary-ai::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: inherit;
    background: black;
    z-index: -1;
    backdrop-filter: blur(var(--after-blur, 3px));
    transition: opacity 500ms ease-in-out;
    opacity: var(--after-opacity, 0);
}

/* Animación exacta del ejemplo original */
@keyframes moveGradients {
    0%,
    100% {
        --blue-x: -40%;
        --blue-y: 35%;
        --purple-x: 35%;
        --purple-y: -10%;
        --red-x: -10%;
        --red-y: -80%;
        --orange-x: 50%;
        --orange-y: 145%;
        --green-x: 0%;
        --green-y: 80%;
        --yellow-x: 35%;
        --yellow-y: 95%;
    }
    25% {
        --blue-x: 30%;
        --blue-y: -25%;
        --purple-x: 5%;
        --purple-y: 40%;
        --red-x: 45%;
        --red-y: 150%;
        --orange-x: -15%;
        --orange-y: 30%;
        --green-x: 45%;
        --green-y: 15%;
        --yellow-x: -20%;
        --yellow-y: -40%;
    }
    50% {
        --blue-x: 70%;
        --blue-y: 50%;
        --purple-x: 50%;
        --purple-y: 120%;
        --red-x: 35%;
        --red-y: -80%;
        --orange-x: 75%;
        --orange-y: -75%;
        --green-x: 85%;
        --green-y: 100%;
        --yellow-x: 50%;
        --yellow-y: -20%;
    }
    75% {
        --blue-x: -25%;
        --blue-y: 10%;
        --purple-x: 35%;
        --purple-y: -45%;
        --red-x: -10%;
        --red-y: 30%;
        --orange-x: 20%;
        --orange-y: -40%;
        --green-x: -15%;
        --green-y: 50%;
        --yellow-x: 45%;
        --yellow-y: -15%;
    }
}

/* Animación del texto del modal si aplica */
.emcy-modal-glow h3,
.emcy-modal-glow h4 {
  animation: emcy-glow-bg 14s ease infinite;
  background-image: linear-gradient(
    to bottom,
    currentColor 40%,
    hsl(var(--text, 186deg) 100% 60%)
  );
  background-size: 1em 1lh;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  filter: drop-shadow(0 0.025em 0.05em rgba(0, 0, 0, 0.2))
          drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}