/* Paint transitions between pages (js/core/site.js): colors per paint and the cover/splash layers. */

[data-paint=blanco] {
  --paint: #f1f2ef;
  --tone: #758185;
}

[data-paint=amarillo] {
  --paint: #ffdb32;
  --tone: #b17704;
}

[data-paint=rojo] {
  --paint: #ef2429;
  --tone: #9b2223;
}

[data-paint=verde] {
  --paint: #00833c;
  --tone: #0c663b;
}

.paint-cover,
.paint-splash {
  position: fixed;
  inset: 0;
  z-index: 100;
}

.paint-cover {
  display: none;
  background: var(--paint);
}

html[data-arriving] .paint-cover {
  display: block;
}

.paint-cover.is-dripping {
  background: none;
}

.paint-splash.is-full {
  background: var(--paint);
}

.paint-cover svg,
.paint-splash svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: var(--paint);
}