/* NikkisCafe — custom layer on top of Tailwind (CDN). */

::selection { background: #dfa32e33; }

html { scroll-behavior: smooth; }

:focus-visible {
  outline: 2px solid #dfa32e;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- cards ---------- */
.card-lift { transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1); }
.card-lift:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -18px rgb(32 36 31 / .22); }

/* ---------- article prose ---------- */
.prose-nikki { color: #3d443d; font-size: 1.125rem; line-height: 1.85; }
.prose-nikki > * + * { margin-top: 1.25em; }
.prose-nikki h2 { font-family: Fraunces, serif; font-size: 1.75rem; color: #20241f; margin-top: 2em; line-height: 1.25; }
.prose-nikki h3 { font-family: Fraunces, serif; font-size: 1.35rem; color: #20241f; margin-top: 1.75em; }
.prose-nikki strong { color: #20241f; }
.prose-nikki a { color: #275c42; text-decoration: underline; text-underline-offset: 3px; }
.prose-nikki blockquote {
  border-left: 3px solid #dfa32e; padding-left: 1.25rem;
  font-family: Fraunces, serif; font-style: italic; font-size: 1.3rem; color: #275c42;
}
.prose-nikki ul { list-style: disc; padding-left: 1.5rem; }
.prose-nikki ol { list-style: decimal; padding-left: 1.5rem; }
.prose-nikki li + li { margin-top: .4em; }
.prose-nikki img { border-radius: 1rem; }
.prose-nikki code { background: #f0ede6; border-radius: .3rem; padding: .1em .35em; font-size: .9em; }

/* ---------- htmx loading states ---------- */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: block; }
.htmx-request .htmx-hide-during { display: none; }

.skeleton { animation: skeleton-pulse 1.4s ease-in-out infinite; background: #e9e5db; border-radius: 1rem; }
.dark .skeleton { background: #2c332c; }
@keyframes skeleton-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* ---------- toasts ---------- */
.toast { animation: toast-in .35s cubic-bezier(.16,1,.3,1); }
.toast.toast-leaving { animation: toast-out .3s ease forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px) scale(.97); } }

/* ---------- journey timeline ---------- */
.timeline-line { background: linear-gradient(to bottom, #dfa32e, #275c42 60%, transparent); }

/* ---------- admin sidebar link ---------- */
.admin-link { transition: background .2s ease, color .2s ease; }

/* ---------- hero headline underline flourish ---------- */
.hand-underline { position: relative; white-space: nowrap; }
.hand-underline::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.08em; height: .14em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 9 C 50 2, 150 2, 198 8' stroke='%23DFA32E' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}