/* Calm motion for the public landing pages. */
.hero {
  overflow: hidden;
  background-color: var(--bg);
  background-image: none;
}

.hero::before {
  content: '';
  position: absolute;
  z-index: -2;
  inset: -3%;
  background-image: linear-gradient(90deg, rgba(25, 14, 37, .3), rgba(25, 14, 37, 0)), var(--hero-image, url('/assets/hero-sharp-v2.webp'));
  background-size: cover;
  background-position: center;
}

.hero-content,
.art-space {
  position: relative;
  z-index: 1;
}

.elements span,
.step-icon {
  transition: transform .35s ease, color .35s ease, border-color .35s ease, text-shadow .35s ease;
}

.elements span:hover {
  transform: translateY(-5px);
  text-shadow: 0 0 20px rgba(238, 211, 160, .5);
}

.steps article:hover .step-icon {
  transform: translateY(-4px);
  border-color: #eed3a0;
  color: #eed3a0;
}

details[open] summary {
  color: var(--gold);
}

@media (max-width: 700px) {
  .hero::before {
    background-image: linear-gradient(#21152f 0%, #21152fed 43%, #21152f80 67%, transparent), var(--hero-image, url('/assets/hero-sharp-v2.webp'));
    background-size: auto 850px;
    background-position: 62% bottom;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero::before {
    animation: landscape-drift 24s ease-in-out infinite alternate;
  }

  .header {
    animation: settle-in .8s ease-out both;
  }

  .hero-content > * {
    animation: rise-in .85s cubic-bezier(.2, .7, .2, 1) both;
  }

  .hero-content > :nth-child(1) { animation-delay: .12s; }
  .hero-content > :nth-child(2) { animation-delay: .25s; }
  .hero-content > :nth-child(3) { animation-delay: .38s; }
  .hero-content > :nth-child(4) { animation-delay: .51s; }
  .hero-content > :nth-child(5) { animation-delay: .64s; }
  .hero-content > :nth-child(6) { animation-delay: .77s; }

  .motion-ready .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
    transition-delay: var(--reveal-delay, 0ms);
  }

  .motion-ready .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  @keyframes landscape-drift {
    from { transform: translate3d(0, 0, 0) scale(1.005); }
    to { transform: translate3d(-.2%, .4%, 0) scale(1.035); }
  }

  @keyframes rise-in {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes settle-in {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .header,
  .hero-content > * {
    animation: none !important;
  }

  .motion-ready .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .elements span,
  .step-icon {
    transition: none;
  }
}