/*
 * Home page sections, in page order:
 * hero, ticker, pillars, product explorer, blend mixer, industries, process, quality.
 */

/* ---------- Hero ---------- */

.hero {
  /* Height of the clear band under the copy, where the flow lines run. */
  --flow-height: clamp(130px, 22vh, 230px);

  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--forest);
}

/* On roomy screens the hero stays put and the next section slides over it. */
@media (min-width: 900px) and (min-height: 720px) {
  .hero--sticky {
    position: sticky;
    top: var(--nav-height);
    z-index: 0;
  }
}

/* Recedes as the page scrolls; --hero-progress runs 0 to 1 (scroll-effects.js). */
.hero__content {
  display: grid;
  gap: clamp(22px, 3vw, 34px);
  padding-block: clamp(56px, 9vh, 110px) var(--flow-height);
  transform-origin: 20% 40%;
  transform: scale(calc(1 - var(--hero-progress, 0) * .07));
  opacity: calc(1 - var(--hero-progress, 0) * .85);
}

.hero h1 {
  font-size: var(--fs-hero);
}

.hero__line {
  display: block;
}

.hero .lede {
  color: var(--haze);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Three fine ingredient lines run in from the left and merge into one blend.
   They draw once, then a faint pulse drifts along each stream. */
.hero__flow {
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  width: 100%;
  height: var(--flow-height);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

.hero__flow path {
  fill: none;
}

.hero__flow-lines path {
  stroke-width: 1.5;
  stroke-dasharray: 1;
  opacity: .4;
  animation: flow-draw 1.8s var(--ease-io) both;
}

.hero__flow-lines path:nth-child(2) { animation-delay: .15s; }
.hero__flow-lines path:nth-child(3) { animation-delay: .3s; }

/* The outlet starts as the inlets arrive at the merge. */
.hero__flow-lines .hero__flow-outlet {
  stroke-width: 2.5;
  opacity: .6;
  animation-duration: 1.4s;
  animation-delay: 1.6s;
}

.hero__flow-pulses path {
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: .07 1;
  stroke-dashoffset: .07;
  opacity: .8;
  animation: flow-pulse 11s linear 3.2s infinite;
}

.hero__flow-pulses path:nth-child(2) { animation-duration: 14s; animation-delay: 6s; }
.hero__flow-pulses path:nth-child(3) { animation-duration: 12s; animation-delay: 9s; }

/* Nothing to animate once the hero has scrolled out of view. */
.hero.is-offscreen .hero__flow path {
  animation-play-state: paused;
}

@keyframes flow-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes flow-pulse {
  from { stroke-dashoffset: .07; }
  to { stroke-dashoffset: -1; }
}

/* Caption for the flow lines, set just left of the WhatsApp bubble. */
.hero__note {
  position: absolute;
  right: calc(var(--bubble-size) + var(--bubble-inset) * 2);
  bottom: 26px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: var(--fs-small);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mist);
}

.hero__note-dots {
  display: inline-flex;
  gap: 5px;
}

.hero__note-dots span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.hero__note-dots span:nth-child(1) { background: var(--starch); }
.hero__note-dots span:nth-child(2) { background: var(--ochre); }
.hero__note-dots span:nth-child(3) { background: var(--mint); }

@media (max-width: 860px) {
  .hero__note {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__flow-pulses {
    display: none;
  }
}

/* ---------- Ticker ---------- */

.ticker {
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin-top: calc(var(--radius) * -1);
  padding-block: 16px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--ochre);
  color: var(--forest);
}

/* The track holds the list twice, so sliding it by half loops seamlessly. */
.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 110s linear infinite;
}

.ticker:hover .ticker__track {
  animation-play-state: paused;
}

.ticker ul {
  display: flex;
  flex: none;
}

.ticker li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-inline: 22px;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  letter-spacing: -.02em;
  white-space: nowrap;
}

.ticker li span {
  font-family: var(--mono);
  font-weight: 500;
  font-size: .72em;
  letter-spacing: .06em;
  opacity: .72;
}

