/* bizzie-motion.css
 *
 * Cross-cutting motion, feedback and accessibility rules.
 *
 * Every page on this site carries its own inline <style> block, so there was
 * nowhere to express things that should hold everywhere. This file is that
 * place. Load it AFTER the page's own <style> so these rules win on ties.
 *
 * ---------------------------------------------------------------------------
 * 1. REDUCED MOTION
 * ---------------------------------------------------------------------------
 * Reduced motion does not mean "no feedback" — it means a gentler,
 * non-vestibular equivalent. Movement is the trigger; colour and opacity are
 * not. So here we remove travel and keep everything that aids comprehension.
 *
 * Note the deliberate narrowness: a blanket `*:hover { transform: none }`
 * would break the many elements that use transform for *positioning* rather
 * than motion (.gallery-arrow, .lightbox-nav, .most-popular-pill, .toast all
 * rely on translate to centre themselves). Only the hover-lift selectors are
 * targeted.
 */

@media (prefers-reduced-motion: reduce) {

  /* Keep transitions, but only on properties that don't imply movement.
     Colour/shadow feedback still works; the travel is gone. */
  *, *::before, *::after {
    transition-property: opacity, color, background-color, border-color, box-shadow, fill, stroke !important;
    transition-duration: 120ms !important;
    scroll-behavior: auto !important;
  }

  /* The hover "lift" on cards — the main vestibular pattern on the site.
     Border and shadow still change, so the affordance survives. */
  .boost-tile:hover,
  .broker-card:hover,
  .category-card:hover,
  .listing-card:hover,
  .listing-row:hover,
  .plan-card:hover,
  .post-card:hover,
  .saved-card:hover,
  .stat-card:hover,
  .story-card:hover,
  .tier:hover {
    transform: none !important;
  }

  /* Decorative loading loops become static. Skeletons still read as
     placeholders through their fill colour alone. */
  .skeleton,
  [class*="shimmer"] {
    animation: none !important;
  }

  /* Spinners are deliberately left running: they are functional status, not
     decoration, and a frozen spinner reads as a hung page. They're small,
     localised, and well above the ~0.2Hz band that triggers discomfort. */
}

/*
 * ---------------------------------------------------------------------------
 * 2. PRESS FEEDBACK
 * ---------------------------------------------------------------------------
 * The site had 152 :hover rules and not one :active. Hover doesn't exist on
 * touch, which is where most marketplace browsing happens — so tapping a
 * button or a listing card produced no acknowledgement at all until the next
 * page painted. Feedback belongs on pointer-DOWN, not on release.
 *
 * The scale values are deliberately small. A button is a small target, so it
 * takes a firmer press (0.97); a whole listing card is large, and the same
 * ratio on a big surface reads as the page lurching, so it barely moves
 * (0.995). Duration is short enough to feel like a direct consequence of the
 * finger rather than an animation that plays afterwards.
 */

/* Easing. 142 of the site's 143 transitions specified no timing function at
 * all, so they fell back to CSS's default `ease` — a symmetric curve that
 * accelerates into the change and decelerates out of it.
 *
 * A hover/press state is an *entrance*: it should leave immediately when the
 * user acts and settle gently, which is `ease-out`. Symmetric easing makes the
 * response feel like it hesitates before starting.
 *
 * Durations are deliberately left alone. They're near-uniformly 0.2s, which
 * reads as undifferentiated, but a single house value for state feedback is
 * defensible and rewriting 140 of them would be churn without a real gain.
 * The one place a distinct value earns its place is the press itself (80ms,
 * below), which has to feel like a consequence of the finger rather than an
 * animation that plays afterwards.
 */
.btn, .btn-primary, .btn-ghost, .btn-sm, .btn-primary-sm, .btn-ghost-sm,
.btn-green-sm, .btn-danger, .btn-signout, .btn-nav, .btn-nav-ghost,
.btn-nav-primary, .site-nav-ghost, .site-nav-primary, .search-btn, .plan-btn,
.toggle-btn, .filter-chip, .explore-pill, .spec-chip, .hiw-tab, .hero-tab,
.sidebar-item, .enquire-btn, .listing-save, .nav-hamburger,
.listing-card, .category-card, .stat-card, .why-card, .broker-card,
.saved-card, .story-card, .post-card, .listing-row, .boost-tile,
.plan-card, .tier,
.nav-links a, .site-nav-links a, .related-links a, .guides-links a,
.feature-link, .see-all {
  transition-timing-function: ease-out;
}

