/* ─────────────────────────────────────────────────────────────
   Apple-style motion layer (additive, revertible).
   Loaded after theme CSS. Only adds feedback/materials — never
   changes layout. Everything degrades under reduced-motion.
   ───────────────────────────────────────────────────────────── */

/* 2 + 7. Press feedback on tappable surfaces.
   Instant on press, spring-ish settle back. Compositor-only props. */
.card,
.tcard,
.map-panel-card,
.thm-mc-card,
.region-tile,
.rt-card,
.escape-card {
  transition: transform .12s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease;
  will-change: transform;
}
.card:active,
.tcard:active,
.map-panel-card:active,
.region-tile:active,
.rt-card:active,
.escape-card:active {
  transform: scale(.975);
}
/* keep a pressed card's own inner link from eating the scale */
.card:active { transform: scale(.985); }

/* 4. Map price pins — press + selected feedback */
.thm-price-pin {
  transition: transform .1s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, background-color .18s ease;
  transform-origin: 50% 100%;
}
.thm-price-pin:active { transform: scale(.9); }
.thm-price-pin.is-active {
  transform: scale(1.14);
  z-index: 5;
}

/* 3 + 8. Translucent nav + scroll-edge fade instead of a hard divider.
   Only enhances the scrolled state the theme already toggles (#nav.scrolled). */
#nav.scrolled, #mainNav.scrolled {
  background: rgba(240,243,247,.82);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 1px 0 rgba(16,28,54,.06), 0 10px 30px -18px rgba(16,28,54,.4);
}
@media (prefers-color-scheme: dark) {
  #nav.scrolled { background: rgba(16,20,28,.66); }
}

/* 1. Mobile map sheet — grabber handle + material.
   .thm-sheet goes on the OUTER .thm-mini-card (the draggable element), so
   touch-action lives on the real gesture target — never inside .thm-mc-card. */
.thm-mini-card.thm-sheet {
  touch-action: none;
  will-change: transform;
}
.thm-sheet-grip {
  display: block;
  width: 40px; height: 5px;
  margin: 0 auto 10px;
  border-radius: 3px;
  background: rgba(16,28,54,.22);
}
/* grip + drag-to-dismiss + map close button already handle dismissal,
   so the card's own × is redundant clutter — hide it on the sheet. */
.thm-mini-card.thm-sheet .thm-mini-card-close { display: none; }
/* while a drag is in progress, kill the CSS transition so JS owns the transform */
.thm-mc-dragging { transition: none !important; }

/* 6. FAQ — smoother easing on the theme's existing max-height accordion.
   (Same mechanism, gentler curve — no display/layout change.) */
.faq-a { transition: max-height .4s cubic-bezier(.22,.7,.24,1) !important; }

/* 5. Hero slideshow — soften the crossfade already driven by theme.js */
.hero-slide { transition: opacity 1.1s cubic-bezier(.4,0,.2,1); }

/* ── Accessibility: reduced motion / transparency ── */
@media (prefers-reduced-motion: reduce) {
  .card, .tcard, .map-panel-card, .thm-mc-card, .region-tile, .rt-card,
  .escape-card, .thm-price-pin, .hero-slide {
    transition: opacity .2s ease !important;
    transform: none !important;
  }
  .card:active, .tcard:active, .thm-price-pin:active { transform: none !important; }
  .faq-item .faq-a { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  #nav.scrolled { background: #f7f4ee; -webkit-backdrop-filter: none; backdrop-filter: none; }
  @media (prefers-color-scheme: dark) { #nav.scrolled { background: #10141c; } }
}