/* ============================================================
   NUTRI POP · V-MAX — 满配视觉层 (2026 Awwwards 获奖公式)
   Sources: reactbits (Grainient / Aurora / Metallic Paint),
   aceternity (Comet Card / 3D Marquee), uiverse micro-interactions,
   awwwards 2026 SOTD 数据 (61% immersive WebGL, scroll-driven
   narrative, kinetic typography, dopamine palettes, noise+chromatic)
   Loaded AFTER v2026.css — this layer deliberately overrides its
   restraint: dopamine colours, glow, grain, motion as spectacle.
   ============================================================ */

:root{
  --bg:#08080A;
  --pink:#FF2D78; --rose:#FF6BA5; --yellow:#FFD23F; --orange:#FF8A3D;
  --cyan:#22D3EE; --violet:#A855F7; --lime:#A3E635; --green:#34D399;
  --line:rgba(255,255,255,.085); --line2:rgba(255,255,255,.16);
  --ease:cubic-bezier(.16,.84,.24,1);
}

/* ---------- 0. WebGL / canvas background stage ---------- */
#grainCanvas{
  position:fixed;inset:0;width:100%;height:100%;z-index:-3;pointer-events:none;
  opacity:0;transition:opacity 1.6s var(--ease)}
#grainCanvas.on{opacity:1}
/* aurora curtains hang from the very top, behind everything */
.aurora{z-index:-4!important;overflow:visible!important}
.aurora .blob{display:block!important;filter:blur(110px) saturate(180%)!important}
.aurora .b1{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{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{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{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{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)}}
/* curtain edge mask so light only falls from the top */
.aurora::after{content:"";position:absolute;inset:0;display:block!important;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(8,8,10,.55) 34%,var(--bg) 62%)}

/* v2026 的克制光晕降为更亮的霓虹两点 */
body::before{
  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 stays, but glows on scroll */
.grid-bg{
  background-image:
    radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px)!important;
  background-size:30px 30px!important}

/* ---------- 1. kinetic typography ---------- */
.h1-display{font-size:clamp(62px,12.2vw,182px);line-height:.88;letter-spacing:-.05em}
.h1-display .ln>span{display:inline-block;transition:transform 1.1s var(--ease),opacity 1.1s var(--ease)!important}
.h1-display .ln>span.in{animation:wordDrop 1.15s var(--ease) both}
@keyframes wordDrop{
  0%{transform:translateY(120%) rotate(6deg);opacity:0;filter:blur(14px)}
  60%{filter:blur(0)}
  100%{transform:none;opacity:1;filter:blur(0)}}
/* gradient headline: the colours themselves drift */
.grad-t,.h1-display .grad-t{
  background:linear-gradient(100deg,var(--pink),var(--orange) 30%,var(--yellow) 48%,var(--lime) 66%,var(--cyan) 84%,var(--violet));
  background-size:280% 100%!important;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:gradDrift 7s linear infinite}
@keyframes gradDrift{to{background-position:280% 0}}
/* glowing chromatic echo behind the headline */
h1,h2{position:relative}
h2::before{
  content:attr(data-glow);position:absolute;inset:0;z-index:-1;
  color:transparent;-webkit-text-stroke:1px rgba(255,45,120,.28);
  filter:blur(9px);opacity:.7;pointer-events:none;white-space:pre-line}

/* ---------- 2. nav: neon pill with animated gradient edge ---------- */
#hdr.solid .nav{
  background:rgba(10,10,14,.66)!important;
  box-shadow:0 10px 50px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06),
    0 0 34px rgba(255,45,120,.14)!important}
#hdr .nav{box-shadow:0 0 0 1px rgba(255,255,255,.05)}
.nl-item.cur>.nl-top{
  background:linear-gradient(100deg,rgba(255,45,120,.22),rgba(255,210,63,.14))!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 0 22px rgba(255,45,120,.22)!important}
.nl-top:hover{box-shadow:0 0 18px rgba(255,45,120,.18)}
.dropdown-in{
  background:rgba(12,12,18,.9)!important;border-color:rgba(255,255,255,.14)!important;
  box-shadow:0 34px 90px rgba(0,0,0,.8),0 0 40px rgba(168,85,247,.12)!important}

