/* ==========================================================================
   Nutri POP · aurora backdrop — shared with the introduction site
   Same five coloured curtains, same drift timing, same dot field, same
   corner glows, same grain. Imported last so it wins over home.css.

   styles.css pages (index-zh / campaign / campaign-zh) were designed on a
   cream background. On a dark aurora the body copy and nav need to flip to
   light, while cards stay white so the layout keeps its structure. The rules
   below are namespaced to .np-dark, applied to <body> in those three files.
   ========================================================================== */

/* ---------- the backdrop itself ---------- */
.aurora {
  position: fixed !important;
  inset: 0;
  z-index: -4 !important;
  overflow: visible !important;
  pointer-events: none;
  background: #08080A;
}

.aurora .blob {
  display: block !important;
  position: absolute;
  border-radius: 50%;
  filter: blur(110px) saturate(180%) !important;
  mix-blend-mode: screen;
  will-change: transform;
}

.aurora .b1 {
  width: 60vw; height: 60vw; left: -14vw; top: -26vw;
  background: radial-gradient(circle, rgba(255, 45, 120, .85), transparent 62%) !important;
  opacity: .55 !important;
  animation: curtain 11s ease-in-out infinite alternate;
}
.aurora .b2 {
  width: 54vw; height: 54vw; right: -12vw; top: -22vw;
  background: radial-gradient(circle, rgba(168, 85, 247, .8), transparent 62%) !important;
  opacity: .5 !important;
  animation: curtain 14s ease-in-out infinite alternate-reverse;
}
.aurora .b3 {
  width: 50vw; height: 50vw; left: 24vw; top: -28vw;
  background: radial-gradient(circle, rgba(34, 211, 238, .75), transparent 62%) !important;
  opacity: .4 !important;
  animation: curtain 9s ease-in-out infinite alternate;
}
.aurora .b4 {
  width: 46vw; height: 46vw; right: 8vw; top: -18vw;
  background: radial-gradient(circle, rgba(255, 210, 63, .7), transparent 62%) !important;
  opacity: .34 !important;
  animation: curtain 13s ease-in-out infinite alternate-reverse;
}
.aurora .b5 {
  width: 44vw; height: 44vw; left: 6vw; top: -24vw;
  background: radial-gradient(circle, rgba(255, 138, 61, .75), transparent 62%) !important;
  opacity: .3 !important;
  animation: curtain 16s ease-in-out infinite alternate;
}

@keyframes curtain {
  0%   { transform: translate3d(-6%, -18%, 0) scale(1.05) skewX(6deg); }
  100% { transform: translate3d(7%, 16%, 0) scale(1.22) skewX(-8deg); }
}

/* light falls from the top, then fades into the page colour */
.aurora::after {
  content: "" !important;
  position: absolute;
  inset: 0;
  display: block !important;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(8, 8, 10, .55) 34%, #08080A 62%);
}

/* corner glows */
body::before {
  content: "" !important;
  position: fixed;
  inset: 0;
  z-index: -2 !important;
  pointer-events: none;
  background:
    radial-gradient(64% 52% at 50% -12%, rgba(255, 45, 120, .30), transparent 70%),
    radial-gradient(42% 38% at 86% 4%, rgba(168, 85, 247, .22), transparent 72%),
    radial-gradient(40% 34% at 8% 22%, rgba(34, 211, 238, .16), transparent 70%) !important;
}

/* dot field */
.grid-bg {
  content: "" !important;
  position: fixed;
  inset: 0;
  z-index: -3 !important;
  pointer-events: none;
  display: block !important;
  opacity: .5;
  background-image:
    radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px) !important;
  background-size: 30px 30px !important;
  -webkit-mask-image: radial-gradient(72% 58% at 50% 26%, #000 30%, transparent 100%);
  mask-image: radial-gradient(72% 58% at 50% 26%, #000 30%, transparent 100%);
}

/* film grain */
body::after {
  content: "" !important;
  position: fixed;
  inset: 0;
  z-index: -1 !important;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E") !important;
}

/* ==========================================================================
   Dark-theme adaptation for the three styles.css pages
   ========================================================================== */
.np-dark{background:#08080A;color:#F4F1FA}
.np-dark .section-tint{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015))!important}

/* nav: dark glass instead of cream glass */
.np-dark .nav{background:rgba(14,12,20,.72)!important;border-bottom-color:rgba(255,255,255,.10)!important}
.np-dark .nav-links{color:#C9C2D8!important}
.np-dark .nav-links a:hover{color:#fff!important}
.np-dark .brand{color:#fff!important}
.np-dark .brand b{color:var(--pink)}

/* hero copy */
.np-dark .hero h1{color:#fff}
.np-dark .hero p,
.np-dark .hero .lead,
.np-dark .hero-sm p{color:#BFB7CE!important}
.np-dark .hero-proof p{color:#BFB7CE!important}
.np-dark .hero-proof b{color:#fff!important}

/* section headings + body copy */
.np-dark h2{color:#fff}
.np-dark h3{color:#fff}
.np-dark h4{color:#fff}
.np-dark .sec-head p{color:#B3ABBE!important}
.np-dark .section p{color:#B3ABBE!important}
.np-dark li{color:#B3ABBE}

/* cards keep white so the layout structure survives */
.np-dark .card,
.np-dark .quote,
.np-dark .sw,
.np-dark .kpi,
.np-dark .tbl-wrap,
.np-dark .mcard,
.np-dark .step{background:#fff!important;color:var(--ink)!important}
.np-dark .card p,
.np-dark .quote p,
.np-dark .sw p,
.np-dark .kpi p{color:var(--ink-2)!important}

/* tables */
.np-dark .tbl thead th{background:#F4F1F7!important;color:var(--ink)!important}
.np-dark .tbl td{color:var(--ink-2)!important;border-color:rgba(22,19,39,.08)!important}
.np-dark .tbl tbody tr:nth-child(even){background:#FAF8FC!important}

/* chips / tags / pills keep light-on-dark */
.np-dark .chip{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.18)!important;color:#E8E3F0!important}
.np-dark .chip.is-active{background:#fff!important;color:var(--ink)!important;border-color:#fff!important}

/* footer */
.np-dark footer{background:rgba(255,255,255,.04)!important;border-top-color:rgba(255,255,255,.10)!important}
.np-dark footer p,
.np-dark footer a{color:#A79FB4!important}

/* buttons that were cream-on-light */
.np-dark .btn-outline{background:rgba(255,255,255,.08)!important;color:#fff!important;border-color:rgba(255,255,255,.28)!important}

@media (prefers-reduced-motion: reduce) {
  .aurora .blob{animation:none!important}
  .aurora::after{display:none!important}
}