/* ============================================================
   มูลนิธิพระพรศุภประเสริฐ - Custom Style (เสริม Tailwind)
   ============================================================ */

:root {
  --ink: #1f2937;
}

html { scroll-behavior: smooth; }
body {
  color: var(--ink);
  background: #fff;
  font-weight: 700;
}

button, input, textarea, select, optgroup {
  font-weight: inherit;
}

/* ====== Gradient utilities ====== */
.text-gradient-brand {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bg-gradient-brand {
  background-image: var(--gradient-brand);
}
.bg-gradient-warm {
  background-image: var(--gradient-warm);
}

/* ====== Hero pattern ====== */
.hero-pattern {
  background-color: var(--hero-bg);
  background-image:
    radial-gradient(at 0% 0%, var(--hero-radial-1) 0px, transparent 50%),
    radial-gradient(at 100% 0%, var(--hero-radial-2) 0px, transparent 50%),
    radial-gradient(at 100% 100%, var(--hero-radial-3) 0px, transparent 50%),
    radial-gradient(at 0% 100%, var(--hero-radial-4) 0px, transparent 50%);
}

/* ====== Decorative blob ====== */
.blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(80px);
  opacity: .5;
  z-index: 0;
  pointer-events: none;
}

/* ====== Animations ====== */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: all .8s ease;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.animate-fade-up { animation: fade-up .8s ease both; }

@keyframes float-y {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-10px); }
}
.float-y { animation: float-y 4s ease-in-out infinite; }

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 var(--pulse-ring); }
  100% { box-shadow: 0 0 0 24px transparent; }
}
.pulse-ring { animation: pulse-ring 1.8s ease-out infinite; }

/* ====== Prose-like content ====== */
.content p { margin-bottom: 1rem; line-height: 1.85; }
.content h2 { font-size: 1.5rem; font-weight: 700; margin: 1.5rem 0 .75rem; }
.content ul { list-style: disc; padding-left: 1.5rem; }

/* ====== Custom scrollbar (admin) ====== */
.thin-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.thin-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

/* ====== Card hover ====== */
.card-hover {
  transition: transform .35s ease, box-shadow .35s ease;
}
.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.18);
}

/* Image hover zoom */
.img-zoom {
  overflow: hidden;
}
.img-zoom img {
  transition: transform .8s ease;
}
.img-zoom:hover img {
  transform: scale(1.08);
}