/* ════════════════════════════════════════════════════════════
   AlakhAgam Shared Components  v2.0
   Requires: tokens.css loaded before this file.
   Contains: reset · animations · nav · footer · buttons ·
             section utilities · scroll reveal · responsive
   ════════════════════════════════════════════════════════════ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&family=Courier+Prime:wght@400;700&display=swap');

/* ── Base Reset ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; }

/* ── Scroll Reveal ────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(44px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1),
              transform .9s cubic-bezier(.16,1,.3,1);
}
.reveal.vis   { opacity: 1; transform: translateY(0); }
.reveal-d1    { transition-delay: .12s; }
.reveal-d2    { transition-delay: .26s; }
.reveal-d3    { transition-delay: .42s; }
.reveal-d4    { transition-delay: .58s; }

/* ── Keyframes ────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes dotPulse {
  0%,100% { opacity: .3; transform: scale(1); }
  50%      { opacity: .9; transform: scale(1.8); }
}
@keyframes pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: .4; }
}

/* ── Section Utilities ────────────────────────────────────── */
.aa-section-rule {
  width: 100%; height: 1px;
  background: linear-gradient(to right, transparent, rgba(232,117,26,.12), transparent);
}

.aa-eyebrow {
  font-family: var(--font-m);
  font-size: .57rem; letter-spacing: .58em;
  color: var(--aa-saffron); text-transform: uppercase;
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1rem;
}
.aa-eyebrow::after {
  content: ''; flex: 1; height: 1px; max-width: 72px;
  background: linear-gradient(to right, rgba(232,117,26,.3), transparent);
}

.aa-section-title {
  font-family: var(--font-d);
  font-size: clamp(1.9rem,3.8vw,3.4rem);
  font-weight: 700; line-height: 1.1; margin-bottom: 1.4rem;
}
.aa-section-title em { font-style: italic; color: var(--aa-saffron); }

.aa-section-body {
  font-size: .98rem; line-height: 1.85;
  color: var(--aa-muted); max-width: 620px;
  font-weight: 300; margin-bottom: 3.5rem;
}

.aa-pull-quote {
  border-left: 3px solid var(--aa-saffron);
  padding: .5rem 2rem; margin: 0;
  font-family: var(--font-d);
  font-size: clamp(1.05rem,2.2vw,1.5rem);
  font-weight: 400; font-style: italic;
  line-height: 1.6; color: rgba(253,250,245,.58);
  max-width: 680px;
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .9rem 2rem;
  font-family: var(--font-b); font-size: .78rem;
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid transparent; border-radius: var(--r-xs);
  cursor: pointer; text-decoration: none;
  transition: background .2s, border-color .2s, color .2s, transform .15s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }

.btn-saffron          { background: var(--aa-saffron); color: var(--aa-white); }
.btn-saffron:hover    { background: var(--aa-saffron-d); }

.btn-saffron-outline  { background: transparent; color: var(--aa-saffron); border-color: rgba(232,117,26,.4); }
.btn-saffron-outline:hover { background: rgba(232,117,26,.08); border-color: var(--aa-saffron); }

.btn-ghost-dark       { color: var(--aa-white); border-color: rgba(255,255,255,.13); }
.btn-ghost-dark:hover { border-color: var(--aa-saffron); color: var(--aa-saffron); }

.btn-teal             { background: var(--p-teal); color: #fff; }
.btn-teal:hover       { background: var(--p-teal-d); }

.btn-teal-outline     { background: transparent; color: var(--p-teal); border-color: var(--p-teal); }
.btn-teal-outline:hover { background: var(--p-teal); color: #fff; }

.btn-teal-white       { background: #fff; color: var(--p-teal); }
.btn-teal-white:hover { background: var(--p-teal-l); }

.btn-gold             { background: transparent; color: var(--t-gold); border-color: rgba(201,168,76,.4); }
.btn-gold:hover       { background: rgba(201,168,76,.1); border-color: var(--t-gold); }

.btn-sm               { padding: .5rem 1.2rem; font-size: .72rem; }

/* ── Dark Nav (Parent Brand) ──────────────────────────────── */
.aa-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h); padding: 0 3rem;
  display: flex; align-items: center; justify-content: space-between;
  transition: background .4s, border-bottom .4s;
}
.aa-nav.scrolled {
  background: rgba(8,6,15,.93);
  backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--aa-border);
}
.aa-nav-brand          { display: flex; flex-direction: column; gap: .08rem; text-decoration: none; }
.aa-nav-word           { font-family: var(--font-d); font-size: 1.05rem; font-weight: 700; letter-spacing: .1em; color: var(--aa-white); }
.aa-nav-sub            { font-family: var(--font-d); font-size: .55rem; font-style: italic; color: var(--aa-saffron); opacity: .55; letter-spacing: .18em; }
.aa-nav-links          { display: flex; align-items: center; gap: 2.5rem; list-style: none; margin: 0; padding: 0; }
.aa-nav-links a        { font-size: .76rem; font-weight: 500; letter-spacing: .05em; color: var(--aa-muted); transition: color .2s; }
.aa-nav-links a:hover  { color: var(--aa-white); }
.aa-nav-cta            { background: var(--aa-saffron) !important; color: var(--aa-white) !important; padding: .48rem 1.2rem; border-radius: var(--r-xs); font-size: .72rem !important; font-weight: 600 !important; letter-spacing: .07em !important; transition: background .2s !important; }
.aa-nav-cta:hover      { background: var(--aa-saffron-d) !important; }
.aa-nav-toggle         { display: none; background: none; border: none; color: var(--aa-white); font-size: 1.3rem; padding: .25rem; }