/* ---------- 3. buttons: flowing candy gradient + glow ---------- */
.btn-p{
  background:linear-gradient(100deg,var(--pink),var(--orange) 34%,var(--yellow) 58%,var(--lime) 78%,var(--cyan))!important;
  background-size:220% 100%!important;animation:btnFlow 5s linear infinite;
  box-shadow:0 10px 34px rgba(255,45,120,.5),0 0 26px rgba(255,210,63,.24)!important}
@keyframes btnFlow{to{background-position:220% 0}}
.btn-p:hover{box-shadow:0 18px 54px rgba(255,45,120,.66),0 0 44px rgba(255,138,61,.4)!important;
  filter:brightness(1.1) saturate(1.15)}
.btn-g,.btn-s{background:rgba(255,255,255,.05)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.btn-g:hover,.btn-s:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 0 26px rgba(34,211,238,.22)}

/* ---------- 4. surfaces: neon edges + comet tail ---------- */
.card,.ov-card,.chart-card,.prod,.audit,.swot,.pest,.tl-card,.member,.pillar,.pt,
.pcard,.upsell,.soft-box,.shop-hero,.fstep,.src-note,.insight-box{
  border-color:rgba(255,255,255,.12)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 20px 50px rgba(0,0,0,.45)}
.spot{
  background:
    radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.11),transparent 60%),
    radial-gradient(600px circle at var(--mx,50%) var(--my,50%),rgba(255,45,120,.07),transparent 70%),
    var(--surface)!important}
.spot:hover{
  background:
    radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.16),transparent 62%),
    radial-gradient(700px circle at var(--mx,50%) var(--my,50%),rgba(255,45,120,.12),transparent 72%),
    var(--surface)!important}
/* comet: a bright dot runs the card edge on hover */
.comet{position:relative}
.comet::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:conic-gradient(from var(--comet-a,0deg),transparent 0 88%,
    rgba(255,255,255,.9) 92%,var(--pink) 96%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:1.5px;
  transition:opacity .4s var(--ease);animation:cometRun 2.6s linear infinite}
.comet:hover::before{opacity:1}
@property --comet-a{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes cometRun{to{--comet-a:360deg}}

/* legacy tints: push the dopamine back up */
.ov-card::before{opacity:.14!important}
.ov-card::after{opacity:.18!important}
.card::before{opacity:.1!important}

/* ---------- 5. hero: metallic lollipop, parallax, glow ---------- */
.candy-stage{transform-style:preserve-3d;will-change:transform}
.lolly-ball{
  background:
    radial-gradient(circle at 30% 24%,rgba(255,255,255,.85),transparent 34%),
    repeating-linear-gradient(52deg,#ff2d78 0 6%,#ff8a3d 6% 12%,#ffd23f 12% 18%,
      #a3e635 18% 24%,#22d3ee 24% 30%,#a855f7 30% 36%,#ff6ba5 36% 42%);
  box-shadow:0 34px 90px rgba(255,45,120,.5),0 0 70px rgba(168,85,247,.34),
    inset 0 -16px 34px rgba(0,0,0,.26),inset 0 10px 26px rgba(255,255,255,.4)!important}
/* travelling specular sweep — metallic paint */
.lolly-swirl::after{
  content:"";position:absolute;inset:-30%;pointer-events:none;mix-blend-mode:overlay;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.9) 50%,transparent 58%);
  background-size:260% 100%;animation:sweep 4.2s ease-in-out infinite}
@keyframes sweep{0%{background-position:180% 0}55%,100%{background-position:-80% 0}}
.lolly-ring{border-color:rgba(255,255,255,.2)!important;box-shadow:0 0 30px rgba(255,45,120,.16)}
.hero-stats{border-top:1px solid rgba(255,255,255,.12)}
.hstat b{
  background:linear-gradient(100deg,var(--pink),var(--yellow) 60%,var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(255,45,120,.45))}
