/* CropNow, R&D: "In the making", the last section of the Initiatives page.
 *
 * The projects CropNow is researching, each in its own soft, seed-pod shaped
 * container: a seed under the soil whose sprout keeps breaking through and
 * settling back, and "Coming soon" until its story is ready.
 */

.rd__dot {
  color: var(--green);
}

.rd {
  width: min(64rem, 100% - 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(4rem, 12vh, 8rem) 0;
}

/* Clear of the village scenery at the sides on wide screens. */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .rd {
    width: min(64rem, 100vw - 26rem);
  }
}

.rd__head {
  text-align: center;
}

.rd__kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  margin: 0;
  color: var(--green);
  font: 600 .8rem/1.2 var(--font-text);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.rd__title {
  margin: .8rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 1rem + 7vw, 8.4rem);
  font-weight: 900;
  line-height: .88;
}

.rd__lead {
  max-width: 32rem;
  margin: 1.2rem auto 0;
  color: rgb(13 59 9 / .8);
  font-size: clamp(1.05rem, .95rem + .35vw, 1.25rem);
  line-height: 1.6;
}

/* -- The pods ------------------------------------------------------------------------ */

.pods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  margin: clamp(2.5rem, 8vh, 5rem) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .pods {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.pod {
  --tint: rgb(66 146 62 / .1);
  --line: rgb(66 146 62 / .35);
  display: grid;
  justify-items: center;
  align-content: start;
  padding: clamp(1.4rem, 3vw, 2.4rem) .8rem clamp(1.6rem, 3vw, 2.6rem);
  border: 1.5px solid var(--line);
  background: var(--tint);
  text-align: center;
  animation: pod-in .9s var(--ease) both;
  animation-delay: calc(.15s + var(--i) * .12s);
  transition: translate .45s var(--ease), background .45s var(--ease);
}

/* Each pod has its own irregular, seed-like outline and an earthy tint. */
.pod--1 { border-radius: 46% 54% 42% 58% / 38% 44% 56% 62%; }
.pod--2 { border-radius: 58% 42% 55% 45% / 46% 36% 64% 54%; --tint: rgb(185 110 76 / .1); --line: rgb(185 110 76 / .38); }
.pod--3 { border-radius: 42% 58% 48% 52% / 56% 42% 58% 44%; --tint: rgb(13 59 9 / .07); --line: rgb(13 59 9 / .28); }
.pod--4 { border-radius: 54% 46% 60% 40% / 40% 52% 48% 60%; --tint: rgb(160 128 70 / .1); --line: rgb(160 128 70 / .38); }

.pod:hover {
  translate: 0 -.35rem;
}

@keyframes pod-in {
  from { opacity: 0; translate: 0 1.5rem; }
}

.pod__seed {
  width: clamp(5.5rem, 9vw, 7rem);
  overflow: visible;
}

.pod__soil {
  fill: none;
  stroke: rgb(107 74 50 / .55);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.pod__bean {
  fill: #8a6038;
}

.pod__stem {
  fill: none;
  stroke: var(--green);
  stroke-width: 3;
  stroke-linecap: round;
}

.pod__leaf {
  fill: var(--green);
}

/* The sprout breaks through the soil, holds, and settles back. */
.pod__sprout {
  transform-box: view-box;
  transform-origin: 60px 92px;
  animation: sprout 4.8s var(--ease) infinite;
  animation-delay: calc(var(--i) * 1.1s);
}

@keyframes sprout {
  0%, 12% { scale: 1 .25; opacity: .2; }
  42%, 78% { scale: 1 1; opacity: 1; }
  100% { scale: 1 .25; opacity: .2; }
}

.pod:hover .pod__sprout {
  animation-play-state: paused;
  scale: 1 1.08;
  opacity: 1;
}

.pod__name {
  margin: 1rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.3rem + 1.8vw, 3rem);
  font-weight: 900;
  line-height: .95;
}

.pod__soon {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: .8rem 0 0;
  color: var(--forest);
  font: 600 .78rem/1.2 var(--font-text);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.pod__pulse {
  position: relative;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--green);
}

.pod__pulse::after {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--green);
  content: "";
  animation: pulse 2.2s var(--ease) infinite;
}

@keyframes pulse {
  from { opacity: .6; scale: 1; }
  to { opacity: 0; scale: 3; }
}

/* With motion paused, the sprouts stand up and nothing pulses. */
html[data-motion="paused"] .pod,
html[data-motion="paused"] .pod__sprout,
html[data-motion="paused"] .pod__pulse::after {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .pod,
  .pod__sprout,
  .pod__pulse::after {
    animation: none;
  }
}

@media (max-width: 640px) {
  .pod__soon {
    gap: .45rem;
    font-size: .68rem;
    letter-spacing: .1em;
  }
}