/* =======================================================================
   HGS HOUDINI EFFECTS (Premium Designer Signature)
   Efectos interactivos, gradientes animados y detalles "wow".
   ======================================================================= */

/* ─── PROPIEDADES REGISTRADAS (Houdini) ─── */

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

@property --hg-glow-opacity {
   syntax: '<number>';
   inherits: true;
   initial-value: 0;
}

@property --hg-mesh-x {
   syntax: '<percentage>';
   inherits: true;
   initial-value: 50%;
}

@property --hg-mesh-y {
   syntax: '<percentage>';
   inherits: true;
   initial-value: 50%;
}

@property --color-der {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(74.24% 0.113 234.34);
}

@property --color-izq {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(67.43% 0.158 141.63);
}

@property --color-izq2 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(74.82% 0.098 219.74);
}

@property --color-der2 {
  syntax: "<color>";
  inherits: false;
  initial-value: oklch(67.71% 0.169 141.29);
}



/* ─── EFECTO 1: MESH GRADIENT (Premium Soft Mesh) ─── */
/* Un fondo sutil donde los focos de color se mueven lentamente.
   Usa variables contextuales para adaptarse a Dark/Light mode automáticamente. */
.hgs-fx-mesh {
   --color-1: color-mix(in oklch, var(--hg-brand) 15%, var(--hg-surface));
   --color-2: color-mix(in oklch, var(--hg-accent) 15%, var(--hg-surface));
   background-color: var(--hg-surface);
   background-image:
      radial-gradient(circle at var(--hg-mesh-x) var(--hg-mesh-y), var(--color-1) 0%, transparent 60%),
      radial-gradient(circle at calc(100% - var(--hg-mesh-x)) calc(100% - var(--hg-mesh-y)), var(--color-2) 0%, transparent 60%);
   background-size: 150% 150%;
   animation: hgs-mesh-flow 12s ease-in-out infinite alternate;
}

@keyframes hgs-mesh-flow {
   0% { --hg-mesh-x: 20%; --hg-mesh-y: 30%; }
   50% { --hg-mesh-x: 80%; --hg-mesh-y: 60%; }
   100% { --hg-mesh-x: 40%; --hg-mesh-y: 90%; }
}


/* ─── EFECTO 2: SHIMMER (Reflejo Opalescente al Hover) ─── */
/* Para CTA's o Tarjetas Premium. Pasa una barra de luz diagonal de forma sutil. */
.hgs-fx-shimmer {
   position: relative;
   overflow: hidden;
}

.hgs-fx-shimmer::after {
   content: "";
   position: absolute;
   top: 0;
   left: -100%;
   width: 50%;
   height: 100%;
   background: linear-gradient(
      120deg,
      transparent 0%,
      oklch(1 0 0 / 0.1) 40%,
      oklch(1 0 0 / 0.4) 50%,
      oklch(1 0 0 / 0.1) 60%,
      transparent 100%
   );
   transform: skewX(-20deg);
   transition: left 0s;
   pointer-events: none;
   z-index: 2;
}

.hgs-fx-shimmer:hover::after {
   left: 200%;
   transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ─── EFECTO 3: BREATHE GLOW (Halo de Luz Interactivo) ─── */
/* Añade un halo sutil detrás del elemento que respira y reacciona al hover. */
.hgs-fx-breathe {
   position: relative;
}

.hgs-fx-breathe::before {
   content: "";
   position: absolute;
   inset: -4px;
   background: radial-gradient(
      circle at 50% 50%,
      color-mix(in oklch, var(--hg-brand) calc(var(--hg-glow-opacity) * 100%), transparent) 0%,
      transparent 70%
   );
   border-radius: inherit;
   z-index: -1;
   filter: blur(8px);
   opacity: 0.6;
   animation: hgs-breathe-pulse 4s ease-in-out infinite alternate;
   transition: --hg-glow-opacity 0.4s ease;
}

.hgs-fx-breathe:hover::before {
   --hg-glow-opacity: 0.8;
   animation-duration: 2s;
}

@keyframes hgs-breathe-pulse {
   0% { --hg-glow-opacity: 0.2; transform: scale(0.98); }
   100% { --hg-glow-opacity: 0.5; transform: scale(1.02); }
}