/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE PREMIUM MOTION SYSTEM — Task #1327338
   All-pages micro-interactions, press states, ripple, back-to-top, skeletons,
   checkbox gold, card touch feedback, form gold focus (iOS compat), sticky nav.
   Loads LAST — overrides all prior motion rules.
   Target: 375px (iPhone SE) → 428px (iPhone Pro Max)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   TOKENS
   ───────────────────────────────────────────────────────────────────────── */
:root {
  --mm-gold: #d4af37;
  --mm-gold-light: #f5d77e;
  --mm-gold-glow: rgba(212, 175, 55, 0.3);
  --mm-gold-shimmer-start: rgba(212, 175, 55, 0);
  --mm-gold-shimmer-mid: rgba(212, 175, 55, 0.22);
  --mm-gold-shimmer-end: rgba(212, 175, 55, 0);
  --mm-press-scale: 0.97;
  --mm-card-press-scale: 0.98;
  --mm-ripple-color: rgba(212, 175, 55, 0.35);
  --mm-transition-press: 100ms cubic-bezier(0.4, 0, 0.2, 1);
  --mm-transition-release: 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --mm-transition-hover: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   1. BUTTON MICRO-INTERACTIONS
   All buttons: scale(0.97) on press, gold shimmer on hover
   CTAs: ripple effect on tap
   ═══════════════════════════════════════════════════════════════════════════ */

/* Universal button press state */
button,
[role="button"],
.btn,
a.btn,
input[type="submit"],
input[type="button"],
input[type="reset"],
.sr-btn--primary,
.sr-btn--secondary,
.sr-cta-primary,
.sr-cta-secondary,
.pr-cta--gold,
.pr-cta--blue,
.pr-cta--purple,
[class*="cta-primary"],
[class*="cta-secondary"],
[class*="-btn"],
[class*="btn-"],
.ms-btn {
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transform: translateZ(0); /* Force GPU layer */
  transition:
    transform var(--mm-transition-release),
    box-shadow var(--mm-transition-hover),
    background-color var(--mm-transition-hover) !important;
  will-change: transform;
  cursor: pointer;
}

/* Press: scale down */
button:active,
[role="button"]:active,
.btn:active,
a.btn:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active,
.sr-btn--primary:active,
.sr-btn--secondary:active,
.sr-cta-primary:active,
.sr-cta-secondary:active,
.pr-cta--gold:active,
.pr-cta--blue:active,
.pr-cta--purple:active,
[class*="cta-primary"]:active,
[class*="cta-secondary"]:active,
[class*="-btn"]:active,
[class*="btn-"]:active,
.ms-btn:active {
  transform: scale(var(--mm-press-scale)) !important;
  transition: transform var(--mm-transition-press) !important;
}

/* Gold shimmer overlay on hover (desktop) */
@media (hover: hover) {
  button::after,
  .btn::after,
  a.btn::after,
  .sr-btn--primary::after,
  .sr-cta-primary::after,
  .pr-cta--gold::after,
  [class*="cta-primary"]::after,
  .ms-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      105deg,
      var(--mm-gold-shimmer-start) 0%,
      var(--mm-gold-shimmer-mid) 50%,
      var(--mm-gold-shimmer-end) 100%
    );
    opacity: 0;
    transition: opacity var(--mm-transition-hover);
    pointer-events: none;
    border-radius: inherit;
  }

  button:hover::after,
  .btn:hover::after,
  a.btn:hover::after,
  .sr-btn--primary:hover::after,
  .sr-cta-primary:hover::after,
  .pr-cta--gold:hover::after,
  [class*="cta-primary"]:hover::after,
  .ms-btn:hover::after {
    opacity: 1;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. RIPPLE EFFECT — CTA buttons on tap
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes mm-ripple {
  0% {
    transform: scale(0);
    opacity: 0.6;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

.mm-ripple-el {
  position: absolute;
  border-radius: 50%;
  background: var(--mm-ripple-color);
  pointer-events: none;
  animation: mm-ripple 600ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
  transform-origin: center;
  z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. CARD TOUCH FEEDBACK — scale(0.98) on press
   ═══════════════════════════════════════════════════════════════════════════ */

.sr-card,
.settlement-card,
.card,
[class*="settlement-card"],
[class*="card-item"],
.ms-swipe-card,
.me-settlement-card,
.ms-stack-card {
  transform: translateZ(0);
  transition:
    transform var(--mm-transition-release),
    box-shadow var(--mm-transition-hover);
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}

/* Card press on mobile */
@media (max-width: 900px) {
  .sr-card:active,
  .settlement-card:active,
  [class*="settlement-card"]:active,
  [class*="card-item"]:active {
    transform: scale(var(--mm-card-press-scale)) !important;
    transition: transform var(--mm-transition-press) !important;
  }
}

/* Card hover lift on desktop */
@media (hover: hover) {
  .sr-card:hover,
  .settlement-card:hover,
  [class*="settlement-card"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(212, 175, 55, 0.12) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. FORM INPUT GOLD FOCUS — iOS Safari uses :focus, not :focus-visible
   ═══════════════════════════════════════════════════════════════════════════ */

input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: var(--mm-gold) !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18) !important;
  transition: border-color 150ms ease, box-shadow 150ms ease !important;
}

/* Override any blue focus from browser defaults */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--mm-gold) !important;
  outline-offset: 2px !important;
  border-color: var(--mm-gold) !important;
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.15) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. BACK-TO-TOP FAB — appears after 300px scroll, gold design
   ═══════════════════════════════════════════════════════════════════════════ */

.sr-back-to-top-v2 {
  /* Layout */
  position: fixed;
  bottom: 84px; /* above mobile nav */
  right: 20px;
  z-index: 9000;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  padding: 0;

  /* Gold design */
  background: linear-gradient(135deg, #d4af37 0%, #b8962e 100%);
  color: #ffffff !important;
  box-shadow:
    0 4px 12px rgba(212, 175, 55, 0.45),
    0 2px 4px rgba(0, 0, 0, 0.15);

  /* Hidden by default — show when .visible added by JS */
  opacity: 0;
  transform: translateY(16px) scale(0.8);
  pointer-events: none;
  transition:
    opacity 250ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Center arrow */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  -webkit-tap-highlight-color: transparent;
}

.sr-back-to-top-v2.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Override inline font styles for the icon */
.sr-back-to-top-v2 span[aria-hidden] {
  color: #ffffff !important;
  font-size: 18px !important;
  line-height: 1 !important;
  display: block !important;
}

/* Press state */
.sr-back-to-top-v2:active {
  transform: scale(0.92) !important;
  transition: transform 100ms ease !important;
}

/* Pulse ring animation */
.sr-back-to-top-v2::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(212, 175, 55, 0.4);
  opacity: 0;
  animation: mm-back-to-top-pulse 2s ease-in-out infinite;
}

.sr-back-to-top-v2.visible::before {
  opacity: 1;
}

@keyframes mm-back-to-top-pulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.15); opacity: 0; }
}

