.elementor-8390 .elementor-element.elementor-element-1b3d918{--display:flex;}body.elementor-page-8390:not(.elementor-motion-effects-element-type-background), body.elementor-page-8390 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}:root{--page-title-display:none;}/* Start custom CSS */<style>
/* ============================================
   Sunita's Custom Page CSS
   Lotus Watermark + Pink Scrollbar +
   Entrance Animations + Language Toggle Support
   ============================================ */

/* ============================================
   Pink Scrollbar
   ============================================ */

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #fff2f6;
}

::-webkit-scrollbar-thumb {
  background: #ed145b;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #d40c4d;
}

html {
  scrollbar-width: thin;
  scrollbar-color: #ed145b #fff2f6;
}

/* ============================================
   Lotus Background Watermark - Spinning
   ============================================ */

@keyframes sunita-lotus-spin {
  from { transform: translateY(-50%) rotate(0deg); }
  to { transform: translateY(-50%) rotate(360deg); }
}

@keyframes sunita-lotus-spin-reverse {
  from { transform: translate(0, 0) rotate(360deg); }
  to { transform: translate(0, 0) rotate(0deg); }
}

body::before {
  content: "";
  position: fixed;
  top: 50%;
  right: -8%;
  width: 650px;
  height: 650px;
  background-image: url("https://neonsnow.com.au/wp-content/uploads/2026/08/Sunitas-Lotus-scaled.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.04;
  pointer-events: none;
  z-index: -1;
  animation: sunita-lotus-spin 50s linear infinite;
}

body::after {
  content: "";
  position: fixed;
  top: -12%;
  left: -10%;
  width: 550px;
  height: 550px;
  background-image: url("https://neonsnow.com.au/wp-content/uploads/2026/08/Sunitas-Lotus-scaled.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.03;
  pointer-events: none;
  z-index: -1;
  animation: sunita-lotus-spin-reverse 65s linear infinite;
}

/* ============================================
   Entrance Animations
   Elements start invisible and animate in
   only when entering the viewport.
   Nothing loads/animates out of viewport.
   ============================================ */

/* Base hidden state for all animated elements */
[data-animate] {
  opacity: 0;
  transition:
    opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}

/* Direction variants - starting positions */
[data-animate="fade-up"] {
  transform: translateY(40px);
}

[data-animate="fade-down"] {
  transform: translateY(-40px);
}

[data-animate="fade-left"] {
  transform: translateX(-40px);
}

[data-animate="fade-right"] {
  transform: translateX(40px);
}

[data-animate="fade-in"] {
  transform: scale(0.96);
}

[data-animate="zoom-in"] {
  transform: scale(0.88);
}

/* Visible state - applied by IntersectionObserver */
[data-animate].is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* Stagger delays for child elements */
[data-animate-delay="1"] { transition-delay: 0.1s; }
[data-animate-delay="2"] { transition-delay: 0.2s; }
[data-animate-delay="3"] { transition-delay: 0.3s; }
[data-animate-delay="4"] { transition-delay: 0.4s; }
[data-animate-delay="5"] { transition-delay: 0.5s; }
[data-animate-delay="6"] { transition-delay: 0.6s; }
[data-animate-delay="7"] { transition-delay: 0.7s; }
[data-animate-delay="8"] { transition-delay: 0.8s; }
[data-animate-delay="9"] { transition-delay: 0.9s; }
[data-animate-delay="10"] { transition-delay: 1.0s; }

/* Section-level 1s delay before stagger begins */
[data-animate-group] [data-animate] {
  transition-delay: calc(1s + (var(--stagger-index, 0) * 0.15s));
}

/* ============================================
   Language Toggle - Show/Hide Content
   Elements with [data-lang] only show when
   the page language matches.
   ============================================ */

/* Default: show English, hide others */
[data-lang="hi"],
[data-lang="ne"] {
  display: none !important;
}

/* When body has lang-hi class */
body.lang-hi [data-lang="en"] { display: none !important; }
body.lang-hi [data-lang="hi"] { display: block !important; }
body.lang-hi [data-lang="ne"] { display: none !important; }

body.lang-ne [data-lang="en"] { display: none !important; }
body.lang-ne [data-lang="hi"] { display: none !important; }
body.lang-ne [data-lang="ne"] { display: block !important; }

/* Inline variants for spans within text */
body.lang-hi span[data-lang="en"] { display: none !important; }
body.lang-hi span[data-lang="hi"] { display: inline !important; }
body.lang-hi span[data-lang="ne"] { display: none !important; }

body.lang-ne span[data-lang="en"] { display: none !important; }
body.lang-ne span[data-lang="hi"] { display: none !important; }
body.lang-ne span[data-lang="ne"] { display: inline !important; }

/* Flex variants for containers that use flex */
body.lang-hi [data-lang="hi"].lang-flex { display: flex !important; }
body.lang-ne [data-lang="ne"].lang-flex { display: flex !important; }

/* Inline-flex variants for buttons */
body.lang-hi a[data-lang="hi"],
body.lang-hi button[data-lang="hi"] { display: inline-flex !important; }
body.lang-ne a[data-lang="ne"],
body.lang-ne button[data-lang="ne"] { display: inline-flex !important; }

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 1200px) {
  body::before {
    width: 480px;
    height: 480px;
    right: -12%;
    opacity: 0.035;
  }

  body::after {
    width: 400px;
    height: 400px;
  }
}

@media (max-width: 768px) {
  body::before {
    width: 350px;
    height: 350px;
    right: -18%;
    opacity: 0.03;
  }

  body::after {
    width: 280px;
    height: 280px;
    top: -8%;
    left: -15%;
    opacity: 0.025;
  }

  ::-webkit-scrollbar {
    width: 8px;
  }

  /* Reduce animation distance on mobile */
  [data-animate="fade-up"] { transform: translateY(24px); }
  [data-animate="fade-down"] { transform: translateY(-24px); }
  [data-animate="fade-left"] { transform: translateX(-24px); }
  [data-animate="fade-right"] { transform: translateX(24px); }
}

@media (max-width: 480px) {
  body::before {
    width: 260px;
    height: 260px;
    opacity: 0.025;
  }

  body::after {
    display: none;
  }

  ::-webkit-scrollbar {
    width: 6px;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none;
  }

  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
</style>

<!-- ============================================
     Entrance Animation Observer
     Watches for elements entering viewport,
     adds .is-visible class with 1s initial delay.
     Staggered sequence within groups.
     ============================================ -->
<script>
  document.addEventListener("DOMContentLoaded", function () {
    // IntersectionObserver for entrance animations
    var animatedElements = document.querySelectorAll("[data-animate]");

    if (!animatedElements.length) return;

    // Set stagger index CSS variable for grouped elements
    var groups = document.querySelectorAll("[data-animate-group]");
    groups.forEach(function (group) {
      var children = group.querySelectorAll("[data-animate]");
      children.forEach(function (child, index) {
        child.style.setProperty("--stagger-index", index);
      });
    });

    // Initial 1s page delay before any animations start
    var pageReady = false;
    var pendingEntries = [];

    setTimeout(function () {
      pageReady = true;
      // Reveal any elements already in viewport
      pendingEntries.forEach(function (el) {
        el.classList.add("is-visible");
      });
      pendingEntries = [];
    }, 1000);

    var observer = new IntersectionObserver(
      function (entries) {
        entries.forEach(function (entry) {
          if (entry.isIntersecting) {
            if (pageReady) {
              entry.target.classList.add("is-visible");
            } else {
              pendingEntries.push(entry.target);
            }
            observer.unobserve(entry.target);
          }
        });
      },
      {
        threshold: 0.15,
        rootMargin: "0px 0px -60px 0px"
      }
    );

    animatedElements.forEach(function (el) {
      observer.observe(el);
    });

    // ============================================
    // Language Toggle - Body Class Switcher
    // Works with the header language button
    // ============================================
    var langBtn = document.getElementById("sunita-lang-btn");
    var langLabel = document.getElementById("sunita-lang-current");
    var logoImg = document.getElementById("sunita-logo-img");

    if (!langBtn) return;

    var langs = [
      {
        code: "EN",
        bodyClass: "",
        logo: "https://neonsnow.com.au/wp-content/uploads/2026/08/Sunitas-Logo-Eng-1-scaled.png",
        alt: "Sunita's Hair and Beauty Salon"
      },
      {
        code: "HI",
        bodyClass: "lang-hi",
        logo: "https://neonsnow.com.au/wp-content/uploads/2026/08/Sunitas-Logo-Hindu-scaled.png",
        alt: "u0938u0941u0928u0940u0924u093Eu2019u0938 u0939u0947u092Fu0930 u0914u0930 u092Cu094Du092Fu0942u091Fu0940 u0938u0948u0932u0949u0928"
      },
      {
        code: "NE",
        bodyClass: "lang-ne",
        logo: "https://neonsnow.com.au/wp-content/uploads/2026/08/Sunitas-Logo-Nepali-scaled.png",
        alt: "u0938u0941u0928u093Fu0924u093Eu2019u0938 u0939u0947u092Fu0930 u0930 u092Cu094Du092Fu0942u091Fu0940 u0938u0948u0932u0941u0928"
      }
    ];

    var currentLangIndex = 0;

    langBtn.addEventListener("click", function () {
      // Remove previous class
      document.body.classList.remove("lang-hi", "lang-ne");

      // Cycle to next
      currentLangIndex = (currentLangIndex + 1) % langs.length;
      var lang = langs[currentLangIndex];

      // Add new class
      if (lang.bodyClass) {
        document.body.classList.add(lang.bodyClass);
      }

      // Update label
      if (langLabel) langLabel.textContent = lang.code;

      // Swap logo with fade
      if (logoImg) {
        logoImg.style.opacity = "0";
        setTimeout(function () {
          logoImg.src = lang.logo;
          logoImg.alt = lang.alt;
          logoImg.style.opacity = "1";
        }, 300);
      }
    });
  });
</script>/* End custom CSS */