/* Droplet separator */
.ticker li::after {
  content: "";
  align-self: center;
  width: 9px;
  height: 13px;
  margin-left: 22px;
  background: var(--forest);
  clip-path: path("M4.5 0 C6.3 3 9 5 9 8 A4.5 4.5 0 1 1 0 8 C0 5 2.7 3 4.5 0Z");
}

@keyframes ticker-scroll {
  to { transform: translateX(-50%); }
}

/* ---------- Pillars ---------- */

.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1.5px solid var(--ink);
}

.pillar {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: 16px;
  align-content: start;
  padding: clamp(24px, 3vw, 40px) clamp(18px, 2.4vw, 34px) clamp(28px, 3vw, 44px);
}

.pillar + .pillar {
  border-left: 1.5px solid var(--line-ink);
}

/* Green fill that rises behind the copy on hover. */
.pillar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--green);
  border-radius: 60% 60% 0 0 / 18% 18% 0 0;
  transform: translateY(101%);
  transition: transform .7s var(--ease-io);
}

.pillar__tag {
  font-family: var(--mono);
  font-size: var(--fs-small);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ochre-deep);
  transition: color .4s;
}

.pillar__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.6rem, 6.4vw, 5.2rem);
  letter-spacing: -.045em;
  line-height: .95;
  color: var(--slate);
  transition: color .4s;
}

.pillar__text {
  max-width: 34ch;
  color: var(--slate);
  transition: color .4s;
}

@media (min-width: 861px) {
  .pillar:hover::before,
  .pillar:focus-within::before {
    transform: none;
    border-radius: 0;
  }

  .pillar:hover .pillar__title,
  .pillar:focus-within .pillar__title {
    color: var(--starch);
  }

  .pillar:hover .pillar__text,
  .pillar:focus-within .pillar__text {
    color: var(--mist);
  }

  .pillar:hover .pillar__tag,
  .pillar:focus-within .pillar__tag {
    color: var(--ochre);
  }
}

@media (max-width: 860px) {
  .pillars {
    grid-template-columns: minmax(0, 1fr);
  }

  .pillar {
    padding-inline: 0;
  }

  .pillar + .pillar {
    border-left: 0;
    border-top: 1.5px solid var(--line-ink);
  }
}

/* ---------- Product explorer ---------- */

.explorer {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(20px, 3.4vw, 52px);
  align-items: start;
}

.explorer__tabs {
  display: grid;
  border-top: 1px solid var(--line);
}

.explorer__tab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 15px 4px 15px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: -.01em;
  text-align: left;
  color: var(--mist);
  transition: color .25s, padding .45s var(--ease);
}

/* Droplet marker on the selected tab */
.explorer__tab::after {
  content: "";
  flex: none;
  width: 10px;
  height: 14px;
  background: var(--ochre);
  clip-path: path("M5 0 C7 3.3 10 5.5 10 9 A5 5 0 1 1 0 9 C0 5.5 3 3.3 5 0Z");
  transform: scale(0);
  transition: transform .45s var(--ease);
}

.explorer__tab:hover {
  color: var(--starch);
}

.explorer__tab[aria-selected="true"] {
  padding-left: 16px;
  color: var(--starch);
}

.explorer__tab[aria-selected="true"]::after {
  transform: scale(1);
}

.explorer__panel {
  position: relative;
  overflow: hidden;
  min-height: 430px;
  padding: clamp(22px, 3.2vw, 44px);
  border-radius: var(--radius);
  background: var(--green);
}

.explorer__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: var(--fs-small);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ochre);
}

.explorer__title {
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -.03em;
}

.explorer__desc {
  margin-top: 10px;
  max-width: 48ch;
  color: var(--mist);
}

.explorer__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  column-gap: 34px;
  margin-top: 26px;
  border-top: 1px solid var(--line);
}

.explorer__items li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  animation: item-in .7s var(--ease) both;
  animation-delay: calc(var(--index) * 40ms);
}

.explorer__items span {
  font-family: var(--mono);
  font-size: var(--fs-small);
  letter-spacing: .05em;
  white-space: nowrap;
  color: var(--ochre);
}

.explorer__used {
  margin-top: 24px;
  font-size: .96rem;
  color: var(--mist);
}

