/* ===== Anantdrristi — 3D Lo Shu grid (tarot-style number cards) ===== */
#calc{position:relative;overflow:hidden}
#calc>.wrap{position:relative;z-index:1}
#calc .calc-row{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:48px;align-items:center}
#calc .calc-row .adc{margin-top:26px}
#loshu3d{position:relative;pointer-events:none;width:100%;margin:0 auto}
#loshu3d .ls-stage{perspective:1300px;padding:26px 18px}
@media(max-width:900px){
  #calc .calc-row{grid-template-columns:1fr;gap:6px}
  #loshu3d{width:min(270px,76vw);order:2}
}
#loshu3d .ls-grid{position:relative;--rx:16deg;--ry:-10deg;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:100%;margin:0 auto;
  transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s cubic-bezier(.2,.7,.2,1);
  animation:lsSway 10s ease-in-out infinite}
#loshu3d .ls-grid.hov{animation:none;transition:transform .12s linear}
@keyframes lsSway{0%,100%{transform:rotateX(16deg) rotateY(-28deg)}50%{transform:rotateX(8deg) rotateY(-14deg)}}
#loshu3d .ls-grid:before{content:"";position:absolute;inset:-26px;border-radius:26px;transform:translateZ(-40px);pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(123,92,255,.28),transparent 70%);filter:blur(6px)}
#loshu3d .ls-grid:after{content:"";position:absolute;inset:-14px;border-radius:22px;transform:translateZ(-20px);pointer-events:none;
  border:1px solid rgba(201,184,255,.22);background:
   linear-gradient(rgba(201,184,255,.08) 1px,transparent 1px) 0 0/33.33% 33.33%,
   linear-gradient(90deg,rgba(201,184,255,.08) 1px,transparent 1px) 0 0/33.33% 33.33%}

.ls-card{position:relative;aspect-ratio:2/3;transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.2,.8,.2,1);transform:translateZ(0)}
.ls-card .ls-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.3,.9,.3,1)}
.ls-card.up .ls-in{transform:rotateY(180deg)}
.ls-card.pop{transform:translateZ(46px) scale(1.12)}
.ls-card.dim{opacity:.38;filter:saturate(.4)}
.ls-face{position:absolute;inset:0;border-radius:12px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
/* back = tarot style */
.ls-back{background:
   url(/assets/indigo/img/mandala-alpha.webp) center/86% no-repeat,
   radial-gradient(ellipse at 50% 40%,#3A2690,#140C3E 75%);
  border:1.5px solid rgba(229,169,140,.65);box-shadow:inset 0 0 0 4px rgba(13,8,48,.9),inset 0 0 0 5px rgba(229,169,140,.35),0 10px 24px rgba(5,2,25,.55)}
.ls-back:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.18) 50%,transparent 65%);
  transform:translateX(-120%);animation:lsShine 6s ease-in-out infinite}
.ls-card:nth-child(3n) .ls-back:after{animation-delay:2s}.ls-card:nth-child(3n+1) .ls-back:after{animation-delay:4s}
@keyframes lsShine{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
/* front = number in its colour */
.ls-front{transform:rotateY(180deg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:radial-gradient(ellipse at 50% 38%,color-mix(in srgb,var(--c) 38%,#140C3E),#0D0830 78%);
  border:1.5px solid var(--c);box-shadow:inset 0 0 0 4px rgba(13,8,48,.85),inset 0 0 0 5px color-mix(in srgb,var(--c) 55%,transparent),0 0 26px color-mix(in srgb,var(--c) 45%,transparent),0 10px 24px rgba(5,2,25,.55)}
.ls-num{font-family:"Sora","Mukta",system-ui,sans-serif;font-weight:700;font-size:clamp(34px,9vw,52px);line-height:1;color:var(--c);
  text-shadow:0 0 18px color-mix(in srgb,var(--c) 70%,transparent),0 2px 0 rgba(0,0,0,.35)}
.ls-pl{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:#E9E3FF;opacity:.85;font-family:"JetBrains Mono",ui-monospace,monospace}
html[lang=hi] .ls-pl{font-family:"Mukta",sans-serif;font-size:13px;letter-spacing:0;text-transform:none}
.ls-cnt{position:absolute;top:7px;right:8px;font:600 11px/1 "JetBrains Mono",monospace;color:#0D0830;background:var(--c);
  padding:3px 6px;border-radius:999px;display:none}
.ls-card.has-cnt .ls-cnt{display:block}
.ls-cap{margin-top:18px;font-size:14px;color:#D9D2F3;min-height:1.4em}
.ls-cap b{color:#F7D3C2}
.ls-title{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;letter-spacing:2.5px;color:#E5A98C;text-transform:uppercase}
html[lang=hi] .ls-title{font-family:"Mukta",sans-serif;font-size:14px;letter-spacing:0}
@media(prefers-reduced-motion:reduce){ #loshu3d .ls-grid{animation:none} .ls-back:after{animation:none} }