/* ============================================================
   interactions.css — additive micro-interaction layer.
   Enhances EXISTING classes only; no markup is rewritten.
   Load AFTER each page's own <style>. Everything here is
   disabled under prefers-reduced-motion (accessibility).
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

  /* ── Card hover lift (pointer devices only; transform/opacity = 60fps) ──
     Declared BEFORE the press rule so :active scale wins on tap.        */
  @media (hover: hover) {
    .shop-card, .bike-card, .fleet-item, .offer, .review-card {
      transition: transform 150ms cubic-bezier(.2,0,0,1), box-shadow 150ms ease;
    }
    .shop-card:hover, .bike-card:hover, .fleet-item:hover, .offer:hover {
      transform: translateY(-2px);
    }
  }

  /* ── Tactile press: scale 0.96 on tap (make-interfaces skill rule #12) ── */
  .btn-primary, .btn-submit, .btn-book, .bb-btn, .sticky-cta, .btn-search,
  .filter-chip, .shop-chip, .fleet-item, .bk-btn, .home-link, .icon-btn,
  .auth-tab, .tab, .see-all, .ctx-change {
    transition-property: transform, box-shadow, background-color, opacity, border-color;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(.2, 0, 0, 1);
  }
  .btn-primary:active, .btn-submit:active, .btn-book:active, .bb-btn:active,
  .sticky-cta:active, .btn-search:active, .filter-chip:active, .shop-chip:active,
  .fleet-item:active, .bk-btn:active, .home-link:active, .auth-tab:active,
  .see-all:active, .ctx-change:active {
    transform: scale(.96);
  }

  /* ── Status pills / stamps pop-in on first paint ── */
  .pill, .stamp, .badge-avail, .badge-soon, .badge-booked, .tag, .meta-chip {
    animation: rz-pop .28s cubic-bezier(.2, 0, 0, 1) both;
  }
  @keyframes rz-pop {
    from { opacity: 0; transform: scale(.8); }
    to   { opacity: 1; transform: scale(1); }
  }

  /* ── Dynamically-rendered cards rise + fade, staggered via --i ── */
  .rz-enter {
    animation: rz-rise .4s cubic-bezier(.2, 0, 0, 1) both;
    animation-delay: calc(var(--i, 0) * 55ms);
  }
  @keyframes rz-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }

  /* ── Primary CTA: one-time attention pulse on first render (crimson) ── */
  .btn-primary, .sticky-cta, .bb-btn, .btn-search {
    animation: rz-cta-glow 2.2s ease-out 1;
  }
  @keyframes rz-cta-glow {
    0%   { box-shadow: 0 8px 18px -10px rgba(176,40,41,.6), 0 0 0 0  rgba(176,40,41,.40); }
    45%  { box-shadow: 0 8px 18px -10px rgba(176,40,41,.6), 0 0 0 9px rgba(176,40,41,0);   }
    100% { box-shadow: 0 8px 18px -10px rgba(176,40,41,.6), 0 0 0 0  rgba(176,40,41,0);   }
  }

  /* ── Active nav-tab spring bounce (icon only — keeps the crimson dot) ── */
  .tab.active .msym { animation: rz-bounce .4s cubic-bezier(.2, 1.3, .4, 1) both; }
  @keyframes rz-bounce {
    0%   { transform: scale(.7); }
    60%  { transform: scale(1.15); }
    100% { transform: scale(1); }
  }

  /* ── Ripple span (injected by interactions.js) ── */
  .rz-ripple {
    position: absolute; border-radius: 999px; transform: scale(0);
    background: currentColor; opacity: .25; pointer-events: none;
    animation: rz-ripple .5s ease-out forwards;
  }
  @keyframes rz-ripple { to { transform: scale(2.4); opacity: 0; } }

  /* ── Modal / sheet close (open slideUp already lives in each page) ── */
  .modal-sheet.rz-closing   { animation: rz-sheet-out .2s ease forwards; }
  .modal-overlay.rz-closing { animation: rz-fade-out  .2s ease forwards; }
  @keyframes rz-sheet-out { from { transform: none; opacity: 1; } to { transform: translateY(14px); opacity: 0; } }
  @keyframes rz-fade-out  { to { opacity: 0; } }
}

/* Ripple containment — ONLY rectangular solid CTAs (never the nav pill / dot,
   never round icon buttons). Safe: these buttons have no absolutely-
   positioned children that overflow needs to reveal. */
.btn-primary, .btn-submit, .btn-book, .bb-btn, .sticky-cta, .btn-search, .home-link {
  position: relative;
  overflow: hidden;
}