/* =============================================================================
   Petgully Deck — shared components (cards, chips, buttons, reveal motion)
   ========================================================================== */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--mist);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Soft background blobs — pure CSS gradients (plan §2.1), fixed & GPU-free */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(560px 400px at 88% -6%, var(--sunrise-soft), transparent 66%),
    radial-gradient(640px 480px at -8% 34%, var(--sky-soft), transparent 62%),
    radial-gradient(440px 360px at 74% 106%, var(--butter-soft), transparent 66%);
}

a { color: var(--sky-deep); text-decoration: none; }
img { max-width: 100%; display: block; }

/* ---- Card -------------------------------------------------------------- */
.card {
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: 22px;
  position: relative;
  overflow: hidden;
}

a.card { color: inherit; display: block; }

.card--hover {
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
  will-change: transform;
}
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
.card--hover:active { transform: translateY(-1px); }

.card--sunrise { background: linear-gradient(140deg, #FFF6F2, var(--sunrise-soft)); }
.card--sky     { background: linear-gradient(140deg, #F2FBFB, var(--sky-soft)); }
.card--butter  { background: linear-gradient(140deg, #FFFBF0, var(--butter-soft)); }
/* Butter-to-sea blend — warm top-left melting into sea green */
.card--duo     { background: linear-gradient(150deg, var(--butter-soft) 0%, #F2FBFB 46%, var(--sky-soft) 100%); }
.card--ink     { background: linear-gradient(150deg, #22565C, #14383E); color: #fff; }

/* ---- Card anatomy ------------------------------------------------------- */
.card-kicker {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-40);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}
.card--ink .card-kicker { color: rgba(255,255,255,.55); }

.card-title { font-size: var(--fs-lg); font-weight: 700; margin: 0 0 6px; line-height: 1.25; }
.card-body  { font-size: var(--fs-md); color: var(--ink-60); margin: 0; line-height: 1.55; }
.card--ink .card-body { color: rgba(255,255,255,.75); }

.card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--sunrise-deep);
}
.card-cta .arrow { transition: transform var(--t-fast) var(--ease-out); }
.card--hover:hover .card-cta .arrow { transform: translateX(4px); }
.card-cta--sky { color: var(--sky-deep); }

/* ---- Chips & badges ------------------------------------------------------ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  background: var(--sky-soft);
  color: var(--sky-deep);
  white-space: nowrap;
}
.chip--sunrise { background: var(--sunrise-soft); color: var(--sunrise-deep); }
.chip--mint    { background: var(--mint-soft); color: #16805C; }
.chip--butter  { background: var(--butter-soft); color: var(--butter-deep); }

.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); display: inline-block; }
.dot--pulse { animation: pulse 2.4s var(--ease-out) infinite; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(47,191,143,.45); }
  70%  { box-shadow: 0 0 0 7px rgba(47,191,143,0); }
  100% { box-shadow: 0 0 0 0 rgba(47,191,143,0); }
}

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border: 0;
  border-radius: var(--r-pill);
  font: 700 var(--fs-md) var(--font);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: linear-gradient(135deg, var(--sunrise), #FF8B4D);
  color: #fff;
  box-shadow: 0 6px 18px rgba(255, 107, 61, .35);
}
.btn--primary:hover { box-shadow: 0 10px 24px rgba(255, 107, 61, .45); }

.btn--ghost {
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-1), inset 0 0 0 1.5px rgba(28,35,51,.10);
}
.btn--sm { padding: 8px 16px; font-size: var(--fs-sm); }

/* ---- Staggered reveal (plan §2.3: max 6 staggered, transform+opacity) ---- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--t-med) var(--ease-out),
              transform var(--t-med) var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal:nth-child(2) { transition-delay: 55ms; }
.reveal:nth-child(3) { transition-delay: 110ms; }
.reveal:nth-child(4) { transition-delay: 165ms; }
.reveal:nth-child(5) { transition-delay: 220ms; }
.reveal:nth-child(6) { transition-delay: 275ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { transform: none; }
}

/* ---- Utility ------------------------------------------------------------- */
.muted { color: var(--ink-60); }
.small { font-size: var(--fs-sm); }
.flex { display: flex; align-items: center; gap: 10px; }
.grow { flex: 1; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}