/* Moolank 365 motion layer. Only opacity and transform move (GPU-cheap), entrances are
   short so nothing waits on them, and everything stops for people who turn motion off. */

/* Living sky: two star layers twinkling out of step, behind the content */
#app::before,#app::after{
  content:"";position:fixed;top:0;left:0;right:0;height:65vh;z-index:-1;pointer-events:none;
  background-repeat:no-repeat;will-change:opacity;contain:strict;
}
#app::before{
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%,#fff6d8,transparent),radial-gradient(1.2px 1.2px at 78% 9%,#fff,transparent),
    radial-gradient(1.8px 1.8px at 64% 31%,#ffe7a8,transparent),radial-gradient(1.1px 1.1px at 33% 42%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 88% 52%,#fff6d8,transparent),radial-gradient(1.2px 1.2px at 21% 68%,#fff,transparent),
    radial-gradient(1.7px 1.7px at 52% 77%,#ffe7a8,transparent),radial-gradient(1.1px 1.1px at 7% 88%,#fff,transparent);
  animation:m-twinkle 4.6s ease-in-out infinite alternate;
}
#app::after{
  background-image:
    radial-gradient(1.3px 1.3px at 45% 6%,#fff,transparent),radial-gradient(1.7px 1.7px at 93% 24%,#ffe7a8,transparent),
    radial-gradient(1.2px 1.2px at 16% 33%,#fff6d8,transparent),radial-gradient(1.6px 1.6px at 71% 47%,#fff,transparent),
    radial-gradient(1.1px 1.1px at 39% 59%,#fff,transparent),radial-gradient(1.8px 1.8px at 84% 73%,#fff6d8,transparent),
    radial-gradient(1.2px 1.2px at 27% 84%,#ffe7a8,transparent),radial-gradient(1.4px 1.4px at 61% 93%,#fff,transparent);
  animation:none;opacity:.55;
}
@keyframes m-twinkle{0%{opacity:.15}100%{opacity:.9}}

/* A shooting star crosses the sky now and then */
.m-shoot{position:fixed;top:12vh;left:-20vw;width:120px;height:1.5px;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,240,200,.95));border-radius:2px;
  transform:rotate(18deg);opacity:0;animation:m-shoot 9s ease-in 3s infinite}
@keyframes m-shoot{0%,86%{opacity:0;transform:translate3d(0,0,0) rotate(18deg)}88%{opacity:1}100%{opacity:0;transform:translate3d(140vw,46vh,0) rotate(18deg)}}

/* Entrances: content rises in as it scrolls into view */
.m-rv{opacity:0;transform:translate3d(0,18px,0)}
.m-in{opacity:1;transform:none;transition:opacity .5s ease,transform .6s cubic-bezier(.2,.9,.25,1);transition-delay:var(--md,0ms)}
.m-now{animation:m-rise .55s cubic-bezier(.2,.9,.25,1) both;animation-delay:var(--md,0ms)}
@keyframes m-rise{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}}

/* Headings arrive with a soft focus pull */
.view .greet h1,.view .greet h2,.lp-hero h1{animation:m-focus .7s cubic-bezier(.2,.9,.25,1) both}
@keyframes m-focus{from{opacity:0;letter-spacing:.04em;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}

/* The gold in the italic headline slowly catches light */
h1 em,.lp-hero h1 em{background-size:220% 100%!important;animation:m-foil 5s ease-in-out .6s 2}
@keyframes m-foil{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* Small living details */
.greet .eyebrow::before,.lp-hero .lp-eyebrow::before{animation:m-star 3.6s ease-in-out infinite}
@keyframes m-star{0%,100%{transform:translateY(-.04em) scale(1) rotate(0)}50%{transform:translateY(-.04em) scale(1.35) rotate(45deg)}}
.askbox-head .expert-face,.ask-expert .expert-face,.ask-mini .expert-face,.nx-ask-person .expert-face{animation:m-halo 2.8s ease-out 1s 6}
@keyframes m-halo{0%{box-shadow:0 0 0 0 rgba(246,220,148,.55)}70%,100%{box-shadow:0 0 0 9px rgba(246,220,148,0)}}
.bigday-ring{position:relative}
.bigday-ring::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px dashed rgba(246,220,148,.55);animation:m-spin 22s linear infinite;pointer-events:none}
@keyframes m-spin{to{transform:rotate(360deg)}}
.brandmark{animation:m-spin 60s linear infinite}

/* Tab icons hop when chosen */
.nav button[aria-current=page] svg{animation:m-hop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes m-hop{0%{transform:translateY(0) scale(1)}45%{transform:translateY(-5px) scale(1.12)}100%{transform:none}}

/* Everything you press gives back a little */
.btn,.jy-tile,.nx-area,.pitem,.nx-chip,.nx-slot,.mini,.nav button,.nx-ask-person{transition:transform .14s ease,filter .14s ease}
.btn:active,.jy-tile:active,.nx-area:active,.pitem:active,.nx-chip:active,.nx-slot:active,.mini:active,.nav button:active,.nx-ask-person:active{transform:scale(.965)}
.jy-tile:hover,.nx-area:hover,.pitem:hover{transform:translateY(-2px)}

/* Tool and area icons bob once on arrival */
.jy-tile.m-in .jy-tile-icon,.jy-tile.m-now .jy-tile-icon,.nx-area.m-in .nx-area-icon,.nx-area.m-now .nx-area-icon{animation:m-bob .7s .25s cubic-bezier(.3,1.5,.5,1) both}
@keyframes m-bob{0%{transform:scale(.6) rotate(-12deg);opacity:0}100%{transform:none;opacity:1}}

/* ---------- Round 2 ---------- */
html.m-scrolling #app::before,html.m-scrolling .m-shoot,html.m-scrolling .jy-tile-icon,html.m-scrolling .brandmark,html.m-scrolling .bigday-ring::after,
html.m-scrolling body::after,html.m-scrolling .expert-face,html.m-scrolling .lp-primary,html.m-scrolling .btn-saffron,html.m-scrolling .nx-share-wa{animation-play-state:paused!important}


/* Sky drifts gently as you scroll (browsers that support scroll-linked animation) */
@supports (animation-timeline: scroll()) {
  body::before{animation:m-parallax linear both;animation-timeline:scroll(root);animation-range:0 2400px}
  @keyframes m-parallax{to{transform:translate3d(0,-7vh,0)}}
}

/* Gold pill glides between tabs */
.nav{isolation:isolate}
.m-navpill{position:absolute;top:8px;left:0;height:calc(100% - 16px - env(safe-area-inset-bottom,0px));border-radius:14px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(246,220,148,.2),rgba(216,169,79,.07));box-shadow:inset 0 0 0 1px rgba(246,220,148,.35),0 0 18px -6px rgba(246,220,148,.5);
  transition:transform .42s cubic-bezier(.3,1.25,.4,1),width .42s cubic-bezier(.3,1.25,.4,1);will-change:transform}
.nav.m-has-pill button[aria-current=page]{background:transparent!important;box-shadow:none!important}

/* Sheets: content follows the panel up, one piece after another */
.sheet .body>*{animation:m-rise .45s cubic-bezier(.2,.9,.25,1) both}
.sheet .body>*:nth-child(2){animation-delay:.05s}.sheet .body>*:nth-child(3){animation-delay:.1s}
.sheet .body>*:nth-child(4){animation-delay:.15s}.sheet .body>*:nth-child(5){animation-delay:.2s}
.sheet .body>*:nth-child(n+6){animation-delay:.24s}

/* Section titles get a gold line that draws itself */
.section-title{position:relative}
.section-title::after{content:"";position:absolute;left:0;bottom:-6px;height:1px;width:64px;background:linear-gradient(90deg,var(--gold-hi),transparent);transform:scaleX(0);transform-origin:left}
.section-title.m-now::after,.section-title.m-in::after{animation:m-draw .9s .2s cubic-bezier(.2,.9,.25,1) forwards}
@keyframes m-draw{to{transform:scaleX(1)}}

/* Main gold buttons breathe softly so the next step is obvious */
.lp-primary,.welcome-form .btn-saffron,#pf .btn-saffron,.nx-share-wa{animation:m-breathe 3.2s ease-in-out 1.5s infinite}
@keyframes m-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.018)}}

