/* ============================================== */
/*  UTILITIES & ANIMATIONS                        */
/*  Clases utilitarias, filtros y animaciones     */
/* ============================================== */

/* ------------------------------------------ */
/*  SKETCH FILTERS & BORDERS                  */
/* ------------------------------------------ */

.irregular {
  position: relative;
}

.irregular::after {
  content: '';
  position: absolute;
  inset: 0;
  /* border: 3px solid var(--color-contrast); */
  pointer-events: none;
  z-index: 10;
}

.fondo-irregular {
  position: relative;
}

.fondo-irregular::before {
  content: '';
  position: absolute;
  inset: -10px;
  z-index: -1;
  /* border-radius: 8px; */
  background-color: var(--color-bg-secondary);
}


#proyectos .fondo-irregular::before {
  background-color: hsl(from var(--color-bg-primary) h s l / 50%);
}

/* ------------------------------------------ */
/*  GRID SHIFT HELPERS                        */
/* ------------------------------------------ */

.shifted-up {
  transform: translateY(-var(--space-xl));
}

.shifted-down {
  transform: translateY(var(--space-xl));
}

@media (max-width: 768px) {

  .shifted-up,
  .shifted-down {
    transform: none;
  }
}

/* ------------------------------------------ */
/*  REVEAL ANIMATIONS                         */
/* ------------------------------------------ */

.reveal-block {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duration-lg) var(--ease-expo), transform var(--duration-lg) var(--ease-expo);
}

.reveal-block.active {
  opacity: 1;
  transform: translateY(0);
}

/* Section Header Parallax Wrapper */
.reveal-text-wrap {
  overflow: hidden;
  margin-bottom: var(--space-xl);
}

.reveal-text-wrap h2 {
  transition: transform var(--duration-lg) var(--ease-expo);
  transform: translateY(100%);
}

.reveal-text-wrap.active h2 {
  transform: translateY(0);
}

/* ------------------------------------------ */
/*  INTERACTIVE CURSOR                        */
/* ------------------------------------------ */

/* Solo activar cursor personalizado en dispositivos con hover (mouse/trackpad) */
@media (hover: hover) {

  body,
  a,
  button,
  article,
  .filter-btn,
  .theme-option,
  .language-option,
  .options-btn,
  .burger-btn {
    cursor: none;
  }
}

/* Ocultar cursor personalizado en dispositivos táctiles */
@media (hover: none) {
  .custom-cursor {
    display: none;
  }
}

.custom-cursor {
  width: 20px;
  height: 20px;
  background: var(--color-accent);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  mix-blend-mode: exclusion;
  transition: transform 0.15s ease-out;
  transform: translate(-50%, -50%);
}

.custom-cursor.hovering {
  transform: translate(-50%, -50%) scale(4);
}


/* ------------------------------------------ */
/*  Contenidos a la derecha                   */
/* ------------------------------------------ */

.content-right {
  margin-inline-start: auto;

  @media (width >=1024px) {
    max-width: min(85vw, 1000px);
  }
}