/* ============================================================
   Huellitas de Amor Tongoy — global styles
   Tailwind (CDN) does the heavy lifting; this file holds fonts,
   animations, the rich-text (.prose) styles for Firestore blog
   content, and a few brand helpers.
   ============================================================ */

body { font-family: 'Fredoka', sans-serif; overflow-x: clip; }
.font-display { font-family: 'Fraunces', serif; }
html { scroll-behavior: smooth; overflow-x: clip; }

/* ---------- animations ---------- */
@keyframes fade-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-in-down { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }

.animate-fade-in { animation: fade-in .8s ease-out forwards; opacity: 0; }
.animate-fade-in-down { animation: fade-in-down .35s ease-out forwards; }
.animate-float { animation: float 6s ease-in-out infinite; }
.delay-100 { animation-delay: .1s; }
.delay-200 { animation-delay: .2s; }
.delay-300 { animation-delay: .3s; }
.delay-500 { animation-delay: .5s; }

/* scroll reveal (toggled by an IntersectionObserver in each page) */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- scrollbar ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #FBF6FA; }
::-webkit-scrollbar-thumb { background: #9D0188; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #C01BA7; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ---------- glassmorphism (floating nav) ---------- */
.glass { background: rgba(255,255,255,.85); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); }

/* ---------- forms ---------- */
input[type="radio"]:checked, input[type="checkbox"]:checked { accent-color: #9D0188; }
.field:focus { outline: none; border-color: #9D0188; box-shadow: 0 0 0 3px rgba(157,1,136,.14); }

/* ---------- keyboard and motion accessibility ---------- */
:where(a, button, input, textarea, select, iframe):focus-visible {
  outline: 3px solid #0F9CA3;
  outline-offset: 3px;
  border-radius: .5rem;
}

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

/* ---------- rich text (.prose) — Firestore blog `content` is raw HTML ---------- */
.prose { color: #44404a; line-height: 1.8; }
.prose h2 { font-family: 'Fraunces', serif; font-size: 1.6rem; font-weight: 700; color: #1C141B; margin: 1.5em 0 .5em; line-height: 1.2; }
.prose h3 { font-family: 'Fraunces', serif; font-size: 1.3rem; font-weight: 600; color: #1C141B; margin: 1.25em 0 .4em; }
.prose p { margin-bottom: 1em; }
.prose strong { font-weight: 600; color: #1C141B; }
.prose a { color: #9D0188; text-decoration: underline; text-underline-offset: 2px; }
.prose ul { list-style: disc; padding-left: 1.4em; margin-bottom: 1em; }
.prose ol { list-style: decimal; padding-left: 1.4em; margin-bottom: 1em; }
.prose li { margin-bottom: .4em; line-height: 1.7; }
.prose blockquote { border-left: 4px solid #CF91C7; padding-left: 1em; font-style: italic; color: #6b6570; margin: 1em 0; }
.prose img { border-radius: 1rem; margin: 1.2em 0; max-width: 100%; height: auto; }