/* ════════════════════════════════════════════════════════════════════
   effects.css — spotlight, shimmer, cursor glow, card shimmer, tilt
   ────────────────────────────────────────────────────────────────────
   Theme-aware but token-free: these styles use rgba directly tuned
   for the dark theme aesthetic. The original light theme suppresses
   all effects to stay pristine (brand source-of-truth).
   To change theme colors, edit themes.css — not this file.
   ════════════════════════════════════════════════════════════════════ */

/* ─── Hero cursor spotlight ───────────────────────────────────── */
.namo-spotlight { position: relative; }
.namo-spotlight::before {
  content: ''; position: absolute; inset: 0;
  pointer-events: none; z-index: 1;
  background: radial-gradient(480px circle at
    var(--mouse-x, 30%) var(--mouse-y, 40%),
    rgba(248,233,172,0.065), transparent 40%);
  opacity: 0; transition: opacity 0.35s;
}
.namo-spotlight:hover::before { opacity: 1; }
.namo-spotlight > * { position: relative; z-index: 2; }
/* Original light = pristine brand, no spotlight */
[data-theme="light"] .namo-spotlight::before { display: none; }

/* ─── Shimmer border on CTA ───────────────────────────────────── */
.namo-btn-shimmer { position: relative; overflow: hidden; }
.namo-btn-shimmer::after {
  content: ''; position: absolute; inset: -1px;
  pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 35%,
    rgba(248,233,172,0.28) 50%, transparent 65%);
  background-size: 250% 100%;
  background-position: 250% 0;
  opacity: 0; transition: opacity 0.15s;
}
.namo-btn-shimmer:hover::after {
  opacity: 1; animation: namo-shimmer 1.2s ease forwards;
}
@keyframes namo-shimmer {
  from { background-position: 250% 0; }
  to   { background-position: -250% 0; }
}
/* Light button shimmer — saffron-filled buttons on light need a
   bright sweep that reads against the saffron fill. White rgba at
   moderate alpha lifts visibly over saffron without going washed-out. */
[data-theme="light"] .namo-btn-shimmer::after {
  background: linear-gradient(105deg, transparent 35%,
    rgba(255,255,255,0.40) 50%, transparent 65%);
  background-size: 250% 100%;
}

/* ─── Cursor glow inside button ───────────────────────────────── */
.namo-btn-glow { position: relative; overflow: hidden; }
.namo-btn-glow::before {
  content: ''; position: absolute; inset: 0;
  pointer-events: none; border-radius: inherit;
  background: radial-gradient(55px circle at
    var(--btn-x, 50%) var(--btn-y, 50%),
    rgba(248,233,172,0.20), transparent 65%);
  opacity: 0; transition: opacity 0.2s;
}
.namo-btn-glow:hover::before { opacity: 1; }
/* Light button cursor-glow — white rgba reads against saffron fill,
   matching the visible-on-both-themes treatment of the shimmer. */
[data-theme="light"] .namo-btn-glow::before {
  background: radial-gradient(55px circle at
    var(--btn-x, 50%) var(--btn-y, 50%),
    rgba(255,255,255,0.30), transparent 65%);
}

/* ─── Service / pillar card shimmer ────────────────────────────── */
.namo-card-shimmer { position: relative; overflow: hidden; }
.namo-card-shimmer::after {
  content: ''; position: absolute; inset: -1px;
  pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 30%,
    rgba(247,220,153,0.18) 50%, transparent 70%);
  background-size: 220% 100%;
  background-position: 220% 0;
  opacity: 0;
}
.namo-card-shimmer:hover::after {
  opacity: 1; animation: namo-card-sh 1.4s ease forwards;
}
@keyframes namo-card-sh {
  from { background-position: 220% 0; }
  to   { background-position: -220% 0; }
}
/* Light card shimmer — base custard rgba is invisible on cream
   surfaces; replace with saffron tint that sweeps visibly across
   white/cream card backgrounds. */
[data-theme="light"] .namo-card-shimmer::after {
  background: linear-gradient(105deg, transparent 30%,
    rgba(232,120,32,0.18) 50%, transparent 70%);
  background-size: 220% 100%;
}

/* ─── 3D tilt card (card.html only) ────────────────────────────── */
.namo-tilt {
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.6s;
  will-change: transform;
}
.namo-tilt-glow {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  border-radius: inherit;
  background: radial-gradient(circle at
    var(--cx,50%) var(--cy,50%),
    rgba(247,220,153,0.10), transparent 55%);
  opacity: 0; transition: opacity 0.2s;
}
.namo-tilt:hover .namo-tilt-glow { opacity: 1; }

/* Respect users who prefer reduced motion — all of these are
   "extra" polish, not core functionality. */
@media (prefers-reduced-motion: reduce) {
  .namo-spotlight::before,
  .namo-btn-shimmer::after,
  .namo-btn-glow::before,
  .namo-card-shimmer::after,
  .namo-tilt-glow { display: none !important; }
  .namo-tilt { transition: none !important; transform: none !important; }
}