/* Motion follows the visitor: a soft arrival, responsive controls, flowing scenes. */
:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.22, 1.35, .36, 1);
}
.hero { overflow: hidden; }
.hero-image { transform: translate3d(0, var(--photo-y, 0px), 0) scale(1.1); transition: none; }
.editorial-photo { overflow: hidden; }
.editorial-photo img { transform: translate3d(0, var(--photo-y, 0px), 0) scale(1.1); }
.enhanced .hero h1 { animation: hero-arrive 1000ms var(--ease-out) 80ms both; }
.enhanced .hero-sub { animation: hero-arrive 1000ms var(--ease-out) 180ms both; }
.enhanced .hero-actions, .enhanced .hero-note { animation: hero-arrive 1000ms var(--ease-out) 270ms both; }
@keyframes hero-arrive {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
.btn { transition: background-color 220ms ease, transform 480ms var(--spring); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-3px) scale(1.025); }
}
.btn:active { transform: translateY(1px) scale(.97); }
.text-link { position: relative; border-bottom-color: transparent; }
.text-link:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(.55);
  transform-origin: left;
  transition: transform 420ms var(--spring);
}
.text-link:hover, .text-link:focus-visible { opacity: 1; }
.text-link:hover:after, .text-link:focus-visible:after { transform: scaleX(1); }
.text-link span { transition: transform 360ms var(--spring); }
.text-link:hover span { transform: translateY(3px); }
.faq details { overflow: clip; }
/* Draw the keyboard ring on the clipping container so it stays visible. */
.faq details:has(> summary:focus-visible) {
  outline: 2px solid var(--pine);
  outline-offset: 3px;
}
.faq summary { position: relative; padding-right: 30px; }
.faq summary:before, .faq summary:after {
  content: '';
  position: absolute;
  right: 2px;
  width: 11px;
  height: 1px;
  background: currentColor;
  transition: transform 280ms var(--spring);
}
.faq summary:before { transform: rotate(90deg); }
.faq details[open] summary:before { transform: rotate(0deg); }
.faq details[open] summary:after { content: ''; }
@media (prefers-reduced-motion: reduce) {
  .enhanced .hero h1, .enhanced .hero-sub, .enhanced .hero-actions,
  .enhanced .hero-note { animation: none; }
  .hero-image, .editorial-photo img, .btn:hover, .btn:active { transform: none; }
  *, *:before, *:after { transition: none !important; }
}