/* Press targets must be able to animate transform/opacity in BOTH directions —
   down on press and back up on release. Some elements declare a narrow base
   transition (e.g. .search-btn is `transition: background 0.2s`), which would
   make the press snap. Ensure the properties are present; duration is left to
   whatever the page already set. */
.btn, .btn-primary, .btn-ghost, .btn-sm, .btn-primary-sm, .btn-ghost-sm,
.btn-green-sm, .btn-danger, .btn-signout, .btn-nav, .btn-nav-ghost,
.btn-nav-primary, .site-nav-ghost, .site-nav-primary, .search-btn, .plan-btn,
.toggle-btn, .filter-chip, .explore-pill, .spec-chip, .hiw-tab, .hero-tab,
.sidebar-item, .enquire-btn, .listing-save, .nav-hamburger,
.listing-card, .category-card, .stat-card, .why-card, .broker-card,
.saved-card, .story-card, .post-card, .listing-row, .boost-tile,
.plan-card, .tier,
.nav-links a, .site-nav-links a, .related-links a, .guides-links a,
.feature-link, .see-all {
  transition-property: background-color, border-color, color, box-shadow, transform, opacity;
}

.btn:active,
.btn-primary:active,
.btn-ghost:active,
.btn-sm:active,
.btn-primary-sm:active,
.btn-ghost-sm:active,
.btn-green-sm:active,
.btn-danger:active,
.btn-signout:active,
.btn-nav:active,
.btn-nav-ghost:active,
.btn-nav-primary:active,
.site-nav-ghost:active,
.site-nav-primary:active,
.search-btn:active,
.plan-btn:active,
.toggle-btn:active,
.filter-chip:active,
.explore-pill:active,
.spec-chip:active,
.hiw-tab:active,
.hero-tab:active,
.sidebar-item:active,
.enquire-btn:active,
.listing-save:active,
.nav-hamburger:active {
  transform: scale(0.97);
  transition-duration: 80ms;
}

/* Large surfaces: the same ratio would read as the whole page shifting. */
.listing-card:active,
.category-card:active,
.stat-card:active,
.why-card:active,
.broker-card:active,
.saved-card:active,
.story-card:active,
.post-card:active,
.listing-row:active,
.boost-tile:active,
.plan-card:active,
.tier:active {
  transform: scale(0.995);
  transition-duration: 80ms;
}

/* Text links get a tonal press instead of a scale — scaling inline text
   reflows its neighbours and looks broken. */
.nav-links a:active,
.site-nav-links a:active,
.related-links a:active,
.guides-links a:active,
.feature-link:active,
.see-all:active {
  opacity: 0.6;
  transition-duration: 80ms;
}

@media (prefers-reduced-motion: reduce) {
  /* Keep the acknowledgement, drop the movement. */
  .btn:active, .btn-primary:active, .btn-ghost:active, .btn-sm:active,
  .btn-primary-sm:active, .btn-ghost-sm:active, .btn-green-sm:active,
  .btn-danger:active, .btn-signout:active, .btn-nav:active,
  .btn-nav-ghost:active, .btn-nav-primary:active, .site-nav-ghost:active,
  .site-nav-primary:active, .search-btn:active, .plan-btn:active,
  .toggle-btn:active, .filter-chip:active, .explore-pill:active,
  .spec-chip:active, .hiw-tab:active, .hero-tab:active,
  .sidebar-item:active, .enquire-btn:active, .listing-save:active,
  .nav-hamburger:active,
  .listing-card:active, .category-card:active, .stat-card:active,
  .why-card:active, .broker-card:active, .saved-card:active,
  .story-card:active, .post-card:active, .listing-row:active,
  .boost-tile:active, .plan-card:active, .tier:active {
    transform: none !important;
    opacity: 0.75;
  }
}

/*
 * ---------------------------------------------------------------------------
 * 3. REDUCED TRANSPARENCY / INCREASED CONTRAST
 * ---------------------------------------------------------------------------
 * Translucent surfaces become frostier and more solid; blur is dropped.
 */

@media (prefers-reduced-transparency: reduce) {
  .modal-overlay,
  .gallery-count-badge,
  .gallery-arrow,
  .hero-badge {
    backdrop-filter: none !important;
  }
  .modal-overlay { background: rgba(15, 13, 30, 0.85) !important; }
  .gallery-count-badge { background: rgba(0, 0, 0, 0.9) !important; }
}

@media (prefers-contrast: more) {
  .listing-card,
  .category-card,
  .stat-card,
  .why-card,
  .broker-card,
  .plan-card,
  .tier {
    border-color: var(--text-muted, #5c5875) !important;
  }
}