/* ============================================================
   Tipr UI — shared polish layer.
   Adds motion, hover states, and refined interactions on top
   of each page's existing styles. Apple-grade easing.
   ============================================================ */

/* Universal easing tokens */
:root {
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Better focus rings ────────────────────────────────────── */
*:focus { outline: none; }
input:focus, textarea:focus, select:focus, button:focus-visible, a:focus-visible {
  box-shadow: 0 0 0 3px rgba(76, 196, 102, 0.28);
}
button, a { -webkit-tap-highlight-color: transparent; }

/* ── Buttons: press animation + sheen on hover ─────────────── */
button:not(:disabled), .btn:not(:disabled),
.submit-btn:not(:disabled), .primary-btn:not(:disabled),
.copy-link-btn, .logout-btn, .icon-btn, .ghost-btn, .connect-btn {
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background 0.18s var(--ease-out),
              border-color 0.18s var(--ease-out),
              color 0.18s var(--ease-out),
              box-shadow 0.24s var(--ease-out),
              transform 0.12s var(--ease-out);
}
button:not(:disabled):active, .btn:not(:disabled):active,
.submit-btn:not(:disabled):active, .primary-btn:not(:disabled):active {
  transform: scale(0.97);
}

/* Sheen overlay for primary CTAs */
.btn-primary::after, .submit-btn::after,
.primary-btn::after, .stripe-submit-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.14), transparent 55%);
  opacity: 0;
  transition: opacity 0.28s var(--ease-out);
  pointer-events: none;
}
.btn-primary:hover::after, .submit-btn:hover::after,
.primary-btn:hover::after, .stripe-submit-btn:hover::after {
  opacity: 1;
}

/* Primary CTAs lift very slightly on hover */
.btn-primary:not(:disabled):hover, .submit-btn:not(:disabled):hover,
.primary-btn:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(42, 122, 59, 0.32);
}

/* ── Inputs: smoother focus ────────────────────────────────── */
input, textarea, select {
  transition: border-color 0.18s var(--ease-out),
              box-shadow 0.22s var(--ease-out),
              background-color 0.18s var(--ease-out);
}

/* ── Cards: lift on hover ──────────────────────────────────── */
.card, .step, .industry, .staff-card, .invite-row, .pricing-card,
.auth-card, .tip-card, .biz-pill {
  transition: transform 0.28s var(--ease-out),
              border-color 0.28s var(--ease-out),
              box-shadow 0.28s var(--ease-out),
              background-color 0.18s var(--ease-out);
}
.lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}

/* Staff cards on tip page get a small scale lift */
.staff-card { transition: transform 0.18s var(--ease-out), border-color 0.18s var(--ease-out), background 0.18s var(--ease-out); }
.staff-card:hover {
  transform: translateX(2px) scale(1.005);
}

/* ── Scroll-triggered fade-up ──────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.85s var(--ease-out),
              transform 0.85s var(--ease-out);
  will-change: opacity, transform;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Variants with delays */
.fade-up.delay-1 { transition-delay: 0.08s; }
.fade-up.delay-2 { transition-delay: 0.16s; }
.fade-up.delay-3 { transition-delay: 0.24s; }
.fade-up.delay-4 { transition-delay: 0.32s; }
.fade-up.delay-5 { transition-delay: 0.40s; }

/* ── Stagger container ─────────────────────────────────────── */
.stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s var(--ease-out),
              transform 0.65s var(--ease-out);
}
.stagger.visible > *:nth-child(1)  { opacity: 1; transform: translateY(0); transition-delay: 0.05s; }
.stagger.visible > *:nth-child(2)  { opacity: 1; transform: translateY(0); transition-delay: 0.10s; }
.stagger.visible > *:nth-child(3)  { opacity: 1; transform: translateY(0); transition-delay: 0.15s; }
.stagger.visible > *:nth-child(4)  { opacity: 1; transform: translateY(0); transition-delay: 0.20s; }
.stagger.visible > *:nth-child(5)  { opacity: 1; transform: translateY(0); transition-delay: 0.25s; }
.stagger.visible > *:nth-child(6)  { opacity: 1; transform: translateY(0); transition-delay: 0.30s; }
.stagger.visible > *:nth-child(7)  { opacity: 1; transform: translateY(0); transition-delay: 0.35s; }
.stagger.visible > *:nth-child(8)  { opacity: 1; transform: translateY(0); transition-delay: 0.40s; }
.stagger.visible > *:nth-child(9)  { opacity: 1; transform: translateY(0); transition-delay: 0.45s; }
.stagger.visible > *:nth-child(10) { opacity: 1; transform: translateY(0); transition-delay: 0.50s; }
.stagger.visible > *:nth-child(n+11) { opacity: 1; transform: translateY(0); transition-delay: 0.55s; }

/* ── Float (for hero visuals) ──────────────────────────────── */
@keyframes tipr-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.float {
  animation: tipr-float 5.5s ease-in-out infinite;
}

/* ── Gentle pulse (for emphasis) ───────────────────────────── */
@keyframes tipr-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(76, 196, 102, 0.40); }
  50%      { box-shadow: 0 0 0 16px rgba(76, 196, 102, 0); }
}
.pulse {
  animation: tipr-pulse-glow 2.6s ease-in-out infinite;
}

/* ── Page entry ────────────────────────────────────────────── */
@keyframes tipr-page-enter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-enter {
  animation: tipr-page-enter 0.55s var(--ease-out) both;
}

/* Auth cards lift in with a touch of spring */
@keyframes tipr-card-pop {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.card-pop {
  animation: tipr-card-pop 0.55s var(--ease-spring) both;
}

/* ── Shimmer skeleton ──────────────────────────────────────── */
@keyframes tipr-shimmer {
  0%   { background-position: -1000px 0; }
  100% { background-position:  1000px 0; }
}
.shimmer {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04),
    rgba(255,255,255,0.10),
    rgba(255,255,255,0.04)
  );
  background-size: 1000px 100%;
  animation: tipr-shimmer 1.6s linear infinite;
  border-radius: 8px;
}

/* ── Subtle background radial accent ───────────────────────── */
.bg-accent {
  position: relative;
  isolation: isolate;
}
.bg-accent::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -20%;
  background: radial-gradient(circle at 30% 20%, rgba(42,122,59,0.10), transparent 60%);
  pointer-events: none;
}

/* ── Reduced motion respect ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .fade-up { opacity: 1; transform: none; }
  .stagger > * { opacity: 1; transform: none; }
}