/* ============================================================
   interactions.css - Nimbus ∆P micro-interactions (Phase 3)
   Loaded LAST on every page so it augments existing component
   styles. Purely additive: hover lift, active press, keyboard
   focus rings, card consistency, and motion/no-JS safety.
   Depends on tokens.css.
   ============================================================ */

/* ---- Buttons: damped lift on hover, real press on active ---- */
.btn-blue, .btn-outline, .btn-white,
.nimbus-shop-cta, .nimbus-store-cta {
  transition:
    background var(--dur-fast) var(--ease-out-smooth),
    color var(--dur-fast) var(--ease-out-smooth),
    border-color var(--dur-fast) var(--ease-out-smooth),
    transform var(--dur-fast) var(--ease-out-smooth),
    box-shadow var(--dur-fast) var(--ease-out-smooth);
}

/* Primary (ink) - lift + soft elevation with a faint bronze warmth */
.btn-blue:hover, .nimbus-shop-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(17, 24, 39, 0.20), 0 2px 10px var(--bronze-soft);
}
/* Secondary (outline) - lift + neutral elevation, bronze edge */
.btn-outline:hover, .nimbus-store-cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: var(--bronze);
}
.btn-white:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }

/* Press: settle back down, snappy */
.btn-blue:active, .btn-outline:active, .btn-white:active,
.nimbus-shop-cta:active, .nimbus-store-cta:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
  transition-duration: 70ms;
}

/* ---- Keyboard focus rings (visible only for keyboard, not mouse) ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---- Cards: consistent damped hover (lift + bronze edge) ---- */
.shop-card {
  transition: transform var(--dur-hover) var(--ease-out-smooth),
              box-shadow var(--dur-hover) var(--ease-out-smooth),
              border-color var(--dur-hover) var(--ease-out-smooth);
}
.shop-card:hover { border-color: var(--bronze); }

.workflow-card {
  transition: transform var(--dur-hover) var(--ease-out-smooth),
              box-shadow var(--dur-hover) var(--ease-out-smooth),
              border-color var(--dur-hover) var(--ease-out-smooth);
}
.workflow-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--bronze); }

.app-tile {
  transition: transform var(--dur-hover) var(--ease-out-smooth),
              box-shadow var(--dur-hover) var(--ease-out-smooth);
}
.app-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }

/* Gallery thumbnails - bronze edge on hover */
.pdp-thumb { transition: border-color var(--dur-fast) var(--ease-out-smooth), transform var(--dur-fast) var(--ease-out-smooth); }
.pdp-thumb:hover { border-color: var(--bronze); }

/* ---- Display headings: looser leading so multi-line titles breathe ---- */
.section-heading { line-height: 1.25; }
.pdp h1 { line-height: 1.15; }
h1.font-black, h2.font-black, h3.font-black { line-height: 1.25; }

/* ---- Mobile touch-target comfort (80% of traffic is phones) ---- */
@media (max-width: 600px) {
  .locator-radius-btn { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; }
  .eng-caption { font-size: 10px; }
}

/* ---- No-JS safety: never leave reveal content invisible ---- */
@media (scripting: none) {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .btn-blue, .btn-outline, .btn-white, .nimbus-shop-cta, .nimbus-store-cta,
  .shop-card, .workflow-card, .app-tile, .pdp-thumb { transition: none; }
  .btn-blue:hover, .btn-outline:hover, .btn-white:hover,
  .nimbus-shop-cta:hover, .nimbus-store-cta:hover,
  .workflow-card:hover, .app-tile:hover { transform: none; }
  .reveal { opacity: 1 !important; transform: none !important; }
}