.explorer__used b {
  display: block;
  margin-bottom: 4px;
  font-family: var(--mono);
  font-weight: 400;
  font-size: var(--fs-small);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ochre);
}

@keyframes item-in {
  from { transform: translateX(26px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* Narrow screens: the tab column becomes a row of pills above the panel. */
@media (max-width: 860px) {
  .explorer {
    grid-template-columns: minmax(0, 1fr);
  }

  .explorer__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-top: 0;
  }

  .explorer__tab {
    width: auto;
    padding: 9px 15px;
    border: 0;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1.5px var(--line);
    font-size: .95rem;
  }

  .explorer__tab::after {
    display: none;
  }

  .explorer__tab[aria-selected="true"] {
    padding-left: 15px;
    background: var(--ochre);
    color: var(--forest);
    box-shadow: none;
  }

  .explorer__panel {
    min-height: 0;
  }
}

/* ---------- Blend mixer ---------- */

.mixer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}

.mixer__options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.mixer__option {
  padding: 11px 18px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--line);
  font-family: var(--display);
  font-weight: 600;
  font-size: .98rem;
  color: var(--mist);
  transition: background-color .3s, color .3s, box-shadow .3s, transform .35s var(--ease);
}

.mixer__option:hover {
  box-shadow: inset 0 0 0 1.5px var(--ochre);
  color: var(--starch);
  transform: translateY(-2px);
}

.mixer__option[aria-pressed="true"] {
  background: var(--ochre);
  box-shadow: none;
  color: var(--forest);
}

.mixer__vat {
  display: grid;
  gap: 22px;
  padding: clamp(20px, 3vw, 40px);
  border-radius: var(--radius);
  background: var(--forest);
}

.mixer__vat-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
  font-size: var(--fs-small);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ochre);
}

.mixer__vat h3 {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -.025em;
}

.mixer__vat p {
  color: var(--mist);
}

.mixer__vat .fine-print {
  margin-top: 0;
}

/* Components drop in one by one... */
.mixer__parts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mixer__parts li {
  padding: 8px 14px;
  border-radius: 10px;
  font-size: .95rem;
  font-weight: 500;
  color: var(--forest);
  animation: drop-in .8s var(--ease) both;
  animation-delay: calc(var(--index) * 90ms);
}

/* ...then pour into the pipe as matching segments... */
.mixer__pipe {
  position: relative;
  overflow: hidden;
  display: flex;
  height: 54px;
  border-radius: 999px;
  background: var(--green);
}

.mixer__pipe span {
  display: block;
  flex: 1 1 0;
  transform-origin: 0 50%;
  animation: pour .9s var(--ease-io) both;
  animation-delay: calc(350ms + var(--index) * 110ms);
}

.mixer__parts li:nth-child(4n + 1),
.mixer__pipe span:nth-child(4n + 1) {
  background: var(--starch);
}

.mixer__parts li:nth-child(4n + 2),
.mixer__pipe span:nth-child(4n + 2) {
  background: var(--ochre);
}

.mixer__parts li:nth-child(4n + 3),
.mixer__pipe span:nth-child(4n + 3) {
  background: var(--mint);
}

.mixer__parts li:nth-child(4n + 4),
.mixer__pipe span:nth-child(4n + 4) {
  background: var(--sand);
}

/* ...and finally the segments give way to one striped, moving blend. */
.mixer__pipe::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg, var(--ochre) 0 9px, var(--sand) 9px 15px, var(--starch) 15px 22px, var(--mint) 22px 27px);
  background-size: 200% 100%;
  opacity: 0;
  animation: blend-in 1s ease both 1.5s, blend-slide 9s linear infinite 1.5s;
}

.mixer__output {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--display);
  font-weight: 600;
}

.mixer__output .icon {
  flex: none;
  color: var(--ochre);
}

@keyframes drop-in {
  from { transform: translateY(-46px) rotate(-6deg); opacity: 0; }
  60% { transform: translateY(5px) rotate(1deg); opacity: 1; }
  to { transform: none; opacity: 1; }
}

@keyframes pour {
  from { transform: scaleX(0); }
  to { transform: none; }
}

