/* shared little motion + hover tweaks sitewide */
:root {
    --fx-lift: translateY(-2px);
    --fx-duration: 0.22s;
}

/* stuff nudges up a bit when it scrolls into view */
.fx-reveal {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--fx-duration) ease, transform var(--fx-duration) ease;
}

.fx-reveal.fx-in {
    opacity: 1;
    transform: translateY(0);
}

/* most cards/buttons get a tiny lift on hover */
.pricing-card,
.service-card,
.card-detail,
.faq-item,
.why-card,
.stat-card,
.add-on-item,
.notes-box,
.cta-box,
.cta-not-found,
.btn-primary,
.btn-secondary,
.btn-select,
.btn-book,
.btn-quote,
.btn-submit-booking,
.cat-btn,
.quick-question-btn {
    transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

.pricing-card:hover,
.service-card:hover,
.card-detail:hover,
.faq-item:hover,
.why-card:hover,
.stat-card:hover,
.add-on-item:hover,
.cta-box:hover,
.cta-not-found:hover {
    transform: var(--fx-lift);
}

.faq-item:hover {
    border-color: rgba(255, 59, 59, 0.45) !important;
}

/* if the OS says "less motion", don't annoy people */
@media (prefers-reduced-motion: reduce) {
    .fx-reveal,
    .fx-reveal.fx-in {
        opacity: 1;
        transform: none;
        transition: none;
    }
}