/* Brief entrance gestures; landing.js controls the illustration loops.
   All content is visible without animation or JavaScript. */
.hero-art > figcaption {
  display: block;
}

.illustration-caption-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.illustration-motion-toggle {
  display: block;
  width: max-content;
  max-width: 100%;
  min-height: 44px;
  margin: 4px auto 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.illustration-motion-toggle[hidden] {
  display: none;
}

.illustration-motion-toggle:hover {
  color: var(--forest);
}

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > .eyebrow,
  .hero-copy > h1,
  .hero-description,
  .hero-actions,
  .demo-note,
  .test-note,
  .art-register,
  .hero-art > img,
  .hero-art > figcaption {
    animation: haven-arrive 760ms cubic-bezier(.22, 1, .36, 1) backwards;
  }

  .hero-copy > h1 { animation-delay: 90ms; }
  .hero-description { animation-delay: 190ms; }
  .hero-actions { animation-delay: 270ms; }
  .demo-note { animation-delay: 310ms; }
  .test-note { animation-delay: 330ms; }
  .art-register { animation-delay: 140ms; }
  .hero-art > img { animation-duration: 1000ms; animation-delay: 210ms; }
  .hero-art > figcaption { animation-delay: 420ms; }

  .hero-you::after {
    transform-origin: left center;
    animation: haven-underline 850ms cubic-bezier(.22, 1, .36, 1) 450ms backwards;
  }

  .hero-art::before {
    animation: haven-shelter 1200ms cubic-bezier(.22, 1, .36, 1) 120ms backwards;
  }

  .button,
  .text-link > span,
  .button > span,
  .brand-symbol > span,
  .feature-arrow {
    transition: transform 240ms cubic-bezier(.22, 1, .36, 1), color 180ms, opacity 180ms, background 180ms;
  }

  .button:hover > span,
  .button:focus-visible > span {
    transform: translate(3px, -3px);
  }

  .text-link[href^="#"]:hover > span,
  .text-link[href^="#"]:focus-visible > span {
    transform: translateY(3px);
  }

  .text-link:not([href^="#"]):hover > span,
  .text-link:not([href^="#"]):focus-visible > span {
    transform: translate(2px, -2px);
  }

  .brand-symbol > span { display: inline-block; }
  .brand:hover .brand-symbol > span { transform: translateY(-2px) scale(1.1); }
  .feature-arrow { transform: translate(-4px, 4px); }
  .feature-tab:hover .feature-arrow,
  .feature-tab[aria-selected="true"] .feature-arrow { transform: none; }

  details[open] > div {
    animation: haven-answer 280ms ease-out;
  }

  .hero-actions:focus-within,
  details > div:focus-within {
    animation: none;
  }

}

@keyframes haven-arrive {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes haven-underline {
  from { transform: rotate(-3deg) scaleX(0); }
  to { transform: rotate(-3deg) scaleX(1); }
}

@keyframes haven-shelter {
  from { opacity: 0; transform: rotate(-5deg) scale(.97); }
  to { opacity: 1; transform: rotate(-3deg) scale(1); }
}

@keyframes haven-answer {
  from { opacity: .2; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .button:hover { transform: none; }
}

@media print {
  .illustration-motion-toggle { display: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}