/* Tool icons float, each on its own rhythm */
.jy-tile-icon{animation:m-float 4.2s ease-in-out 4}
.jy-tile:nth-child(3n+2) .jy-tile-icon{animation-duration:4.9s;animation-delay:-1.4s}
.jy-tile:nth-child(3n) .jy-tile-icon{animation-duration:5.6s;animation-delay:-2.8s}
.jy-tile.m-now .jy-tile-icon,.jy-tile.m-in .jy-tile-icon{animation:m-bob .7s .25s cubic-bezier(.3,1.5,.5,1) both,m-float 4.6s ease-in-out 1s 4}
@keyframes m-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* Number tiles catch a glint as they land */
.mini{position:relative;overflow:hidden}
.mini::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 35%,rgba(255,244,210,.35) 50%,transparent 65%);transform:translateX(-130%)}
.mini.m-now::after,.mini.m-in::after{animation:m-glint 1.1s .5s ease-out forwards}
@keyframes m-glint{to{transform:translateX(130%)}}


/* Match percentages and readings settle in with a tiny spring */
.pct{display:inline-block;animation:m-spring .6s cubic-bezier(.3,1.6,.5,1) both}
@keyframes m-spring{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}

@media (max-width:0px){
  body::before,.m-navpill,.sheet .body>*,.section-title::after,.lp-primary,.welcome-form .btn-saffron,#pf .btn-saffron,.nx-share-wa,
  .jy-tile-icon,.mini::after,.pct{animation:none!important;transition:none!important}
  .section-title::after{transform:scaleX(1)}
}

