/* ==========================================================================
   Pasu Daya — public website styles
   Theme colours/fonts from the public/site design. Tailwind utility classes
   (Tailwind CDN in layouts/public.php) handle most layout; this file holds
   the custom classes and page-specific effects.

   1. Brand tokens & base
   2. Shared components (buttons, text, glass, mesh, cards, links)
   3. Animations & scroll reveal
   4. Home — hero slider
   5. Home — partners marquee
   6. Reduced motion
   ========================================================================== */

/* 1. Brand tokens & base -------------------------------------------------- */
:root {
  --brand-primary: #047857;
  --brand-accent: #D97706;
  --brand-radius: 0.75rem;
}
* { -webkit-font-smoothing: antialiased; }
html { scrollbar-width: thin; }
body { font-family: 'Inter', sans-serif; background: #FBFAF7; color: #0F172A; overflow-x: hidden; }
h1, h2, h3, h4, .font-heading { font-family: 'Plus Jakarta Sans', sans-serif; }
.font-editorial { font-family: 'Fraunces', serif; }
::selection { background: var(--brand-primary); color: #fff; }
[x-cloak] { display: none; }

/* 2. Shared components ---------------------------------------------------- */
.btn-primary {
  background: var(--brand-primary);
  color: #fff;
  box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--brand-primary) 60%, transparent);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), filter .25s, box-shadow .25s;
}
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.05); }

.text-primary { color: var(--brand-primary); }
.bg-primary   { background: var(--brand-primary); }
.text-accent  { color: var(--brand-accent); }
.bg-accent    { background: var(--brand-accent); }
.ring-primary { --tw-ring-color: var(--brand-primary); }

.gradient-text {
  background: linear-gradient(120deg, var(--brand-primary), var(--brand-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.glass { background: rgba(255,255,255,.7); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }

/* Subtle noise overlay */
.grain:before {
  content: ''; position: absolute; inset: 0; opacity: .05; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Brand colour glow used on dark sections */
.mesh {
  background:
    radial-gradient(closest-side at 15% 20%, color-mix(in srgb, var(--brand-primary) 55%, transparent), transparent),
    radial-gradient(closest-side at 85% 30%, color-mix(in srgb, var(--brand-accent) 45%, transparent), transparent),
    radial-gradient(closest-side at 50% 90%, color-mix(in srgb, var(--brand-primary) 35%, transparent), transparent);
}

.card-hover { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.card-hover:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -20px rgba(2,44,34,.28); }

/* Main menu underline (hover + current page) */
.link-underline { position: relative; }
.link-underline:after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px;
  background: var(--brand-primary); transform: scaleX(0); transform-origin: left; transition: transform .3s;
}
.link-underline:hover:after,
.link-underline.is-active:after { transform: scaleX(1); }

/* 3. Animations & scroll reveal ------------------------------------------- */
.float      { animation: float 6s ease-in-out infinite; }
.float-slow { animation: float 9s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

.marquee { display: flex; gap: 4rem; animation: marquee 26s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Elements with data-aos fade in when scrolled into view (content stays visible if JS is off) */
.has-js [data-aos] {
  opacity: 0; transform: translateY(34px);
  transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
.has-js [data-aos="fade-right"] { transform: translateX(-40px); }
.has-js [data-aos="fade-left"]  { transform: translateX(40px); }
.has-js [data-aos="zoom-in"]    { transform: scale(.94); }
.has-js [data-aos].revealed     { opacity: 1 !important; transform: none !important; }

/* 4. Home — hero slider (slides share one grid cell; only .is-active shows) */
.hero-slide { opacity: 0; visibility: hidden; transition: opacity 1s ease, visibility 0s linear 1s; }
.hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; transition: opacity 1s ease, visibility 0s; }
.hero-slide .hero-bg { transform: scale(1.12); transition: transform 7s ease-out; }
.hero-slide.is-active .hero-bg { transform: scale(1.02); }
.hero-slide .hero-content > * {
  opacity: 0; transform: translateY(24px);
  transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);
}
.hero-slide.is-active .hero-content > * { opacity: 1; transform: none; }
.hero-slide.is-active .hero-content > *:nth-child(2) { transition-delay: .12s; }
.hero-slide.is-active .hero-content > *:nth-child(3) { transition-delay: .24s; }
.hero-slide.is-active .hero-content > *:nth-child(4) { transition-delay: .36s; }

/* 5. Home — partners marquee (two identical copies scroll left by one copy) */
.partner-marquee {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.partner-track { animation-name: marquee; animation-timing-function: linear; animation-iteration-count: infinite; }
.partner-marquee:hover .partner-track,
.partner-marquee:focus-within .partner-track { animation-play-state: paused; }

/* 6. Reduced motion -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .float, .float-slow, .marquee { animation: none; }
  .has-js [data-aos] { opacity: 1 !important; transform: none !important; }
  .hero-slide, .hero-slide .hero-bg, .hero-slide .hero-content > * { transition: none; }
  .partner-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .partner-track > div:has(> [aria-hidden="true"]) { display: none; }
}

/* ---- Blog article body (content comes from the admin editor) ---- */
.site-article > * + * { margin-top: 1.1rem; }
.site-article p { line-height: 1.85; }
.site-article h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.5rem; font-weight: 700; color: #0F172A; margin-top: 2rem; }
.site-article h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.25rem; font-weight: 700; color: #0F172A; margin-top: 1.6rem; }
.site-article ul, .site-article ol { padding-left: 1.4rem; }
.site-article ul { list-style: disc; }
.site-article ol { list-style: decimal; }
.site-article li + li { margin-top: .4rem; }
.site-article a { color: var(--brand-primary); text-decoration: underline; }
.site-article img { border-radius: var(--brand-radius); max-width: 100%; height: auto; }
.site-article blockquote { border-left: 4px solid rgba(4,120,87,.3); padding-left: 1.1rem; font-style: italic; color: #475569; }
.site-pager { flex-wrap: wrap; }