/* Yinka Akinfenwa — motion. Loaded after site.css; uses its --ease-out token.
   Every motion has a job (see DESIGN.md > Motion) and a reduced-motion variant at the end. */

/* Press feedback: on touch it is the only sign a tap registered (the colour change needs hover).
   Uses the individual `scale` property so it composes with transforms some controls already use. */
.btn-site, .hero-arrow, .hero-more, .hero-pause, .benefit-more, .testimonial-buttons button,
.header-call, .navbar-toggler, .soc-icon, .paginator a {
    transition: background-color .2s, color .2s, scale 160ms var(--ease-out);
}
.btn-site:active, .hero-more:active, .header-call:active, .navbar-toggler:active { scale: .97; }
.hero-arrow:active, .hero-pause:active, .benefit-more:active, .soc-icon:active, .paginator a:active,
.testimonial-buttons button:active:not(:disabled) { scale: .95; }

/* Page-to-page navigation: cross-document View Transition (CSS only; browsers without support
   just navigate instantly). The header stays put, the old page fades out fast, the new one fades up. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-group(site-header) { animation-duration: 0s; }
::view-transition-old(site-header), ::view-transition-new(site-header) { animation: none; }
::view-transition-old(root) { animation: 160ms var(--ease-out) both vt-fade-out; }
::view-transition-new(root) { animation: 260ms var(--ease-out) both vt-fade-up; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-up { from { opacity: 0; transform: translateY(8px); } }
@keyframes vt-fade-in { from { opacity: 0; } }

/* Form messages fade up when they appear (they go from display:none via :empty), so the result of a
   submit is noticed instead of popping in; removal stays instant. */
.form-result, .field-error { transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out); }
@starting-style {
    .form-result, .field-error { opacity: 0; transform: translateY(4px); }
}

/* Desktop "About" dropdown grows out of its tab instead of appearing from nowhere; closing is instant. */
@media (min-width: 1200px) {
    .site-header .dropdown-menu {
        transform-origin: top left;
        transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out);
    }
    @starting-style {
        .site-header .dropdown-menu { opacity: 0; transform: translateY(-4px) scale(.98); }
    }
}

@media (prefers-reduced-motion: reduce) {
    .carousel-item { transition: none !important; }
    ::view-transition-new(root) { animation: 200ms var(--ease-out) both vt-fade-in; }
    /* keep the fades, drop the movement */
    @starting-style {
        .form-result, .field-error, .site-header .dropdown-menu { transform: none; }
    }
    /* gentler, not zero: no movement, a brief dim instead */
    .btn-site:active, .hero-more:active, .header-call:active, .navbar-toggler:active,
    .hero-arrow:active, .hero-pause:active, .benefit-more:active, .soc-icon:active, .paginator a:active,
    .testimonial-buttons button:active:not(:disabled) { scale: none; opacity: .85; }
}