/* Anantdrristi — calculator pages: 3D Lo Shu grid + stair-step tiles */
.lt-hero{min-height:440px;display:flex;align-items:center}
.lt-hero>.wrap{width:100%;padding-right:min(500px,42vw)!important;box-sizing:border-box}
#lt-grid{position:absolute;top:50%;right:max(20px,calc((100vw - 1080px)/2));transform:translateY(-50%);z-index:3;
  display:flex;align-items:center;gap:22px;pointer-events:none}
#lt-grid .lt-stage,#lt-grid .lt-card{pointer-events:auto}
.lt-stage{perspective:1100px;width:230px;padding:18px 6px 4px}
.lt-g{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;transform-style:preserve-3d;
  transform:rotateX(18deg) rotateY(-20deg);transition:transform .6s cubic-bezier(.2,.7,.2,1);animation:ltSway 9s ease-in-out infinite}
.lt-g.hov{animation:none;transition:transform .12s linear}
@keyframes ltSway{0%,100%{transform:rotateX(18deg) rotateY(-24deg)}50%{transform:rotateX(8deg) rotateY(-8deg)}}
.lt-g:before{content:"";position:absolute;inset:-22px;border-radius:24px;transform:translateZ(-40px);pointer-events:none;
  background:radial-gradient(ellipse,rgba(123,92,255,.35),transparent 70%);filter:blur(8px)}
.lt-g:after{content:"";position:absolute;inset:-12px;border-radius:18px;transform:translateZ(-18px);pointer-events:none;
  border:1px solid rgba(201,184,255,.25);background:rgba(13,8,48,.35)}
