/* =========================================================
   EDITABLE SETTINGS
   ========================================================= */

@font-face {
  font-family: "Saans";
  src:
    url("../fonts/Saans-Regular.woff2") format("woff2"),
    url("../fonts/Saans-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --outside-color: #DAF1DB;
  --page-color: #24DE2B;
  --text-color: #000000;

  /*
    Colores de la zona pintada.
    El logo pintado lo controla el archivo:
    /assets/ploi-green.svg
  */
  --paint-background-color: #000000;
  --paint-text-color: #24DE2B;

  --font-family: "Saans", Arial, Helvetica, sans-serif;
  --text-weight: 400;
  --text-letter-spacing: 0em;

  --claim-size: 14px;
  --coming-size: 14px;

  --page-margin: 8px;
  --page-radius: 50px;

  --logo-width: 96vw;
  --logo-top: 18px;

  --coming-bottom: 48px;

  /*
    Activar/desactivar:
    1 = activo
    0 = desactivado
  */
  --paint-enabled: 1;
  --cursor-dot-enabled: 1;

  /*
    Pincel pixelado.
    Puedes editar estos valores sin tocar JavaScript.
  */
  --paint-pixel-size: 30;
  --paint-brush-radius: 175;
  --paint-density: 1;
  --paint-every-ms: 2;
  --paint-max-pixels: 20000;
}

@media (max-width: 1800px) {
  :root { --claim-size: 14px; --coming-size: 14px; }
}

@media (max-width: 1500px) {
  :root { --claim-size: 14px; --coming-size: 14px; }
}

@media (max-width: 1200px) {
  :root { --claim-size: 13px; --coming-size: 13px; }
}

@media (max-width: 950px) {
  :root { --claim-size: 14px; --coming-size: 14px; }
}

@media (max-width: 800px) {
  :root { --claim-size: 15px; --coming-size: 15px; }
}

@media (max-width: 600px) {
  :root {
    --claim-size: 13px;
    --coming-size: 13px;
    --paint-pixel-size: 24;
    --paint-brush-radius: 120;
    --paint-density: 0.94;
    --paint-max-pixels: 7000;
  }
}

@media (max-width: 420px) {
  :root {
    --claim-size: 12px;
    --coming-size: 12px;
    --coming-bottom: 40px;
  }
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: var(--outside-color);
  color: var(--text-color);
  font-family: var(--font-family);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body { padding: var(--page-margin); }

.page {
  position: relative;
  height: calc(100vh - (var(--page-margin) * 2));
  background: var(--page-color);
  border-radius: var(--page-radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  touch-action: none;
}

.logo {
  width: var(--logo-width);
  max-width: none;
  height: auto;
  margin-top: var(--logo-top);
  flex-shrink: 0;
  user-select: none;
  pointer-events: none;
  display: block;
}

.spacer { flex: 1; min-height: 0; }

.claim,
.coming-soon {
  margin: 0;
  text-align: center;
  font-weight: var(--text-weight);
  letter-spacing: var(--text-letter-spacing);
  text-transform: uppercase;
  color: var(--text-color);
  flex-shrink: 0;
  font-synthesis: none;
}

.claim {
  font-size: var(--claim-size);
  line-height: 1.1;
}

.claim span { display: block; }

.coming-soon {
  font-size: var(--coming-size);
  line-height: 1;
  margin-bottom: var(--coming-bottom);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.email {
  font-size: 1em;
  text-transform: none;
}

.cursor-dot {
  position: fixed;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  pointer-events: none;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

@media (hover: none) and (pointer: coarse) {
  .cursor-dot { display: none; }
}


/* =========================================================
   CANVAS PIXEL PAINT EFFECT
   ========================================================= */

/*
  Esta versión no usa CSS mask sobre capas HTML.
  Es más estable en Safari, Firefox, Edge y Chrome.
  Si el canvas o el JS fallan, la landing base sigue visible.
*/

.paint-canvas {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  background: transparent;
}

.coming-main {
  display: block;
}

/*
  Opcional:
  en navegadores sin canvas, simplemente no se mostrará el efecto.
*/