/* ============================================================
   Yayasan Jidris Assalam — Tailwind design-system helpers
   Everything that Tailwind's utility classes genuinely cannot
   express (keyframes, gradient-clipped text, line-clamp
   fallbacks) lives here. Everything else in the app is styled
   with Tailwind utility classes directly in the markup.
   ============================================================ */

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
}

/* Gradient text */
.text-gradient {
  background-image: linear-gradient(135deg, #10b981, #3b82f6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Fixed navbar spacing */
.page-offset {
  scroll-margin-top: 96px;
}

/* Line clamp fallback (Tailwind's plugin isn't loaded via CDN) */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Animated gradient "PPDB" pill in the navbar */
.pulse-cta {
  animation: pulse-cta 2.2s ease-in-out infinite;
}
@keyframes pulse-cta {
  0%, 100% { box-shadow: 0 4px 15px rgba(16,185,129,.35); transform: scale(1); }
  50% { box-shadow: 0 8px 25px rgba(16,185,129,.55); transform: scale(1.03); }
}

/* Soft floating blobs used on dark sections */
.blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(60px);
  opacity: .18;
  animation: blob-float 9s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes blob-float {
  0% { transform: translate(0,0); }
  100% { transform: translate(24px, 40px); }
}

/* Hero slider crossfade */
.hero-slide {
  opacity: 0;
  transition: opacity 1.1s ease-in-out;
}
.hero-slide.is-active {
  opacity: 1;
}

/* Gentle bounce for the "scroll down" affordance */
.animate-bounce-slow {
  animation: bounce-slow 2s infinite;
}
@keyframes bounce-slow {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-12px); }
  60% { transform: translateY(-6px); }
}

/* Scrollbar (webkit) for horizontally scrolling chip rows */
.scrollbar-thin::-webkit-scrollbar { height: 6px; width: 6px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }

/* ============================================================
   Glassmorphism / gradient design-system extras
   ============================================================ */

/* Ambient mesh-gradient page background (place once, behind content) */
.mesh-bg {
  position: fixed;
  inset: 0;
  z-index: -20;
  pointer-events: none;
  background-image:
    radial-gradient(at 12% 8%, rgba(16, 185, 129, .10) 0, transparent 42%),
    radial-gradient(at 88% 15%, rgba(59, 130, 246, .10) 0, transparent 42%),
    radial-gradient(at 15% 90%, rgba(59, 130, 246, .08) 0, transparent 40%),
    radial-gradient(at 90% 92%, rgba(16, 185, 129, .08) 0, transparent 40%);
}

/* Reusable glass panel */
.glass-panel {
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, .6);
}

/* Gradient-glow border that appears on hover, without changing layout */
.glow-border {
  position: relative;
  isolation: isolate;
}
.glow-border::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg, #10b981, #3b82f6);
  opacity: 0;
  transition: opacity .4s ease;
}
.glow-border:hover::before { opacity: 1; }

/* Shimmer sweep for primary buttons */
.btn-shine {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg);
  transition: left .7s ease;
}
.btn-shine:hover::after { left: 130%; }

/* Soft glow shadow used behind hero art / floating cards */
.glow-shadow {
  box-shadow: 0 25px 60px -15px rgba(16, 185, 129, .25), 0 10px 25px -10px rgba(59, 130, 246, .2);
}

/* Gradient underline that grows on hover (for links / section titles) */
.underline-grow {
  position: relative;
  display: inline-block;
}
.underline-grow::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #10b981, #3b82f6);
  transition: width .3s ease;
}
.underline-grow:hover::after { width: 100%; }

/* Floating badge / chip subtle bob */
.bob {
  animation: bob-float 5s ease-in-out infinite;
}
@keyframes bob-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Scroll-reveal progress bar (used in header, filled via JS) */
#scrollProgress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  z-index: 60;
  background: linear-gradient(90deg, #10b981, #3b82f6);
  transition: width .1s ease-out;
}

/* Tilt-on-hover for cards (pairs with a small JS listener) */
.tilt-card { transition: transform .25s ease, box-shadow .25s ease; will-change: transform; }