/* The jar: one real photograph of an unlabelled jar (Unsplash 1610135373101), cut out with clip paths and recoloured per salsa.
   Layers: clear glass at the neck, the salsa (filtered), the glass highlights (screen), the printed label, the lid. */
.jar {
  --salsa: hue-rotate(0deg) saturate(1) brightness(1) contrast(1);
  position: relative; aspect-ratio: 700 / 1186; container-type: inline-size;
}
.jar img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; user-select: none; pointer-events: none; }
.jar__neck { clip-path: polygon(8% 10.12%,91.43% 10.12%,88.29% 10.62%,88% 12.9%,12.43% 12.9%,12% 10.62%); mix-blend-mode: multiply; }
.jar__body { clip-path: polygon(12.43% 12.65%,88% 12.65%,88% 16.53%,88.57% 16.86%,91.57% 18.97%,94.43% 21.08%,96% 23.19%,97% 25.3%,97% 29.51%,96.71% 42.16%,96.57% 59.02%,96.71% 67.45%,96.57% 80.1%,96.43% 84.32%,96% 88.53%,95.71% 90.64%,94.86% 92.75%,93.43% 94.86%,91.43% 96.96%,88.57% 97.47%,81.14% 97.72%,64.71% 97.89%,34.86% 97.89%,18.43% 97.72%,11% 97.47%,8.14% 96.96%,6.14% 94.86%,4.71% 92.75%,3.86% 90.64%,3.57% 88.53%,3.14% 84.32%,2.86% 80.1%,2.86% 59.02%,3% 42.16%,3.14% 29.51%,3.14% 25.3%,3.57% 23.19%,5.14% 21.08%,8% 18.97%,11.14% 16.86%,12% 16.53%); filter: var(--salsa); transition: filter .8s var(--ease); }
.jar__shine { clip-path: polygon(6.86% 9.78%,6.86% 9.11%,7% 5.06%,7.43% 4.72%,9.29% 4.05%,11.43% 3.37%,12.57% 2.7%,16.14% 2.02%,23.14% 1.69%,41.29% 1.18%,58.29% 1.18%,75.71% 1.6%,83.43% 1.94%,86.71% 2.28%,88.43% 2.95%,89.14% 3.54%,91.86% 4.38%,92.86% 4.89%,93.14% 7.59%,93.57% 9.11%,93.43% 9.78%,91.43% 10.2%,88.29% 10.62%,88% 12.65%,88% 16.53%,88.57% 16.86%,91.57% 18.97%,94.43% 21.08%,96% 23.19%,97% 25.3%,97% 29.51%,96.71% 42.16%,96.57% 59.02%,96.71% 67.45%,96.57% 80.1%,96.43% 84.32%,96% 88.53%,95.71% 90.64%,94.86% 92.75%,93.43% 94.86%,91.43% 96.96%,88.57% 97.47%,81.14% 97.72%,64.71% 97.89%,34.86% 97.89%,18.43% 97.72%,11% 97.47%,8.14% 96.96%,6.14% 94.86%,4.71% 92.75%,3.86% 90.64%,3.57% 88.53%,3.14% 84.32%,2.86% 80.1%,2.86% 59.02%,3% 42.16%,3.14% 29.51%,3.14% 25.3%,3.57% 23.19%,5.14% 21.08%,8% 18.97%,11.14% 16.86%,12% 16.53%,12.43% 12.65%,12% 10.62%,8% 10.2%); filter: grayscale(1) brightness(.7) contrast(6); mix-blend-mode: screen; }
.jar__lid { clip-path: polygon(6.86% 9.78%,6.86% 9.11%,7% 5.06%,7.43% 4.72%,9.29% 4.05%,11.43% 3.37%,12.57% 2.7%,16.14% 2.02%,23.14% 1.69%,41.29% 1.18%,58.29% 1.18%,75.71% 1.6%,83.43% 1.94%,86.71% 2.28%,88.43% 2.95%,89.14% 3.54%,91.86% 4.38%,92.86% 4.89%,93.14% 7.59%,93.57% 9.11%,93.43% 9.78%,91.43% 10.29%,8% 10.29%); }
.jar::before {
  content: ""; position: absolute; left: -8%; right: -8%; bottom: -3.5%; height: 8%;
  background: radial-gradient(closest-side, rgba(10, 3, 2, .55), rgba(10, 3, 2, 0)); pointer-events: none;
}
.jar__label {
  position: absolute; left: 3%; width: 94%; top: 33%; height: 41%;
  clip-path: polygon(0.0% 0.00%,8.3% 0.67%,16.7% 1.22%,25.0% 1.65%,33.3% 1.96%,41.7% 2.14%,50.0% 2.20%,58.3% 2.14%,66.7% 1.96%,75.0% 1.65%,83.3% 1.22%,91.7% 0.67%,100.0% 0.00%,100.0% 96.80%,91.7% 97.78%,83.3% 98.58%,75.0% 99.20%,66.7% 99.64%,58.3% 99.91%,50.0% 100.00%,41.7% 99.91%,33.3% 99.64%,25.0% 99.20%,16.7% 98.58%,8.3% 97.78%,0.0% 96.80%);
  display: grid; align-content: center; justify-items: center; gap: 2.6cqw; padding: 0 13%;
  background: var(--lab); color: var(--print); text-align: center;
  transition: background-color .6s var(--ease), color .6s var(--ease);
}
.jar__label::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.5), rgba(0,0,0,.14) 10%, transparent 26%, transparent 56%, rgba(255,255,255,.16) 72%, transparent 84%, rgba(0,0,0,.3) 95%, rgba(0,0,0,.55));
}
.jar__brand { font: 800 4.4cqw/1 var(--text); letter-spacing: .24em; text-transform: uppercase; }
.jar__name { font: 400 12.5cqw/.92 var(--display); }
.jar__what { font: 500 4.3cqw/1.25 var(--text); }
.jar__marks { display: flex; gap: 1cqw; }
.jar__marks i { width: 5.6cqw; height: 5.6cqw; background: currentColor; -webkit-mask: url(../assets/chile.svg) center / contain no-repeat; mask: url(../assets/chile.svg) center / contain no-repeat; }
.jar__oz { font: 700 3.8cqw/1 var(--text); letter-spacing: .12em; }
.jar--small .jar__label { gap: 1.5cqw; padding: 0 9%; }
.jar--small .jar__what, .jar--small .jar__brand, .jar--small .jar__oz { display: none; }
.jar--small .jar__name { font-size: 15cqw; }

