/* Assurance: what covers an order. A solid crimson statement over three
   cards in a stepped cascade. On wide screens the cards drift at different
   speeds as the section scrolls (assurance.js sets --p), and on entry they
   rise in one after another. */

#assurance {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(3rem, 10vw, 8rem);
  overflow: hidden;
  background: var(--crimson);
  color: #fff;
}

#assurance > h2 {
  max-width: 14ch;
  margin: 0;
  color: #fff;
  font-size: clamp(2.25rem, 5vw, 4rem);
  letter-spacing: -0.04em;
  line-height: 1.02;
}

#assurance > h2 strong {
  color: var(--pinky-orange);
}

#assurance > p {
  max-width: 36ch;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 400;
  line-height: 1.5;
}

#assurance ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  align-items: start;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

#assurance li {
  --speed: 40;
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.75rem;
  min-height: clamp(14rem, 22vw, 18rem);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  overflow: hidden;
  border-radius: 0.5rem;
  background: var(--off-white);
  color: var(--charcoal);
  transition:
    opacity 0.9s var(--ease-out),
    translate 1.1s var(--ease-out);
}

#assurance li:nth-child(2) {
  --speed: 110;
  background: var(--charcoal);
  color: #fff;
}

#assurance li:nth-child(3) {
  --speed: 180;
}

/* A rule along the top edge that draws in with the card. */
#assurance li::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--crimson);
  transform-origin: left;
  transition: scale 1.2s var(--ease-out) 0.4s;
}

#assurance li:nth-child(2)::before {
  background: var(--light-crimson);
}

#assurance li small {
  color: var(--crimson);
}

#assurance li:nth-child(2) small {
  color: var(--pinky-orange);
}

#assurance li h3 {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

#assurance li p {
  color: rgba(var(--charcoal-rgb), 0.78);
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 400;
}

#assurance li:nth-child(2) p {
  color: rgba(255, 255, 255, 0.8);
}

html.js #assurance:not(.is-revealed) li {
  opacity: 0;
  translate: 0 4rem;
}

html.js #assurance:not(.is-revealed) li::before {
  scale: 0 1;
}

#assurance li:nth-child(2),
#assurance li:nth-child(2)::before {
  transition-delay: 0.15s;
}

#assurance li:nth-child(3),
#assurance li:nth-child(3)::before {
  transition-delay: 0.3s;
}

/* The cascade and the drift only make sense side by side. */
@media (min-width: 769px) {
  #assurance li:nth-child(2) {
    margin-top: clamp(2rem, 5vw, 4rem);
  }

  #assurance li:nth-child(3) {
    margin-top: clamp(4rem, 10vw, 8rem);
  }

  html.js #assurance li {
    transform: translateY(calc((var(--p, 0.5) - 0.5) * var(--speed) * -1px));
  }
}

@media (prefers-reduced-motion: reduce) {
  #assurance li,
  #assurance li::before {
    transition: none;
  }
}