/* Calm motion for the website preview; no effect on Instagram exports. */
/* Animate the incoming content; preserve normal document navigation. */
@keyframes calm-enter { from { opacity: 0; translate: 0 5px; } to { opacity: 1; translate: 0 0; } }
.website #web-root > main { animation: calm-enter 360ms ease-out both; }
.website .button, .website .text-link { transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease, translate 180ms ease; }
.website .button > span, .website .text-link > span { display: inline-block; transition: translate 200ms ease; }
.website a:focus-visible, .website button:focus-visible, .website summary:focus-visible { outline: 2px solid var(--terracotta, #A95640); outline-offset: 5px; }
.website .button:focus-visible > span, .website .text-link:focus-visible > span { translate: 2px -2px; }
.website .session-option { transition: border-color 180ms ease, background-color 180ms ease; }
.website .session-option:focus-within { outline: 2px solid var(--forest); outline-offset: 3px; }
.website .review-dialog[open] { animation: calm-enter 240ms ease-out both; }
@media (hover: hover) and (pointer: fine) {
  .website .button:hover { translate: 0 -2px; box-shadow: 0 5px 14px #303A3512; }
  .website .button:hover > span, .website .text-link:hover > span { translate: 3px -3px; }
  .website .topic-grid .art, .website .inner-hero > .art { translate: var(--pointer-x, 0px) var(--pointer-y, 0px); transition: translate 380ms ease-out; }
  .website .photo-mosaic img { transition: filter 300ms ease; }
  .website .photo-mosaic img:hover { filter: brightness(1.035); }
}
@media (prefers-reduced-motion: reduce) {
  .website *, .website *::before, .website *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .website .button, .website .button > span, .website .text-link > span,
  .website .topic-grid .art, .website .inner-hero > .art { translate: none !important; }
}