@media (max-width:0px){
  #app::before,#app::after,.m-shoot,.view .greet h1,.view .greet h2,.lp-hero h1,h1 em,.greet .eyebrow::before,.lp-hero .lp-eyebrow::before,
  .expert-face,.bigday-ring::after,.brandmark,.nav button svg,.m-now,.jy-tile-icon,.nx-area-icon{animation:none!important}
  .m-rv{opacity:1;transform:none}.m-shoot{display:none}
}

/* ---------- Scroll cues (cues.js) ---------- */
/* Named pill: "Next: Ask Meera ↓" */
/* Sitting still at the top: the page dips to show there is more */
.m-nudge{animation:m-nudge 1.3s cubic-bezier(.45,0,.2,1) both}
@keyframes m-nudge{0%{transform:none}35%{transform:translate3d(0,-74px,0)}62%{transform:translate3d(0,8px,0)}80%{transform:translate3d(0,-3px,0)}100%{transform:none}}

/* The daily secret at the end of each tab */
.m-secret{position:relative;margin:26px 0 8px;padding:22px 20px 20px;border-radius:22px;text-align:center;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 90% at 50% 0%,rgba(246,206,120,.20),transparent 60%),linear-gradient(180deg,rgba(18,30,52,.92),rgba(8,14,28,.94));
  border:1px solid rgba(246,214,150,.45);box-shadow:inset 0 1px 0 rgba(255,240,205,.18),0 14px 36px rgba(0,0,0,.35)}
