/* ============================================================
   NAVRATRI WELCOME ANIMATION — one-time entrance splash
   Scoped entirely under .wwnv-* / #wwnv-* — safe to drop in
   alongside style.css / style2.css / style3.css / janmashtami.css
   without touching any of them.

   This is NOT a game and NOT a popup-on-click like the
   Janmashtami campaign. It is a single animated reveal that
   plays once per browser session, right after the existing
   page loader (#loader in footer.php) finishes, then fades
   itself into the homepage. Always skippable.

   Brand colors reused from the main site:
     Blue   #053779
     Yellow #fed001
   Festive accents: marigold orange/gold, deep maroon, royal purple
   ============================================================ */

.wwnv-intro, .wwnv-intro * {
  box-sizing: border-box;
}

.wwnv-intro {
  position: fixed;
  inset: 0;
  z-index: 999998; /* just under the site's own #loader (999999), above everything else */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 30%, #4a1d6b 0%, #2a0f45 45%, #180a2e 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.4,0,.2,1);
}
.wwnv-intro.wwnv-on {
  opacity: 1;
  pointer-events: auto;
}
.wwnv-intro.wwnv-leaving {
  opacity: 0;
  transform: translateY(-4%);
}

/* ---------- String lights across the top ---------- */
.wwnv-lights {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 60px;
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
  padding-top: 14px;
  pointer-events: none;
}
.wwnv-light {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #fed001;
  box-shadow: 0 0 8px 3px rgba(254,208,1,.7);
  animation: wwnv-twinkle 1.8s ease-in-out infinite;
}
.wwnv-light:nth-child(odd)  { background: #ff8a3d; box-shadow: 0 0 8px 3px rgba(255,138,61,.7); animation-delay: .3s; }
.wwnv-light:nth-child(3n)   { background: #ff5577; box-shadow: 0 0 8px 3px rgba(255,85,119,.65); animation-delay: .6s; }
@keyframes wwnv-twinkle {
  0%, 100% { opacity: .45; transform: scale(.85); }
  50%       { opacity: 1;   transform: scale(1.15); }
}

/* ---------- Rangoli disc (CSS conic-gradient, no images) ---------- */
.wwnv-rangoli {
  position: absolute;
  top: 50%; left: 50%;
  width: 360px; height: 360px;
  margin: -180px 0 0 -180px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(254,208,1,.18) 0deg 10deg,
      rgba(255,138,61,.14) 10deg 20deg,
      rgba(255,85,119,.1) 20deg 30deg,
      transparent 30deg 40deg
    );
  opacity: 0;
  transform: scale(.4) rotate(0deg);
  transition: opacity .7s ease, transform 1.1s cubic-bezier(.22,1,.36,1);
}
.wwnv-intro.wwnv-on .wwnv-rangoli {
  opacity: 1;
  transform: scale(1) rotate(60deg);
}
.wwnv-rangoli-spin {
  animation: wwnv-rangoli-spin 40s linear infinite;
}
@keyframes wwnv-rangoli-spin {
  to { transform: scale(1) rotate(420deg); }
}
.wwnv-rangoli-ring {
  position: absolute; inset: 40px;
  border-radius: 50%;
  border: 1.5px dashed rgba(254,208,1,.4);
}
.wwnv-rangoli-ring-2 { inset: 80px; border-color: rgba(255,138,61,.35); }

/* ---------- Dandiya sticks ---------- */
.wwnv-dandiya-wrap {
  position: absolute;
  top: 50%; left: 50%;
  width: 260px; height: 260px;
  margin: -130px 0 0 -130px;
  pointer-events: none;
}
.wwnv-stick {
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 150px;
  margin: -75px 0 0 -5px;
  border-radius: 6px;
  background: linear-gradient(180deg, #fed001 0%, #e0894a 55%, #a85a22 100%);
  box-shadow: 0 0 10px rgba(254,208,1,.5);
  transform-origin: center center;
  opacity: 0;
}
.wwnv-stick::before, .wwnv-stick::after {
  content: '';
  position: absolute;
  left: 50%; width: 16px; height: 6px;
  margin-left: -8px;
  background: #ff5577;
  border-radius: 3px;
}
.wwnv-stick::before { top: 10px; }
.wwnv-stick::after  { bottom: 10px; }

.wwnv-stick-a { transform: rotate(-24deg) translateX(-14px); }
.wwnv-stick-b { transform: rotate(24deg)  translateX(14px); }

.wwnv-intro.wwnv-on .wwnv-stick {
  opacity: 1;
  animation: wwnv-clack 1.1s ease-in-out .3s infinite;
}
.wwnv-intro.wwnv-on .wwnv-stick-b { animation-name: wwnv-clack-b; }

@keyframes wwnv-clack {
  0%, 100% { transform: rotate(-24deg) translateX(-14px); }
  50%       { transform: rotate(-8deg)  translateX(-4px); }
}
@keyframes wwnv-clack-b {
  0%, 100% { transform: rotate(24deg) translateX(14px); }
  50%       { transform: rotate(8deg)  translateX(4px); }
}

/* ---------- Falling marigold petals (JS-spawned) ---------- */
.wwnv-petals {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.wwnv-petal {
  position: absolute;
  top: -20px;
  width: 10px; height: 10px;
  border-radius: 60% 0 60% 0;
  animation: wwnv-petal-fall linear forwards;
}
@keyframes wwnv-petal-fall {
  to { transform: translateY(115vh) rotate(380deg); opacity: 0; }
}

/* ---------- Text content ---------- */
.wwnv-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 24px;
  max-width: 560px;
  color: #fff;
}
.wwnv-eyebrow {
  display: inline-block;
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fed001;
  background: rgba(254,208,1,.12);
  border: 1px solid rgba(254,208,1,.4);
  border-radius: 20px;
  padding: 5px 16px;
  margin-bottom: 18px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: .5s;
}
.wwnv-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(28px, 6vw, 46px);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 14px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: .75s;
}
.wwnv-title span {
  color: #fed001;
}
.wwnv-sub {
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
  font-size: clamp(14px, 2.4vw, 17px);
  color: rgba(255,255,255,.85);
  line-height: 1.6;
  margin: 0 0 28px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: 1s;
}
.wwnv-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: 1.3s;
}