.lt-card{all:unset;box-sizing:border-box;position:relative;aspect-ratio:2/3;cursor:pointer;transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .4s;transform:translateZ(0)}
.lt-card:focus-visible{outline:2px solid #F7D3C2;outline-offset:3px;border-radius:10px}
.lt-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.3,.9,.3,1);display:block}
.lt-card.up .lt-in{transform:rotateY(180deg)}
.lt-card.pop{transform:translateZ(60px) scale(1.18);z-index:2}
.lt-card.pop .lt-front{box-shadow:inset 0 0 0 3px rgba(13,8,48,.85),0 0 34px var(--c),0 18px 30px rgba(5,2,25,.7)}
.lt-back,.lt-front{position:absolute;inset:0;border-radius:10px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;display:flex;align-items:center;justify-content:center}
.lt-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 3px rgba(13,8,48,.9),0 8px 18px rgba(5,2,25,.55)}
.lt-front{transform:rotateY(180deg);background:radial-gradient(ellipse at 50% 38%,color-mix(in srgb,var(--c) 40%,#140C3E),#0D0830 80%);
  border:1.5px solid var(--c);box-shadow:inset 0 0 0 3px rgba(13,8,48,.85),0 0 16px color-mix(in srgb,var(--c) 40%,transparent),0 8px 18px rgba(5,2,25,.55);transition:box-shadow .4s}
.lt-front span{font:700 34px/1 "Sora","Mukta",system-ui,sans-serif;color:var(--c);text-shadow:0 0 16px color-mix(in srgb,var(--c) 70%,transparent)}
.lt-title{margin-top:20px;text-align:center;font:500 11px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:2.5px;color:#E5A98C;text-transform:uppercase}
html[lang=hi] .lt-title{font:600 14px/1 "Mukta",sans-serif;letter-spacing:0}
/* attribute pop-up */
.lt-info{width:220px;min-height:150px;padding:16px 16px 14px;border-radius:16px;box-sizing:border-box;position:relative;
  background:linear-gradient(160deg,rgba(42,26,110,.88),rgba(13,8,48,.92));border:1px solid color-mix(in srgb,var(--c,#C9B8FF) 55%,transparent);
  box-shadow:0 0 28px color-mix(in srgb,var(--c,#7B5CFF) 30%,transparent),0 20px 40px rgba(5,2,25,.6);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transform:perspective(700px) rotateY(25deg) translateX(30px) scale(.9);transform-origin:right center}
.lt-info.show{animation:ltPop .6s cubic-bezier(.2,.9,.25,1.25) forwards}
@keyframes ltPop{from{opacity:0;transform:perspective(700px) rotateY(35deg) translateX(40px) scale(.85)}to{opacity:1;transform:perspective(700px) rotateY(-6deg) translateX(0) scale(1)}}
.lt-info:after{content:"";position:absolute;right:-7px;top:50%;width:12px;height:12px;margin-top:-6px;transform:rotate(45deg);
  background:#1A1150;border-top:1px solid color-mix(in srgb,var(--c,#C9B8FF) 55%,transparent);border-right:1px solid color-mix(in srgb,var(--c,#C9B8FF) 55%,transparent)}
.lt-n{position:absolute;top:10px;right:14px;font:700 40px/1 "Sora",sans-serif;color:var(--c);opacity:.9;text-shadow:0 0 18px var(--c)}
.lt-b{font-size:12.5px;line-height:1.45;color:#E9E3FF}
.lt-b>b{display:block;font:600 15px/1.2 "Sora","Mukta",sans-serif;color:#F7D3C2;margin-bottom:9px;padding-right:40px}
.lt-b>div{margin-top:5px;opacity:0;animation:ltRow .45s ease forwards}
.lt-b>div:nth-child(2){animation-delay:.15s}.lt-b>div:nth-child(3){animation-delay:.25s}.lt-b>div:nth-child(4){animation-delay:.35s}.lt-b>div:nth-child(5){animation-delay:.45s}
@keyframes ltRow{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
.lt-b span{display:block;font:500 9.5px/1.3 "JetBrains Mono",monospace;letter-spacing:1.2px;text-transform:uppercase;color:#B8ADE0}
html[lang=hi] .lt-b span{font:600 11.5px/1.3 "Mukta",sans-serif;letter-spacing:0}
html[lang=hi] .lt-b{font-family:"Mukta",sans-serif;font-size:14px}
/* mobile / tablet: stack under the title */
@media(max-width:900px){
  .lt-hero{min-height:0;display:block}
  .lt-hero>.wrap{padding-right:16px!important}
  #lt-grid{position:relative;top:auto;right:auto;transform:none;flex-direction:column-reverse;gap:14px;margin:18px auto 0;width:max-content;max-width:100%}
  .lt-stage{width:200px}
  .lt-info{width:min(300px,88vw);min-height:0;transform-origin:center top}
  .lt-info:after{right:50%;top:auto;bottom:-7px;margin:0 -6px 0 0;transform:rotate(135deg)}
  @keyframes ltPop{from{opacity:0;transform:perspective(700px) rotateX(-30deg) translateY(16px) scale(.9)}to{opacity:1;transform:none}}
}
/* stair-step entrance for calculator tiles */
.lt-stair{transition:translate .8s cubic-bezier(.2,.8,.2,1),rotate .8s cubic-bezier(.2,.8,.2,1),scale .8s cubic-bezier(.2,.8,.2,1),opacity .7s ease,transform .9s cubic-bezier(.2,.7,.2,1),box-shadow .4s!important;
  transition-delay:var(--sd,0ms)!important;transform-origin:50% 0}
.lt-stair.lt-pre{opacity:0!important;translate:-24px 70px;rotate:1 0 0 -55deg;scale:.92}
@media(prefers-reduced-motion:reduce){ .lt-g{animation:none} .lt-info.show{animation:none;opacity:1;transform:none} .lt-b>div{animation:none;opacity:1} .lt-stair.lt-pre{opacity:1!important;translate:none;rotate:none;scale:none} }
/* ===== graphics on every number card (v2) ===== */
.lt-front{background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--c) 34%,#1A1150),#0A0628 82%)}
.lt-front .lt-sk{position:absolute;inset:0;opacity:.7;background:
  radial-gradient(1px 1px at 18% 22%,#fff,transparent),radial-gradient(1px 1px at 78% 14%,#fff,transparent),
  radial-gradient(1.2px 1.2px at 64% 72%,#fff,transparent),radial-gradient(1px 1px at 28% 84%,#fff,transparent),
  radial-gradient(1px 1px at 86% 58%,#fff,transparent),radial-gradient(1.4px 1.4px at 12% 52%,color-mix(in srgb,var(--c) 70%,#fff),transparent);
  animation:ltTw 3.4s ease-in-out infinite alternate}
.lt-card:nth-child(2n) .lt-sk{animation-delay:-1.7s}
@keyframes ltTw{from{opacity:.35}to{opacity:.9}}
.lt-front .lt-ray{position:absolute;left:50%;top:34%;width:150%;aspect-ratio:1;translate:-50% -50%;opacity:.28;
  background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--c) 60%,transparent) 0 6deg,transparent 6deg 22deg);
  -webkit-mask-image:radial-gradient(circle,#000 18%,transparent 62%);mask-image:radial-gradient(circle,#000 18%,transparent 62%);
  animation:ltSpin 22s linear infinite;transition:opacity .5s}
.lt-front .lt-orb{position:absolute;left:50%;top:34%;width:92%;height:30%;translate:-50% -50%;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--c) 55%,transparent);border-top-color:transparent;rotate:-14deg;opacity:.75}
.lt-front .lt-orb:after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c);
  offset-path:ellipse(50% 50% at 50% 50%);animation:ltOrbit 5s linear infinite}
@keyframes ltOrbit{to{offset-distance:100%}}
@keyframes ltSpin{to{rotate:360deg}}
.lt-pl{display:block;border-radius:50%;background:center/contain no-repeat}
.lt-front .lt-pl{position:absolute;left:50%;top:34%;width:58%;aspect-ratio:1;translate:-50% -50%;
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--c) 70%,transparent));animation:ltBob 4s ease-in-out infinite;transition:scale .6s cubic-bezier(.2,.9,.3,1.3)}
@keyframes ltBob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(8deg)}}
.lt-p1{background-image:url(/assets/indigo/planets/sun.webp)}
.lt-p2{background-image:url(/assets/indigo/planets/moon.webp)}
.lt-p3{background-image:url(/assets/indigo/planets/jupiter.webp)}
.lt-p5{background-image:url(/assets/indigo/planets/mercury.webp)}
.lt-p6{background-image:url(/assets/indigo/planets/venus.webp)}
.lt-p8{background-image:url(/assets/indigo/planets/saturn.webp);background-size:150%}
.lt-p9{background-image:url(/assets/indigo/planets/mars.webp)}
.lt-p4{background:radial-gradient(circle,#05030F 0 52%,transparent 54%),radial-gradient(circle,transparent 50%,#BFE0FF 54%,#4FA8FF 60%,rgba(79,168,255,.25) 72%,transparent 74%)}
.lt-p7{background:radial-gradient(circle at 66% 36%,#05030F 0 33%,transparent 35%),radial-gradient(circle,#F2FFFB 0 40%,#7FE3CC 44%,rgba(127,227,204,.35) 58%,transparent 70%)}
.lt-front span{position:absolute;left:0;right:0;bottom:9%;text-align:center;font-size:30px;
  text-shadow:0 0 14px color-mix(in srgb,var(--c) 80%,transparent),0 2px 0 rgba(0,0,0,.6),0 0 2px #000}
.lt-card.pop .lt-pl{scale:1.22}
.lt-card.pop .lt-ray{opacity:.75;animation-duration:7s}
.lt-card.pop .lt-orb:after{animation-duration:1.6s}
.lt-card.pop .lt-front span{animation:ltNum .7s cubic-bezier(.2,.9,.3,1.4)}
@keyframes ltNum{from{scale:.4;opacity:0}to{scale:1;opacity:1}}
.lt-card.pop .lt-front:after{content:"";position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 48%,transparent 62%);animation:ltSheen 1.1s ease forwards}
@keyframes ltSheen{from{translate:-120% 0}to{translate:120% 0}}
.lt-info .lt-ipl{position:absolute;top:-22px;right:-18px;width:62px;aspect-ratio:1;filter:drop-shadow(0 0 14px var(--c));animation:ltIpl .8s cubic-bezier(.2,.9,.3,1.3)}
@keyframes ltIpl{from{scale:.2;rotate:-90deg;opacity:0}to{scale:1;rotate:0deg;opacity:1}}
.lt-n{right:auto;left:auto;position:static;float:right;margin:-2px 30px 0 0;font-size:34px}
@media(prefers-reduced-motion:reduce){ .lt-front .lt-sk,.lt-front .lt-ray,.lt-front .lt-pl,.lt-front .lt-orb:after{animation:none} }