/* On pages with mobile nav, position above it */
body.has-mobile-nav .sr-back-to-top-v2 {
  bottom: calc(64px + 12px + env(safe-area-inset-bottom, 0px));
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. GOLD SKELETON SHIMMER — settlement cards, detail, pricing
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes mm-gold-shimmer {
  0% { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}

/* Gold shimmer class for new skeletons */
.mm-skeleton,
.sr-skeleton-gold {
  background: linear-gradient(
    90deg,
    #f9f3e0 0%,
    #f5edd0 20%,
    #fef9ed 40%,
    #f5edd0 60%,
    #f9f3e0 80%
  );
  background-size: 1200px 100%;
  animation: mm-gold-shimmer 2s ease-in-out infinite;
  border-radius: 8px;
}

/* Override the grey skeleton shimmer on settlement card loading */
.ms-skeleton-hero,
.ms-skeleton-line {
  background: linear-gradient(
    90deg,
    #f3edd8 25%,
    #faf5e8 50%,
    #f3edd8 75%
  ) !important;
  background-size: 800px 100% !important;
  animation: mm-gold-shimmer 1.8s ease-in-out infinite !important;
}

/* Settlement card skeleton — gold variant */
.sr-skeleton,
.skeleton-loading {
  background: linear-gradient(
    90deg,
    #f3edd8 25%,
    #faf5e8 50%,
    #f3edd8 75%
  ) !important;
  background-size: 800px 100% !important;
  animation: mm-gold-shimmer 1.8s ease-in-out infinite !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. CHECKBOX — gold checkmark animates in
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes mm-check-draw {
  0% { stroke-dashoffset: 24; opacity: 0; }
  60% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

/* Custom checkbox wrapper — opt-in with .mm-check class */
.mm-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mm-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  min-width: 22px;
  border: 2px solid #d1d5db;
  border-radius: 5px;
  background: #ffffff;
  cursor: pointer;
  position: relative;
  transition:
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease;
  flex-shrink: 0;
}

.mm-check input[type="checkbox"]:checked {
  border-color: var(--mm-gold) !important;
  background: var(--mm-gold) !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2) !important;
}

/* SVG checkmark via background — animates via clip-path */
.mm-check input[type="checkbox"]::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 11px;
  height: 7px;
  border-left: 2.5px solid #0f172a;
  border-bottom: 2.5px solid #0f172a;
  transform: rotate(-45deg) scale(0);
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mm-check input[type="checkbox"]:checked::after {
  transform: rotate(-45deg) scale(1);
}

/* Standard checkbox (non .mm-check) — gold accent */
input[type="checkbox"]:checked {
  accent-color: var(--mm-gold);
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. PAGE TRANSITIONS — fade-in 200ms on load
   Already handled by sr-page-entering/sr-page-in in inline CSS,
   but here we ensure the class is applied and the transition is smooth.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Ensure page transition works on all navigation */
html.sr-page-entering {
  opacity: 0 !important;
}

html.sr-page-in {
  transition: opacity 200ms ease-out !important;
  opacity: 1 !important;
}

/* Settlement detail content fade-in (from invisible) */
.sr-settlement-detail,
.settlement-detail-content,
[class*="settlement-detail"] {
  animation: mm-fade-up 300ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes mm-fade-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. STICKY HEADER — no layout shift on scroll
   ═══════════════════════════════════════════════════════════════════════════ */

header,
.sr-header,
#srHeader,
[id*="header"],
[class*="site-header"],
nav[role="navigation"] {
  position: sticky;
  top: 0;
  z-index: 1000;
  /* Prevent CLS — use will-change only if actively animating */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Scroll shadow appears as user scrolls */
.header-scrolled header,
.header-scrolled .sr-header,
body.scrolled header {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. NAVIGATION UNDERLINE — slide from left on hover/focus
   Augments existing rule in premium-motion-design-1320163.css with
   focus state (keyboard navigation) and mobile improvements.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Ensure focus state triggers underline (keyboard nav) */
.sr-nav-link:focus::after,
.nav-link:focus::after,
header nav a:focus::after {
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. RADAR SETTLEMENT PULSE — subtle pulse on settlement amounts
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes mm-amount-pulse {
  0%, 100% {
    text-shadow: 0 0 0 rgba(212, 175, 55, 0);
  }
  50% {
    text-shadow: 0 0 12px rgba(212, 175, 55, 0.4);
  }
}

/* Pulse when settlement amount enters viewport (IntersectionObserver adds .mm-pulse-active) */
.sr-settlement-amount.mm-pulse-active,
.settlement-payout.mm-pulse-active,
[class*="payout-amount"].mm-pulse-active,
[class*="settlement-amount"].mm-pulse-active {
  animation: mm-amount-pulse 2s ease-in-out 3;
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. SWIPE CARD MOMENTUM — spring physics classes (used by JS)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Class added by JS during spring-back animation */
.ms-swipe-card.is-returning,
.me-settlement-card.is-returning {
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Card being actively dragged — no transition */
.ms-swipe-card.is-dragging,
.me-settlement-card.is-dragging {
  transition: none !important;
  will-change: transform;
  cursor: grabbing;
}

/* ═══════════════════════════════════════════════════════════════════════════
   13. PULL-TO-REFRESH — radar ring expansion on drag
   ═══════════════════════════════════════════════════════════════════════════ */

/* Radar ring pulse when PTR threshold hit */
@keyframes mm-radar-expand {
  0% { transform: scale(0.8); opacity: 0; }
  60% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.sr-ptr-bar.is-visible .sr-ptr-radar-svg,
#me-radar-ptr.ptr-visible .me-radar-svg {
  animation: mm-radar-expand 400ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   14. SETTLEMENT AMOUNT PULSE ON PAGE LOAD
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes mm-payout-reveal {
  0% { opacity: 0; transform: scale(0.9); }
  70% { transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

/* Settlement detail page — amount appears with impact */
.sr-settlement-fund,
.payout-amount-large,
.settlement-fund-amount,
[class*="fund-amount"],
[class*="payout-large"] {
  animation: mm-payout-reveal 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ═══════════════════════════════════════════════════════════════════════════
   15. REDUCED MOTION — respect prefers-reduced-motion on everything
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  /* Kill all animations */
  .mm-skeleton,
  .sr-skeleton-gold,
  .ms-skeleton-hero,
  .ms-skeleton-line,
  .sr-skeleton,
  .skeleton-loading {
    animation: none !important;
    background: #f1f5f9 !important;
  }

  .sr-back-to-top-v2,
  .sr-back-to-top-v2.visible {
    transition: opacity 150ms ease !important;
    transform: none !important;
    animation: none !important;
  }

  .sr-back-to-top-v2::before {
    animation: none !important;
    display: none !important;
  }

  .mm-ripple-el {
    display: none !important;
  }

  button,
  [role="button"],
  .btn,
  .sr-btn--primary,
  .sr-btn--secondary,
  .sr-cta-primary,
  .ms-btn {
    transition: none !important;
  }

  button:active,
  [role="button"]:active,
  .btn:active {
    transform: none !important;
  }

  .mm-check input[type="checkbox"]::after {
    transition: none !important;
  }

  .sr-settlement-detail,
  .sr-settlement-fund,
  .payout-amount-large {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   16. MOBILE-SPECIFIC POLISH (≤900px)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* Momentum scrolling on all scrollable areas */
  .overflow-scroll,
  .scroll-container,
  [class*="scroll-x"],
  [class*="overflow-x"],
  .settlements-grid,
  .category-chips,
  .filter-bar {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }

  /* Snap scroll items */
  .category-chip,
  .filter-chip,
  [class*="filter-item"] {
    scroll-snap-align: start;
  }

  /* Ensure 44px touch targets on interactive elements */
  a,
  button,
  [role="button"],
  label,
  .mm-check {
    min-height: 44px;
    min-width: 44px;
  }

  /* Remove tap delay everywhere */
  * {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* Restore pointer events on non-interactive */
  p, span, div, section, article, h1, h2, h3, h4, h5, h6, img, li {
    touch-action: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   17. SKELETON CARD CONTAINERS — for use in settlement list loading
   ═══════════════════════════════════════════════════════════════════════════ */

.mm-skeleton-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.mm-skeleton-hero {
  height: 140px;
  border-radius: 10px;
  margin-bottom: 14px;
  background: linear-gradient(
    90deg,
    #f3edd8 25%,
    #faf5e8 50%,
    #f3edd8 75%
  );
  background-size: 600px 100%;
  animation: mm-gold-shimmer 1.8s ease-in-out infinite;
}

.mm-skeleton-line {
  height: 12px;
  border-radius: 6px;
  margin-bottom: 10px;
  background: linear-gradient(
    90deg,
    #f3edd8 25%,
    #faf5e8 50%,
    #f3edd8 75%
  );
  background-size: 600px 100%;
  animation: mm-gold-shimmer 1.8s ease-in-out infinite;
}

.mm-skeleton-line:last-child {
  margin-bottom: 0;
}

.mm-skeleton-line--short { width: 45%; }
.mm-skeleton-line--medium { width: 70%; }
.mm-skeleton-line--full { width: 100%; }

/* ═══════════════════════════════════════════════════════════════════════════
   END — Task #1327338
   ═══════════════════════════════════════════════════════════════════════════ */