.trust span{color:#9a9aa8}
.kicker{color:#c9c9d4}

/* ---------- 6. 3D marquee (two counter-rotating tilted bands) ---------- */
.marquee3d{perspective:900px;overflow:hidden;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);background:linear-gradient(180deg,#0a0a0e,#101016)}
.mq3d-row{display:flex;width:max-content;white-space:nowrap;transform:rotateX(24deg) scale(1.06);
  transform-origin:center top;padding:20px 0}
.mq3d-row.r2{transform:rotateX(-24deg) scale(1.06);transform-origin:center bottom;
  animation:mq3d-rev 34s linear infinite}
.mq3d-row.r1{animation:mq3d 34s linear infinite}
@keyframes mq3d{from{transform:rotateX(24deg) scale(1.06) translateX(0)}
  to{transform:rotateX(24deg) scale(1.06) translateX(-50%)}}
@keyframes mq3d-rev{from{transform:rotateX(-24deg) scale(1.06) translateX(-50%)}
  to{transform:rotateX(-24deg) scale(1.06) translateX(0)}}
.mq3d-row span{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(26px,4vw,54px);
  letter-spacing:-.02em;padding:0 22px;color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.34)}
.mq3d-row span:nth-child(3n+1){color:var(--pink);-webkit-text-stroke:0;
  text-shadow:0 0 34px rgba(255,45,120,.6)}
.mq3d-row span:nth-child(3n+2){color:var(--yellow);-webkit-text-stroke:0;
  text-shadow:0 0 34px rgba(255,210,63,.5)}
.mq3d-row span:nth-child(3n+3){color:var(--cyan);-webkit-text-stroke:0;
  text-shadow:0 0 34px rgba(34,211,238,.5)}

/* keep the flat marquee as fallback styling */
.marquee{background:linear-gradient(90deg,#0a0a0e,#14141c,#0a0a0e)!important;color:#b9b9c6!important}

/* ---------- 7. scroll reveals: 3D rise + blur burn-off ---------- */
.rv{opacity:0;transform:translateY(40px) scale(.96);filter:blur(8px);
  transition:opacity .9s var(--ease),transform 1s var(--ease),filter .9s var(--ease)!important}
.rv.in{opacity:1;transform:none;filter:blur(0)}
.d1{transition-delay:.07s!important}.d2{transition-delay:.14s!important}
.d3{transition-delay:.21s!important}.d4{transition-delay:.28s!important}

/* ---------- 8. ink splash cursor dots ---------- */
.ink{position:fixed;top:0;left:0;width:12px;height:12px;border-radius:50%;pointer-events:none;
  z-index:95;mix-blend-mode:screen;will-change:transform,opacity}

/* ---------- 9. progress + cursor upgraded ---------- */
#progress{height:3px;background:linear-gradient(90deg,var(--pink),var(--yellow),var(--lime),var(--cyan),var(--violet))!important;
  background-size:200% 100%!important;animation:btnFlow 3s linear infinite;
  box-shadow:0 0 18px rgba(255,45,120,.8)!important}
.cursor{background:var(--yellow)!important;box-shadow:0 0 14px rgba(255,210,63,.9);width:8px;height:8px}
.cursor-d{border:1.5px solid rgba(255,45,120,.75)!important;background:radial-gradient(circle,rgba(255,45,120,.2),transparent 72%)!important}
.cursor-d.hot{border-color:var(--yellow);transform:scale(1.5);box-shadow:0 0 24px rgba(255,210,63,.6)}

/* ---------- 10. footer / misc glow ---------- */
footer{border-top:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,rgba(255,45,120,.05),transparent 30%),#08080A}
.foot-word{opacity:.07;background:linear-gradient(100deg,var(--pink),var(--yellow),var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.foot-grid a:hover{color:var(--yellow);text-shadow:0 0 16px rgba(255,210,63,.6)}
.sec-tag{color:#cfcfda}
.addbtn:hover{box-shadow:0 0 26px rgba(255,45,120,.5)!important}
.f-btn.on{box-shadow:0 0 22px rgba(255,45,120,.45)!important}
.ph-chips a:hover{box-shadow:0 0 18px rgba(255,138,61,.3)}
.price{background:linear-gradient(100deg,var(--pink),var(--yellow));
  -webkit-background-clip:text;background-clip:text;color:transparent}
#toast{box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 30px rgba(163,230,53,.3)}
.pager .pg:hover{box-shadow:0 0 24px rgba(255,45,120,.22)}

/* ---------- 11. a11y ---------- */
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important;filter:none!important}
  .aurora .blob,.btn-p,.grad-t,#progress,.mq3d-row,.lolly-swirl::after{animation:none!important}
  #grainCanvas{display:none}
  .h1-display .ln>span{animation:none!important;opacity:1!important;transform:none!important;filter:none!important}
}