/* ============================================================
   GARABATO · Squiggles
   Patrones decorativos basados en las formas del isotipo.
   ============================================================ */

.sq {
  pointer-events: none;
  user-select: none;
}

/* Escalas predefinidas */
.sq--xs { width: 24px; }
.sq--sm { width: 48px; }
.sq--md { width: 96px; }
.sq--lg { width: 160px; }
.sq--xl { width: 240px; }
.sq--xxl { width: 360px; }

/* En pantallas chicas los garabatos decorativos bajan de escala
   para no tapar el contenido */
@media (max-width: 600px) {
  .sq--xxl { width: 220px; }
  .sq--xl  { width: 160px; }
  .sq--lg  { width: 110px; }
  .sq--md  { width: 72px; }
}

/* Colores */
.sq--magenta { color: var(--brand-magenta); }
.sq--violet  { color: var(--brand-violet); }
.sq--yellow  { color: var(--brand-yellow); }
.sq--orange  { color: var(--brand-orange); }
.sq--ink     { color: var(--ink-900); }

/* ---- Pattern: las 4 piezas del logo, tileable (como el patrón de marca) ---- */
.sq-pattern {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke-linecap='butt' stroke-linejoin='round'%3E%3Cpath d='M 6 34 C 11 34 14 31 15 27 C 16 19 20 14 27 14 C 35 14 40 21 38 30 C 36 39 28 44 26 54 C 24 66 32 72 42 72 C 54 72 63 62 62 50 C 61 38 60 26 56 12' transform='translate(18 150) scale(0.9)' stroke='%23FFD000' stroke-width='11'/%3E%3Cpath d='M 20.6 42.8 A 27 27 0 1 1 55 77 C 48 80 38 83 36 96' transform='translate(96 20) rotate(-8 42 53)' stroke='%23FF0068' stroke-width='11'/%3E%3Ccircle cx='32' cy='64' r='14' transform='translate(180 160)' stroke='%236800FF' stroke-width='11'/%3E%3Cpath d='M 44.1 71 L 68.1 29.4 M 29.6 50.2 L 76.9 41.85' transform='translate(180 160)' stroke='%236800FF' stroke-width='11'/%3E%3Cpath d='M 8 20 L 88 20' transform='translate(0 105) scale(0.5)' stroke='%23FF9800' stroke-width='24'/%3E%3Cpath d='M 8 20 L 88 20' transform='translate(200 60) scale(0.5)' stroke='%23FF9800' stroke-width='24'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 260px 260px;
}

/* Animación flotante — deriva orgánica en X/Y + rotación,
   desfasada por --delay y desincronizada por nth-child */
@keyframes sq-float {
  0%, 100% { transform: translate(0, 0) rotate(var(--rot, 0deg)); }
  33%      { transform: translate(4px, -9px) rotate(calc(var(--rot, 0deg) + 2.5deg)); }
  66%      { transform: translate(-4px, -4px) rotate(calc(var(--rot, 0deg) - 2deg)); }
}
.sq--float {
  animation: sq-float calc(7s * var(--fx-speed, 1)) ease-in-out infinite;
  animation-delay: calc(var(--delay, 0s) * -3);
}
.sq-scatter > .sq--float:nth-child(odd) {
  animation-duration: calc(9s * var(--fx-speed, 1));
  animation-direction: reverse;
}
.sq-scatter > .sq--float:nth-child(3n) {
  animation-duration: calc(11s * var(--fx-speed, 1));
}

@keyframes sq-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.sq--spin { animation: sq-spin 20s linear infinite; }

/* ---- Draw-in al entrar en viewport (pathLength=1) ---- */
@keyframes sq-draw   { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sq-pop    { from { opacity: 0; transform: scale(.3) rotate(-30deg); } to { opacity: 1; transform: scale(1) rotate(0deg); } }
/* settle: el garabato "cae" con un mini rebote mientras se dibuja
   (usa la propiedad scale, no pisa el transform/rotate inline) */
@keyframes sq-settle { 0% { scale: 0.62; } 72% { scale: 1.06; } 100% { scale: 1; } }

@media (prefers-reduced-motion: no-preference) {
  .fx-ready .sq--draw path,
  .fx-ready .sq--draw line {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }
  .fx-ready .sq--draw { scale: 0.62; }
  .fx-ready .sq--draw circle { opacity: 0; transform-box: fill-box; transform-origin: center; }

  .in-view .sq--draw path,
  .in-view .sq--draw line {
    animation: sq-draw calc(1.1s * var(--fx-speed, 1)) cubic-bezier(0.2, 0, 0, 1) var(--delay, 0s) forwards;
  }
  .in-view .sq--draw {
    animation: sq-settle calc(0.9s * var(--fx-speed, 1)) cubic-bezier(0.34, 1.56, 0.64, 1) var(--delay, 0s) forwards;
  }
  .in-view .sq--draw circle {
    animation: sq-pop calc(0.55s * var(--fx-speed, 1)) cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--delay, 0s) + 0.25s) forwards;
  }
}

/* Parallax: el JS escribe --py; la transición le da inercia suave */
.sq-parallax {
  transform: translateY(var(--py, 0px)) rotate(var(--rot, 0deg));
  transition: transform .35s cubic-bezier(0.33, 1, 0.68, 1);
  will-change: transform;
}