/* ==========================================================================
   Nirag Infotech — ambient layer (every page)
   File: wp-content/themes/narang-new/assets/css/ambient.css
   Load after motion.css. Pairs with assets/js/ambient.js.
   ========================================================================== */

:root {
  --ns-ease: cubic-bezier(.16, 1, .3, 1);

  /* WhatsApp button position (same values as the theme) — the back-to-top
     button stacks above it from these, so the two can never overlap */
  --ns-wa-right: 100px;
  --ns-wa-bottom: 80px;
  --ns-wa-size: 55px;
  --ns-top-size: 44px;
  --ns-stack-gap: 12px;
}
@media (max-width: 480px) {
  :root { --ns-wa-right: 10px; --ns-wa-bottom: 60px; }
}

@keyframes ns-pan    { to { background-position: 100% 50%; } }
@keyframes ns-ripple { to { transform: scale(1); opacity: 0; } }


/* --------------------------------------------------------------------------
   1. Shape fields
   -------------------------------------------------------------------------- */
.ns-host { isolation: isolate; }   /* canvas at z -1: above the section's background, below its content */

canvas.ns-field {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
}

/* The canvas replaces the theme's small floating shapes in the page banners */
.ns-host > .animated-shape-wrap { display: none; }

/* Gradient banners: the gradient drifts slowly behind the shapes.
   Desktop only — animating a background repaints the banner every frame. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  html .ns-pan {
    background-size: 170% 170% !important;
    background-position: 0% 50%;
    animation: ns-pan 14s ease-in-out infinite alternate;
  }
}


/* --------------------------------------------------------------------------
   2. Cursor ring (desktop, fine pointer only — added by JS)
   -------------------------------------------------------------------------- */
.ns-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483000;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1.5px solid #fff;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: difference;   /* dark on light sections, light on dark ones */
  opacity: 0;
  will-change: transform;
}
.ns-cursor::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  scale: .4;
  transition: opacity .3s var(--ns-ease), scale .45s var(--ns-ease);
}
.ns-cursor.is-on   { opacity: .9; transition: opacity .3s var(--ns-ease); }
.ns-cursor.is-link::before { opacity: .14; scale: 1.7; }
.ns-cursor.is-down::before { opacity: .3; scale: .9; }
.ns-cursor.is-text { opacity: 0; }


/* --------------------------------------------------------------------------
   3. Button ripple
   -------------------------------------------------------------------------- */
.ns-ripple-host { isolation: isolate; }
.ns-ripple-clip {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.ns-ripple {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: .26;
  transform: scale(0);
  animation: ns-ripple .75s var(--ns-ease) forwards;
}


/* --------------------------------------------------------------------------
   4. Mobile fixes
   -------------------------------------------------------------------------- */

/* a) Header stays fixed on scroll. motion.js hides it while scrolling down
      on phones (html.nm-head-hidden); keep it in place instead. */
@media (max-width: 768px) {
  html.nm-head-hidden header#site-header { translate: none !important; }
  html.nm-scrolled header#site-header { box-shadow: 0 8px 24px -16px rgba(11, 28, 70, .45); }
}

/* b) Menu toggle: the theme's <button> is only 30×5px, so only the painted
      lines of the icon were tappable. An invisible layer gives it a ~60×48px
      target without moving anything. */
html header button.nav-toggle {
  position: relative;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
html header button.nav-toggle::after {
  content: "";
  position: absolute;
  inset: -21px -15px;
}

/* c) Back-to-top sits directly above the WhatsApp button at every width.
      Pure CSS: motion.js measured the WhatsApp button in px, which goes
      wrong when the phone's address bar shows/hides. !important beats the
      inline position that script writes. */
html a.whatsapp-icon {
  right: var(--ns-wa-right);
  bottom: calc(var(--ns-wa-bottom) + env(safe-area-inset-bottom, 0px));
}
html .nm-top {
  right: calc(var(--ns-wa-right) + (var(--ns-wa-size) - var(--ns-top-size)) / 2) !important;
  bottom: calc(var(--ns-wa-bottom) + env(safe-area-inset-bottom, 0px) + var(--ns-wa-size) + var(--ns-stack-gap)) !important;
}


@media (prefers-reduced-motion: reduce) {
  .ns-cursor, .ns-ripple { display: none; }
}
@media print {
  canvas.ns-field, .ns-cursor { display: none !important; }
}