.wwnv-intro.wwnv-on .wwnv-eyebrow,
.wwnv-intro.wwnv-on .wwnv-title,
.wwnv-intro.wwnv-on .wwnv-sub,
.wwnv-intro.wwnv-on .wwnv-cta-row {
  opacity: 1;
  transform: translateY(0);
}

.wwnv-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 26px;
  background: #fed001;
  color: #053779;
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .03em;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(254,208,1,.3);
  transition: transform .15s, box-shadow .2s;
}
.wwnv-cta:hover, .wwnv-cta:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(254,208,1,.42);
  color: #053779;
  text-decoration: none;
}
.wwnv-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.wwnv-continue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.4);
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.wwnv-continue:hover, .wwnv-continue:focus-visible {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.7);
}
.wwnv-continue:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- Skip button (always available, top-right) ---------- */
.wwnv-skip {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  min-height: 36px;
  transition: background .2s;
}
.wwnv-skip:hover { background: rgba(255,255,255,.2); }
.wwnv-skip:focus-visible { outline: 2px solid #fed001; outline-offset: 2px; }

@media (max-width: 575px) {
  .wwnv-rangoli { width: 280px; height: 280px; margin: -140px 0 0 -140px; }
  .wwnv-dandiya-wrap { width: 200px; height: 200px; margin: -100px 0 0 -100px; }
  .wwnv-stick { height: 110px; margin-top: -55px; }
  .wwnv-content { padding: 0 20px; }
  .wwnv-cta-row { flex-direction: column; width: 100%; }
  .wwnv-cta, .wwnv-continue { width: 100%; max-width: 280px; }
  .wwnv-skip { top: max(env(safe-area-inset-top), 12px); right: 12px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .wwnv-rangoli, .wwnv-rangoli-spin, .wwnv-stick, .wwnv-light, .wwnv-petal {
    animation: none !important;
  }
  .wwnv-intro, .wwnv-eyebrow, .wwnv-title, .wwnv-sub, .wwnv-cta-row {
    transition-duration: .01s !important;
  }
}