/*
  base.css
  ------------------
  Propósito: reglas globales y utilidades básicas de la página.
  - Definición de fuente principal y colores base.
  - Fondo base (gradiente morado) y sobreposición (overlay) con imagen.
  - Reglas para evitar selección/arrastre y utilidades generales.

  Notas:
  - Las rutas en este archivo son relativas a `css/`, por eso usamos `../img/` y `../cursors/`.
  - Si quieres eliminar la sobreposición, comenta o borra el bloque `body::before`.
*/

body {
  user-select: none;
  margin: 0;
  font-family: 'Caveat', sans-serif;
  /* purple background (base) — image overlay is added with ::before */
  background: linear-gradient(to bottom, #2C1740, #120A1A);
  color: #F4DFFF;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  position: relative;
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
  cursor: url('../cursors/cursor.cur'), auto;
}

/* background image overlay placed above the base purple gradient */
body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../img/background_superposicion.png') no-repeat center center;
  background-size: cover;
  filter: brightness(0);
  opacity: 0.22;
  z-index: 0;
  pointer-events: none;
}

img {
  -webkit-user-drag: none;
}

a {
  -webkit-user-drag: none;
}

/* utility */
.hidden {
  display: none !important;
}


/* appear animation index */
.appear {
  opacity: 0;
  transform: scale(0.95);
  animation: appearZoom 0.65s ease-in-out forwards;
}

@keyframes appearZoom {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ✨ Animación constante y suave */
.float-zoom {
  animation: floatZoom 7s ease-in-out infinite;
}

@keyframes floatZoom {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.015);
  }

  100% {
    transform: scale(1);
  }
}