/* Each salsa: its colour in the jar, its label, and the field it stands on. Same filter functions in the same order,
   so moving between salsas blends the colour in the jar. */
[data-jar="morita"] { --salsa: hue-rotate(-12deg) saturate(.85) brightness(.62) contrast(1.1); --lab: #5a1118; --print: #f5e9d9; }
[data-jar="macha"] { --salsa: hue-rotate(-22deg) saturate(1.2) brightness(.32) contrast(1.35); --lab: #f5e9d9; --print: #1e0d0b; }
[data-jar="arbol"] { --salsa: hue-rotate(-16deg) saturate(1.35) brightness(.85) contrast(1.1); --lab: #f3a712; --print: #8f1810; }
[data-jar="habanero"] { --salsa: hue-rotate(0deg) saturate(1) brightness(1) contrast(1); --lab: #4a0e14; --print: #f3a712; }

[data-field="morita"] { --field: #f2b53c; --field-ink: #5a1118; --on-field: #1e0d0b; }
[data-field="macha"] { --field: #e07a1f; --field-ink: #1e0d0b; --on-field: #1e0d0b; }
[data-field="arbol"] { --field: #4a0e14; --field-ink: #b4281c; --on-field: #f5e9d9; }
[data-field="habanero"] { --field: #160807; --field-ink: #e8761f; --on-field: #f5e9d9; }
[data-field="trio"] { --field: #2a0b0d; --field-ink: #5a1118; --on-field: #f5e9d9; }
[data-field] { background-color: var(--field); color: var(--on-field); transition: background-color .7s var(--ease), color .5s var(--ease); }

/* Three jars standing together: the gift box. */
.trio-pic { position: relative; display: grid; grid-template-columns: 1fr 1.18fr 1fr; align-items: end; }
.trio-pic .jar:nth-child(1) { transform: translateX(14%) rotate(-3deg); z-index: 1; }
.trio-pic .jar:nth-child(2) { z-index: 2; }
.trio-pic .jar:nth-child(3) { transform: translateX(-14%) rotate(3deg); z-index: 1; }