@keyframes blend-in {
  to { opacity: 1; }
}

@keyframes blend-slide {
  to { background-position: -54px 0; }
}

@media (max-width: 860px) {
  .mixer {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mixer__pipe::after {
    opacity: 1;
  }
}

/* ---------- Industries ---------- */

.industries {
  border-top: 1.5px solid var(--ink);
}

.industries li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: baseline;
  padding: clamp(14px, 2vw, 22px) 0;
  border-bottom: 1.5px solid var(--line-ink);
  transition: padding .5s var(--ease), color .3s;
}

/* Ochre underline that draws across on hover */
.industries li::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1.5px;
  height: 4px;
  border-radius: 4px;
  background: var(--ochre);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .7s var(--ease-io);
}

.industries li:hover {
  padding-left: 18px;
}

.industries li:hover::before {
  transform: none;
}

.industries h3 {
  font-size: clamp(1.4rem, 3.4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
}

.industries p {
  max-width: 46ch;
  color: var(--slate);
}

@media (max-width: 860px) {
  .industries li {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}

/* ---------- Process ----------
 * Steps zig-zag left and right; process-ribbon.js draws the line that joins
 * their numbered nodes and fills it as the page scrolls.
 */

.process {
  position: relative;
  display: grid;
  gap: clamp(34px, 6vw, 70px);
}

.process__line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.process__line path {
  fill: none;
  stroke-width: 14;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.process__track {
  stroke: var(--line);
}

.process__fill {
  stroke: var(--ochre);
}

/* The list only groups the steps; they lay out on the .process grid. */
.process__steps {
  display: contents;
}

.process__step {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: clamp(16px, 3vw, 30px);
  align-items: start;
  width: min(100%, 560px);
}

.process__step:nth-child(odd) {
  justify-self: start;
}

.process__step:nth-child(even) {
  justify-self: end;
}

.process__node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--forest);
  box-shadow: inset 0 0 0 2px var(--leaf);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--mist);
  transition: background-color .5s, color .5s, box-shadow .5s, transform .6s var(--ease);
}

.process__step.is-active .process__node {
  background: var(--ochre);
  box-shadow: none;
  color: var(--forest);
  transform: scale(1.1);
}

.process__step h3 {
  margin-top: 12px;
}

.process__step p {
  margin-top: 8px;
  color: var(--mist);
}

@media (max-width: 860px) {
  .process__step:nth-child(even) {
    justify-self: start;
  }
}

/* ---------- Quality ---------- */

.quality {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}

.quality__checks {
  display: grid;
}

.quality__checks li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1.5px solid var(--line-ink);
}

.quality__checks li:first-child {
  border-top: 1.5px solid var(--ink);
}

.quality__checks .icon {
  margin-top: 3px;
  color: var(--ochre-deep);
}

.quality__checks p {
  margin-top: 4px;
  color: var(--slate);
}

.quality__subhead {
  margin: 26px 0 4px;
  font-family: var(--mono);
  font-size: var(--fs-small);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ochre-deep);
}

.quality__subhead:first-child {
  margin-top: 0;
}

/* Document cards sit slightly askew and straighten on hover. */
.quality__docs {
  position: relative;
  display: grid;
  gap: 14px;
}

.quality__doc {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  border-radius: 18px;
  background: var(--green);
  color: var(--starch);
  transform: rotate(var(--rotation, 0deg));
  transition: transform .6s var(--ease);
}

.quality__doc:nth-child(1) { --rotation: -1.6deg; }
.quality__doc:nth-child(2) { --rotation: 1.1deg; }
.quality__doc:nth-child(3) { --rotation: -.6deg; }

.quality__docs:hover .quality__doc {
  transform: none;
}

.quality__doc b {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.2rem;
}

.quality__doc span {
  font-family: var(--mono);
  font-size: var(--fs-small);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ochre);
}

.quality__requests {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.quality__requests li {
  padding: 7px 14px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--line-ink);
  font-size: .92rem;
}

@media (max-width: 860px) {
  .quality {
    grid-template-columns: minmax(0, 1fr);
  }
}