/* ── Light Nav (prajnaScan) ───────────────────────────────── */
.prajna-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h-p); padding: 0 3rem;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--p-border);
  transition: box-shadow .3s;
}
.prajna-nav.scrolled   { box-shadow: 0 2px 20px rgba(26,138,126,.08); }
.prajna-nav-brand      { display: flex; align-items: center; gap: .5rem; text-decoration: none; }
.prajna-nav-icon       { width: 28px; height: 28px; background: var(--p-teal); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: .85rem; }
.prajna-nav-word       { font-family: var(--font-pj); font-size: 1rem; font-weight: 700; color: var(--p-ink); letter-spacing: -.02em; }
.prajna-nav-word span  { color: var(--p-teal); }
.prajna-nav-parent     { font-size: .7rem; color: var(--p-muted); padding-left: .75rem; margin-left: .5rem; border-left: 1px solid var(--p-border); }
.prajna-nav-links      { display: flex; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.prajna-nav-links a    { font-size: .82rem; font-weight: 500; color: var(--p-muted); transition: color .2s; }
.prajna-nav-links a:hover { color: var(--p-ink); }
.prajna-nav-cta        { background: var(--p-teal) !important; color: #fff !important; padding: .45rem 1.1rem; border-radius: 6px; font-weight: 600 !important; transition: background .2s !important; }
.prajna-nav-cta:hover  { background: var(--p-teal-d) !important; }
.prajna-nav-toggle     { display: none; background: none; border: none; color: var(--p-ink); font-size: 1.3rem; padding: .25rem; cursor: pointer; }

/* ── Footer (Dark, Parent Brand) ─────────────────────────── */
.aa-footer {
  background: #040208;
  border-top: 1px solid rgba(232,117,26,.09);
  padding: 3rem;
}
.aa-footer-inner {
  max-width: var(--max); margin: 0 auto;
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 1.5rem;
}
.aa-footer-name        { font-family: var(--font-d); font-size: 1.15rem; font-weight: 700; letter-spacing: .1em; color: var(--aa-saffron); }
.aa-footer-sub         { font-family: var(--font-d); font-size: .62rem; font-style: italic; color: rgba(255,255,255,.18); letter-spacing: .1em; margin-top: .18rem; }
.aa-footer-nav         { display: flex; gap: 2rem; flex-wrap: wrap; }
.aa-footer-nav a       { font-family: var(--font-m); font-size: .62rem; letter-spacing: .22em; color: rgba(255,255,255,.22); text-transform: uppercase; transition: color .2s; }
.aa-footer-nav a:hover { color: var(--aa-saffron); }
.aa-footer-copy        { font-family: var(--font-m); font-size: .58rem; letter-spacing: .18em; color: rgba(255,255,255,.14); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .aa-nav            { padding: 0 1.5rem; }
  .aa-nav-links      { display: none; }
  .aa-nav-toggle     { display: block; }
  .aa-nav-links.open {
    display: flex; flex-direction: column; gap: 1.5rem;
    position: fixed; inset: var(--nav-h) 0 0;
    background: rgba(8,6,15,.97);
    padding: 2.5rem 1.5rem; z-index: 99; align-items: flex-start;
  }
  .prajna-nav        { padding: 0 1.5rem; }
  .prajna-nav-links  { display: none; }
  .prajna-nav-toggle { display: block; }
  .prajna-nav-links.open {
    display: flex; flex-direction: column; gap: 1.5rem;
    position: fixed; inset: var(--nav-h-p) 0 0;
    background: rgba(255,255,255,.98);
    padding: 2.5rem 1.5rem; z-index: 99; align-items: flex-start;
  }
  .aa-footer         { padding: 2.5rem 1.5rem; }
  .aa-footer-inner   { flex-direction: column; gap: 1.5rem; }
  .aa-footer-nav     { gap: 1.2rem; }
}

/* ── Nav JS helper (standard IntersectionObserver pattern)
   Copy this snippet into each page's <script>:

   // Nav scroll state
   const nav = document.querySelector('.aa-nav, .prajna-nav');
   window.addEventListener('scroll', () =>
     nav.classList.toggle('scrolled', window.scrollY > 32), { passive: true });

   // Mobile toggle
   const toggle = document.querySelector('.aa-nav-toggle, .prajna-nav-toggle');
   const links  = document.querySelector('.aa-nav-links, .prajna-nav-links');
   toggle?.addEventListener('click', () => {
     const open = links.classList.toggle('open');
     toggle.setAttribute('aria-expanded', open);
     toggle.textContent = open ? '✕' : '☰';
     document.body.style.overflow = open ? 'hidden' : '';
   });

   // Scroll reveal
   new IntersectionObserver((entries, io) => {
     entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('vis'); io.unobserve(e.target); }});
   }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' })
   .observe(...document.querySelectorAll('.reveal'));
── */