/* ══════════════════════════════════════════════════════════════════════
   10 · CURSOR PROPIO Y LLUVIA DE PÉTALOS
   ══════════════════════════════════════════════════════════════════════

   QUÉ ES ESTE ARCHIVO
   Dos adornos que acompañan al mouse:
     · un cursor dorado dibujado por nosotros, en vez de la flechita
     · pétalos de rosa que caen y se apartan cuando pasás el mouse

   POR QUÉ EL CURSOR SE HACE ASÍ Y NO CON  cursor: url(...)
   Con la propiedad  cursor  del CSS, cualquier elemento que declare
   "cursor: pointer" (todos los botones) pisa nuestro dibujo y vuelve a
   la manito del sistema. Además no se le pueden hacer animaciones.
   Por eso escondemos el cursor real (cursor: none) y movemos dos
   elementos de verdad siguiendo al mouse: así el diseño es siempre el
   mismo y puede crecer, brillar o cambiar de forma.

   ÍNDICE
     1. Ocultar el cursor del sistema
     2. Anillo y punto dorados
     3. Estados del cursor
     4. Lluvia de pétalos
   ══════════════════════════════════════════════════════════════════════ */


/* ─── 1. OCULTAR EL CURSOR DEL SISTEMA ─────────────────────────────────
   La clase .con-cursor-propio la agrega 05-cursor-personalizado.js SOLO
   si el dispositivo tiene mouse. En un celular no se toca nada, porque
   ahí no hay puntero que reemplazar.
   ---------------------------------------------------------------------- */
.con-cursor-propio,
.con-cursor-propio * { cursor: none !important; }

/* Sobre el mapa de Google (un iframe) el navegador no nos deja controlar
   el cursor, así que ahí devolvemos el del sistema para que la persona
   nunca se quede sin puntero visible. */
.con-cursor-propio iframe,
.con-cursor-propio iframe * { cursor: auto !important; }


/* ─── 2. ANILLO Y PUNTO DORADOS ────────────────────────────────────────
   Son dos piezas separadas a propósito: el punto sigue al mouse al
   instante y el anillo llega un poquito después. Ese retraso mínimo es
   lo que da la sensación de elegancia y "peso".
   ---------------------------------------------------------------------- */
#cursor-anillo,
#cursor-punto {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3000;          /* por encima de todo, incluso del sobre */
  pointer-events: none;   /* jamás debe bloquear un clic */
  opacity: 0;             /* invisible hasta que el mouse se mueve */
  transition: opacity .3s;
  will-change: transform;
}
#cursor-anillo.visible,
#cursor-punto.visible { opacity: 1; }

/* El anillo: círculo dorado con un halo suave.

   SIEMPRE mide lo mismo y siempre es un círculo. Antes cambiaba de forma
   según lo que hubiera debajo (crecía sobre los botones, se volvía una
   barra sobre los campos de texto) y resultaba molesto. Ahora lo único
   que cambia es cuánto brilla. */
#cursor-anillo {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;   /* lo centra en la punta del mouse */
  border: 1px solid rgba(201, 168, 76, .85);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(201, 168, 76, .25),
        inset 0 0 10px rgba(201, 168, 76, .12);
  transition: border-color .28s, box-shadow .28s, opacity .3s;
}

/* Cuatro pequeños trazos alrededor del anillo, como una brújula
   ornamentada. Giran despacio todo el tiempo. */
#cursor-anillo::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px dashed rgba(201, 168, 76, .35);
  animation: girar-anillo 9s linear infinite;
}
@keyframes girar-anillo {
  to { transform: rotate(360deg); }
}

/* El punto central */
#cursor-punto {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--color-oro-claro);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(232, 207, 122, .9);
  transition: box-shadow .2s, opacity .3s;
}


/* ─── 3. ESTADOS DEL CURSOR ────────────────────────────────────────────
   Un solo estado, y NO cambia ni la forma ni el tamaño: sobre algo
   cliqueable el dorado simplemente brilla más fuerte. Es suficiente para
   avisar que se puede hacer clic, sin que el cursor se deforme.
   ---------------------------------------------------------------------- */
