/* Home page hero with the hut line drawing (the one signature animation). */

@layer components {
  .hero {
    display: grid;
    gap: var(--space-7);
    align-items: center;
    padding-block: var(--space-8);
  }

  .hero h1 {
    font-size: var(--step-4);
    line-height: 1.05;
  }

  .hero h1 em {
    font-style: normal;
    color: var(--accent);
  }

  .hero-lead {
    margin-top: var(--space-5);
    color: var(--ink-muted);
    font-size: var(--step-1);
  }

  .hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin-top: var(--space-5);
    padding: 0;
    list-style: none;
    color: var(--ink);
    font-size: var(--step--1);
    font-weight: 500;
  }

  .hero-facts li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .hero-facts li::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--warm);
  }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
  }

  .hero-hut {
    width: 100%;
    max-width: 380px;
    justify-self: center;
    color: var(--ink);
    overflow: visible;
  }

  .hero-hut .hut-wood { fill: var(--tint); stroke: none; }
  /* The cursor in the middle of the wall, exactly as in the mark: same colour and weight as
     the house lines, 36% of the wall width. */
  .hero-hut .hut-cursor { stroke: currentColor; }

  /* Resting state is the finished drawing; keyframes only play the way in. */
  .hero-hut .hut-line {
    stroke-dasharray: 1;
    animation: hut-draw 0.9s var(--ease-in-out) backwards;
  }
  .hero-hut .hut-step-1 { animation-delay: 0.15s; }
  .hero-hut .hut-step-2 { animation-delay: 0.35s; }
  .hero-hut .hut-cursor { animation: hut-appear 0.4s var(--ease-out) 1s backwards; }

  @keyframes hut-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes hut-appear { from { opacity: 0; } to { opacity: 1; } }

  @media (min-width: 64rem) {
    .hero {
      grid-template-columns: 1.4fr 1fr;
      padding-block: var(--space-9);
    }
  }
}