/* A short entrance for the landing hero. Keep the script word intact so its letterforms connect. */
.hero-card h1 {
  position: relative;
}

.hero-card h1::after {
  content: '';
  display: block;
  width: min(180px, 48%);
  height: 2px;
  margin: 18px auto 0;
  background: linear-gradient(90deg, transparent, #ffc5df 18%, #fff8f4 50%, #ffc5df 82%, transparent);
  box-shadow: 0 0 15px rgba(255, 202, 226, .8);
}

@media (max-width: 700px) {
  /* The mobile header wraps to two rows and sits over the hero photo. */
  .hero {
    height: auto;
    min-height: 760px;
    max-height: none;
    align-items: flex-start;
    padding: 225px 20px 70px;
  }
}

@media (max-width: 360px) {
  .hero-card h1 .hero-business-name {
    font-size: clamp(62px, 19vw, 70px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-card .seal {
    animation: hero-seal-arrive .8s .12s cubic-bezier(.2,.7,.2,1) both;
  }

  .hero-card h1 .hero-business {
    animation: hero-title-arrive .85s .28s cubic-bezier(.16,1,.3,1) both;
  }

  .hero-card h1 .hero-business-name {
    animation: hero-name-arrive 1.05s .53s cubic-bezier(.16,1,.3,1) both;
  }

  .hero-card h1::after {
    transform-origin: center;
    animation: hero-rule-grow .8s 1.02s cubic-bezier(.16,1,.3,1) both;
  }

  .hero-bottom p {
    animation: hero-copy-arrive .8s .95s cubic-bezier(.2,.7,.2,1) both;
  }

  .hero-bottom .button {
    animation: hero-copy-arrive .8s 1.14s cubic-bezier(.2,.7,.2,1) both;
  }
}

@keyframes hero-seal-arrive {
  from { opacity: 0; transform: translateY(18px) rotate(-28deg) scale(.72); }
  to { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}

@keyframes hero-title-arrive {
  from { opacity: 0; transform: translateY(30px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes hero-name-arrive {
  from { opacity: 0; transform: translateY(36px) scale(.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes hero-rule-grow {
  from { opacity: 0; transform: scaleX(0); }
  to { opacity: 1; transform: scaleX(1); }
}

@keyframes hero-copy-arrive {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}