#cursor-anillo.sobre-interactivo {
  border-color: var(--color-oro-brillante);
  box-shadow: 0 0 26px rgba(201, 168, 76, .55),
        inset 0 0 14px rgba(201, 168, 76, .3);
}
#cursor-punto.sobre-interactivo {
  box-shadow: 0 0 18px rgba(244, 226, 160, 1);
}


/* ─── 4. LLUVIA DE PÉTALOS ─────────────────────────────────────────────
   El contenedor cubre la pantalla pero es totalmente transparente a los
   clics. Cada pétalo es un div con la imagen de pétalo de fondo; toda su
   posición y su giro los calcula 06-petalos-con-fisica.js.

   z-index 40 los deja por debajo del marco victoriano (60), así los
   pétalos parecen caer DENTRO del cuadro.
   ---------------------------------------------------------------------- */
/* ── LOS TRES PLANOS ──
   La escalera completa del apilamiento de la web:

      -1  fondo ornamental
       0  ruido de papel
       1  PÉTALOS · fondo      ← detrás de las cajas de texto
       2  secciones y el relicario
       3  PÉTALOS · medio      ← caen ENCIMA del relicario
       4  el nombre "ANIA"     ← nunca queda tapado
      50  PÉTALOS · frente     ← delante de todo el contenido
      60  marco victoriano
      70  haces de luz

   Para que esto funcione, #contenido NO puede declarar z-index: si lo
   hiciera crearía un contexto de apilamiento y encerraría al relicario,
   dejando afuera a los pétalos del medio (ver 02-marco-victoriano.css). */
.lluvia-de-petalos {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
/* Los tres canvas que dibujan los pétalos (codigo/24-lienzo-de-petalos.js),
   uno dentro de cada plano para conservar la profundidad. Cada uno cubre la
   ventana entera; el JS los redimensiona.

   Son 3 capas en total, en vez de las 29 que costaban los pétalos como
   divs: ahí estaba clavado "Layerize" en el 27,6 % del perfil. */
.lienzo-de-petalos {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.lluvia-de-petalos--fondo  { z-index: 1;  }
.lluvia-de-petalos--medio  { z-index: 3;  }
.lluvia-de-petalos--frente { z-index: 50; }

/* PROFUNDIDAD DE CAMPO.
   Lo que separa un plano de otro es cómo se ven: los de atrás chicos y
   apagados, los de adelante grandes. La distancia la marcan el tamaño y la
   OPACIDAD (que asigna el JS por plano), no un filtro.

   ⚡ RENDIMIENTO: antes cada pétalo llevaba filtros (drop-shadow en todos,
   más brightness/saturate atrás y blur adelante). Un pétalo con filtro que
   se MUEVE se re-rasteriza en cada cuadro, y hay ~20 cayendo a la vez: sin
   placa de video, eso solo ya fundía la CPU. Se quitaron TODOS los filtros
   de los pétalos. La profundidad se mantiene con el tamaño y la opacidad;
   los de atrás, además, van un punto más tenues (regla de abajo) para
   compensar el brillo que antes bajaba el filtro. */
.lluvia-de-petalos--fondo  .petalo { opacity: .8; }

.petalo {
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  /* ⚡ CON `will-change`, Y ACÁ SÍ CORRESPONDE.
     Se lo quité en la poda de las 179 capas y fue un error medido: en el
     perfil siguiente, "Paint" saltó del 8,9 % al 44,7 % y pasó a ser el
     primer costo de la web.

     POR QUÉ ACÁ SÍ Y EN LAS VELAS NO. El criterio no es "will-change malo",
     es si la capa que reserva SE PUEDE APROVECHAR:

       · Una .vela vive dentro de un contenedor con mix-blend-mode. Un
         elemento que se mezcla necesita el fondo para calcularse, así que
         su capa hay que volver a fundirla igual: trabajo perdido.
       · Un pétalo NO está dentro de ninguna mezcla, es chico, y se mueve
         solo con traslación. Esa es exactamente la situación para la que
         existe el compositor: se rasteriza una vez y después solo se
         desplaza la textura, sin repintar.

     Sin capa, cada pétalo se REPINTA entero en cada cuadro — y ahora son
     casi el doble de grandes que antes (ver RASGOS_DEL_PLANO en
     codigo/06-petalos-con-fisica.js), o sea unas cuatro veces más área. */
  will-change: transform;
}