.m-secret::before{content:"";position:absolute;inset:-40%;z-index:-1;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 20%,rgba(246,206,120,.16) 25%,transparent 32% 70%,rgba(246,206,120,.12) 76%,transparent 84%);animation:m-spin 14s linear infinite}
.m-secret-kicker{margin:0 0 6px;font-size:12.5px;letter-spacing:.06em;color:rgba(246,226,180,.75)}
.m-secret h3{margin:0 0 14px;font-size:24px;color:#f6dc94}
.m-secret-seal{display:inline-flex;flex-direction:column;align-items:center;gap:10px;min-height:44px;padding:6px 18px 4px;border:0;background:none;color:#f6dc94;font:600 14px var(--body,inherit);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
html[lang=hi] .m-secret-seal{text-transform:none;letter-spacing:.02em;font-size:15px}
.m-secret-orb{display:grid;place-items:center;width:78px;height:78px;border-radius:50%;font-size:30px;color:#2a1a02;
  background:radial-gradient(circle at 35% 30%,#fff3c8,#f0c66f 45%,#b9822f 80%);box-shadow:0 0 0 6px rgba(246,206,120,.14),0 0 34px rgba(246,206,120,.55);
  animation:m-orb 2.2s ease-in-out infinite}
@keyframes m-orb{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.08) rotate(12deg)}}
.m-secret-seal:active .m-secret-orb{transform:scale(.9)}
.m-secret-v{display:block;font-family:var(--display,serif);font-size:26px;line-height:1.15;color:#fff1cf}
.m-secret-v.is-big{font-size:64px;line-height:1;background:var(--gold-foil,linear-gradient(180deg,#fff1c8,#e3b45c));-webkit-background-clip:text;background-clip:text;color:transparent}
.m-secret-body p{margin:10px auto 6px;max-width:30ch;color:rgba(240,232,214,.88);font-size:15px;line-height:1.45}
.m-secret-body small{display:block;font-size:12.5px;color:rgba(246,226,180,.6)}
.m-secret.is-opening .m-secret-body>*{animation:m-unseal .7s cubic-bezier(.2,1.3,.35,1) both}
.m-secret.is-opening .m-secret-body>*:nth-child(2){animation-delay:.12s}.m-secret.is-opening .m-secret-body>*:nth-child(3){animation-delay:.22s}
@keyframes m-unseal{0%{opacity:0;transform:scale(.6) translateY(12px);filter:blur(4px)}100%{opacity:1;transform:none;filter:none}}
.m-secret.is-opening::after{content:"";position:absolute;left:50%;top:58%;width:30px;height:30px;margin:-15px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,236,170,.95),rgba(246,206,120,0) 70%);animation:m-burst .8s ease-out both}
@keyframes m-burst{from{transform:scale(.2);opacity:1}to{transform:scale(14);opacity:0}}
html.m-scrolling .m-secret::before,html.m-scrolling .m-secret-orb{animation-play-state:paused}

/* ---------- Landing page: more life ---------- */
.lp[data-motion=on] .lp-hero-description,.lp[data-motion=on] .lp-hero .lp-primary,.lp[data-motion=on] .lp-hero-caption{animation:m-rise .7s cubic-bezier(.2,.9,.25,1) both}
.lp[data-motion=on] .lp-hero-description{animation-delay:.35s}
.lp[data-motion=on] .lp-hero .lp-primary{animation:m-rise .7s .5s cubic-bezier(.2,.9,.25,1) both,m-breathe 3.2s ease-in-out 1.6s infinite}
.lp[data-motion=on] .lp-hero-caption{animation-delay:.65s}
.lp[data-motion=on] .lp-hero h1 em{display:inline-block;animation:m-story .9s .45s cubic-bezier(.2,1.2,.3,1) both,m-foil 5s ease-in-out 1.4s infinite}
@keyframes m-story{from{opacity:0;transform:translateY(14px) scale(.94);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
/* The sun glows and the hero art floats */
.lp[data-motion=on] .lp-universe::before{content:"";position:absolute;left:30%;top:30%;width:40%;height:40%;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(255,206,110,.55),rgba(255,206,110,0) 68%);animation:m-sun 4s ease-in-out infinite}
@keyframes m-sun{0%,100%{transform:scale(.85);opacity:.55}50%{transform:scale(1.15);opacity:1}}
.lp[data-motion=on] .lp-universe{animation:m-drift 7s ease-in-out infinite}
@keyframes m-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* Gold dust rising through the hero */
.lp-hero{position:relative}
.lp[data-motion=on] .lp-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70%;pointer-events:none;z-index:0;opacity:0;
  background-image:radial-gradient(2px 2px at 14% 80%,#ffe3a0,transparent),radial-gradient(1.6px 1.6px at 32% 92%,#fff2cc,transparent),radial-gradient(2.2px 2.2px at 56% 86%,#ffd98a,transparent),
  radial-gradient(1.5px 1.5px at 74% 95%,#fff2cc,transparent),radial-gradient(2px 2px at 88% 82%,#ffe3a0,transparent),radial-gradient(1.4px 1.4px at 44% 70%,#fff,transparent);
  background-repeat:no-repeat;animation:m-dust 6s linear infinite}
@keyframes m-dust{0%{transform:translateY(0);opacity:0}15%{opacity:.9}100%{transform:translateY(-55%);opacity:0}}
.lp-hero-copy{position:relative;z-index:1}
/* Section headings shimmer, the moon emblem floats, gallery cards lift in */
.lp[data-motion=on] .lp-section-heading h2 em,.lp[data-motion=on] .lp-discovery-story h2 em{display:inline-block;background:var(--gold-foil);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:m-foil 4.5s ease-in-out infinite}
.lp[data-motion=on] .lp-discovery-emblem img{animation:m-lpfloat 5s ease-in-out infinite}
@keyframes m-lpfloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(3deg)}}
.lp[data-motion=on] .lp-personality.m-in,.lp[data-motion=on] .lp-personality.m-now{animation:m-card .7s cubic-bezier(.2,1.2,.3,1) both;animation-delay:var(--md,0ms)}
@keyframes m-card{from{opacity:0;transform:translateY(26px) rotate(-2deg) scale(.94)}to{opacity:1;transform:none}}
.lp[data-motion=on] .lp-personality img{transition:transform .5s cubic-bezier(.2,1.2,.3,1)}
.lp[data-motion=on] .lp-personality:active img{transform:scale(1.08) rotate(6deg)}
.lp[data-motion=on] .lp-triad-art img,.lp[data-motion=on] .lp-connection-orbit img{animation:m-lpfloat 6s ease-in-out infinite}
.lp[data-motion=on] .lp-connection-b img{animation-delay:-3s}
.lp[data-motion=on] .lp-reveal-form{position:relative}
.lp[data-motion=on] .lp-reveal-form::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;padding:1px;
  background:conic-gradient(from var(--m-a,0deg),transparent 0 70%,rgba(246,214,150,.9) 80%,transparent 90%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:m-edge 5s linear infinite}
@property --m-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes m-edge{to{--m-a:360deg}}
.lp[data-motion=on] .lp-mobile-action:not([hidden]) .lp-primary{animation:m-rise .5s cubic-bezier(.2,1.3,.4,1) both,m-breathe 3.2s ease-in-out .6s infinite}
html.m-scrolling .lp-hero::after,html.m-scrolling .lp-universe,html.m-scrolling .lp-universe::before,html.m-scrolling .lp-reveal-form::after,html.m-scrolling .lp-discovery-emblem img,html.m-scrolling .lp-triad-art img{animation-play-state:paused!important}