/* Delight layer: mascot, empty states, celebration cards, birthday chrome,
   memories, share sheet. HAND-MAINTAINED (never touched by `npm run vendor`).
   Token-driven so light/dark both work for free. */

/* ---- mascot (single PNG, CSS treatments) ---- */
.mascot { display: inline-block; object-fit: contain; }
.mascot--sm { width: 56px; height: 56px; }
.mascot--md { width: 84px; height: 84px; }
.mascot--lg { width: 120px; height: 120px; }
.mascot--tilt { transform: rotate(-6deg); }
.mascot--peek { position: absolute; top: -34px; left: 50%; transform: translateX(-50%) rotate(-6deg); width: 64px; height: 64px; }
@media (prefers-reduced-motion: no-preference) {
  .empty .mascot, .celebrate-card .mascot { animation: mascotBob 3.4s var(--ease-warm) infinite; }
  @keyframes mascotBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
}

/* ---- reusable empty state ---- */
.empty { text-align: center; padding: 36px 20px; color: var(--text-faint); }
.empty__art { margin-bottom: 14px; }
.empty__art > i { font-size: 44px; color: var(--ovdje-orange-200); }
.empty h3 { margin: 0 0 6px; font-size: 17px; color: var(--text-dim); font-family: var(--font-display); }
.empty p { margin: 0 auto; max-width: 38ch; line-height: 1.55; font-size: 14.5px; }
.empty .btn { margin-top: 16px; }

/* fall keyframe (self-contained copy of lost.css's — delight.css must work standalone) */
@keyframes fall {
  0% { transform: translateY(-24px) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(340px) rotate(320deg); opacity: 0; }
}

/* ---- one-time celebration card (first post, follower milestones) ---- */
.celebrate-card {
  position: relative; text-align: center; overflow: visible;
  background: var(--surface-raised); border: 1.5px solid var(--accent);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-orange, var(--shadow-md-c));
  padding: 30px 20px 22px; margin: 0 0 16px;
}
.celebrate-card .confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: inherit; }
.celebrate-card .confetti i { position: absolute; top: -20px; animation: fall var(--d, 3s) linear var(--delay, 0s) infinite; }
.celebrate-card .seal {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 12px;
  display: grid; place-items: center; font-size: 26px;
  background: var(--accent); color: var(--text-on-accent, #1F1300);
}
.celebrate-card .eyebrow { display: block; margin-bottom: 4px; }
.celebrate-card h2 { margin: 0 0 6px; font-size: clamp(19px, 5vw, 24px); }
.celebrate-card p { margin: 0 auto; color: var(--text-dim); max-width: 44ch; line-height: 1.5; font-size: 14.5px; }

/* ---- birthday chrome ---- */
.bday-ring { position: relative; border-radius: 50%; padding: 3px; background: conic-gradient(var(--accent), var(--ovdje-rust), var(--ovdje-teal), var(--accent)); display: inline-flex; }
.bday-banner {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--accent-soft); border: 1.5px solid var(--accent);
  border-radius: var(--radius-lg); padding: 14px 16px; margin: 14px clamp(16px, 5vw, 28px) 0;
}
.bday-banner .confetti i { position: absolute; top: -20px; animation: fall var(--d, 3s) linear var(--delay, 0s) infinite; }
.bday-banner i { color: var(--accent-text); font-size: 22px; }
.bday-banner .tx { flex: 1; min-width: 200px; font-weight: 600; font-size: 14.5px; }
.bday-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-raised); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg); padding: 14px 16px; margin: 0 0 14px; box-shadow: var(--shadow-sm-c);
}
.bday-card .tx { flex: 1; min-width: 0; }
.bday-card .tx b { display: block; font-size: 14px; font-family: var(--font-display); }
.bday-card .tx span { display: block; font-size: 12.5px; color: var(--text-faint); }
.bday-card .btn { flex: none; }

/* ---- "on this day" memory card ---- */
.memory-card {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center;
  background: var(--surface-raised); border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-lg); padding: 14px 16px; margin: 0 0 14px;
}
.memory-card .m-thumb { width: 64px; height: 64px; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-sunken); display: grid; place-items: center; font-size: 26px; color: var(--text-faint); }
.memory-card .m-thumb img { width: 100%; height: 100%; object-fit: cover; }
.memory-card .m-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-text); }
.memory-card .m-title { font-family: var(--font-display); font-weight: 700; font-size: 15px; margin: 2px 0; }
.memory-card .m-text { font-size: 13px; color: var(--text-dim); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.memory-card .m-actions { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; }

/* ---- notifications: celebratory rows ---- */
.n--celebrate { border-left: 3px solid var(--accent); }

/* ---- share sheet rows (link vs. image card) ---- */
.share-sheet .ss-row {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  border: 1px solid var(--border); background: var(--surface-raised); cursor: pointer;
  border-radius: var(--radius-lg); padding: 14px; margin-bottom: 10px; font: inherit; color: var(--text);
}
.share-sheet .ss-row:hover { border-color: var(--accent); }
.share-sheet .ss-row i { font-size: 22px; color: var(--accent-text); flex: none; }
.share-sheet .ss-row b { display: block; font-size: 14.5px; }
.share-sheet .ss-row span { display: block; font-size: 12.5px; color: var(--text-faint); }