/* Motion enhances the existing design. Content is visible without JavaScript. */
@keyframes tm-arrive {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
    .tm-motion-pending { opacity: 0; transform: translateY(14px); }
    .tm-motion-enter {
        animation: tm-arrive 640ms cubic-bezier(.2,.7,.2,1) var(--tm-delay, 0ms) both;
    }
    /* No repeating animation, parallax or scroll handlers. */
    .btn > span, .text-link > span {
        display: inline-block;
        transition: transform 220ms ease;
    }
    .btn:is(:hover, :focus-visible) > span { transform: translateX(4px); }
    .text-link:is(:hover, :focus-visible) > span { transform: translateY(3px); }
    .service svg { transition: color 240ms ease, transform 300ms ease; }
    .service:focus-visible { border-color: var(--red); }
    .booking-form input, .booking-form select, .booking-form textarea {
        transition: border-color 180ms ease, box-shadow 180ms ease;
    }
    .booking-form :is(input, select, textarea):focus {
        border-color: var(--red);
        box-shadow: 0 0 0 3px #ef091812;
    }
    .links a:focus-visible:after { width: 100%; }
    @media (hover: hover) and (pointer: fine) {
        .service:is(:hover, :focus-visible) svg { color: #ff3441; transform: translateY(-3px); }
    }
    @media (max-width: 700px) {
        .tm-motion-enter { animation-duration: 440ms; animation-delay: 0ms; }
    }
}

/* Also restore elements if the preference changes while the page is open. */
@media (prefers-reduced-motion: reduce), print {
    .tm-motion-pending, .tm-motion-enter { opacity: 1; transform: none; animation: none; }
}