/* Pigmento (unidad C1): acuarelas que se pintan, gotas de color y celebración al confirmar.
   Lo oculto antes de animar va bajo .js.arte: sin JS, con reducido o si escenas.js no carga, todo se ve.
   Máscaras sólo con -webkit-: Chrome, Safari y Firefox la leen. */

/* ---------- C-02 · Las acuarelas se pintan ---------- */
/* Foco (medido con Pillow sobre los webp) y --m: la mancha más chica que cubre la ilustración desde su foco */
.pinta { --fx: 50%; --fy: 50%; --m: 2.6; position: relative; transform-origin: var(--fx) var(--fy); }
.portada-mesa .pinta { --fx: 36%; --fy: 30%; --m: 2.56; } /* velas */
.parada-1 .pinta { --fx: 61%; --fy: 78%; --m: 2.49; }     /* puerta del templo */
.parada-2 .pinta { --fx: 47%; --fy: 63.5%; --m: 2.11; }   /* vano del arco */
.pinta img { transform-origin: var(--fx) var(--fy); }
.js.arte .pinta:not(.pintada) { opacity: 0; }
/* Mientras se pinta, la caja crece con relleno sin mover nada y la mancha queda centrada en el foco (px desde artesanal.js) */
.pinta.pintando {
  margin: calc(var(--t) * -1) calc(var(--r) * -1) calc(var(--b) * -1) calc(var(--l) * -1);
  padding: var(--t) var(--r) var(--b) var(--l);
  transform-origin: var(--ox) var(--oy);
  -webkit-mask: url(../img/mancha-b.webp) calc(var(--ox) - var(--mw) / 2) calc(var(--oy) - var(--mh) / 2) / var(--mw) var(--mh) no-repeat;
  will-change: transform, opacity;
}
.pinta.pintando img { will-change: transform; }

/* ---------- C-05 · Cada color cae como pigmento ---------- */
.paleta li { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.gota { position: relative; }
/* Aureola: la base es el estado final */
.gota::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 48% 52% 45% 55% / 55% 45% 55% 45%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 35%, transparent), transparent);
  transform: scale(1.45);
  opacity: .16;
  pointer-events: none;
}
.js.arte .paleta li .gota { transform: scale(.3); opacity: 0; transition: transform 1.1s var(--lento), opacity .5s var(--suave); transition-delay: calc(var(--d) * 180ms); }
.js.arte .paleta li .gota::before { transform: scale(.4); opacity: .45; transition: 1.9s var(--lento); transition-property: transform, opacity; transition-delay: calc(var(--d) * 180ms + 120ms); }
.js.arte .paleta li .gota-nombre { opacity: 0; transition: opacity .9s var(--suave) calc(var(--d) * 180ms + 250ms); }
.js.arte .paleta li.visto .gota { transform: none; opacity: 1; }
.js.arte .paleta li.visto .gota::before { transform: scale(1.45); opacity: .16; }
.js.arte .paleta li.visto .gota-nombre { opacity: 1; }
/* Al tocar florece otra vez y termina en su reposo, sin pasarse y regresar */
.js.arte .paleta li.florece .gota::before { animation: florece .9s var(--lento); }
@keyframes florece { from { transform: scale(.95); opacity: .35; } }

/* ---------- C-06 · La respuesta se queda pintada ---------- */
.rsvp-hecho { position: relative; isolation: isolate; }
.rama-celebra { margin: 10px auto 0; }
.rsvp:not([data-estado="si"]) .rama-celebra { display: none; }
.acuarela-celebra { position: absolute; inset: -6% -3%; z-index: -1; pointer-events: none; overflow: hidden; overflow: clip; }
.acuarela-celebra i {
  --k: var(--olivo-claro);
  position: absolute;
  top: var(--cy);
  width: calc(var(--e, 1) * min(38%, 150px));
  aspect-ratio: 1;
  translate: -50% -50%;
  opacity: .32;
  /* Más pigmento en el borde, como la acuarela al secar */
  background: radial-gradient(closest-side, color-mix(in srgb, var(--k) 45%, transparent) 30%, var(--k) 88%);
  -webkit-mask: url(../img/mancha-a.webp) 0 0 / 100% 100% no-repeat;
}
.acuarela-celebra i:nth-child(1) { left: 38%; margin-top: 4px; rotate: 30deg; }
.acuarela-celebra i:nth-child(2) { --k: #A9AF93; --e: .85; left: 63%; margin-top: -4px; rotate: -50deg; -webkit-mask-image: url(../img/mancha-b.webp); }
.acuarela-celebra i:nth-child(3) { --k: var(--terracota-suave); --e: .75; left: 55%; margin-top: 24px; rotate: 120deg; -webkit-mask-image: url(../img/mancha-c.webp); }
.acuarela-celebra i:nth-child(4) { --k: var(--papel-hondo); --e: 1.1; left: 46%; margin-top: 16px; rotate: 200deg; }
.hoja-celebra { position: absolute; top: var(--cy); width: 13px; height: 8px; color: var(--olivo-claro); opacity: 0; }