*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;} :root{ --bg:#050402;--gold:#c9a84c;--gdim:#7a6330;--gpale:#f0e0b0; --ember:#c4581e;--cream:#ede0c4;--muted:#6b5a3e; --text:#d0bc98;--tdim:#8a7050;--white:#f5ecda; --surf:#13100a;--surf2:#1c160e; --spd:0.55s; --vh:1vh; color-scheme:dark; } html{color-scheme:dark;background:#050402;} html,body{width:100%;height:100%;overflow:hidden;background:#050402!important;color:#d0bc98!important;font-family:'Cormorant Garamond',serif;cursor:none;-webkit-user-select:none;user-select:none;touch-action:manipulation;} @media(hover:none),(max-width:768px){ html,body{cursor:auto!important;} } /* Restore text selection on inputs, textareas, and readable content */ input,textarea{-webkit-user-select:text;user-select:text;} #content-inner{-webkit-user-select:text;user-select:text;} /* Chrome mobile viewport fix */ @supports (-webkit-touch-callout: none) { html,body{height:-webkit-fill-available;} } body{ min-height:100vh; min-height:-webkit-fill-available; } *{-webkit-tap-highlight-color:rgba(201,168,76,.15);} @media(prefers-color-scheme:light){ html,body{background:#050402!important;color:#d0bc98!important;} :root{color-scheme:dark;} } /* ── CURSOR ── */ #cur,#cur2{display:none;pointer-events:none!important;border-radius:50%;position:fixed;transform:translate(-50%,-50%);mix-blend-mode:screen;z-index:9998;} @media(min-width:769px) and (hover:hover){ #cur,#cur2{display:block;} } #cur{width:9px;height:9px;background:rgba(201,168,76,.95);} #cur2{width:24px;height:24px;border:1px solid rgba(201,168,76,.35);transition:left .1s,top .1s;} /* ── STARFIELD ── */ #bgc{position:fixed;inset:0;z-index:0;pointer-events:none;} #grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.4; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");} #erac{position:fixed;inset:0;z-index:2;pointer-events:none;} /* ── POLARITY BANDS ── */ #deva-band,#asura-band{position:fixed;top:0;bottom:0;width:46%;z-index:3;pointer-events:none;opacity:0;transition:opacity 1.2s ease;} #deva-band{right:0;background:linear-gradient(to left,rgba(76,143,201,.04),transparent);} #asura-band{left:0;background:linear-gradient(to right,rgba(201,76,76,.04),transparent);} #deva-band.on,#asura-band.on{opacity:1;} .polarity-label{position:fixed;top:50%;z-index:15;pointer-events:none;font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px;text-transform:uppercase;opacity:0;transition:opacity .8s;writing-mode:vertical-rl;} #deva-lbl{right:11px;transform:translateY(-50%);color:rgba(76,143,201,.5);} #asura-lbl{left:11px;transform:translateY(-50%) rotate(180deg);color:rgba(201,76,76,.5);} .polarity-label.on{opacity:1;} /* ── HEADER ── */ #hdr{position:fixed;top:0;left:0;right:0;z-index:100;padding:14px 44px 14px 68px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to bottom,rgba(5,4,2,.97) 60%,transparent);overflow:visible;} .h-logo{font-family:'Cinzel',serif;font-size:10px;letter-spacing:4px;color:var(--gdim);} .h-logo b{color:var(--gold);} .h-om{font-size:20px;color:var(--gdim);animation:omP 4s ease-in-out infinite;transition:color 1s ease,text-shadow 1s ease,transform .4s ease;position:relative;cursor:pointer;overflow:visible;} .h-om::before{content:'';position:absolute;top:50%;left:50%;width:38px;height:38px;border-radius:50%;border:1px solid rgba(201,168,76,.18);transform:translate(-50%,-50%);animation:omRing 4s ease-in-out infinite;pointer-events:none;} @keyframes omRing{0%,100%{transform:translate(-50%,-50%) scale(.85);opacity:.1;}50%{transform:translate(-50%,-50%) scale(1.25);opacity:.45;}} .h-om.all-visited{color:var(--gold);text-shadow:0 0 12px rgba(201,168,76,.6),0 0 28px rgba(201,168,76,.25);animation:omPGold 4s ease-in-out infinite;} /* ── Om attention state ── */ /* Radiating ring — positioned around the glyph */ .h-om::before{ content:''; position:absolute; top:50%;left:50%; width:42px;height:42px; border-radius:50%; border:1.5px solid transparent; transform:translate(-50%,-50%) scale(.5); pointer-events:none; transition:border-color .3s; } /* "start here →" label — to the RIGHT of the Om */ .h-om::after{ content:'start here →'; position:absolute; top:50%; left:calc(100% + 10px); right:auto; transform:translateY(-50%); font-family:'IBM Plex Mono',monospace; font-size:6px;letter-spacing:2px; text-transform:uppercase; color:rgba(201,168,76,.18);/* faint always-visible hint */ white-space:nowrap; pointer-events:none; transition:color .6s ease; } /* Active attention state — om-calling */ .h-om.om-calling{ color:var(--gold)!important; text-shadow:0 0 22px rgba(201,168,76,.9),0 0 48px rgba(201,168,76,.45)!important; animation:omCalling 2s ease-in-out infinite!important; transform:scale(1.22); } .h-om.om-calling::before{ animation:omRing 1.8s ease-out infinite; border-color:rgba(201,168,76,.7); } .h-om.om-calling::after{ color:rgba(201,168,76,.7); } /* Second softer nudge — om-nudge */ .h-om.om-nudge{ color:var(--gold)!important; text-shadow:0 0 14px rgba(201,168,76,.6)!important; animation:omNudge 3s ease-in-out 2!important; transform:scale(1.1); } .h-om.om-nudge::after{ color:rgba(201,168,76,.45); } @keyframes omCalling{ 0%,100%{text-shadow:0 0 18px rgba(201,168,76,.75),0 0 38px rgba(201,168,76,.35);} 50%{text-shadow:0 0 32px rgba(201,168,76,1),0 0 65px rgba(201,168,76,.55),0 0 100px rgba(201,168,76,.2);} } @keyframes omRing{ 0%{transform:translate(-50%,-50%) scale(.5);opacity:.9;border-color:rgba(201,168,76,.7);} 60%{opacity:.3;border-color:rgba(201,168,76,.3);} 100%{transform:translate(-50%,-50%) scale(2.2);opacity:0;border-color:transparent;} } @keyframes omNudge{ 0%,100%{text-shadow:0 0 8px rgba(201,168,76,.4);} 45%{text-shadow:0 0 22px rgba(201,168,76,.85),0 0 44px rgba(201,168,76,.38);} } @keyframes omPGold{0%,100%{opacity:.85;text-shadow:0 0 10px rgba(201,168,76,.5);}50%{opacity:1;text-shadow:0 0 18px rgba(201,168,76,.8),0 0 36px rgba(201,168,76,.3);}} @keyframes omP{0%,100%{opacity:.3;text-shadow:none;}50%{opacity:1;text-shadow:0 0 18px rgba(201,168,76,.6);}} .h-hint{font-family:'IBM Plex Mono',monospace;font-size:8px;color:var(--muted);letter-spacing:3px;} /* ── AXIS ── */ #axis-wrap{position:fixed;left:50%;top:0;bottom:0;transform:translateX(-50%);width:3px;z-index:10;pointer-events:none;} #axis-line{position:absolute;inset:0;background:linear-gradient(to bottom,transparent,rgba(201,168,76,.18) 10%,rgba(201,168,76,.22) 50%,rgba(201,168,76,.18) 90%,transparent);} #axis-fill{position:absolute;left:0;right:0;top:0;height:0%;background:linear-gradient(to bottom,var(--gold),var(--gdim));transition:height var(--spd) cubic-bezier(.16,1,.3,1);box-shadow:0 0 6px rgba(201,168,76,.4);} #axis-pulse{position:absolute;left:50%;top:-60px;width:3px;height:60px;transform:translateX(-50%);background:linear-gradient(to bottom,transparent,var(--gold),transparent);border-radius:2px;box-shadow:0 0 10px rgba(201,168,76,.6);animation:axP 2s ease-in-out infinite;} @keyframes axP{0%{top:-60px;opacity:0;}15%{opacity:1;}85%{opacity:1;}100%{top:100%;opacity:0;}} #axis-spark{position:absolute;left:50%;top:0;width:10px;height:10px;border-radius:50%;background:var(--gold);transform:translate(-50%,-50%);opacity:0;box-shadow:0 0 16px rgba(201,168,76,.9),0 0 32px rgba(201,168,76,.4);transition:top var(--spd) cubic-bezier(.16,1,.3,1),opacity .3s;} /* ── TRACK ── */ #track-wrap{position:fixed;left:50%;top:0;bottom:0;transform:translateX(-50%);width:1px;z-index:11;overflow:hidden;} #track{position:absolute;left:0;right:0;top:0;transition:transform var(--spd) cubic-bezier(.16,1,.3,1);} .era-row{position:relative;width:1px;height:100vh;display:flex;align-items:center;justify-content:center;} .era-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--gdim);background:var(--bg);margin-left:-6px;transition:all .5s;flex-shrink:0;} .era-dot::after{content:'';position:absolute;width:28px;height:28px;border-radius:50%;border:1px solid rgba(201,168,76,.15);margin-left:-13px;margin-top:-7px;animation:dotR 3s ease-in-out infinite;} @keyframes dotR{0%,100%{transform:scale(1);opacity:.25;}50%{transform:scale(1.3);opacity:.6;}} .era-dot.lit{background:var(--gold);border-color:var(--gold);box-shadow:0 0 20px rgba(201,168,76,.75),0 0 45px rgba(201,168,76,.3);} .era-yr{position:absolute;left:20px;font-family:'IBM Plex Mono',monospace;font-size:7.5px;color:var(--muted);letter-spacing:1.5px;white-space:nowrap;} /* ── CONTENT STAGE ── */ #content-stage{position:fixed;top:0;bottom:0;display:flex;align-items:center;z-index:50;pointer-events:none;width:44%;max-width:min(500px,45vw);transform:translateZ(0);-webkit-transform:translateZ(0);} #content-stage.side-right{left:54%;} #content-stage.side-left{right:54%;} #content-box{width:100%;pointer-events:none;opacity:0;transform:translateX(20px);transition:opacity .5s ease,transform .5s ease;} #content-box.in{opacity:1;transform:translateX(0);pointer-events:none;} /* Re-enable pointer events on the scroll container and all interactive children */ #content-box.in #content-inner, #content-box.in .e-discover, #content-box.in .e-tags, #content-box.in .e-tag, #content-box.in button, #content-box.in a, #content-box.in .layer-tabs-row, #content-box.in .lt-tab{pointer-events:auto;} #content-box.out-left{opacity:0;transform:translateX(-20px);} #content-box.out-right{opacity:0;transform:translateX(20px);} #content-stage.side-left #content-box{text-align:right;padding:0;} #content-stage.side-right #content-box{text-align:left;padding:0;} /* Inner scroll container — scrolls content independently of era navigation */ #content-inner{max-height:calc(100vh - 110px);overflow-y:auto;overflow-x:hidden;padding:0 32px 32px;scrollbar-width:thin;scrollbar-color:rgba(201,168,76,.18) transparent;-webkit-overflow-scrolling:touch;transform:translateZ(0);-webkit-transform:translateZ(0);} #content-inner::-webkit-scrollbar{width:3px;} #content-inner::-webkit-scrollbar-track{background:transparent;} #content-inner::-webkit-scrollbar-thumb{background:rgba(201,168,76,.18);border-radius:2px;} #content-inner::-webkit-scrollbar-thumb:hover{background:rgba(201,168,76,.4);} #content-stage.side-left #content-inner{padding:0 32px 32px 0;} #content-stage.side-right #content-inner{padding:0 0 32px 32px;} /* ── ERA TYPOGRAPHY ── */ .content-accent{display:block;width:50px;height:2px;margin-bottom:16px;background:var(--era-color,var(--gold));box-shadow:0 0 8px var(--era-color,var(--gold));transition:background .4s,box-shadow .4s;} #content-stage.side-left .content-accent{margin-left:auto;} .e-label{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:5px;color:var(--gdim);text-transform:uppercase;display:block;margin-bottom:8px;} /* heading: "Matsya — The Fish" style */ .e-avatar-name{font-family:'Cinzel',serif;font-size:clamp(23px,2.8vw,35px);font-weight:400;color:var(--white);line-height:1.15;display:block;} .e-avatar-name em{font-style:italic;color:var(--gold);font-family:'Cormorant Garamond',serif;} .e-avatar-subtitle{font-family:'Cormorant Garamond',serif;font-size:clamp(15px,1.6vw,21px);font-style:italic;color:var(--gpale);display:block;margin-top:2px;margin-bottom:6px;line-height:1.3;} .e-date{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:2px;color:var(--ember);display:block;margin-bottom:16px;} .e-body{font-size:16.5px;line-height:1.9;color:var(--text);margin-bottom:14px;} .e-body strong{color:var(--cream);} .e-body em{color:var(--gold);font-style:italic;} .e-quote{border-left:2px solid var(--gdim);padding:8px 0 8px 14px;font-size:15.5px;font-style:italic;color:var(--cream);line-height:1.75;margin-bottom:14px;} #content-stage.side-left .e-quote{border-left:none;border-right:2px solid var(--gdim);padding:8px 14px 8px 0;} .e-quote cite{display:block;font-size:8.5px;font-style:normal;color:var(--muted);margin-top:5px;font-family:'IBM Plex Mono',monospace;} /* ── POLARITY STRIP ── */ .e-polarity{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;} .pol-chip{padding:5px 11px;font-size:12px;line-height:1.5;border-radius:0;flex:1;min-width:120px;} .pol-chip.d{background:rgba(76,143,201,.08);border:1px solid rgba(76,143,201,.2);color:rgba(140,185,230,.9);} .pol-chip.d::before{content:'⊕ ';font-family:'IBM Plex Mono',monospace;font-size:9px;color:rgba(76,143,201,.8);} .pol-chip.a{background:rgba(201,76,76,.08);border:1px solid rgba(201,76,76,.2);color:rgba(230,140,140,.9);} .pol-chip.a::before{content:'⊖ ';font-family:'IBM Plex Mono',monospace;font-size:9px;color:rgba(201,76,76,.8);} .pol-neutral{padding:5px 11px;font-size:11px;letter-spacing:2px;font-family:'IBM Plex Mono',monospace;text-transform:uppercase;background:rgba(201,168,76,.05);border:1px solid rgba(201,168,76,.15);color:var(--gdim);display:block;margin-bottom:14px;} #content-stage.side-left .e-polarity{justify-content:flex-end;} /* ── FRACTAL SCALE ── */ .e-fractal{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;margin-bottom:14px;} .fractal-item{padding:8px 9px;background:rgba(201,168,76,.03);border:1px solid rgba(201,168,76,.1);} .fractal-lbl{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:2px;color:var(--gdim);text-transform:uppercase;margin-bottom:4px;} .fractal-val{font-size:11.5px;color:var(--text);line-height:1.4;} #content-stage.side-left .e-fractal{direction:rtl;} #content-stage.side-left .fractal-item{direction:ltr;} /* ── LAYER TABS ── */ .e-layers{margin-top:10px;margin-bottom:10px;} .layer-tabs-row{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px;} #content-stage.side-left .layer-tabs-row{justify-content:flex-end;} .ltab{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);border:1px solid rgba(107,90,62,.25);background:none;padding:4px 9px;cursor:pointer;transition:all .22s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;} .ltab:hover{color:var(--gold);border-color:rgba(201,168,76,.4);} .ltab.active{color:var(--gold);border-color:var(--gold);background:rgba(201,168,76,.06);} .layer-body{font-size:16px;line-height:1.88;color:var(--text);padding:12px 14px;background:rgba(201,168,76,.03);border:1px solid rgba(201,168,76,.1);min-height:60px;transition:opacity .2s;} /* ── TAGS ── */ .e-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px;} #content-stage.side-left .e-tags{justify-content:flex-end;} .e-tag{padding:4px 10px;border:1px solid rgba(201,168,76,.2);background:transparent;font-family:'IBM Plex Mono',monospace;font-size:7.5px;letter-spacing:1px;color:var(--tdim);text-transform:uppercase;cursor:pointer;transition:all .25s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;} .e-tag:hover{color:var(--gold);border-color:var(--gold);background:rgba(201,168,76,.05);} .e-tag-linked{border-color:rgba(201,168,76,.35);color:rgba(201,168,76,.6);} .e-tag-linked:hover{color:var(--gold);border-color:var(--gold);background:rgba(201,168,76,.08);} /* ── DISCOVER BUTTON ── */ .e-discover{display:inline-block;margin-top:14px;padding:8px 20px;font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--gdim);border:1px solid rgba(201,168,76,.25);background:none;cursor:pointer;transition:all .3s;pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent;} .e-discover:hover{color:var(--gold);border-color:var(--gold);background:rgba(201,168,76,.05);} /* ── BG GLYPH ── */ #bg-glyph{position:fixed;z-index:3;top:50%;transform:translateY(-50%);font-family:'Cormorant Garamond',serif;font-size:clamp(100px,16vw,200px);color:rgba(201,168,76,.045);pointer-events:none;line-height:1;transition:opacity .7s ease;animation:glyphRot 600s linear infinite;} #bg-glyph.left{left:3%;} #bg-glyph.right{right:3%;} @keyframes glyphRot{from{transform:translateY(-50%) rotate(0deg);}to{transform:translateY(-50%) rotate(360deg);}} /* ── TAG TOOLTIP ── */ #ttip{position:fixed;z-index:600;background:var(--surf2);border:1px solid rgba(201,168,76,.3);padding:12px 16px;max-width:270px;min-width:190px;pointer-events:none;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;box-shadow:0 8px 32px rgba(0,0,0,.6);} #ttip.on{opacity:1;transform:translateY(0);} #ttip-title{font-family:'Cinzel',serif;font-size:10px;letter-spacing:1px;color:var(--gold);margin-bottom:6px;} #ttip-body{font-size:12.5px;line-height:1.7;color:var(--text);} #ttip-body em{color:var(--gpale);font-style:italic;} /* ── SPARK ── */ .spark{position:fixed;width:0;height:0;pointer-events:none;z-index:200;} .spark span{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--gold);transform-origin:0 0;animation:spkFly .55s ease-out both;} @keyframes spkFly{0%{transform:rotate(var(--a)) translateX(0);opacity:1;}100%{transform:rotate(var(--a)) translateX(var(--d));opacity:0;}} /* ── PROGRESS ── */ #prog{position:fixed;left:18px;top:50%;transform:translateY(-50%);z-index:200;display:flex;flex-direction:column;gap:7px;align-items:center;} .pd{width:5px;height:5px;border-radius:50%;background:rgba(201,168,76,.18);cursor:pointer;transition:all .3s;border:1px solid rgba(201,168,76,.1);} .pd:hover{background:rgba(201,168,76,.5);transform:scale(1.3);} .pd.on{background:var(--pd-col,var(--gold));box-shadow:0 0 8px var(--pd-col,var(--gold)),0 0 16px var(--pd-col,var(--gold));border-color:var(--pd-col,var(--gold));transform:scale(1.35);} .pd-lbl{font-family:'IBM Plex Mono',monospace;font-size:7px;color:var(--muted);letter-spacing:1px;writing-mode:vertical-rl;text-transform:uppercase;margin-top:8px;} /* ── NAV ── */ #nav{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:200;display:flex;gap:14px;align-items:center;} .nb{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);border:1px solid rgba(107,90,62,.25);background:transparent;padding:8px 20px;cursor:pointer;transition:all .3s;} .nb:hover{color:var(--gold);border-color:var(--gold);} .nb:disabled{opacity:.2;pointer-events:none;} #nctr{font-family:'Cinzel',serif;font-size:10px;letter-spacing:3px;color:var(--gdim);min-width:80px;text-align:center;} /* ── RETURN TO BRAHMAN ── */ #return-btn{position:fixed;bottom:72px;left:50%;transform:translateX(-50%) translateY(50px);z-index:200;font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gdim);border:1px solid rgba(201,168,76,.14);background:rgba(5,4,2,.88);padding:7px 18px;cursor:pointer;transition:all .7s cubic-bezier(.16,1,.3,1);opacity:0;pointer-events:none;white-space:nowrap;} #return-btn.show{opacity:1;pointer-events:all;transform:translateX(-50%) translateY(0);} #return-btn:hover{color:var(--gold);border-color:rgba(201,168,76,.45);box-shadow:0 0 16px rgba(201,168,76,.1);} /* ── SCROLL HINT ── */ #shint{position:fixed;bottom:72px;left:50%;transform:translateX(-50%);z-index:200;font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:3px;color:var(--muted);text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:6px;transition:opacity .8s;} #shint.off{opacity:0;pointer-events:none;} .sarr{width:1px;height:26px;background:linear-gradient(to bottom,var(--gdim),transparent);animation:saDrop 1.5s ease-in-out infinite;} @keyframes saDrop{0%{transform:scaleY(0);transform-origin:top;}50%{transform:scaleY(1);transform-origin:top;}100%{transform:scaleY(0);transform-origin:bottom;}} /* ── PANEL ── */ #ov{position:fixed;inset:0;background:rgba(5,4,2,.82);backdrop-filter:blur(5px);z-index:400;opacity:0;pointer-events:none;visibility:hidden;transition:opacity .4s,visibility 0s .4s;} #ov.on{opacity:1;pointer-events:all;visibility:visible;transition:opacity .4s,visibility 0s;} #panel{position:fixed;top:0;right:0;bottom:0;width:480px;max-width:95vw;background:var(--surf);border-left:1px solid rgba(201,168,76,.15);z-index:410;transform:translateX(100%);transition:transform .5s cubic-bezier(.16,1,.3,1);overflow-y:auto;} #ov.on #panel{transform:translateX(0);} .ptop{height:3px;background:linear-gradient(to right,transparent,var(--gdim),var(--gold),var(--gdim),transparent);} .phead{padding:26px 30px 18px;border-bottom:1px solid rgba(201,168,76,.1);position:sticky;top:0;background:var(--surf);z-index:5;} .pcls{position:absolute;top:14px;right:14px;background:none;border:1px solid var(--muted);color:var(--muted);width:28px;height:28px;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;transition:all .2s;} .pcls:hover{border-color:var(--gold);color:var(--gold);} .pglyph{font-size:26px;display:block;margin-bottom:7px;} .ptitle{font-family:'Cinzel',serif;font-size:16px;color:var(--white);margin-bottom:3px;} .psub{font-size:13px;font-style:italic;color:var(--gold);} .pbody{padding:20px 30px 60px;} .psec{margin-bottom:22px;animation:fadeUp .4s ease both;} .psec:nth-child(1){animation-delay:.04s}.psec:nth-child(2){animation-delay:.09s} .psec:nth-child(3){animation-delay:.14s}.psec:nth-child(4){animation-delay:.19s} .psec:nth-child(5){animation-delay:.24s}.psec:nth-child(6){animation-delay:.29s} .plbl{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:3px;color:var(--gdim);text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:8px;} .plbl::after{content:'';flex:1;height:1px;background:rgba(201,168,76,.1);} .psec p{font-size:15.5px;line-height:1.9;color:var(--text);margin-bottom:10px;} .psec blockquote{border-left:2px solid var(--gdim);padding:8px 0 8px 14px;font-style:italic;color:var(--cream);font-size:14px;line-height:1.7;} .psec blockquote cite{display:block;font-size:8.5px;font-style:normal;color:var(--muted);margin-top:4px;font-family:'IBM Plex Mono',monospace;} .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;} .fi{background:rgba(201,168,76,.04);border:1px solid rgba(201,168,76,.1);padding:10px 12px;} .fk{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px;color:var(--gdim);text-transform:uppercase;margin-bottom:3px;} .fv{font-size:13px;color:var(--text);} .hook{background:var(--surf2);border-left:3px solid var(--ember);padding:11px 14px;font-size:14.5px;line-height:1.75;color:var(--cream);} .pol-panel-row{display:flex;gap:8px;flex-wrap:wrap;} .pol-panel-chip{padding:8px 12px;font-size:13px;line-height:1.6;flex:1;min-width:150px;} .pol-panel-chip.d{background:rgba(76,143,201,.08);border:1px solid rgba(76,143,201,.2);color:rgba(140,185,230,.9);} .pol-panel-chip.a{background:rgba(201,76,76,.08);border:1px solid rgba(201,76,76,.2);color:rgba(230,140,140,.9);} /* ── INTRO ── */ /* ══════════════════════════════════════════ HOMEPAGE — Full entry experience ══════════════════════════════════════════ */ /* ── INTRO ── */ /* ══════════════════════════════════════════ HOMEPAGE — Full entry experience ══════════════════════════════════════════ */ #intro{position:fixed;inset:0;z-index:500;background:#070608;overflow-y:auto;overflow-x:hidden;transition:opacity .9s ease;scroll-behavior:smooth;cursor:auto;} #intro.off{opacity:0;pointer-events:none;} #intro-canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;} #intro-grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.35;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");} .intro-wrap{position:relative;z-index:2;min-height:100vh;display:flex;flex-direction:column;} /* ── S1: Hero ── */ .i-hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 24px 40px;position:relative;} .i-hero-om{font-size:72px;color:var(--gold);display:block;margin-bottom:20px;animation:omP 5s ease-in-out infinite;text-shadow:0 0 60px rgba(201,168,76,.35);opacity:0;animation:iRise 1.2s .1s cubic-bezier(.16,1,.3,1) both,omP 5s 1.3s ease-in-out infinite;} .i-hero-title{font-family:'Cinzel',serif;font-size:clamp(28px,5vw,64px);color:rgba(240,230,210,.92);line-height:1.08;margin-bottom:10px;letter-spacing:.02em;opacity:0;animation:iRise 1.2s .3s cubic-bezier(.16,1,.3,1) both;} .i-hero-title em{font-style:italic;color:var(--gold);font-family:'Cormorant Garamond',serif;font-size:1.05em;} .i-hero-by{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:5px;color:var(--muted);text-transform:uppercase;margin-bottom:28px;opacity:0;animation:iRise 1.2s .5s cubic-bezier(.16,1,.3,1) both;} .i-hero-rule{width:120px;height:1px;background:linear-gradient(to right,transparent,rgba(201,168,76,.5),transparent);margin:0 auto 28px;opacity:0;animation:iRise .8s .65s both;} .i-hero-desc{font-family:'Cormorant Garamond',serif;font-size:clamp(16px,1.8vw,21px);color:rgba(220,200,160,.65);max-width:640px;line-height:1.85;font-style:italic;opacity:0;animation:iRise 1s .8s cubic-bezier(.16,1,.3,1) both;} .i-hero-scroll{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;animation:iRise .8s 1.4s both;} /* Hero CTA block */ .i-hero-cta-wrap{display:flex;flex-direction:column;align-items:center;gap:24px;margin-top:32px;margin-bottom:8px;opacity:0;animation:iRise 1s 1.0s cubic-bezier(.16,1,.3,1) both;width:100%;max-width:780px;} .i-hero-enter{margin-bottom:0!important;} .i-hero-why-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;} .i-why-chip{border:1px solid rgba(201,168,76,.12);background:rgba(201,168,76,.025);padding:16px 14px;text-align:left;position:relative;cursor:default;pointer-events:none;} .i-why-chip-icon{font-size:16px;color:var(--gdim);display:block;margin-bottom:8px;line-height:1;} .i-why-chip-txt{font-family:'Cormorant Garamond',serif;font-size:13.5px;line-height:1.75;color:rgba(200,180,130,.6);} .i-why-chip-txt em{color:rgba(201,168,76,.75);font-style:italic;} @media(max-width:768px){ .i-hero-why-row{grid-template-columns:1fr;} .i-hero-cta-wrap{gap:18px;margin-top:24px;} .i-why-chip{padding:13px 12px;} .i-why-chip-txt{font-size:13px;} } .i-hero-scroll span{font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:4px;color:rgba(201,168,76,.25);text-transform:uppercase;} .i-scroll-arr{width:1px;height:28px;background:linear-gradient(to bottom,rgba(201,168,76,.3),transparent);animation:saDrop 1.8s ease-in-out infinite;} /* ── S2: Scale band ── */ .i-scale{padding:48px 24px;border-top:1px solid rgba(201,168,76,.08);border-bottom:1px solid rgba(201,168,76,.08);background:rgba(201,168,76,.02);opacity:0;animation:iRise 1s 1.0s both;} .i-scale-inner{max-width:800px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:0;} .i-scale-item{text-align:center;padding:20px 12px;position:relative;} .i-scale-item+.i-scale-item::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);height:40%;width:1px;background:rgba(201,168,76,.15);} .i-scale-num{font-family:'Cinzel',serif;font-size:clamp(24px,3.5vw,44px);color:var(--gold);display:block;line-height:1;margin-bottom:6px;text-shadow:0 0 20px rgba(201,168,76,.2);} .i-scale-lbl{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px;color:var(--muted);text-transform:uppercase;} /* ── S3: Three Doors ── */ .i-doors{padding:80px 24px;opacity:0;animation:iRise 1s 1.1s both;} .i-doors-inner{max-width:960px;margin:0 auto;} .i-doors-head{text-align:center;margin-bottom:12px;} .i-doors-title{font-family:'Cinzel',serif;font-size:clamp(14px,1.8vw,18px);letter-spacing:5px;text-transform:uppercase;color:rgba(201,168,76,.5);} .i-doors-sub{font-family:'Cormorant Garamond',serif;font-size:clamp(18px,2.2vw,24px);color:rgba(240,230,210,.6);font-style:italic;margin-top:6px;margin-bottom:40px;} .i-doors-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} .i-door{border:1px solid rgba(201,168,76,.14);background:rgba(201,168,76,.02);padding:32px 24px 28px;cursor:pointer;transition:all .4s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden;} .i-door::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(201,168,76,.06),transparent 70%);opacity:0;transition:opacity .4s;} .i-door:hover{border-color:rgba(201,168,76,.5);background:rgba(201,168,76,.05);transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 1px rgba(201,168,76,.3);} .i-door:hover::before{opacity:1;} .i-door:hover .i-door-glyph{transform:scale(1.15);color:var(--gold);} .i-door:hover .i-door-arrow{letter-spacing:4px;color:var(--gold);} .i-door-glyph{font-size:28px;color:var(--gdim);display:block;margin-bottom:14px;transition:transform .3s,color .3s;line-height:1;} .i-door-name{font-family:'Cinzel',serif;font-size:13px;letter-spacing:1.5px;color:rgba(240,220,180,.85);margin-bottom:10px;} .i-door-desc{font-family:'Cormorant Garamond',serif;font-size:14px;line-height:1.75;color:rgba(200,180,140,.55);margin-bottom:18px;font-style:italic;} .i-door-arrow{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:2px;color:rgba(201,168,76,.4);text-transform:uppercase;transition:letter-spacing .3s,color .3s;} /* ── S4: Why it exists ── */ .i-why{padding:80px 24px;text-align:center;opacity:0;animation:iRise 1s 1.2s both;} .i-why-inner{max-width:680px;margin:0 auto;} .i-why-lbl{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:5px;color:rgba(201,168,76,.3);text-transform:uppercase;margin-bottom:20px;} .i-why-text{font-family:'Cormorant Garamond',serif;font-size:clamp(16px,1.8vw,20px);color:rgba(220,200,160,.6);line-height:2;font-style:italic;} .i-why-text strong{color:rgba(240,220,180,.85);font-style:normal;font-weight:400;} .i-why-sig{font-family:'Cinzel',serif;font-size:10px;letter-spacing:3px;color:rgba(201,168,76,.35);margin-top:24px;display:block;} /* ── S5: Lens Declaration ── */ .i-lens{padding:56px 24px;border-top:1px solid rgba(201,168,76,.07);border-bottom:1px solid rgba(201,168,76,.07);opacity:0;animation:iRise 1s 1.3s both;} .i-lens-inner{max-width:760px;margin:0 auto;text-align:center;} .i-lens-label{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:5px;color:rgba(201,168,76,.3);text-transform:uppercase;margin-bottom:32px;} .i-lens-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:center;} .i-lens-col{padding:24px 32px;} .i-lens-col-title{font-family:'Cinzel',serif;font-size:clamp(13px,1.6vw,17px);letter-spacing:2px;color:rgba(240,220,180,.8);margin-bottom:10px;} .i-lens-col-items{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:2px;color:rgba(180,160,110,.4);line-height:2.2;text-transform:uppercase;} .i-lens-div{font-family:'Noto Sans Devanagari',sans-serif;font-size:28px;color:rgba(201,168,76,.3);padding:0 16px;line-height:1;} /* ── S6: CTA ── */ .i-cta{padding:80px 24px 60px;text-align:center;opacity:0;animation:iRise 1s 1.4s both;} .i-cta-label{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:6px;color:rgba(201,168,76,.3);text-transform:uppercase;margin-bottom:24px;} .i-cta-btn{display:inline-block;position:relative;font-family:'Cinzel',serif;font-size:12px;letter-spacing:5px;text-transform:uppercase;color:var(--gold);border:1px solid rgba(201,168,76,.4);background:transparent;padding:18px 52px;cursor:pointer;overflow:hidden;transition:color .4s,border-color .4s;margin-bottom:20px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;} .i-cta-btn::before{content:'';position:absolute;inset:0;background:var(--gold);transform:translateX(-101%);transition:transform .45s cubic-bezier(.16,1,.3,1);} .i-cta-btn:hover::before{transform:translateX(0);} .i-cta-btn:hover{color:#070608;border-color:var(--gold);} .i-cta-btn span{position:relative;z-index:1;} .i-cta-note{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px;color:rgba(107,90,62,.4);text-transform:uppercase;} /* ── Footer ── */ .i-footer{padding:24px 36px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(201,168,76,.06);} .i-footer-l{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px;color:rgba(107,90,62,.4);text-transform:uppercase;} .i-footer-r{font-family:'Noto Sans Devanagari',sans-serif;font-size:13px;color:rgba(201,168,76,.25);} /* ── OM Guide Panel (orientation overlay) ── */ #om-guide{position:fixed;inset:0;z-index:800;background:rgba(5,4,2,.97);backdrop-filter:blur(14px);opacity:0;pointer-events:none;visibility:hidden;transition:opacity .4s,visibility 0s .4s;overflow-y:auto;} #om-guide.on{opacity:1;pointer-events:all;visibility:visible;transition:opacity .4s,visibility 0s;} .og-wrap{max-width:700px;margin:0 auto;padding:50px 32px 80px;} .og-close{position:absolute;top:18px;right:20px;background:none;border:1px solid rgba(201,168,76,.2);color:rgba(201,168,76,.4);width:30px;height:30px;cursor:pointer;font-size:12px;font-family:'IBM Plex Mono',monospace;display:flex;align-items:center;justify-content:center;transition:all .2s;} .og-close:hover{border-color:var(--gold);color:var(--gold);} .og-om{font-size:48px;color:var(--gold);display:block;text-align:center;margin-bottom:12px;animation:omP 4s ease-in-out infinite;} .og-title{font-family:'Cinzel',serif;font-size:clamp(18px,2.5vw,26px);color:rgba(240,220,180,.85);text-align:center;margin-bottom:4px;} .og-sub{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:4px;color:var(--muted);text-transform:uppercase;text-align:center;margin-bottom:36px;} .og-rule{width:80px;height:1px;background:linear-gradient(to right,transparent,rgba(201,168,76,.4),transparent);margin:0 auto 36px;} .og-q{margin-bottom:22px;padding:16px 18px;border:1px solid rgba(201,168,76,.09);background:rgba(201,168,76,.02);} .og-q-num{font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:3px;color:rgba(201,168,76,.3);text-transform:uppercase;margin-bottom:5px;} .og-q-label{font-family:'Cinzel',serif;font-size:12px;color:rgba(240,220,180,.7);margin-bottom:8px;letter-spacing:.5px;} .og-q-ans{font-size:14px;line-height:1.82;color:rgba(200,180,130,.6);font-family:'Cormorant Garamond',serif;} .og-q-ans em{color:rgba(201,168,76,.75);font-style:italic;} .og-dr-link{display:block;margin-top:32px;text-align:center;font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px;color:rgba(201,168,76,.25);text-transform:uppercase;cursor:pointer;border:1px solid rgba(201,168,76,.1);padding:10px;transition:all .2s;} .og-dr-link:hover{color:rgba(201,168,76,.6);border-color:rgba(201,168,76,.3);} /* ── Shared animation ── */ @keyframes iRise{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);}} /* ── Mobile overrides for homepage ── */ @media(max-width:768px){ #intro{overflow-y:auto;} .i-hero{min-height:100svh;padding:50px 20px 36px;} .i-scale-inner{grid-template-columns:repeat(2,1fr);} .i-scale-item+.i-scale-item::before{display:none;} .i-scale-item:nth-child(2){border-right:none;} .i-doors-grid{grid-template-columns:1fr;} .i-lens-grid{grid-template-columns:1fr;text-align:center;} .i-lens-div{display:none;} .i-lens-col{padding:16px;} .i-footer{flex-direction:column;gap:10px;text-align:center;} #dr-btn{display:none;} } @keyframes fadeUp{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}} #intro{position:fixed;inset:0;z-index:500;background:#070608;overflow-y:auto;overflow-x:hidden;transition:opacity .9s ease;scroll-behavior:smooth;} #intro.off{opacity:0;pointer-events:none;} #intro-canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;} #intro-grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.35;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");} .intro-wrap{position:relative;z-index:2;min-height:100vh;display:flex;flex-direction:column;} /* ── S1: Hero ── */ .i-hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 24px 40px;position:relative;} .i-hero-om{font-size:72px;color:var(--gold);display:block;margin-bottom:20px;animation:omP 5s ease-in-out infinite;text-shadow:0 0 60px rgba(201,168,76,.35);opacity:0;animation:iRise 1.2s .1s cubic-bezier(.16,1,.3,1) both,omP 5s 1.3s ease-in-out infinite;} .i-hero-title{font-family:'Cinzel',serif;font-size:clamp(28px,5vw,64px);color:rgba(240,230,210,.92);line-height:1.08;margin-bottom:10px;letter-spacing:.02em;opacity:0;animation:iRise 1.2s .3s cubic-bezier(.16,1,.3,1) both;} .i-hero-title em{font-style:italic;color:var(--gold);font-family:'Cormorant Garamond',serif;font-size:1.05em;} .i-hero-by{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:5px;color:var(--muted);text-transform:uppercase;margin-bottom:28px;opacity:0;animation:iRise 1.2s .5s cubic-bezier(.16,1,.3,1) both;} .i-hero-rule{width:120px;height:1px;background:linear-gradient(to right,transparent,rgba(201,168,76,.5),transparent);margin:0 auto 28px;opacity:0;animation:iRise .8s .65s both;} .i-hero-desc{font-family:'Cormorant Garamond',serif;font-size:clamp(16px,1.8vw,21px);color:rgba(220,200,160,.65);max-width:640px;line-height:1.85;font-style:italic;opacity:0;animation:iRise 1s .8s cubic-bezier(.16,1,.3,1) both;} .i-hero-scroll{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;animation:iRise .8s 1.4s both;} /* Hero CTA block */ .i-hero-cta-wrap{display:flex;flex-direction:column;align-items:center;gap:24px;margin-top:32px;margin-bottom:8px;opacity:0;animation:iRise 1s 1.0s cubic-bezier(.16,1,.3,1) both;width:100%;max-width:780px;} .i-hero-enter{margin-bottom:0!important;} .i-hero-why-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;} .i-why-chip{border:1px solid rgba(201,168,76,.12);background:rgba(201,168,76,.025);padding:16px 14px;text-align:left;position:relative;cursor:default;pointer-events:none;} .i-why-chip-icon{font-size:16px;color:var(--gdim);display:block;margin-bottom:8px;line-height:1;} .i-why-chip-txt{font-family:'Cormorant Garamond',serif;font-size:13.5px;line-height:1.75;color:rgba(200,180,130,.6);} .i-why-chip-txt em{color:rgba(201,168,76,.75);font-style:italic;} @media(max-width:768px){ .i-hero-why-row{grid-template-columns:1fr;} .i-hero-cta-wrap{gap:18px;margin-top:24px;} .i-why-chip{padding:13px 12px;} .i-why-chip-txt{font-size:13px;} } .i-hero-scroll span{font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:4px;color:rgba(201,168,76,.25);text-transform:uppercase;} .i-scroll-arr{width:1px;height:28px;background:linear-gradient(to bottom,rgba(201,168,76,.3),transparent);animation:saDrop 1.8s ease-in-out infinite;} /* ── S2: Scale band ── */ .i-scale{padding:48px 24px;border-top:1px solid rgba(201,168,76,.08);border-bottom:1px solid rgba(201,168,76,.08);background:rgba(201,168,76,.02);opacity:0;animation:iRise 1s 1.0s both;} .i-scale-inner{max-width:800px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:0;} .i-scale-item{text-align:center;padding:20px 12px;position:relative;} .i-scale-item+.i-scale-item::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);height:40%;width:1px;background:rgba(201,168,76,.15);} .i-scale-num{font-family:'Cinzel',serif;font-size:clamp(24px,3.5vw,44px);color:var(--gold);display:block;line-height:1;margin-bottom:6px;text-shadow:0 0 20px rgba(201,168,76,.2);} .i-scale-lbl{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px;color:var(--muted);text-transform:uppercase;} /* ── S3: Three Doors ── */ .i-doors{padding:80px 24px;opacity:0;animation:iRise 1s 1.1s both;} .i-doors-inner{max-width:960px;margin:0 auto;} .i-doors-head{text-align:center;margin-bottom:12px;} .i-doors-title{font-family:'Cinzel',serif;font-size:clamp(14px,1.8vw,18px);letter-spacing:5px;text-transform:uppercase;color:rgba(201,168,76,.5);} .i-doors-sub{font-family:'Cormorant Garamond',serif;font-size:clamp(18px,2.2vw,24px);color:rgba(240,230,210,.6);font-style:italic;margin-top:6px;margin-bottom:40px;} .i-doors-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} .i-door{border:1px solid rgba(201,168,76,.14);background:rgba(201,168,76,.02);padding:32px 24px 28px;cursor:pointer;transition:all .4s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden;} .i-door::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(201,168,76,.06),transparent 70%);opacity:0;transition:opacity .4s;} .i-door:hover{border-color:rgba(201,168,76,.5);background:rgba(201,168,76,.05);transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 1px rgba(201,168,76,.3);} .i-door:hover::before{opacity:1;} .i-door:hover .i-door-glyph{transform:scale(1.15);color:var(--gold);} .i-door:hover .i-door-arrow{letter-spacing:4px;color:var(--gold);} .i-door-glyph{font-size:28px;color:var(--gdim);display:block;margin-bottom:14px;transition:transform .3s,color .3s;line-height:1;} .i-door-name{font-family:'Cinzel',serif;font-size:13px;letter-spacing:1.5px;color:rgba(240,220,180,.85);margin-bottom:10px;} .i-door-desc{font-family:'Cormorant Garamond',serif;font-size:14px;line-height:1.75;color:rgba(200,180,140,.55);margin-bottom:18px;font-style:italic;} .i-door-arrow{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:2px;color:rgba(201,168,76,.4);text-transform:uppercase;transition:letter-spacing .3s,color .3s;} /* ── S4: Why it exists ── */ .i-why{padding:80px 24px;text-align:center;opacity:0;animation:iRise 1s 1.2s both;} .i-why-inner{max-width:680px;margin:0 auto;} .i-why-lbl{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:5px;color:rgba(201,168,76,.3);text-transform:uppercase;margin-bottom:20px;} .i-why-text{font-family:'Cormorant Garamond',serif;font-size:clamp(16px,1.8vw,20px);color:rgba(220,200,160,.6);line-height:2;font-style:italic;} .i-why-text strong{color:rgba(240,220,180,.85);font-style:normal;font-weight:400;} .i-why-sig{font-family:'Cinzel',serif;font-size:10px;letter-spacing:3px;color:rgba(201,168,76,.35);margin-top:24px;display:block;} /* ── S5: Lens Declaration ── */ .i-lens{padding:56px 24px;border-top:1px solid rgba(201,168,76,.07);border-bottom:1px solid rgba(201,168,76,.07);opacity:0;animation:iRise 1s 1.3s both;} .i-lens-inner{max-width:760px;margin:0 auto;text-align:center;} .i-lens-label{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:5px;color:rgba(201,168,76,.3);text-transform:uppercase;margin-bottom:32px;} .i-lens-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:center;} .i-lens-col{padding:24px 32px;} .i-lens-col-title{font-family:'Cinzel',serif;font-size:clamp(13px,1.6vw,17px);letter-spacing:2px;color:rgba(240,220,180,.8);margin-bottom:10px;} .i-lens-col-items{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:2px;color:rgba(180,160,110,.4);line-height:2.2;text-transform:uppercase;} .i-lens-div{font-family:'Noto Sans Devanagari',sans-serif;font-size:28px;color:rgba(201,168,76,.3);padding:0 16px;line-height:1;} /* ── S6: CTA ── */ .i-cta{padding:80px 24px 60px;text-align:center;opacity:0;animation:iRise 1s 1.4s both;} .i-cta-label{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:6px;color:rgba(201,168,76,.3);text-transform:uppercase;margin-bottom:24px;} .i-cta-btn{display:inline-block;position:relative;font-family:'Cinzel',serif;font-size:12px;letter-spacing:5px;text-transform:uppercase;color:var(--gold);border:1px solid rgba(201,168,76,.4);background:transparent;padding:18px 52px;cursor:pointer;overflow:hidden;transition:color .4s,border-color .4s;margin-bottom:20px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;} .i-cta-btn::before{content:'';position:absolute;inset:0;background:var(--gold);transform:translateX(-101%);transition:transform .45s cubic-bezier(.16,1,.3,1);} .i-cta-btn:hover::before{transform:translateX(0);} .i-cta-btn:hover{color:#070608;border-color:var(--gold);} .i-cta-btn span{position:relative;z-index:1;} .i-cta-note{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px;color:rgba(107,90,62,.4);text-transform:uppercase;} /* ── Footer ── */ .i-footer{padding:24px 36px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(201,168,76,.06);} .i-footer-l{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px;color:rgba(107,90,62,.4);text-transform:uppercase;} .i-footer-r{font-family:'Noto Sans Devanagari',sans-serif;font-size:13px;color:rgba(201,168,76,.25);} /* ── OM Guide Panel (orientation overlay) ── */ #om-guide{position:fixed;inset:0;z-index:800;background:rgba(5,4,2,.97);backdrop-filter:blur(14px);opacity:0;pointer-events:none;visibility:hidden;transition:opacity .4s,visibility 0s .4s;overflow-y:auto;} #om-guide.on{opacity:1;pointer-events:all;visibility:visible;transition:opacity .4s,visibility 0s;} .og-wrap{max-width:700px;margin:0 auto;padding:50px 32px 80px;} .og-close{position:absolute;top:18px;right:20px;background:none;border:1px solid rgba(201,168,76,.2);color:rgba(201,168,76,.4);width:30px;height:30px;cursor:pointer;font-size:12px;font-family:'IBM Plex Mono',monospace;display:flex;align-items:center;justify-content:center;transition:all .2s;} .og-close:hover{border-color:var(--gold);color:var(--gold);} .og-om{font-size:48px;color:var(--gold);display:block;text-align:center;margin-bottom:12px;animation:omP 4s ease-in-out infinite;} .og-title{font-family:'Cinzel',serif;font-size:clamp(18px,2.5vw,26px);color:rgba(240,220,180,.85);text-align:center;margin-bottom:4px;} .og-sub{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:4px;color:var(--muted);text-transform:uppercase;text-align:center;margin-bottom:36px;} .og-rule{width:80px;height:1px;background:linear-gradient(to right,transparent,rgba(201,168,76,.4),transparent);margin:0 auto 36px;} .og-q{margin-bottom:22px;padding:16px 18px;border:1px solid rgba(201,168,76,.09);background:rgba(201,168,76,.02);} .og-q-num{font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:3px;color:rgba(201,168,76,.3);text-transform:uppercase;margin-bottom:5px;} .og-q-label{font-family:'Cinzel',serif;font-size:12px;color:rgba(240,220,180,.7);margin-bottom:8px;letter-spacing:.5px;} .og-q-ans{font-size:14px;line-height:1.82;color:rgba(200,180,130,.6);font-family:'Cormorant Garamond',serif;} .og-q-ans em{color:rgba(201,168,76,.75);font-style:italic;} .og-dr-link{display:block;margin-top:32px;text-align:center;font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px;color:rgba(201,168,76,.25);text-transform:uppercase;cursor:pointer;border:1px solid rgba(201,168,76,.1);padding:10px;transition:all .2s;} .og-dr-link:hover{color:rgba(201,168,76,.6);border-color:rgba(201,168,76,.3);} /* Make OM header clickable */ .h-om{cursor:pointer!important;} .h-om:hover{color:var(--gold)!important;text-shadow:0 0 14px rgba(201,168,76,.5)!important;} /* ── Design Review Panel ── */ #dr-btn{position:fixed;bottom:16px;right:16px;z-index:600;font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:2px;text-transform:uppercase;color:rgba(201,168,76,.35);border:1px solid rgba(201,168,76,.15);background:rgba(7,6,8,.9);padding:7px 12px;cursor:pointer;transition:all .25s;} #dr-btn:hover{color:rgba(201,168,76,.7);border-color:rgba(201,168,76,.4);} #dr-panel{position:fixed;right:0;top:0;bottom:0;width:320px;background:rgba(7,6,8,.98);border-left:1px solid rgba(201,168,76,.12);z-index:700;transform:translateX(100%);transition:transform .45s cubic-bezier(.16,1,.3,1);overflow-y:auto;padding:28px 22px 60px;} #dr-panel.open{transform:translateX(0);} .dr-hdr{font-family:'Cinzel',serif;font-size:12px;color:rgba(240,220,180,.7);letter-spacing:2px;margin-bottom:4px;} .dr-sub{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:2px;color:rgba(107,90,62,.4);text-transform:uppercase;margin-bottom:24px;} .dr-close{position:absolute;top:18px;right:16px;background:none;border:1px solid rgba(107,90,62,.25);color:rgba(107,90,62,.5);width:26px;height:26px;cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;transition:all .2s;} .dr-close:hover{border-color:var(--gold);color:var(--gold);} .dr-item{margin-bottom:18px;padding:12px 14px;border:1px solid rgba(201,168,76,.07);background:rgba(201,168,76,.02);} .dr-q{font-size:11px;color:rgba(220,200,160,.65);line-height:1.55;margin-bottom:8px;} .dr-status{display:inline-flex;align-items:center;gap:5px;font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:2px;text-transform:uppercase;padding:3px 8px;border-radius:0;} .dr-pass{background:rgba(80,180,80,.1);border:1px solid rgba(80,180,80,.25);color:rgba(120,200,120,.8);} .dr-partial{background:rgba(201,168,76,.08);border:1px solid rgba(201,168,76,.2);color:rgba(201,168,76,.7);} .dr-how{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:1px;color:rgba(107,90,62,.45);margin-top:6px;line-height:1.6;} /* ── Shared animation ── */ @keyframes iRise{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);}} /* ── Mobile overrides for homepage ── */ @media(max-width:768px){ #intro{overflow-y:auto;} .i-hero{min-height:100svh;padding:50px 20px 36px;} .i-scale-inner{grid-template-columns:repeat(2,1fr);} .i-scale-item+.i-scale-item::before{display:none;} .i-scale-item:nth-child(2){border-right:none;} .i-doors-grid{grid-template-columns:1fr;} .i-lens-grid{grid-template-columns:1fr;text-align:center;} .i-lens-div{display:none;} .i-lens-col{padding:16px;} .i-footer{flex-direction:column;gap:10px;text-align:center;} #dr-btn{display:none;} } @keyframes fadeUp{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}} /* ── CONSCIOUSNESS SPECTRUM ── */ #cspec{position:fixed;bottom:0;left:0;right:0;z-index:195;height:26px;pointer-events:none;background:linear-gradient(to top,rgba(5,4,2,.8),transparent);} #cspec-inner{position:absolute;left:90px;right:90px;top:50%;transform:translateY(-50%);} #cspec-rail{height:1px;background:linear-gradient(to right,rgba(80,60,30,.3),rgba(80,140,200,.2) 30%,rgba(201,168,76,.3) 70%,rgba(240,230,200,.5));position:relative;} #cspec-glow{position:absolute;top:50%;height:1px;left:0;background:linear-gradient(to right,transparent,rgba(201,168,76,.5));transition:width 1.4s cubic-bezier(.16,1,.3,1);transform:translateY(-50%);} #cspec-marker{position:absolute;top:50%;width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px rgba(201,168,76,.9),0 0 24px rgba(201,168,76,.35);transform:translate(-50%,-50%);transition:left 1.4s cubic-bezier(.16,1,.3,1);} #cspec-tip{position:absolute;bottom:12px;font-family:'IBM Plex Mono',monospace;font-size:5.5px;letter-spacing:1px;color:var(--gdim);transform:translateX(-50%);transition:left 1.4s cubic-bezier(.16,1,.3,1);white-space:nowrap;pointer-events:none;} .cspec-lbl{position:absolute;top:50%;transform:translateY(-50%);font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(107,90,62,.45);} #cspec-lbl-l{left:0;text-align:right;width:86px;} #cspec-lbl-r{right:0;text-align:left;width:86px;padding-left:4px;} /* ── TOOLBAR (top center buttons) ── */ /* ══════════════════════════════════════════════ MARGA — The Sacred Navigation Bar (Marga = path / way in Sanskrit) Four Paths: Antaryatra · Brahmanda · Parampara · Turiya ══════════════════════════════════════════════ */ .tbtn-rishi-more{display:none;} /* ── Main nav bar ── */ #toolbar{ position:fixed; top:50%;left:12px; transform:translateY(-50%); z-index:300; display:flex;flex-direction:column;gap:0; opacity:0;transition:opacity .6s,left .5s cubic-bezier(.16,1,.3,1),right .5s cubic-bezier(.16,1,.3,1); background:rgba(5,4,2,.96); border:1px solid rgba(201,168,76,.12); border-radius:4px; will-change:opacity; overflow:visible; } #toolbar::-webkit-scrollbar{display:none;} #toolbar.on{opacity:1;} #toolbar.toolbar-left{left:calc(25% - 60px);right:auto;transform:translateY(-50%);} #toolbar.toolbar-right{right:calc(25% - 60px);left:auto;transform:translateY(-50%);} /* Individual nav items */ .tbtn{ font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:1.5px; text-transform:uppercase;color:var(--muted); border:none;border-bottom:1px solid rgba(201,168,76,.08); background:transparent;padding:9px 18px; cursor:pointer;transition:all .3s;white-space:nowrap; position:relative;width:100%;text-align:left; ;touch-action:manipulation;-webkit-tap-highlight-color:transparent;} .tbtn:last-child{border-bottom:none;} .tbtn:hover{color:var(--gold);background:rgba(201,168,76,.04);} .tbtn.lit{color:var(--gold);background:rgba(201,168,76,.06);} /* Nav section buttons — the four Margas */ .marga-btn{ font-family:'Cinzel',serif;font-size:10px;letter-spacing:1.5px; color:var(--muted); border:none;border-bottom:1px solid rgba(201,168,76,.08); background:transparent;padding:11px 18px; cursor:pointer;transition:all .3s;white-space:nowrap; display:flex;align-items:center;gap:7px; position:relative;width:100%;text-align:left; ;touch-action:manipulation;-webkit-tap-highlight-color:transparent;} .marga-btn:last-child{border-bottom:none;} .marga-btn:hover{color:var(--gold);background:rgba(201,168,76,.04);} .marga-btn.open{color:var(--gold);background:rgba(201,168,76,.06);} .marga-btn .marga-arrow{ font-size:8px;opacity:.5;transition:transform .25s; display:inline-block;font-family:'IBM Plex Mono',monospace; margin-left:auto; } .marga-btn.open .marga-arrow{transform:rotate(90deg);} .marga-glyph{font-size:13px;opacity:.75;} /* ── Dropdown panels ── */ .marga-drop{ position:fixed; z-index:310; opacity:0;pointer-events:none; transition:opacity .22s ease,transform .22s ease; transform:translateX(-8px); } .marga-drop.open{opacity:1;pointer-events:all;transform:translateX(0);} .marga-drop-inner{ background:rgba(5,4,2,.97); border:1px solid rgba(201,168,76,.15); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); padding:14px 8px; min-width:230px; box-shadow:0 12px 40px rgba(0,0,0,.6); max-height:70vh;overflow-y:auto; scrollbar-width:thin;scrollbar-color:rgba(201,168,76,.15) transparent; } /* Section label inside dropdown */ .marga-section-lbl{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px; color:rgba(201,168,76,.3);text-transform:uppercase; padding:6px 14px 10px;display:block; border-bottom:1px solid rgba(201,168,76,.08);margin-bottom:8px; } /* Dropdown item */ .marga-item{ display:block;width:100%;text-align:left; font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:1.5px; text-transform:uppercase;color:var(--muted); border:none;background:transparent; padding:9px 16px;cursor:pointer; transition:all .2s;white-space:nowrap; } .marga-item:hover{color:var(--gold);background:rgba(201,168,76,.05);padding-left:20px;} .marga-item .mi-glyph{display:inline-block;width:18px;opacity:.65;font-size:11px;} /* Mini sub-section divider inside a marga dropdown */ .marga-subsection-lbl{ font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:2.8px; color:rgba(201,168,76,.38);text-transform:uppercase; padding:14px 14px 6px;display:block; margin-top:4px; border-top:1px solid rgba(201,168,76,.06); } .marga-subsection-lbl.first{border-top:none;margin-top:0;padding-top:4px;} /* Turiya standalone — always in toolbar, special gold treatment */ .tbtn-turiya{ font-family:'Cinzel',serif;font-size:10px;letter-spacing:1.5px; color:rgba(200,180,240,.45); border:none;border-bottom:1px solid rgba(201,168,76,.08); background:transparent;padding:9px 18px; cursor:pointer;transition:all .4s;white-space:nowrap; width:100%;text-align:left; } .tbtn-turiya:hover{ color:rgba(220,200,255,.8); background:rgba(180,140,230,.05); text-shadow:0 0 14px rgba(180,140,230,.3); } /* ── Toolbar caps — top and bottom decorative strips ── */ .tb-cap{ display:flex;flex-direction:column;align-items:center;justify-content:center; padding:14px 10px;gap:4px; pointer-events:none; } .tb-cap-top{ border-bottom:1px solid rgba(201,168,76,.1); background:rgba(201,168,76,.02); } .tb-cap-bottom{ border-top:1px solid rgba(201,168,76,.1); background:rgba(201,168,76,.02); } .tb-cap-skt{ font-family:'Noto Sans Devanagari',sans-serif; font-size:20px;color:rgba(201,168,76,.55); animation:tbCapPulse 4s ease-in-out infinite; display:block;line-height:1; } .tb-cap-label{ font-family:'IBM Plex Mono',monospace;font-size:5.5px; letter-spacing:3px;color:rgba(201,168,76,.2); text-transform:uppercase;display:block; } .tb-cap-hint{ font-family:'Cormorant Garamond',serif;font-size:8px; color:rgba(201,168,76,.18);font-style:italic; letter-spacing:1px;display:block; animation:tbCapPulse 6s ease-in-out infinite reverse; } .tb-cap-glyph{ font-size:16px;color:rgba(201,168,76,.25); animation:tbCapSpin 20s linear infinite; display:block;line-height:1; } .tb-cap-foot{ font-family:'IBM Plex Mono',monospace;font-size:5px; letter-spacing:2.5px;color:rgba(201,168,76,.15); text-transform:uppercase;display:block; } @keyframes tbCapPulse{0%,100%{opacity:.5;}50%{opacity:1;}} @keyframes tbCapSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}} /* Hide caps on mobile — not needed on bottom bar */ @media(max-width:768px){.tb-cap{display:none!important;}} /* Mobile nav — restore horizontal bottom bar, override all vertical desktop styles */ @media(max-width:768px){ #toolbar{ top:auto!important;bottom:0!important; left:0!important;right:0!important; transform:none!important; flex-direction:row!important; justify-content:center;flex-wrap:nowrap; overflow:visible; height:48px; border-radius:0; border-top:1px solid rgba(201,168,76,.12); border-left:none;border-right:none;border-bottom:none; gap:0; align-items:center; } .tb-label{display:none;} .tb-glyph{font-size:18px;} .tbtn{padding:12px 16px;min-height:44px;display:flex;align-items:center;justify-content:center;width:auto;border-bottom:none;border-right:1px solid rgba(201,168,76,.08);} .marga-btn{font-size:0;padding:10px 16px;gap:0;flex-direction:column;align-items:center;min-height:44px;justify-content:center;width:auto;border-bottom:none;border-right:1px solid rgba(201,168,76,.08);} .marga-btn .marga-glyph{font-size:18px;opacity:.85;} .marga-btn .marga-arrow{font-size:5px;margin-top:2px;margin-left:0;} .marga-btn.open .marga-arrow{transform:rotate(180deg);} .tbtn-turiya{font-size:0;padding:10px 16px;min-height:44px;display:flex;align-items:center;justify-content:center;width:auto;border-bottom:none;border-right:1px solid rgba(201,168,76,.08);} .tbtn-turiya .tb-glyph{font-size:18px;} .marga-drop{bottom:48px;top:auto!important;left:auto;right:auto;transform:translateY(-6px)!important;} .marga-drop.open{transform:translateY(0)!important;} .marga-drop-inner{max-height:55vh;overflow-y:auto;} } /* ── MODAL BASE ── */ /* ── SHABDA BRAHMAN ── */ #sb-ov{background:radial-gradient(ellipse at 50% 50%,#0a0806 0%,#060404 50%,#020200 100%)!important;} .sb-tab{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px;text-transform:uppercase;padding:6px 11px;border:1px solid rgba(220,180,100,.12);background:transparent;color:rgba(220,180,100,.3);cursor:pointer;transition:all .3s;} .sb-tab:hover{border-color:rgba(220,180,100,.4);color:rgba(220,180,100,.6);} .sb-tab.sb-tab-on{background:rgba(220,180,100,.08);border-color:rgba(220,180,100,.4);color:rgba(220,180,100,.85);} .sb-syl{font-family:'Noto Sans Devanagari',sans-serif;font-size:16px;width:36px;height:36px;border-radius:50%;border:1px solid rgba(220,180,100,.15);background:rgba(220,180,100,.03);color:rgba(220,180,100,.5);cursor:pointer;transition:all .35s;display:flex;align-items:center;justify-content:center;} .sb-syl:hover{border-color:rgba(220,180,100,.5);color:rgba(220,180,100,.85);transform:scale(1.15);box-shadow:0 0 15px rgba(220,180,100,.15);} .sb-syl:active{transform:scale(.95);} /* ── AKASHIC ENGINE ── */ #ak-ov{background:radial-gradient(ellipse at 50% 50%,#040a10 0%,#020610 50%,#000308 100%)!important;} .ak-tab{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px;text-transform:uppercase;padding:6px 12px;border:1px solid rgba(140,200,220,.12);background:transparent;color:rgba(140,200,220,.3);cursor:pointer;transition:all .3s;} .ak-tab:hover{border-color:rgba(140,200,220,.4);color:rgba(140,200,220,.6);} .ak-tab.ak-tab-on{background:rgba(140,200,220,.08);border-color:rgba(140,200,220,.4);color:rgba(140,200,220,.85);} .ak-choice{font-family:'Cormorant Garamond',serif;font-size:clamp(11px,1.8vw,15px);padding:10px 18px;border:1px solid rgba(140,200,220,.15);background:rgba(140,200,220,.03);color:rgba(140,200,220,.5);cursor:pointer;transition:all .4s;line-height:1.4;} .ak-choice:hover{border-color:rgba(140,200,220,.4);color:rgba(140,200,220,.85);background:rgba(140,200,220,.08);} /* ── TRIMURTI SYSTEM ── */ #tri-ov{background:radial-gradient(ellipse at 50% 45%,#080610 0%,#040308 50%,#010104 100%)!important;} .tri-hub-node{position:absolute;cursor:pointer;text-align:center;transition:transform .4s ease,opacity .6s;z-index:5;} .tri-hub-node:hover{transform:translate(-50%,-50%) scale(1.12);} .tri-hub-vishnu{top:30%;left:30%;transform:translate(-50%,-50%);} .tri-hub-shiva{top:30%;left:70%;transform:translate(-50%,-50%);} .tri-hub-brahma{top:70%;left:50%;transform:translate(-50%,-50%);} .tri-hub-center{top:45%;left:50%;transform:translate(-50%,-50%);} .tri-hub-glow{width:60px;height:60px;border-radius:50%;margin:0 auto 8px;transition:box-shadow .4s,transform .4s;} .tri-glow-v{background:rgba(60,140,220,.15);box-shadow:0 0 30px rgba(60,140,220,.2),0 0 60px rgba(60,140,220,.08);animation:triPulseV 3s ease-in-out infinite;} .tri-glow-s{background:rgba(180,140,255,.12);box-shadow:0 0 30px rgba(180,140,255,.2),0 0 60px rgba(180,140,255,.08);animation:triPulseS 3.5s ease-in-out infinite;} .tri-glow-b{background:rgba(220,180,80,.12);box-shadow:0 0 30px rgba(220,180,80,.2),0 0 60px rgba(220,180,80,.08);animation:triPulseB 4s ease-in-out infinite;} .tri-glow-u{background:rgba(201,168,76,.08);box-shadow:0 0 20px rgba(201,168,76,.15);width:40px;height:40px;animation:triPulseU 5s ease-in-out infinite;} @keyframes triPulseV{0%,100%{transform:scale(1);box-shadow:0 0 30px rgba(60,140,220,.2);}50%{transform:scale(1.15);box-shadow:0 0 45px rgba(60,140,220,.35),0 0 80px rgba(60,140,220,.12);}} @keyframes triPulseS{0%,100%{transform:scale(1);box-shadow:0 0 30px rgba(180,140,255,.2);}50%{transform:scale(1.12);box-shadow:0 0 40px rgba(180,140,255,.3),0 0 70px rgba(180,140,255,.1);}} @keyframes triPulseB{0%,100%{transform:scale(1);box-shadow:0 0 30px rgba(220,180,80,.2);}50%{transform:scale(1.1);box-shadow:0 0 40px rgba(220,180,80,.35),0 0 70px rgba(220,180,80,.12);}} @keyframes triPulseU{0%,100%{transform:scale(1);}50%{transform:scale(1.2);box-shadow:0 0 35px rgba(201,168,76,.25);}} .tri-hub-label{font-family:'Cinzel',serif;font-size:clamp(12px,2vw,16px);color:rgba(220,210,200,.7);letter-spacing:3px;} .tri-hub-sub{font-family:'IBM Plex Mono',monospace;font-size:6px;color:rgba(220,210,200,.25);letter-spacing:2px;margin-top:3px;text-transform:uppercase;} .tri-sub-ui{position:absolute;top:60px;left:50%;transform:translateX(-50%);text-align:center;max-width:500px;width:90%;} .tri-sub-title{font-family:'Cinzel',serif;font-size:clamp(14px,3vw,22px);letter-spacing:3px;margin-bottom:10px;} .tri-sub-desc{font-family:'Cormorant Garamond',serif;font-size:clamp(11px,1.8vw,15px);color:rgba(220,210,200,.4);line-height:1.9;} .tri-sec-btn{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px;text-transform:uppercase;padding:7px 14px;background:rgba(201,168,76,.05);border:1px solid rgba(201,168,76,.15);color:rgba(201,168,76,.4);cursor:pointer;transition:all .3s;} .tri-sec-btn:hover{border-color:rgba(201,168,76,.4);color:rgba(201,168,76,.7);} .tri-sec-btn.tri-sec-on{background:rgba(201,168,76,.12);border-color:rgba(201,168,76,.5);color:rgba(201,168,76,.9);} /* ── PAÑCA BHEDA ── */ #pb-ov{background:radial-gradient(ellipse at 50% 40%,#04060c 0%,#020308 60%,#010102 100%)!important;} #pb-canvas{display:block;position:absolute;inset:0;width:100%;height:100%;} #pb-overlay{position:absolute;inset:0;pointer-events:none;} #pb-info{position:absolute;bottom:0;left:0;right:0;padding:24px 36px 32px; background:linear-gradient(to top,rgba(2,3,10,.98) 60%,transparent); pointer-events:none;transition:opacity .4s;} #pb-bheda-name{font-family:'Cinzel',serif;font-size:20px;color:var(--cream);margin-bottom:6px;} #pb-bheda-skt{font-family:'Noto Sans Devanagari',sans-serif;font-size:24px;color:rgba(180,140,255,.5);margin-bottom:10px;} #pb-bheda-body{font-family:'Cormorant Garamond',serif;font-size:15px;color:var(--tdim);line-height:1.8;max-width:680px;} #pb-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px;text-transform:uppercase; color:rgba(180,140,255,.2);text-align:center;pointer-events:none;transition:opacity .5s;} /* ── ABHINAVAGUPTA'S WEB ── */ #ag-ov{background:radial-gradient(ellipse at 50% 20%,#080410 0%,#040210 60%,#010108 100%)!important;} #ag-canvas{display:block;position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;} #ag-panel{position:absolute;top:70px;right:0;width:320px;bottom:0;overflow-y:auto; padding:24px 24px 40px;background:linear-gradient(to left,rgba(4,2,12,.97),rgba(4,2,12,.9)); border-left:1px solid rgba(180,120,255,.08);} #ag-panel-title{font-family:'Cinzel',serif;font-size:16px;color:rgba(200,160,255,.9);margin-bottom:6px;} #ag-panel-skt{font-family:'Noto Sans Devanagari',sans-serif;font-size:22px;color:rgba(180,120,255,.4);margin-bottom:12px;} #ag-panel-num{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px;color:rgba(180,120,255,.3);text-transform:uppercase;margin-bottom:10px;} #ag-panel-body{font-family:'Cormorant Garamond',serif;font-size:13.5px;color:var(--tdim);line-height:1.8;} #ag-hint{position:absolute;bottom:28px;left:50%;transform:translateX(-50%); font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:3px;text-transform:uppercase; color:rgba(180,120,255,.2);pointer-events:none;white-space:nowrap;} /* ── ŚĀSTRARTHA STAGE ── */ #ss-ov{background:radial-gradient(ellipse at 50% 0%,#0a0805 0%,#050402 60%,#020200 100%)!important;} #ss-body{display:flex;height:calc(100vh - 64px);} #ss-stage{flex:1;position:relative;overflow:hidden;} #ss-stage-canvas{display:block;position:absolute;inset:0;width:100%;height:100%;} #ss-scroll{position:absolute;inset:0;overflow-y:auto;padding:40px 48px 80px;} .ss-line{opacity:0;transform:translateY(12px);transition:opacity .6s,transform .6s;margin-bottom:28px;} .ss-line.vis{opacity:1;transform:translateY(0);} .ss-speaker{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px;text-transform:uppercase;margin-bottom:6px;} .ss-speaker.shankara{color:rgba(201,168,76,.7);} .ss-speaker.mandana{color:rgba(140,200,160,.7);} .ss-speaker.ubhaya{color:rgba(200,140,200,.7);} .ss-speaker.narrator{color:rgba(140,140,160,.5);} .ss-text{font-family:'Cormorant Garamond',serif;font-size:16px;line-height:1.85;} .ss-text.shankara{color:rgba(240,220,180,.9);} .ss-text.mandana{color:rgba(180,230,200,.85);} .ss-text.ubhaya{color:rgba(230,190,230,.8);} .ss-text.narrator{color:rgba(140,130,120,.7);font-style:italic;font-size:13px;} #ss-sidebar{width:260px;border-left:1px solid rgba(201,168,76,.08);overflow-y:auto;padding:24px 20px;} #ss-score{margin-bottom:24px;} .ss-debater{margin-bottom:16px;} .ss-debater-name{font-family:'Cinzel',serif;font-size:11px;letter-spacing:1px;margin-bottom:6px;} .ss-debater-bar-wrap{height:4px;background:rgba(255,255,255,.05);border-radius:2px;margin-bottom:6px;} .ss-debater-bar{height:4px;border-radius:2px;transition:width .6s cubic-bezier(.16,1,.3,1);} .ss-debater-desc{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;} #ss-choice-wrap{margin-top:20px;border-top:1px solid rgba(201,168,76,.08);padding-top:18px;} .ss-choice-lbl{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:2px;text-transform:uppercase;color:rgba(201,168,76,.3);margin-bottom:10px;display:block;} .ss-choice-btn{display:block;width:100%;text-align:left;font-family:'IBM Plex Mono',monospace;font-size:7.5px;letter-spacing:1px;text-transform:uppercase; padding:9px 12px;margin-bottom:6px;border:1px solid rgba(201,168,76,.12);background:transparent; color:rgba(201,168,76,.5);cursor:pointer;transition:all .2s;} .ss-choice-btn:hover{border-color:rgba(201,168,76,.4);color:rgba(201,168,76,.9);background:rgba(201,168,76,.04);} .ss-choice-btn.chosen{border-color:rgba(201,168,76,.6);color:rgba(201,168,76,1);background:rgba(201,168,76,.08);} #ss-progress-lbl{font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:2px;text-transform:uppercase;color:rgba(201,168,76,.2);margin-top:16px;} @media(max-width:768px){ #ag-panel{width:100%;top:auto;bottom:0;right:0;left:0;height:40vh;border-left:none;border-top:1px solid rgba(180,120,255,.08);} #ss-body{flex-direction:column;} #ss-sidebar{width:100%;height:160px;border-left:none;border-top:1px solid rgba(201,168,76,.08);} #ss-scroll{padding:20px 20px 40px;} } #darsana-ov{background:radial-gradient(ellipse at 50% 30%,#060508 0%,#030206 50%,#010103 100%)!important;} .da-tabs{display:flex;border-bottom:1px solid rgba(201,168,76,.1);padding:0 32px;} .da-tab{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:2.5px;text-transform:uppercase; color:rgba(201,168,76,.3);padding:12px 20px;cursor:pointer;border:none;background:none; border-bottom:2px solid transparent;transition:all .25s;} .da-tab.on{color:rgba(201,168,76,.9);border-bottom-color:rgba(201,168,76,.6);} .da-tab:hover{color:rgba(201,168,76,.6);} /* ── Arena ── */ #da-arena-wrap{display:flex;height:calc(100vh - 120px);} #da-canvas-col{flex:0 0 55%;position:relative;} #da-canvas{display:block;width:100%;height:100%;cursor:pointer;} #da-info-col{flex:1;overflow-y:auto;padding:28px 32px 40px 20px;border-left:1px solid rgba(201,168,76,.06);} #da-school-title{font-family:'Cinzel',serif;font-size:22px;color:var(--cream);margin-bottom:6px;min-height:28px;} #da-school-skt{font-family:'Noto Sans Devanagari',sans-serif;font-size:28px;color:rgba(201,168,76,.4);margin-bottom:14px;min-height:36px;} #da-school-claim{font-family:'Cormorant Garamond',serif;font-size:16px;font-style:italic;color:var(--text);line-height:1.7;margin-bottom:18px;min-height:52px;} .da-section-lbl{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:3px;text-transform:uppercase; color:rgba(201,168,76,.3);margin-bottom:8px;display:block;} #da-school-detail{font-family:'Cormorant Garamond',serif;font-size:14px;color:var(--tdim);line-height:1.8;margin-bottom:20px;} #da-school-modern{font-family:'IBM Plex Mono',monospace;font-size:10px;color:rgba(140,200,220,.6); line-height:1.7;padding:12px 14px;border-left:2px solid rgba(140,200,220,.2);margin-bottom:20px;} #da-school-objection{font-family:'Cormorant Garamond',serif;font-size:13px;color:rgba(200,100,80,.6); line-height:1.7;padding:10px 14px;border-left:2px solid rgba(200,100,80,.2);margin-bottom:20px;} #da-debate-block{display:none;} #da-debate-schools{font-family:'Cinzel',serif;font-size:13px;color:var(--gold);margin-bottom:10px;} #da-debate-body{font-family:'Cormorant Garamond',serif;font-size:14px;color:var(--text);line-height:1.85;} #da-hint{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px;text-transform:uppercase; color:rgba(201,168,76,.2);text-align:center;padding:20px;position:absolute;top:50%;left:50%; transform:translate(-50%,-50%);pointer-events:none;transition:opacity .4s;} /* ── Vedanta Wars ── */ #da-vedanta-wrap{padding:28px 32px 60px;max-width:1100px;margin:0 auto;} .vw-intro{font-family:'Cormorant Garamond',serif;font-size:16px;font-style:italic; color:var(--tdim);line-height:1.8;margin-bottom:32px;max-width:700px;} .vw-question-tabs{display:flex;gap:8px;margin-bottom:28px;flex-wrap:wrap;} .vw-qtab{font-family:'IBM Plex Mono',monospace;font-size:7.5px;letter-spacing:2px;text-transform:uppercase; padding:8px 16px;border:1px solid rgba(201,168,76,.15);background:transparent;color:rgba(201,168,76,.4); cursor:pointer;transition:all .25s;} .vw-qtab.on{background:rgba(201,168,76,.08);border-color:rgba(201,168,76,.5);color:rgba(201,168,76,.9);} .vw-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:rgba(201,168,76,.06);} .vw-school{background:rgba(3,2,1,.97);padding:22px 18px;cursor:pointer;transition:background .2s;} .vw-school:hover{background:rgba(201,168,76,.04);} .vw-school.selected{background:rgba(201,168,76,.07);} .vw-school-name{font-family:'Cinzel',serif;font-size:11px;letter-spacing:1px;color:var(--cream);margin-bottom:4px;} .vw-school-founder{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:1.5px; color:rgba(201,168,76,.35);text-transform:uppercase;margin-bottom:14px;} .vw-answer{font-family:'Cormorant Garamond',serif;font-size:14px;color:var(--text);line-height:1.75;} .vw-answer-quote{font-style:italic;color:rgba(201,168,76,.7);display:block;margin-top:8px;font-size:13px;} .vw-school-dot{width:8px;height:8px;border-radius:50%;margin-bottom:12px;} .vw-deep{margin-top:32px;border-top:1px solid rgba(201,168,76,.08);padding-top:28px;} .vw-deep-title{font-family:'Cinzel',serif;font-size:13px;color:rgba(201,168,76,.6);margin-bottom:16px;letter-spacing:1px;} .vw-tension{font-family:'Cormorant Garamond',serif;font-size:14px;color:var(--tdim);line-height:1.85; padding:14px 18px;border-left:2px solid rgba(201,168,76,.15);margin-bottom:10px;} @media(max-width:768px){ #da-arena-wrap{flex-direction:column;height:auto;} #da-canvas-col{height:55vw;flex:none;} #da-info-col{padding:18px 16px;} .da-tabs{padding:0 16px;} #da-vedanta-wrap{padding:18px 16px 60px;} .vw-grid{grid-template-columns:1fr 1fr;} .vw-question-tabs{gap:6px;} } #vm-ov{background:radial-gradient(ellipse at 50% 40%,#0a0804 0%,#060402 50%,#020200 100%)!important;} .vm-tab{font-family:'IBM Plex Mono',monospace;font-size:10px;width:28px;height:28px;border-radius:50%;border:1px solid rgba(201,168,76,.15);background:transparent;color:rgba(201,168,76,.3);cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center;} .vm-tab:hover{border-color:rgba(201,168,76,.5);color:rgba(201,168,76,.7);} .vm-tab.vm-tab-on{background:rgba(201,168,76,.12);border-color:rgba(201,168,76,.5);color:rgba(201,168,76,.9);box-shadow:0 0 10px rgba(201,168,76,.15);} .vm-btn{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px;text-transform:uppercase;padding:7px 14px;background:rgba(201,168,76,.06);border:1px solid rgba(201,168,76,.2);color:rgba(201,168,76,.5);cursor:pointer;transition:all .3s;} .vm-btn:hover{border-color:rgba(201,168,76,.5);color:rgba(201,168,76,.8);} .vm-btn.vm-btn-on{background:rgba(201,168,76,.14);border-color:rgba(201,168,76,.5);color:rgba(201,168,76,.9);} .vm-mod-ui{transition:opacity .6s;} .vm-step{font-family:'IBM Plex Mono',monospace;font-size:clamp(10px,1.8vw,14px);color:rgba(201,168,76,.6);line-height:2.2;opacity:0;transition:opacity .8s;letter-spacing:1px;} .vm-step.vm-step-on{opacity:1;} /* ── ENTANGLEMENT FIELD ── */ #ef-ov{background:radial-gradient(ellipse at 50% 50%,#060412 0%,#030210 50%,#010108 100%)!important;} /* ── INNER COSMOS ── */ #ic-ov{background:radial-gradient(ellipse at 50% 45%,#020818 0%,#010510 50%,#000208 100%)!important;} .ic-kosha{position:absolute;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);border:1px solid;transition:transform 1.2s cubic-bezier(.22,1,.36,1),opacity 1.2s ease,filter 1s ease;} .ic-k1{width:90px;height:140px;border-color:rgba(200,180,140,.2);box-shadow:0 0 15px rgba(200,180,140,.06) inset;} .ic-k2{width:150px;height:220px;border-color:rgba(100,200,160,.15);box-shadow:0 0 20px rgba(100,200,160,.04) inset;animation:icPulseK2 4s ease-in-out infinite;} .ic-k3{width:220px;height:310px;border-color:rgba(140,160,255,.12);box-shadow:0 0 25px rgba(140,160,255,.04) inset;animation:icPulseK3 3.5s ease-in-out infinite;} .ic-k4{width:300px;height:410px;border-color:rgba(200,140,255,.1);box-shadow:0 0 30px rgba(200,140,255,.03) inset;animation:icPulseK4 5s ease-in-out infinite;} .ic-k5{width:390px;height:520px;border-color:rgba(255,200,100,.07);box-shadow:0 0 40px rgba(255,200,100,.03) inset;animation:icPulseK5 6s ease-in-out infinite;} .ic-kosha.ic-peeled{transform:translate(-50%,-50%) scale(2.5);opacity:0;filter:blur(12px);pointer-events:none;} @keyframes icPulseK2{0%,100%{transform:translate(-50%,-50%) scale(1);}50%{transform:translate(-50%,-50%) scale(1.02);}} @keyframes icPulseK3{0%,100%{transform:translate(-50%,-50%) scale(1);}50%{transform:translate(-50%,-50%) scale(1.015);}} @keyframes icPulseK4{0%,100%{transform:translate(-50%,-50%) scale(1);}50%{transform:translate(-50%,-50%) scale(1.02);}} @keyframes icPulseK5{0%,100%{transform:translate(-50%,-50%) scale(1);}50%{transform:translate(-50%,-50%) scale(1.025);}} .ic-node{position:absolute;left:50%;transform:translateX(-50%);cursor:pointer;display:flex;flex-direction:column;align-items:center;z-index:5;transition:transform .4s ease;} .ic-node:hover,.ic-node:active{transform:translateX(-50%) scale(1.15);} .ic-node-brain{top:calc(50% - 110px);} .ic-node-heart{top:calc(50% - 10px);} .ic-node-gut{top:calc(50% + 80px);} .ic-node-core{width:16px;height:16px;border-radius:50%;transition:box-shadow .4s,transform .4s;} .ic-node-brain .ic-node-core{background:rgba(255,200,100,.7);box-shadow:0 0 20px rgba(255,200,100,.3),0 0 40px rgba(255,200,100,.1);animation:icNodePulse1 3s ease-in-out infinite;} .ic-node-heart .ic-node-core{background:rgba(100,200,160,.7);box-shadow:0 0 20px rgba(100,200,160,.3),0 0 40px rgba(100,200,160,.1);animation:icNodePulse2 2.5s ease-in-out infinite;} .ic-node-gut .ic-node-core{background:rgba(200,100,100,.7);box-shadow:0 0 20px rgba(200,100,100,.3),0 0 40px rgba(200,100,100,.1);animation:icNodePulse3 3.5s ease-in-out infinite;} @keyframes icNodePulse1{0%,100%{transform:scale(1);box-shadow:0 0 20px rgba(255,200,100,.3);}50%{transform:scale(1.3);box-shadow:0 0 35px rgba(255,200,100,.5),0 0 60px rgba(255,200,100,.15);}} @keyframes icNodePulse2{0%,100%{transform:scale(1);box-shadow:0 0 20px rgba(100,200,160,.3);}50%{transform:scale(1.25);box-shadow:0 0 30px rgba(100,200,160,.5),0 0 55px rgba(100,200,160,.15);}} @keyframes icNodePulse3{0%,100%{transform:scale(1);box-shadow:0 0 20px rgba(200,100,100,.3);}50%{transform:scale(1.2);box-shadow:0 0 28px rgba(200,100,100,.5),0 0 50px rgba(200,100,100,.15);}} .ic-node-label{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px;color:rgba(200,210,240,.3);margin-top:8px;white-space:nowrap;opacity:0;transition:opacity .4s;text-transform:uppercase;} .ic-node:hover .ic-node-label,.ic-node.ic-active .ic-node-label{opacity:1;color:rgba(200,210,240,.7);} .ic-node.ic-dissolved{opacity:0;transform:translateX(-50%) scale(0);transition:all 2s ease;} @keyframes icBreathe{0%,100%{transform:translate(-50%,-50%) scale(1);}50%{transform:translate(-50%,-50%) scale(1.03);}} /* ── SELF ILLUSION ── */ .si-trait-btn{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:1.5px;padding:7px 14px;background:rgba(220,180,140,.06);border:1px solid rgba(220,180,140,.2);color:rgba(220,180,140,.5);cursor:pointer;transition:all .35s;white-space:nowrap;} .si-trait-btn:hover{border-color:rgba(220,180,140,.5);color:rgba(220,180,140,.85);} .si-trait-btn.si-selected{background:rgba(220,180,140,.15);border-color:rgba(220,180,140,.6);color:rgba(220,180,140,.95);box-shadow:0 0 10px rgba(220,180,140,.12);} .si-tag{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px;padding:5px 11px;border:1px solid rgba(220,180,140,.3);color:rgba(220,180,140,.7);transition:all 1s;display:inline-block;} .si-tag.si-dissolving{opacity:0;transform:scale(.7);border-color:transparent;color:transparent;} /* ── PERCEPTION ENGINE ── */ .pe-btn{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px;text-transform:uppercase;padding:7px 14px;background:rgba(180,140,255,.06);border:1px solid rgba(180,140,255,.18);color:rgba(180,140,255,.5);cursor:pointer;transition:all .3s;white-space:nowrap;} .pe-btn:hover{border-color:rgba(180,140,255,.5);color:rgba(180,140,255,.8);} .pe-btn.pe-btn-active{background:rgba(180,140,255,.14);border-color:rgba(180,140,255,.5);color:rgba(180,140,255,.9);box-shadow:0 0 12px rgba(180,140,255,.15);} .modal-base{position:fixed;inset:0;z-index:600;background:rgba(3,2,1,.97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;pointer-events:none;visibility:hidden;transition:opacity .5s,visibility 0s .5s;overflow-y:auto;-webkit-overflow-scrolling:touch;transform:translateZ(0);-webkit-transform:translateZ(0);} .modal-base.on{opacity:1;pointer-events:all;visibility:visible;transition:opacity .5s,visibility 0s;} .modal-hdr{padding:24px 36px 18px;border-bottom:1px solid rgba(201,168,76,.1);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:rgba(3,2,1,.95);z-index:5;} .modal-title{font-family:'Cinzel',serif;font-size:13px;color:var(--white);letter-spacing:2px;} .modal-sub{font-family:'IBM Plex Mono',monospace;font-size:7.5px;color:var(--muted);letter-spacing:2px;margin-top:3px;} .modal-x{background:none;border:1px solid rgba(107,90,62,.35);color:var(--muted);width:30px;height:30px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:12px;transition:all .22s;flex-shrink:0;} .modal-x:hover{border-color:var(--gold);color:var(--gold);} /* ── MODAL BACK BUTTON ── */ .modal-back{font-family:'IBM Plex Mono',monospace;font-size:7.5px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);background:none;border:1px solid rgba(107,90,62,.2);padding:6px 12px;cursor:pointer;transition:all .25s;white-space:nowrap;flex-shrink:0;} .modal-back:hover{color:var(--gold);border-color:rgba(201,168,76,.4);} /* ── KOSHA GLOSSARY ── */ #kosha-filters{display:flex;gap:5px;flex-wrap:wrap;padding:14px 36px 0;position:sticky;top:65px;z-index:4;background:rgba(3,2,1,.95);padding-bottom:12px;border-bottom:1px solid rgba(201,168,76,.06);} .kf-btn{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:1.5px;text-transform:uppercase;padding:4px 11px;border:1px solid rgba(107,90,62,.2);background:none;color:var(--muted);cursor:pointer;transition:all .22s;} .kf-btn:hover,.kf-btn.active{color:var(--gold);border-color:rgba(201,168,76,.4);background:rgba(201,168,76,.05);} .kf-btn.active{box-shadow:0 0 8px rgba(201,168,76,.1);} #kosha-search-wrap{padding:14px 36px 10px;position:sticky;top:116px;z-index:4;background:rgba(3,2,1,.92);} #kosha-search{width:100%;max-width:400px;background:rgba(201,168,76,.04);border:1px solid rgba(107,90,62,.25);color:var(--text);font-family:'IBM Plex Mono',monospace;font-size:11px;padding:9px 14px;letter-spacing:1px;outline:none;transition:border-color .2s;} #kosha-search::placeholder{color:rgba(107,90,62,.5);} #kosha-search:focus{border-color:rgba(201,168,76,.4);} #kosha-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;padding:20px 36px 80px;} .kt{border:1px solid rgba(107,90,62,.2);background:rgba(201,168,76,.02);padding:16px 16px 14px;cursor:pointer;transition:all .3s;position:relative;overflow:hidden;} .kt::before{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--kt-col,var(--gold));opacity:.2;transition:opacity .3s;} .kt:hover{border-color:rgba(201,168,76,.35);background:rgba(201,168,76,.05);transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.4);} .kt:hover::before{opacity:.7;} .kt-skt{font-family:'Cormorant Garamond',serif;font-size:18px;font-style:italic;color:var(--gold);display:block;line-height:1.2;margin-bottom:3px;} .kt-roman{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px;color:var(--muted);text-transform:uppercase;display:block;margin-bottom:7px;} .kt-essence{font-size:12px;line-height:1.55;color:var(--tdim);} .kt-cat-dot{position:absolute;top:12px;right:12px;width:5px;height:5px;border-radius:50%;background:var(--kt-col,var(--gold));opacity:.5;} .kt.hidden{display:none;} /* ── KOSHA DEEP VIEW ── */ #kosha-deep{position:fixed;inset:0;z-index:750;background:rgba(3,2,1,.99);opacity:0;pointer-events:none;visibility:hidden;transition:opacity .4s,visibility 0s .4s;overflow-y:auto;} #kosha-deep.on{opacity:1;pointer-events:all;visibility:visible;transition:opacity .4s,visibility 0s;} .kd-hdr{padding:22px 40px 20px;border-bottom:1px solid rgba(201,168,76,.1);display:flex;align-items:center;gap:16px;position:sticky;top:0;background:rgba(3,2,1,.97);z-index:5;} .kd-hdr-center{flex:1;text-align:center;} .kd-skt{font-family:'Cormorant Garamond',serif;font-size:clamp(24px,4vw,48px);font-style:italic;color:var(--gold);display:block;line-height:1;margin-bottom:5px;} .kd-roman{font-family:'Cinzel',serif;font-size:clamp(10px,1.3vw,14px);letter-spacing:5px;color:var(--cream);text-transform:uppercase;display:block;margin-bottom:4px;} .kd-cat{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px;color:var(--muted);text-transform:uppercase;} .kd-tl-btn{font-family:'IBM Plex Mono',monospace;font-size:7.5px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);background:none;border:1px solid rgba(107,90,62,.2);padding:6px 12px;cursor:pointer;transition:all .25s;white-space:nowrap;flex-shrink:0;} .kd-tl-btn:hover{color:var(--gold);border-color:rgba(201,168,76,.4);} .kd-essence{padding:22px 50px;background:rgba(201,168,76,.025);border-bottom:1px solid rgba(201,168,76,.08);} .kd-essence-txt{font-family:'Cormorant Garamond',serif;font-size:clamp(16px,2vw,22px);font-style:italic;color:var(--gpale);line-height:1.8;max-width:820px;} .kd-body{padding:30px 50px 20px;max-width:1100px;} .kd-layers{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px;} .kd-layer{border:1px solid rgba(201,168,76,.1);padding:18px 20px;background:rgba(201,168,76,.018);} .kd-layer-lbl{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px;color:var(--gdim);text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:8px;} .kd-layer-lbl::after{content:'';flex:1;height:1px;background:rgba(201,168,76,.08);} .kd-layer-txt{font-size:13.5px;line-height:1.82;color:var(--text);} .kd-layer-txt em{color:var(--gpale);font-style:italic;} .kd-layer-txt strong{color:var(--cream);} .kd-connections{padding:0 50px 60px;} .kd-conn-lbl{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px;color:var(--gdim);text-transform:uppercase;margin-bottom:10px;} .kd-conn-tags{display:flex;flex-wrap:wrap;gap:6px;} .kd-conn-tag{font-family:'IBM Plex Mono',monospace;font-size:7.5px;letter-spacing:1px;padding:4px 12px;border:1px solid rgba(201,168,76,.2);color:var(--tdim);cursor:pointer;transition:all .22s;text-transform:uppercase;} .kd-conn-tag:hover{color:var(--gold);border-color:var(--gold);background:rgba(201,168,76,.05);} .tbtn-kosha{border-color:rgba(201,168,76,.3);color:rgba(201,168,76,.7);} .tbtn-kosha:hover{color:var(--gold);border-color:var(--gold);box-shadow:0 0 12px rgba(201,168,76,.15);} .tbtn-polarity{border-color:rgba(76,143,201,.3);color:rgba(100,160,220,.7);} .tbtn-polarity:hover{color:rgba(140,190,240,1);border-color:rgba(76,143,201,.7);box-shadow:0 0 12px rgba(76,143,201,.15);} .tbtn-web{border-color:rgba(140,100,200,.3);color:rgba(170,130,230,.7);} .tbtn-web:hover{color:rgba(190,160,240,1);border-color:rgba(140,100,200,.7);box-shadow:0 0 12px rgba(140,100,200,.15);} .tbtn-kmap{border-color:rgba(80,160,180,.3);color:rgba(100,180,200,.7);} .tbtn-kmap:hover{color:rgba(140,210,230,1);border-color:rgba(80,160,180,.7);box-shadow:0 0 12px rgba(80,160,180,.15);} .tbtn-fractal{border-color:rgba(100,180,120,.3);color:rgba(120,200,140,.7);} .tbtn-fractal:hover{color:rgba(160,230,180,1);border-color:rgba(100,180,120,.7);box-shadow:0 0 12px rgba(100,180,120,.15);} .tbtn-subtle{border-color:rgba(220,140,80,.3);color:rgba(240,160,100,.7);} .tbtn-subtle:hover{color:rgba(255,185,130,1);border-color:rgba(220,140,80,.7);box-shadow:0 0 12px rgba(220,140,80,.15);} .tbtn-upanishad{border-color:rgba(160,120,220,.3);color:rgba(180,140,240,.7);} .tbtn-upanishad:hover{color:rgba(210,180,255,1);border-color:rgba(160,120,220,.7);box-shadow:0 0 12px rgba(160,120,220,.15);} .tbtn-cosmic{border-color:rgba(60,120,200,.3);color:rgba(80,150,220,.7);} .tbtn-cosmic:hover{color:rgba(120,180,250,1);border-color:rgba(60,120,200,.7);box-shadow:0 0 12px rgba(60,120,200,.15);} .tbtn-mantra{border-color:rgba(200,100,100,.3);color:rgba(220,130,110,.7);} .tbtn-mantra:hover{color:rgba(255,165,140,1);border-color:rgba(200,100,100,.7);box-shadow:0 0 12px rgba(200,100,100,.15);} /* ═══════════════════════════════════════════════════════ YUGA CLOCK — Personal Cosmic Timer ═══════════════════════════════════════════════════════ */ .tbtn-yugaclock{border-color:rgba(180,100,240,.3);color:rgba(200,130,255,.6);} .tbtn-yugaclock:hover{color:rgba(220,170,255,1);border-color:rgba(180,100,240,.7);box-shadow:0 0 12px rgba(180,100,240,.15);} #yugaclock-ov{background:radial-gradient(ellipse at 50% 30%,#0a0514 0%,#050208 60%,#020104 100%)!important;} #yc-canvas-wrap{ position:absolute;top:0;left:0;right:0;bottom:0; display:flex;align-items:center;justify-content:center; } #yc-canvas{display:block;cursor:pointer;} #yc-panel{ position:absolute;top:0;right:0;bottom:0;width:320px; background:rgba(5,2,8,.97);border-left:1px solid rgba(180,100,240,.12); overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(180,100,240,.1) transparent; transform:translateX(340px);transition:transform .5s cubic-bezier(.16,1,.3,1); z-index:5;padding-bottom:40px; } #yc-panel.open{transform:translateX(0);} .yc-panel-hdr{padding:20px 20px 14px;border-bottom:1px solid rgba(180,100,240,.1);} .yc-panel-name{font-family:'Cinzel',serif;font-size:14px;color:rgba(200,160,255,.9);letter-spacing:1px;margin-bottom:3px;} .yc-panel-cycle{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:3px;color:rgba(180,100,240,.4);text-transform:uppercase;} .yc-panel-body{padding:16px 20px;} .yc-ring-info{margin-bottom:16px;padding:12px 14px;border:1px solid rgba(180,100,240,.08);background:rgba(180,100,240,.03);} .yc-ring-lbl{font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:3px;color:rgba(180,100,240,.35);text-transform:uppercase;margin-bottom:6px;} .yc-ring-val{font-size:13px;color:rgba(220,200,255,.75);line-height:1.6;} .yc-ring-pct{ height:2px;background:rgba(180,100,240,.1);margin-top:8px;border-radius:1px;overflow:hidden; } .yc-ring-pct-fill{height:100%;background:linear-gradient(to right,rgba(180,100,240,.5),rgba(220,160,255,.8));border-radius:1px;transition:width 1s ease;} #yc-birth-wrap{ position:absolute;bottom:24px;left:50%;transform:translateX(-50%); z-index:6;display:flex;align-items:center;gap:10px; background:rgba(5,2,8,.9);border:1px solid rgba(180,100,240,.2); padding:8px 14px;backdrop-filter:blur(12px); } #yc-birth-wrap label{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:3px;color:rgba(180,100,240,.45);text-transform:uppercase;} #yc-birth-input{ background:none;border:none;border-bottom:1px solid rgba(180,100,240,.3); color:rgba(220,200,255,.8);font-family:'IBM Plex Mono',monospace;font-size:11px; width:100px;outline:none;text-align:center;padding:2px 4px; } #yc-birth-input:focus{border-bottom-color:rgba(180,100,240,.7);} #yc-birth-btn{ font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:2px;text-transform:uppercase; color:rgba(180,100,240,.6);background:none;border:1px solid rgba(180,100,240,.2); padding:5px 10px;cursor:pointer;transition:all .2s; } #yc-birth-btn:hover{color:rgba(200,160,255,.9);border-color:rgba(180,100,240,.5);} .yc-title{ position:absolute;top:52px;left:50%;transform:translateX(-50%); font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:5px; color:rgba(180,100,240,.25);text-transform:uppercase;text-align:center; pointer-events:none;white-space:nowrap; } .yc-click-hint{ position:absolute;bottom:70px;left:50%;transform:translateX(-50%); font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:3px; color:rgba(180,100,240,.2);text-transform:uppercase;text-align:center; pointer-events:none;white-space:nowrap; animation:ycHintPulse 3s ease-in-out infinite; } @keyframes ycHintPulse{0%,100%{opacity:.3;}50%{opacity:.7;}} @media(max-width:768px){ #yc-panel{width:100%;top:auto;height:55%;border-left:none;border-top:1px solid rgba(180,100,240,.12);transform:translateY(100%);} #yc-panel.open{transform:translateY(0);} #yc-canvas-wrap{bottom:0;} } /* ═══════════════════════════════════════════════════ PAGE BUTTONS CSS ═══════════════════════════════════════════════════ */ .tbtn-elements{border-color:rgba(80,180,100,.3);color:rgba(100,200,120,.6);} .tbtn-elements:hover{color:rgba(140,220,160,1);border-color:rgba(80,180,100,.6);box-shadow:0 0 12px rgba(80,180,100,.15);} .tbtn-lineage{border-color:rgba(220,160,60,.3);color:rgba(240,180,80,.6);} .tbtn-lineage:hover{color:rgba(255,200,100,1);border-color:rgba(220,160,60,.6);} .tbtn-eras{border-color:rgba(200,80,80,.3);color:rgba(220,100,100,.6);} .tbtn-eras:hover{color:rgba(240,130,130,1);border-color:rgba(200,80,80,.6);} .tbtn-mirror{border-color:rgba(100,160,240,.3);color:rgba(120,180,255,.6);} .tbtn-mirror:hover{color:rgba(160,210,255,1);border-color:rgba(100,160,240,.6);} .tbtn-silence{border-color:rgba(180,180,180,.2);color:rgba(200,200,200,.4);} .tbtn-silence:hover{color:rgba(240,240,240,.8);border-color:rgba(200,200,200,.4);} /* ═══════════════════════════════════════════════════ ELEMENTS ATLAS ═══════════════════════════════════════════════════ */ #elements-ov{background:radial-gradient(ellipse at 50% 20%,#060e06 0%,#030703 60%,#010301 100%)!important;} .el-layout{display:grid;grid-template-columns:1fr 380px;height:calc(100vh - 54px);overflow:hidden;} .el-canvas-wrap{position:relative;overflow:hidden;} #el-canvas{display:block;width:100%;height:100%;cursor:pointer;} .el-panel{overflow-y:auto;background:rgba(2,8,2,.97);border-left:1px solid rgba(80,180,80,.08);padding:0;scrollbar-width:thin;scrollbar-color:rgba(80,180,80,.1) transparent;} .el-panel-inner{padding:28px 24px 60px;} .el-empty{font-family:'Cormorant Garamond',serif;font-size:18px;font-style:italic;color:rgba(80,180,80,.3);text-align:center;padding:60px 24px;line-height:1.8;} .el-name{font-family:'Cinzel',serif;font-size:22px;letter-spacing:2px;margin-bottom:4px;} .el-skt{font-family:'Cormorant Garamond',serif;font-size:32px;font-style:italic;display:block;margin-bottom:12px;} .el-tag-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:18px;} .el-tag{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:2px;text-transform:uppercase;padding:4px 10px;border:1px solid;opacity:.7;} .el-section{margin-bottom:18px;} .el-section-lbl{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px;text-transform:uppercase;color:rgba(80,180,80,.4);margin-bottom:8px;display:flex;align-items:center;gap:8px;} .el-section-lbl::after{content:'';flex:1;height:1px;background:rgba(80,180,80,.08);} .el-section p{font-size:13.5px;line-height:1.85;color:rgba(180,220,180,.7);} .el-attrs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:16px;} .el-attr{background:rgba(80,180,80,.03);border:1px solid rgba(80,180,80,.08);padding:10px 12px;} .el-attr-k{font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:2px;text-transform:uppercase;color:rgba(80,180,80,.35);margin-bottom:3px;} .el-attr-v{font-size:12.5px;color:rgba(200,230,200,.7);} .el-body-map{margin:16px 0;padding:14px;background:rgba(80,180,80,.03);border:1px solid rgba(80,180,80,.07);} .el-body-map-lbl{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:3px;text-transform:uppercase;color:rgba(80,180,80,.3);margin-bottom:10px;} .el-body-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;} .el-body-item{font-size:11.5px;color:rgba(180,220,180,.6);line-height:1.5;} .el-body-item span{display:block;font-family:'IBM Plex Mono',monospace;font-size:5.5px;letter-spacing:2px;text-transform:uppercase;color:rgba(80,180,80,.3);margin-bottom:2px;} @media(max-width:768px){ .el-layout{grid-template-columns:1fr;grid-template-rows:52vw 1fr;height:auto;min-height:calc(100vh - 44px);} .el-canvas-wrap{height:52vw;min-height:180px;} .el-panel{border-left:none;border-top:1px solid rgba(80,180,80,.08);max-height:calc(100vh - 52vw - 44px);overflow-y:auto;} .el-panel-inner{padding:14px 14px 40px;} .el-attrs{grid-template-columns:1fr 1fr;} .el-body-grid{grid-template-columns:1fr 1fr;} .el-name{font-size:18px;} .el-skt{font-size:24px;} } /* ═══════════════════════════════════════════════════ LINEAGE TREE ═══════════════════════════════════════════════════ */ #lineage-ov{background:#020205!important;} .lt-layout{display:grid;grid-template-columns:220px 1fr 320px;height:calc(100vh - 54px);overflow:hidden;} .lt-sidebar{background:rgba(3,2,8,.98);border-right:1px solid rgba(220,160,60,.08);overflow-y:auto;padding:16px 0;scrollbar-width:thin;} .lt-tree-btn{display:block;width:100%;text-align:left;padding:10px 18px;background:none;border:none;border-left:2px solid transparent;font-family:'IBM Plex Mono',monospace;font-size:7.5px;letter-spacing:2px;text-transform:uppercase;color:rgba(180,140,60,.5);cursor:pointer;transition:all .2s;} .lt-tree-btn:hover{color:rgba(240,180,80,.8);border-left-color:rgba(220,160,60,.3);background:rgba(220,160,60,.03);} .lt-tree-btn.active{color:rgba(240,190,80,1);border-left-color:rgba(220,160,60,.7);background:rgba(220,160,60,.05);} .lt-canvas-wrap{position:relative;overflow:hidden;cursor:grab;} .lt-canvas-wrap:active{cursor:grabbing;} #lt-canvas{display:block;} .lt-info{background:rgba(3,2,8,.98);border-left:1px solid rgba(220,160,60,.08);overflow-y:auto;padding:0;scrollbar-width:thin;transform:translateX(340px);transition:transform .4s cubic-bezier(.16,1,.3,1);} .lt-info.open{transform:translateX(0);} .lt-info-hdr{padding:20px 18px 14px;border-bottom:1px solid rgba(220,160,60,.08);} .lt-info-glyph{font-size:28px;display:block;margin-bottom:8px;} .lt-info-name{font-family:'Cinzel',serif;font-size:16px;color:rgba(255,200,100,.9);margin-bottom:3px;} .lt-info-sub{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:3px;text-transform:uppercase;color:rgba(180,140,60,.4);} .lt-info-body{padding:16px 18px 50px;} .lt-info-sec{margin-bottom:16px;} .lt-info-sec-lbl{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:3px;text-transform:uppercase;color:rgba(180,140,60,.35);margin-bottom:7px;} .lt-info-sec p{font-size:13px;line-height:1.85;color:rgba(210,185,130,.65);} .lt-info-sec blockquote{border-left:2px solid rgba(220,160,60,.25);padding:6px 0 6px 12px;font-style:italic;font-size:13px;color:rgba(240,210,150,.6);line-height:1.7;} .lt-hint{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:3px;color:rgba(180,140,60,.2);text-transform:uppercase;pointer-events:none;white-space:nowrap;} @media(max-width:768px){ .lt-layout{grid-template-columns:1fr;grid-template-rows:auto 1fr;} .lt-sidebar{display:flex;overflow-x:auto;overflow-y:hidden;padding:8px 6px;border-right:none;border-bottom:1px solid rgba(220,160,60,.12);scrollbar-width:none;-webkit-overflow-scrolling:touch;flex-shrink:0;min-height:44px;} .lt-sidebar::-webkit-scrollbar{display:none;} .lt-tree-btn{white-space:nowrap;border-left:none;border-bottom:2px solid transparent;padding:9px 16px;flex-shrink:0;min-width:max-content;touch-action:manipulation;} .lt-tree-btn.active{border-bottom-color:rgba(220,160,60,.8);border-left-color:transparent;background:rgba(220,160,60,.08);color:rgba(255,200,100,1);} .lt-canvas-wrap{height:55vh;} .lt-info{position:fixed;bottom:0;left:0;right:0;height:50vh;transform:translateY(100%);z-index:30;border-left:none;border-top:1px solid rgba(220,160,60,.08);} .lt-info.open{transform:translateY(0);} } /* ═══════════════════════════════════════════════════ ERA CHARACTERS ═══════════════════════════════════════════════════ */ #erachars-ov{background:#030108!important;} .ec-layout{display:grid;grid-template-columns:200px 1fr;height:calc(100vh - 54px);overflow:hidden;} .ec-era-list{background:rgba(4,1,10,.98);border-right:1px solid rgba(200,80,80,.08);overflow-y:auto;padding:8px 0;scrollbar-width:thin;} .ec-era-btn{display:block;width:100%;text-align:left;padding:11px 16px;background:none;border:none;border-left:2px solid transparent;cursor:pointer;transition:all .2s;} .ec-era-btn:hover .ec-era-btn-name{color:rgba(240,150,150,.9);} .ec-era-btn.active{border-left-color:rgba(200,80,80,.6);background:rgba(200,80,80,.04);} .ec-era-btn.active .ec-era-btn-name{color:rgba(255,170,170,1);} .ec-era-btn-yuga{font-family:'IBM Plex Mono',monospace;font-size:5.5px;letter-spacing:2px;text-transform:uppercase;color:rgba(180,80,80,.35);margin-bottom:3px;} .ec-era-btn-name{font-family:'Cinzel',serif;font-size:10px;color:rgba(200,130,130,.6);transition:color .2s;} .ec-main{overflow:hidden;display:flex;flex-direction:column;} .ec-era-banner{padding:20px 28px 16px;border-bottom:1px solid rgba(200,80,80,.08);flex-shrink:0;} .ec-banner-title{font-family:'Cinzel',serif;font-size:clamp(18px,2.5vw,28px);color:rgba(255,180,180,.9);margin-bottom:4px;} .ec-banner-sub{font-size:14px;font-style:italic;color:rgba(200,140,140,.5);font-family:'Cormorant Garamond',serif;} .ec-chars-grid{flex:1;overflow-y:auto;padding:20px 24px 40px;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;align-content:start;scrollbar-width:thin;} .ec-char-card{background:rgba(200,80,80,.03);border:1px solid rgba(200,80,80,.1);padding:16px 14px;cursor:pointer;transition:all .3s;position:relative;} .ec-char-card:hover{border-color:rgba(200,80,80,.3);background:rgba(200,80,80,.06);transform:translateY(-2px);} .ec-char-glyph{font-size:28px;display:block;margin-bottom:8px;line-height:1;} .ec-char-name{font-family:'Cinzel',serif;font-size:13px;color:rgba(240,180,180,.85);margin-bottom:3px;} .ec-char-role{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:2px;text-transform:uppercase;color:rgba(180,100,100,.4);} .ec-char-type{position:absolute;top:10px;right:10px;width:7px;height:7px;border-radius:50%;} /* Character detail panel */ #ec-detail{position:fixed;top:54px;right:0;bottom:0;width:380px;background:rgba(3,1,8,.99);border-left:1px solid rgba(200,80,80,.12);z-index:30;transform:translateX(400px);transition:transform .4s cubic-bezier(.16,1,.3,1);overflow-y:auto;scrollbar-width:thin;} #ec-detail.open{transform:translateX(0);} .ec-detail-hdr{padding:22px 20px 16px;border-bottom:1px solid rgba(200,80,80,.08);} .ec-detail-close{position:absolute;top:14px;right:14px;background:none;border:1px solid rgba(180,80,80,.2);color:rgba(180,80,80,.5);width:26px;height:26px;cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;transition:all .2s;} .ec-detail-close:hover{border-color:rgba(220,100,100,.6);color:rgba(220,100,100,.9);} .ec-detail-glyph{font-size:44px;display:block;margin-bottom:10px;line-height:1;} .ec-detail-name{font-family:'Cinzel',serif;font-size:20px;color:rgba(255,190,190,.9);margin-bottom:4px;} .ec-detail-role{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px;text-transform:uppercase;color:rgba(200,100,100,.4);} .ec-detail-body{padding:18px 20px 50px;} .ec-detail-sec{margin-bottom:16px;} .ec-detail-sec-lbl{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:3px;text-transform:uppercase;color:rgba(180,80,80,.35);margin-bottom:7px;display:flex;align-items:center;gap:8px;} .ec-detail-sec-lbl::after{content:'';flex:1;height:1px;background:rgba(200,80,80,.06);} .ec-detail-sec p{font-size:13px;line-height:1.85;color:rgba(220,185,185,.65);} .ec-detail-sec blockquote{border-left:2px solid rgba(200,80,80,.2);padding:6px 0 6px 12px;font-style:italic;font-size:13px;color:rgba(240,200,200,.6);line-height:1.7;} .ec-detail-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px;} .ec-detail-tag{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:1.5px;padding:4px 9px;border:1px solid rgba(200,80,80,.15);color:rgba(200,130,130,.5);text-transform:uppercase;} @media(max-width:768px){ .ec-layout{grid-template-columns:1fr;grid-template-rows:auto 1fr;} .ec-era-list{display:flex;overflow-x:auto;overflow-y:hidden;padding:6px 6px;border-right:none;border-bottom:1px solid rgba(200,80,80,.12);scrollbar-width:none;-webkit-overflow-scrolling:touch;flex-shrink:0;min-height:46px;} .ec-era-list::-webkit-scrollbar{display:none;} .ec-era-btn{white-space:nowrap;padding:9px 14px;border-left:none;border-bottom:2px solid transparent;flex-shrink:0;min-width:max-content;touch-action:manipulation;} .ec-era-btn.active{border-bottom-color:rgba(200,80,80,.7);border-left-color:transparent;background:rgba(200,80,80,.06);} .ec-era-btn.active .ec-era-btn-name{color:rgba(255,170,170,1);} #ec-detail{width:100%;top:auto;bottom:0;height:65vh;transform:translateY(100%);border-left:none;border-top:1px solid rgba(200,80,80,.12);} #ec-detail.open{transform:translateY(0);} .ec-chars-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));padding:12px 14px 60px;} } /* ═══════════════════════════════════════════════════ DHARMIC MIRROR ═══════════════════════════════════════════════════ */ #mirror-ov{background:radial-gradient(ellipse at 50% 40%,#020a18 0%,#010408 60%,#010204 100%)!important;} .dm-container{max-width:680px;margin:0 auto;padding:20px 20px 80px;height:calc(100vh - 54px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(100,160,240,.1) transparent;} .dm-intro{text-align:center;padding:40px 0 30px;} .dm-intro-om{font-size:48px;color:rgba(100,160,240,.4);display:block;margin-bottom:12px;animation:omP 4s ease-in-out infinite;} .dm-intro-h{font-family:'Cinzel',serif;font-size:clamp(20px,3vw,30px);color:rgba(180,210,255,.8);margin-bottom:8px;} .dm-intro-s{font-family:'Cormorant Garamond',serif;font-size:16px;font-style:italic;color:rgba(120,160,220,.4);margin-bottom:0;} .dm-q-wrap{margin-bottom:28px;} .dm-q-num{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:4px;text-transform:uppercase;color:rgba(100,160,240,.3);margin-bottom:8px;} .dm-q-text{font-family:'Cormorant Garamond',serif;font-size:clamp(16px,2.2vw,22px);color:rgba(200,220,255,.8);margin-bottom:14px;line-height:1.5;} .dm-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;} .dm-opt{background:rgba(100,160,240,.03);border:1px solid rgba(100,160,240,.12);padding:12px 14px;cursor:pointer;transition:all .3s;text-align:left;} .dm-opt:hover{border-color:rgba(100,160,240,.4);background:rgba(100,160,240,.07);} .dm-opt.selected{border-color:rgba(100,160,240,.7);background:rgba(100,160,240,.12);} .dm-opt-text{font-size:13.5px;color:rgba(180,210,255,.7);line-height:1.5;} .dm-progress{display:flex;gap:6px;margin-bottom:28px;justify-content:center;} .dm-prog-dot{width:8px;height:8px;border-radius:50%;background:rgba(100,160,240,.12);transition:all .3s;} .dm-prog-dot.done{background:rgba(100,160,240,.6);} .dm-prog-dot.current{background:rgba(100,160,240,1);box-shadow:0 0 8px rgba(100,160,240,.5);} .dm-submit{width:100%;padding:14px;font-family:'Cinzel',serif;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:rgba(100,160,240,.6);border:1px solid rgba(100,160,240,.2);background:none;cursor:pointer;transition:all .3s;margin-top:16px;} .dm-submit:hover{color:rgba(140,190,255,.9);border-color:rgba(100,160,240,.5);} /* Results */ .dm-result{display:none;} .dm-result.show{display:block;} .dm-result-canvas-wrap{position:relative;width:100%;aspect-ratio:1;max-width:380px;margin:0 auto 24px;} #dm-result-canvas{width:100%;height:100%;display:block;} .dm-result-h{font-family:'Cinzel',serif;font-size:clamp(20px,3vw,28px);text-align:center;margin-bottom:4px;} .dm-result-sub{text-align:center;font-family:'Cormorant Garamond',serif;font-size:16px;font-style:italic;color:rgba(120,160,220,.5);margin-bottom:24px;} .dm-result-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px;} .dm-result-card{background:rgba(100,160,240,.03);border:1px solid rgba(100,160,240,.1);padding:14px;} .dm-result-card-lbl{font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:3px;text-transform:uppercase;color:rgba(100,160,240,.3);margin-bottom:6px;} .dm-result-card-val{font-family:'Cormorant Garamond',serif;font-size:17px;font-style:italic;color:rgba(180,210,255,.75);} .dm-result-body{font-size:14px;line-height:1.85;color:rgba(180,210,255,.6);margin-bottom:16px;} .dm-restart{display:block;margin:0 auto;padding:10px 28px;font-family:'IBM Plex Mono',monospace;font-size:7.5px;letter-spacing:2px;text-transform:uppercase;color:rgba(100,160,240,.4);border:1px solid rgba(100,160,240,.15);background:none;cursor:pointer;transition:all .3s;} .dm-restart:hover{color:rgba(100,160,240,.8);border-color:rgba(100,160,240,.4);} @media(max-width:768px){.dm-options{grid-template-columns:1fr;}} /* ═══════════════════════════════════════════════════ LIVING MAP REBUILT — MANDALA MAP ═══════════════════════════════════════════════════ */ .lm-hdr{padding:10px 20px;display:flex;align-items:center;gap:14px;background:rgba(3,2,8,.9);border-bottom:1px solid rgba(140,80,200,.1);position:absolute;top:0;left:0;right:0;z-index:5;} .lm-title{font-family:'Cinzel',serif;font-size:12px;color:rgba(180,140,220,.7);letter-spacing:2px;} .lm-sub{font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:3px;color:rgba(140,80,200,.35);text-transform:uppercase;margin-top:2px;} #lm-canvas{position:absolute;top:0;left:0;display:block;cursor:pointer;} #lm-nodes-info{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:5;background:rgba(3,2,8,.9);border:1px solid rgba(140,80,200,.2);padding:14px 20px;max-width:400px;min-width:260px;text-align:center;backdrop-filter:blur(12px);transition:opacity .3s;pointer-events:none;} #lm-nodes-info.empty{opacity:0;} .lm-info-name{font-family:'Cinzel',serif;font-size:14px;color:rgba(200,160,255,.9);margin-bottom:3px;} .lm-info-cat{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:3px;text-transform:uppercase;color:rgba(140,80,200,.4);margin-bottom:8px;} .lm-info-body{font-size:12.5px;line-height:1.7;color:rgba(180,160,220,.6);} .lm-legend{position:absolute;top:54px;left:16px;z-index:5;display:flex;flex-direction:column;gap:5px;} .lm-leg-item{display:flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(140,80,200,.4);} .lm-leg-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;} .lm-zoom-btns{position:absolute;bottom:20px;right:20px;z-index:5;display:flex;flex-direction:column;gap:4px;} .lm-zbtn{background:rgba(3,2,8,.9);border:1px solid rgba(140,80,200,.2);color:rgba(140,80,200,.5);width:28px;height:28px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .2s;} .lm-zbtn:hover{border-color:rgba(140,80,200,.5);color:rgba(180,130,255,.8);} /* ═══════════════════════════════════════════════════ SURPRISE PAGE — VEDIC NIGHT SKY ═══════════════════════════════════════════════════ */ .tbtn-sky{border-color:rgba(140,180,240,.2);color:rgba(160,200,255,.4);} .tbtn-sky:hover{color:rgba(200,220,255,.8);border-color:rgba(140,180,240,.5);} .tbtn-tattva{border-color:rgba(120,80,200,.3);color:rgba(160,120,240,.6);} .tbtn-tattva:hover{color:rgba(200,170,255,.9);border-color:rgba(120,80,200,.7);} .tbtn-sthula{border-color:rgba(80,160,120,.3);color:rgba(120,200,160,.6);} .tbtn-sthula:hover{color:rgba(160,230,190,.9);border-color:rgba(80,160,120,.7);} .tbtn-karan{border-color:rgba(180,120,220,.3);color:rgba(200,150,240,.6);} .tbtn-karan:hover{color:rgba(220,180,255,.9);border-color:rgba(180,120,220,.7);} .tbtn-antah{border-color:rgba(100,140,220,.3);color:rgba(140,180,240,.6);} .tbtn-antah:hover{color:rgba(180,210,255,.9);border-color:rgba(100,140,220,.7);} .tbtn-tanm{border-color:rgba(80,180,200,.3);color:rgba(120,210,230,.6);} .tbtn-tanm:hover{color:rgba(170,235,250,.9);border-color:rgba(80,180,200,.7);} /* ── Tattva Cascade ── */ .tattva-panel{position:absolute;top:54px;right:0;bottom:0;width:340px;background:rgba(3,1,8,.97);border-left:1px solid rgba(120,80,200,.15);z-index:5;transform:translateX(360px);transition:transform .4s cubic-bezier(.16,1,.3,1);overflow-y:auto;padding:24px 22px 50px;} .tattva-panel.open{transform:translateX(0);} .tattva-num{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px;color:rgba(120,80,200,.5);text-transform:uppercase;margin-bottom:4px;} .tattva-skt{font-family:'Cormorant Garamond',serif;font-size:28px;font-style:italic;color:rgba(200,170,255,.9);display:block;line-height:1.1;margin-bottom:4px;} .tattva-roman{font-family:'Cinzel',serif;font-size:11px;letter-spacing:3px;color:rgba(180,150,230,.6);text-transform:uppercase;display:block;margin-bottom:14px;} .tattva-essence{font-family:'Cormorant Garamond',serif;font-size:16px;font-style:italic;color:rgba(200,180,240,.6);line-height:1.8;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid rgba(120,80,200,.12);} .tattva-body{font-size:13px;line-height:1.85;color:rgba(180,160,220,.5);margin-bottom:12px;} .tattva-body strong{color:rgba(200,180,240,.8);} .tattva-body em{color:rgba(160,120,200,.9);font-style:italic;} .tattva-group-tag{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:2px;text-transform:uppercase;padding:3px 9px;margin-bottom:14px;} /* ── Sthula Body ── */ .sthula-panel{position:absolute;top:54px;right:0;bottom:0;width:340px;background:rgba(2,5,10,.97);border-left:1px solid rgba(80,160,120,.15);z-index:5;transform:translateX(360px);transition:transform .4s cubic-bezier(.16,1,.3,1);overflow-y:auto;padding:24px 22px 50px;} .sthula-panel.open{transform:translateX(0);} .sthula-skt{font-family:'Cormorant Garamond',serif;font-size:26px;font-style:italic;color:rgba(140,210,170,.9);display:block;line-height:1.1;margin-bottom:4px;} .sthula-roman{font-family:'Cinzel',serif;font-size:10px;letter-spacing:3px;color:rgba(100,180,140,.6);text-transform:uppercase;display:block;margin-bottom:12px;} .sthula-essence{font-family:'Cormorant Garamond',serif;font-size:15px;font-style:italic;color:rgba(140,200,160,.6);line-height:1.8;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid rgba(80,160,120,.12);} .sthula-body{font-size:13px;line-height:1.85;color:rgba(120,180,140,.5);} .sthula-body strong{color:rgba(160,220,180,.8);} /* ── Karan Body ── */ .karan-panel{position:absolute;top:54px;right:0;bottom:0;width:340px;background:rgba(5,2,8,.97);border-left:1px solid rgba(180,120,220,.15);z-index:5;transform:translateX(360px);transition:transform .4s cubic-bezier(.16,1,.3,1);overflow-y:auto;padding:24px 22px 50px;} .karan-panel.open{transform:translateX(0);} .karan-skt{font-family:'Cormorant Garamond',serif;font-size:26px;font-style:italic;color:rgba(210,170,250,.9);display:block;line-height:1.1;margin-bottom:4px;} .karan-roman{font-family:'Cinzel',serif;font-size:10px;letter-spacing:3px;color:rgba(170,130,220,.6);text-transform:uppercase;display:block;margin-bottom:12px;} .karan-body{font-size:13px;line-height:1.85;color:rgba(180,150,220,.5);} .karan-body strong{color:rgba(210,180,250,.8);} /* ── Antahkarana ── */ .antah-panel{position:absolute;top:54px;right:0;bottom:0;width:340px;background:rgba(3,4,8,.97);border-left:1px solid rgba(100,140,220,.15);z-index:5;transform:translateX(360px);transition:transform .4s cubic-bezier(.16,1,.3,1);overflow-y:auto;padding:24px 22px 50px;} .antah-panel.open{transform:translateX(0);} .antah-skt{font-family:'Cormorant Garamond',serif;font-size:26px;font-style:italic;color:rgba(170,200,250,.9);display:block;line-height:1.1;margin-bottom:4px;} .antah-body{font-size:13px;line-height:1.85;color:rgba(140,170,220,.5);} .antah-body strong{color:rgba(180,210,255,.8);} /* ── Tanmantras ── */ .tanm-panel{position:absolute;top:54px;right:0;bottom:0;width:340px;background:rgba(2,4,8,.97);border-left:1px solid rgba(80,180,200,.15);z-index:5;transform:translateX(360px);transition:transform .4s cubic-bezier(.16,1,.3,1);overflow-y:auto;padding:24px 22px 50px;} .tanm-panel.open{transform:translateX(0);} .tanm-skt{font-family:'Cormorant Garamond',serif;font-size:26px;font-style:italic;color:rgba(140,220,240,.9);display:block;line-height:1.1;margin-bottom:4px;} .tanm-body{font-size:13px;line-height:1.85;color:rgba(110,190,210,.5);} .tanm-body strong{color:rgba(160,230,250,.8);} /* Mobile panel overrides */ @media(max-width:768px){ .tattva-panel,.sthula-panel,.karan-panel,.antah-panel,.tanm-panel{ width:100%;top:auto;bottom:0;height:60vh; transform:translateY(100%);border-left:none; border-top:1px solid rgba(201,168,76,.1); } .tattva-panel.open,.sthula-panel.open,.karan-panel.open, .antah-panel.open,.tanm-panel.open{transform:translateY(0);} } #sky-ov{background:#000!important;} #sky-canvas{position:absolute;top:0;left:0;width:100%;height:100%;cursor:crosshair;} .sky-hdr-minimal{position:absolute;top:0;left:0;right:0;z-index:5;padding:10px 20px;display:flex;align-items:center;gap:14px;background:rgba(0,0,0,.6);} .sky-info-panel{position:absolute;top:54px;right:0;bottom:0;width:300px;background:rgba(0,0,4,.95);border-left:1px solid rgba(140,180,240,.08);z-index:5;transform:translateX(320px);transition:transform .4s cubic-bezier(.16,1,.3,1);overflow-y:auto;padding:20px 20px 40px;scrollbar-width:thin;} .sky-info-panel.open{transform:translateX(0);} .sky-const-name{font-family:'Cinzel',serif;font-size:18px;color:rgba(200,220,255,.9);margin-bottom:4px;} .sky-const-skt{font-family:'Cormorant Garamond',serif;font-size:26px;font-style:italic;color:rgba(160,200,255,.6);display:block;margin-bottom:12px;} .sky-const-body{font-size:13px;line-height:1.85;color:rgba(160,190,230,.55);} .sky-const-body p{margin-bottom:10px;} .sky-label{position:absolute;pointer-events:none;font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:2px;text-transform:uppercase;color:rgba(200,220,255,.5);white-space:nowrap;} .sky-hint{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:3px;color:rgba(140,180,240,.2);text-transform:uppercase;white-space:nowrap;pointer-events:none;} @media(max-width:768px){ .sky-info-panel{width:100%;top:auto;bottom:0;height:55vh;transform:translateY(100%);border-left:none;border-top:1px solid rgba(140,180,240,.1);} .sky-info-panel.open{transform:translateY(0);} #sky-canvas{touch-action:none;} .sky-hint{bottom:60px;} } /* ═══════════════════════════════════════════════════ SHARED MODAL HEADER PATCH ═══════════════════════════════════════════════════ */ .page-hdr{position:absolute;top:0;left:0;right:0;z-index:10;padding:10px 20px;display:flex;align-items:center;gap:14px;background:rgba(3,2,8,.88);border-bottom:1px solid rgba(201,168,76,.06);backdrop-filter:blur(12px);} .page-hdr-title{font-family:'Cinzel',serif;font-size:12px;letter-spacing:2px;} .page-hdr-sub{font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:3px;text-transform:uppercase;margin-top:2px;opacity:.4;} .tbtn-more{border-color:rgba(201,168,76,.3);color:rgba(201,168,76,.6);} /* ── About Method v2 ── */ .ab-method-v2{position:relative;height:100%;display:flex;flex-direction:column;} #ab-method-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.5;} .ab-method-items{position:relative;z-index:1;padding:36px 48px;display:flex;flex-direction:column;gap:0;} .ab-mi{display:flex;gap:20px;padding:24px 0;border-bottom:1px solid rgba(201,168,76,.06);align-items:flex-start;cursor:default;transition:background .2s;} .ab-mi:hover{background:rgba(201,168,76,.02);} .ab-mi-dot{width:6px;height:6px;border-radius:50%;background:rgba(201,168,76,.35);flex-shrink:0;margin-top:8px;transition:all .3s;} .ab-mi:hover .ab-mi-dot{background:var(--gold);box-shadow:0 0 8px var(--gold);} .ab-mi-text{font-family:'Cormorant Garamond',serif;font-size:clamp(15px,2vw,20px);font-style:italic;color:rgba(220,200,160,.65);line-height:1.7;} .ab-mi-label{display:block;font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:4px;text-transform:uppercase;color:rgba(201,168,76,.35);margin-bottom:6px;font-style:normal;} /* ── About Field canvas ── */ .ab-field-wrap{position:relative;height:100%;background:#030208;user-select:none;} #ab-field-canvas{display:block;width:100%;height:100%;cursor:crosshair;touch-action:none;} .ab-field-label{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:4px;color:rgba(201,168,76,.2);text-transform:uppercase;pointer-events:none;white-space:nowrap;} /* ── Living Map page ── */ .tbtn-livemap{border-color:rgba(120,220,160,.3);color:rgba(140,240,180,.6);} .tbtn-livemap:hover{color:rgba(180,255,210,1);border-color:rgba(120,220,160,.7);box-shadow:0 0 12px rgba(120,220,160,.15);} #livemap-ov{background:#020504!important;} #livemap-ov .lm-hdr{ position:absolute;top:0;left:0;right:0;z-index:10; padding:14px 24px;display:flex;align-items:center;gap:16px; background:rgba(2,5,4,.9);border-bottom:1px solid rgba(120,220,160,.1); backdrop-filter:blur(12px); } .lm-title{font-family:'Cinzel',serif;font-size:clamp(12px,1.5vw,16px);color:rgba(140,240,180,.8);letter-spacing:3px;} .lm-sub{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:3px;color:rgba(120,220,160,.3);text-transform:uppercase;} #lm-canvas{display:block;width:100%;height:100%;cursor:grab;} #lm-canvas:active{cursor:grabbing;} #lm-nodes-info{ position:absolute;bottom:20px;right:20px;z-index:10; width:280px;max-height:50vh;overflow-y:auto; background:rgba(2,5,4,.95);border:1px solid rgba(120,220,160,.15); padding:16px;scrollbar-width:thin; scrollbar-color:rgba(120,220,160,.12) transparent; transform:translateX(320px);transition:transform .4s cubic-bezier(.16,1,.3,1); } #lm-nodes-info.open{transform:translateX(0);} .lm-info-name{font-family:'Cinzel',serif;font-size:14px;color:rgba(140,240,180,.9);margin-bottom:4px;} .lm-info-cat{font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:3px;color:rgba(120,220,160,.35);text-transform:uppercase;margin-bottom:10px;} .lm-info-body{font-size:12.5px;color:rgba(180,220,200,.65);line-height:1.7;} .lm-zoom-btns{position:absolute;bottom:20px;left:20px;z-index:10;display:flex;flex-direction:column;gap:4px;} .lm-zbtn{width:32px;height:32px;background:rgba(2,5,4,.9);border:1px solid rgba(120,220,160,.2);color:rgba(120,220,160,.5);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;} .lm-zbtn:hover{border-color:rgba(120,220,160,.6);color:rgba(140,240,180,.9);} .lm-legend{position:absolute;top:60px;left:16px;z-index:10;display:flex;flex-direction:column;gap:6px;} .lm-leg-item{display:flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;font-size:5.5px;letter-spacing:2px;color:rgba(120,220,160,.35);text-transform:uppercase;} .lm-leg-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;} @media(max-width:768px){#lm-nodes-info{width:calc(100% - 32px);right:16px;bottom:60px;}.ab-method-items{padding:20px 16px;}} /* ── Horizontal scroll hint for ALL tab bars ── */ .tab-scroll-wrap{position:relative;overflow:hidden;} .tab-scroll-wrap::after{ content:'›';position:absolute;right:0;top:0;bottom:0; width:32px;display:flex;align-items:center;justify-content:center; background:linear-gradient(to right,transparent,rgba(3,2,1,.96)); font-size:16px;color:rgba(201,168,76,.4);pointer-events:none; transition:opacity .3s;letter-spacing:-2px; } .tab-scroll-wrap.at-end::after{opacity:0;} .tab-scroll-wrap > *{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;} .tab-scroll-wrap > *::-webkit-scrollbar{display:none;} .tbtn-more:hover,.tbtn-more.open{color:var(--gold);border-color:rgba(201,168,76,.6);} /* ── Touch targets — enlarged hit area without visual change ── */ .pd{ width:5px;height:5px; border-radius:50%; background:rgba(201,168,76,.18); cursor:pointer; transition:all .3s; border:1px solid rgba(201,168,76,.1); /* Invisible touch-area expansion via outline trick on mobile */ position:relative; } .pd::after{ content:''; position:absolute; top:-10px;left:-10px;right:-10px;bottom:-10px; } .pd.on{ background:var(--pd-col,var(--gold)); box-shadow:0 0 8px var(--pd-col,var(--gold)),0 0 16px var(--pd-col,var(--gold)); border-color:var(--pd-col,var(--gold)); transform:scale(1.35); } /* ── Scroll hint animation ── */ @keyframes bounceDown{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}} .sarr{width:1px;height:24px;background:linear-gradient(to bottom,var(--gold),transparent);margin:0 auto;animation:bounceDown 1.8s ease-in-out infinite;} #shint{opacity:1;transition:opacity .8s;} /* ── Upanishad legend ── */ #up-legend{ padding:10px 20px; display:flex;gap:16px;flex-wrap:wrap;align-items:center; border-top:1px solid rgba(201,168,76,.06); background:rgba(3,2,1,.7); } .upl-item{display:flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;} .upl-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;} .upl-ring{width:12px;height:12px;border-radius:50%;border:2px solid;flex-shrink:0;background:transparent;} .upl-line{width:20px;height:1px;flex-shrink:0;} /* ── Forgotten button mobile — ensure visible ── */ @media(max-width:768px){ #fgt-btn{ top:52px!important; right:8px!important; z-index:230!important; font-size:5.5px; padding:5px 8px; } /* Marga dropdowns positioned by JS on mobile */ } .tbtn-dharma{border-color:rgba(200,80,80,.3);color:rgba(220,110,100,.7);} .tbtn-dharma:hover{color:rgba(250,150,130,1);border-color:rgba(200,80,80,.7);box-shadow:0 0 12px rgba(200,80,80,.15);} .tbtn-consciousness{border-color:rgba(100,180,220,.3);color:rgba(120,200,240,.7);} .tbtn-consciousness:hover{color:rgba(160,220,255,1);border-color:rgba(100,180,220,.7);box-shadow:0 0 12px rgba(100,180,220,.15);} /* ═══ ABOUT RAHUL — Futuristic ═══ */ #about-ov{overflow:hidden!important;background:radial-gradient(ellipse at 50% 40%,#080614 0%,#030208 50%,#010108 100%)!important;} #ab-nav{ position:absolute;top:0;left:0;right:0; display:flex;gap:0;z-index:5; border-bottom:1px solid rgba(201,168,76,.08); background:rgba(3,2,8,.97); padding:0 20px; } .ab-tab{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px;text-transform:uppercase; padding:14px 18px;color:rgba(201,168,76,.25);background:none;border:none;cursor:pointer; border-bottom:2px solid transparent;transition:all .3s;position:relative; } .ab-tab:hover{color:rgba(201,168,76,.65);} .ab-tab.active{color:var(--gold);border-bottom-color:var(--gold);} .ab-tab.active::after{content:'';position:absolute;bottom:-1px;left:20%;right:20%;height:1px;background:var(--gold);box-shadow:0 0 10px var(--gold),0 0 30px rgba(201,168,76,.3);filter:blur(1px);} .ab-tab:last-child{color:rgba(201,168,76,.15);} .ab-tab:last-child.active{color:rgba(201,168,76,.4);} #ab-content{ position:absolute;top:50px;left:0;right:0;bottom:0; overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(201,168,76,.1) transparent; z-index:4; } /* Signal panel — futuristic profile card */ .ab-signal{ height:100%;display:flex;flex-direction:column; align-items:center;justify-content:center; padding:40px;text-align:center;position:relative; } .ab-name{ font-family:'Cinzel',serif;font-size:clamp(36px,7vw,80px); color:transparent;letter-spacing:12px; margin-bottom:10px;line-height:1; background:linear-gradient(135deg,rgba(201,168,76,.12) 0%,rgba(201,168,76,.04) 40%,rgba(201,168,76,.15) 100%); -webkit-background-clip:text;background-clip:text; text-shadow:0 0 60px rgba(201,168,76,.08); animation:abNameFlicker 6s ease-in-out infinite; } @keyframes abNameFlicker{0%,100%{opacity:.85;}30%{opacity:1;}50%{opacity:.78;}70%{opacity:.95;}} .ab-signal-role{ font-family:'IBM Plex Mono',monospace;font-size:7px; letter-spacing:5px;color:rgba(201,168,76,.22);text-transform:uppercase; margin-bottom:28px;position:relative;padding:6px 20px; border:1px solid rgba(201,168,76,.06); } .ab-signal-role::before,.ab-signal-role::after{ content:'';position:absolute;top:50%;width:40px;height:1px; background:linear-gradient(to right,transparent,rgba(201,168,76,.15)); } .ab-signal-role::before{right:100%;margin-right:8px;} .ab-signal-role::after{left:100%;margin-left:8px;transform:scaleX(-1);} .ab-signal-line{ font-family:'Cormorant Garamond',serif;font-size:clamp(17px,2.5vw,26px); font-style:italic;color:rgba(220,200,160,.6); max-width:500px;line-height:1.8;margin-bottom:18px; text-shadow:0 0 20px rgba(201,168,76,.05); } .ab-signal-sub{ font-family:'IBM Plex Mono',monospace;font-size:6.5px; letter-spacing:5px;color:rgba(201,168,76,.18);text-transform:uppercase; } .ab-signal-email{ margin-top:16px;font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:2px; } .ab-signal-email a{color:rgba(201,168,76,.25);text-decoration:none;transition:all .4s;position:relative;} .ab-signal-email a:hover{color:rgba(201,168,76,.8);text-shadow:0 0 12px rgba(201,168,76,.3);} .ab-orbs{display:flex;gap:24px;margin-top:40px;flex-wrap:wrap;justify-content:center;} .ab-orb{ width:68px;height:68px;border-radius:4px; border:1px solid rgba(201,168,76,.08); display:flex;flex-direction:column;align-items:center;justify-content:center; cursor:pointer;transition:all .4s cubic-bezier(.16,1,.3,1); font-family:'IBM Plex Mono',monospace; position:relative;overflow:hidden; background:rgba(201,168,76,.01); } .ab-orb::before{ content:'';position:absolute;inset:0; background:linear-gradient(135deg,rgba(201,168,76,.06) 0%,transparent 50%,rgba(201,168,76,.03) 100%); opacity:0;transition:opacity .4s; } .ab-orb::after{ content:'';position:absolute;top:0;left:-100%;width:40%;height:100%; background:linear-gradient(90deg,transparent,rgba(201,168,76,.08),transparent); transition:none; } .ab-orb:hover{border-color:rgba(201,168,76,.35);transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 1px rgba(201,168,76,.2);} .ab-orb:hover::before{opacity:1;} .ab-orb:hover::after{animation:abOrbSweep .6s ease forwards;} @keyframes abOrbSweep{from{left:-100%;}to{left:200%;}} .ab-orb-icon{font-size:20px;margin-bottom:4px;opacity:.7;transition:opacity .3s;} .ab-orb:hover .ab-orb-icon{opacity:1;} .ab-orb-lbl{font-size:5px;letter-spacing:2px;color:rgba(201,168,76,.25);text-transform:uppercase;} /* Method panel — holographic card style */ .ab-method-v2{position:relative;height:100%;display:flex;flex-direction:column;} #ab-method-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.5;} .ab-method-items{position:relative;z-index:1;padding:36px 48px;display:flex;flex-direction:column;gap:0;} .ab-mi{display:flex;gap:20px;padding:24px 0;border-bottom:1px solid rgba(201,168,76,.04);align-items:flex-start;cursor:default;transition:all .3s;position:relative;} .ab-mi::before{content:'';position:absolute;left:0;right:0;top:0;bottom:0;background:linear-gradient(90deg,rgba(201,168,76,.02),transparent 60%);opacity:0;transition:opacity .3s;} .ab-mi:hover{background:transparent;} .ab-mi:hover::before{opacity:1;} .ab-mi-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-top:8px;transition:all .4s;box-shadow:0 0 0 0 transparent;} .ab-mi:hover .ab-mi-dot{box-shadow:0 0 12px currentColor;transform:scale(1.4);} .ab-mi-text{font-family:'Cormorant Garamond',serif;font-size:clamp(15px,2vw,20px);font-style:italic;color:rgba(220,200,160,.55);line-height:1.7;position:relative;z-index:1;} .ab-mi:hover .ab-mi-text{color:rgba(220,200,160,.8);} .ab-mi-label{display:block;font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:4px;text-transform:uppercase;color:rgba(201,168,76,.25);margin-bottom:6px;font-style:normal;} .ab-mi:hover .ab-mi-label{color:rgba(201,168,76,.5);} /* Method panel old (unused) */ .ab-method{padding:32px 48px;} .ab-m-item{display:flex;gap:20px;padding:22px 0;border-bottom:1px solid rgba(201,168,76,.06);align-items:flex-start;} .ab-m-item:last-child{border-bottom:none;} .ab-m-num{font-family:'Cinzel',serif;font-size:32px;color:rgba(201,168,76,.1);flex-shrink:0;line-height:1;margin-top:2px;min-width:40px;} .ab-m-title{font-family:'Cinzel',serif;font-size:14px;color:var(--cream);margin-bottom:6px;} .ab-m-body{font-size:13px;font-style:italic;color:var(--tdim);line-height:1.75;} /* Honest panel — floating glass card */ .ab-honest{ height:100%;display:flex;align-items:center;justify-content:center; padding:40px; } .ab-honest-inner{ max-width:540px;text-align:center; border:1px solid rgba(201,168,76,.06); padding:48px 40px;position:relative; background:rgba(201,168,76,.01); } .ab-honest-inner::before{ content:'';position:absolute;top:-1px;left:20%;right:20%;height:1px; background:linear-gradient(to right,transparent,rgba(201,168,76,.2),transparent); } .ab-honest-inner::after{ content:'';position:absolute;bottom:-1px;left:20%;right:20%;height:1px; background:linear-gradient(to right,transparent,rgba(201,168,76,.1),transparent); } .ab-honest-lbl{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:5px;color:rgba(201,168,76,.25);text-transform:uppercase;margin-bottom:24px;} .ab-honest-text{font-family:'Cormorant Garamond',serif;font-size:clamp(15px,2vw,20px);font-style:italic;color:rgba(220,200,160,.6);line-height:2;} .ab-honest-sig{margin-top:28px;font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:4px;color:rgba(201,168,76,.18);text-transform:uppercase;} /* Field panel */ .ab-field-wrap{position:relative;height:100%;background:#020208;user-select:none;} #ab-field-canvas{display:block;width:100%;height:100%;} .ab-field-label{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:4px;color:rgba(201,168,76,.15);text-transform:uppercase;pointer-events:none;white-space:nowrap;} /* Secret panel */ .ab-secret{ height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center; padding:20px; } .ab-secret-canvas-wrap{ position:relative; width:min(480px,90vw); height:min(480px,90vw); cursor:pointer; } #ab-secret-canvas{width:100%;height:100%;display:block;} .ab-secret-hint{text-align:center;margin-top:14px;font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:3px;color:rgba(201,168,76,.15);text-transform:uppercase;} @media(max-width:768px){.ab-method,.ab-method-items{padding:20px 16px;}.ab-signal,.ab-honest,.ab-secret{padding:24px 16px;}.ab-name{font-size:clamp(28px,9vw,52px);letter-spacing:6px;}.ab-orb{width:56px;height:56px;}.ab-honest-inner{padding:32px 20px;}} /* ═══ CONSCIOUSNESS TYPES ═══ */ #cons-ov{scrollbar-width:thin;scrollbar-color:rgba(100,180,220,.15) transparent;} .cons-hero{padding:44px 60px 32px;border-bottom:1px solid rgba(100,180,220,.1);} .cons-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:5px;color:rgba(100,180,220,.4);text-transform:uppercase;margin-bottom:12px;} .cons-title{font-family:'Cinzel',serif;font-size:clamp(18px,3vw,36px);color:var(--white);letter-spacing:3px;margin-bottom:10px;} .cons-title span{color:rgba(120,200,240,.85);} .cons-sub{font-size:14px;font-style:italic;color:var(--tdim);max-width:600px;line-height:1.7;} .cons-nav{display:flex;gap:0;padding:0 60px;border-bottom:1px solid rgba(100,180,220,.08);overflow-x:auto;scrollbar-width:none;background:rgba(3,2,1,.6);} .cons-nav::-webkit-scrollbar{display:none;} .cons-tab{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:2px;text-transform:uppercase;padding:11px 14px;color:var(--muted);background:none;border:none;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;white-space:nowrap;} .cons-tab:hover{color:rgba(120,200,240,.8);} .cons-tab.active{color:rgba(120,200,240,.9);border-bottom-color:rgba(100,180,220,.7);} .cons-body{padding:32px 60px;overflow-y:auto;height:calc(100vh - 210px);scrollbar-width:thin;scrollbar-color:rgba(100,180,220,.12) transparent;} .cons-panel{display:none;}.cons-panel.active{display:block;} .cons-section{margin-bottom:44px;} .cons-sec-label{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:4px;color:rgba(100,180,220,.35);text-transform:uppercase;margin-bottom:8px;} .cons-sec-title{font-family:'Cinzel',serif;font-size:clamp(15px,2vw,22px);color:var(--cream);margin-bottom:8px;} .cons-sec-desc{font-size:13.5px;font-style:italic;color:var(--tdim);max-width:600px;line-height:1.65;margin-bottom:24px;} .cons-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:2px;margin-bottom:24px;} .cons-card{background:var(--surf);border:1px solid rgba(100,180,220,.07);padding:22px;cursor:pointer;transition:all .25s;position:relative;overflow:hidden;} .cons-card:hover{background:var(--surf2);border-color:rgba(100,180,220,.25);} .cons-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--cc-col,rgba(100,180,220,.5));opacity:.45;transition:opacity .25s;} .cons-card:hover::before,.cons-card.open-card::before{opacity:1;} .cons-card-num{font-family:'Cinzel',serif;font-size:26px;color:rgba(100,180,220,.1);position:absolute;top:12px;right:14px;line-height:1;} .cons-card-name{font-family:'Cinzel',serif;font-size:13px;letter-spacing:1px;color:var(--cream);margin-bottom:5px;} .cons-card-skt{font-family:'Cormorant Garamond',serif;font-size:13px;font-style:italic;color:rgba(100,180,220,.5);margin-bottom:10px;} .cons-card-desc{font-size:12.5px;color:var(--tdim);line-height:1.65;} .cons-card-toggle{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:1px;color:var(--muted);float:right;pointer-events:none;} .cons-card-body{display:none;padding-top:12px;margin-top:12px;border-top:1px solid rgba(100,180,220,.08);} .cons-card-body.open{display:block;animation:kmapFadeIn .3s ease;} .cons-row{display:flex;gap:8px;margin-bottom:10px;align-items:flex-start;} .cons-row-lbl{font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:2px;color:rgba(100,180,220,.4);text-transform:uppercase;min-width:76px;padding-top:2px;flex-shrink:0;} .cons-row-val{font-size:12.5px;color:var(--text);line-height:1.7;} .cons-verse{margin:10px 0;padding:10px 14px;border-left:2px solid rgba(100,180,220,.2);background:rgba(100,180,220,.03);} .cons-verse-skt{font-family:'Cormorant Garamond',serif;font-size:15px;font-style:italic;color:rgba(180,220,255,.75);margin-bottom:3px;} .cons-verse-trans{font-size:11.5px;color:var(--tdim);line-height:1.5;} .cons-verse-ref{font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:1.5px;color:rgba(100,180,220,.3);text-transform:uppercase;margin-top:3px;} .cons-why{margin:20px 0;padding:18px 22px;background:rgba(100,180,220,.04);border:1px solid rgba(100,180,220,.12);} .cons-why-lbl{font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:3px;color:rgba(100,180,220,.4);text-transform:uppercase;margin-bottom:8px;} .cons-why-text{font-size:14px;color:rgba(200,230,255,.8);line-height:1.75;font-style:italic;} @media(max-width:768px){.cons-hero,.cons-body{padding:22px 14px;}.cons-nav{padding:0 14px;}.cons-grid{grid-template-columns:1fr;}} /* ═══════════════ KALACHAKRA ENGINE ═══════════════ */ #cc-canvas-wrap{position:relative;flex:1;overflow:hidden;background:rgba(3,2,1,.85);} #kc-toggle{padding:10px 16px;display:flex;gap:8px;border-bottom:1px solid rgba(201,168,76,.07);} /* ═══════════════ DHARMA COMPASS ═══════════════ */ #dharma-ov .dc-body-wrap{display:flex;flex-direction:column;height:calc(100vh - 130px);overflow:hidden;} #dc-tabs{display:flex;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid rgba(201,168,76,.1);} #dc-tabs::-webkit-scrollbar{display:none;} .dc-tab{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px;text-transform:uppercase;padding:10px 16px;color:var(--muted);background:none;border:none;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;white-space:nowrap;display:flex;align-items:center;gap:6px;} .dc-tab:hover{color:var(--gold);} .dc-tab.active{color:var(--gold);border-bottom-color:var(--dc-col,var(--gold));} #dc-body{flex:1;overflow-y:auto;padding:32px 48px;scrollbar-width:thin;scrollbar-color:rgba(201,168,76,.1) transparent;} .dc-domain-hdr{display:flex;gap:20px;align-items:flex-start;margin-bottom:36px;padding-bottom:24px;border-bottom:1px solid rgba(201,168,76,.08);} .dc-domain-icon{font-size:32px;color:rgba(201,168,76,.3);flex-shrink:0;margin-top:4px;} .dc-domain-name{font-family:'Cinzel',serif;font-size:clamp(16px,2vw,24px);color:var(--cream);margin-bottom:6px;} .dc-domain-desc{font-size:14px;font-style:italic;color:var(--tdim);line-height:1.65;max-width:580px;} .dc-principles{display:flex;flex-direction:column;gap:2px;} .dc-principle{background:var(--surf);border:1px solid rgba(201,168,76,.07);overflow:hidden;cursor:pointer;transition:border-color .2s;} .dc-principle:hover{border-color:rgba(201,168,76,.2);} .dc-p-head{display:flex;align-items:center;gap:14px;padding:16px 20px;} .dc-p-num{font-family:'Cinzel',serif;font-size:22px;min-width:32px;flex-shrink:0;} .dc-p-name{font-family:'Cinzel',serif;font-size:13px;letter-spacing:1px;color:var(--cream);margin-bottom:3px;} .dc-p-skt{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:2px;color:var(--muted);text-transform:uppercase;} .dc-p-toggle{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:16px;color:var(--muted);pointer-events:none;flex-shrink:0;} .dc-p-body{display:none;padding:0 20px 18px 66px;font-size:13.5px;color:var(--text);line-height:1.8;border-top:1px solid rgba(201,168,76,.06);} .dc-p-body.open{display:block;animation:kmapFadeIn .3s ease;} .dc-shloka{margin:28px 0;padding:18px 24px;border-left:3px solid rgba(201,168,76,.3);background:rgba(201,168,76,.03);text-align:center;} .dc-shloka-skt{font-family:'Cormorant Garamond',serif;font-size:22px;font-style:italic;color:var(--gold);margin-bottom:8px;} .dc-shloka-trans{font-size:14px;font-style:italic;color:var(--tdim);margin-bottom:5px;} .dc-shloka-src{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:2px;color:rgba(201,168,76,.4);text-transform:uppercase;} @media(max-width:768px){#dc-body{padding:20px 16px;}} /* ═══════════════════════════════════════════════ FRACTAL MIRROR ═══════════════════════════════════════════════ */ #fractal-ov .fm-body{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;height:calc(100vh - 130px);overflow:hidden;} .fm-col{border-right:1px solid rgba(201,168,76,.08);overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(201,168,76,.12) transparent;transition:background .6s;} .fm-col:last-child{border-right:none;} .fm-col-hdr{position:sticky;top:0;z-index:2;padding:18px 24px 14px;border-bottom:1px solid rgba(201,168,76,.08);backdrop-filter:blur(12px);} .fm-col-icon{font-size:20px;margin-bottom:6px;display:block;} .fm-col-label{font-family:'Cinzel',serif;font-size:10px;letter-spacing:3px;color:var(--cream);text-transform:uppercase;margin-bottom:3px;} .fm-col-sub{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:2px;color:var(--muted);text-transform:uppercase;} .fm-era-nav{padding:16px 24px;border-bottom:1px solid rgba(201,168,76,.06);} .fm-era-num{font-family:'Cinzel',serif;font-size:24px;color:rgba(201,168,76,.2);} .fm-era-name{font-family:'Cinzel',serif;font-size:15px;color:var(--cream);margin-bottom:4px;} .fm-era-glyph{font-family:'Cormorant Garamond',serif;font-size:28px;color:rgba(201,168,76,.15);float:right;font-style:italic;} .fm-content{padding:20px 24px;} .fm-content p{font-size:14px;color:var(--text);line-height:1.8;margin-bottom:14px;} .fm-resonance{margin:16px 24px;padding:14px 18px;background:rgba(201,168,76,.04);border:1px solid rgba(201,168,76,.12);border-left:3px solid rgba(201,168,76,.4);} .fm-resonance-lbl{font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:3px;color:rgba(201,168,76,.4);text-transform:uppercase;margin-bottom:6px;} .fm-resonance-text{font-size:13px;font-style:italic;color:rgba(240,220,160,.75);line-height:1.65;} .fm-inner-prompt{margin:0 24px 20px;padding:12px 16px;background:rgba(80,180,120,.04);border:1px solid rgba(80,180,120,.15);} .fm-inner-prompt-lbl{font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:3px;color:rgba(80,180,120,.5);text-transform:uppercase;margin-bottom:6px;} .fm-inner-prompt-text{font-size:13px;font-style:italic;color:rgba(180,230,190,.75);line-height:1.6;} #fm-era-select{display:flex;gap:4px;flex-wrap:wrap;padding:16px 24px 8px;} .fm-dot{width:10px;height:10px;border-radius:50%;cursor:pointer;opacity:.3;transition:all .25s;flex-shrink:0;border:1px solid rgba(201,168,76,.2);} .fm-dot:hover{opacity:.7;transform:scale(1.3);} .fm-dot.active{opacity:1;transform:scale(1.4);} @media(max-width:768px){#fractal-ov .fm-body{grid-template-columns:1fr;height:auto;overflow:auto;}} /* ═══════════════════════════════════════════════ SUBTLE BODY ATLAS ═══════════════════════════════════════════════ */ #subtle-ov .sb-body{display:grid;grid-template-columns:340px 1fr;height:calc(100vh - 130px);overflow:hidden;} #sb-figure{position:relative;overflow:hidden;border-right:1px solid rgba(201,168,76,.08);background:rgba(3,2,1,.5);display:flex;flex-direction:column;} #sb-svg{width:100%;flex:1;display:block;min-height:0;} #sb-info{overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(201,168,76,.12) transparent;padding:20px 24px;flex:1;min-height:0;} /* Layer buttons sticky at top of right panel */ #sb-layer-bar{padding:10px 16px;border-bottom:1px solid rgba(201,168,76,.08);background:rgba(5,4,2,.95);display:flex;gap:5px;flex-wrap:wrap;flex-shrink:0;position:sticky;top:0;z-index:2;} #sb-figure{position:relative;overflow:hidden;border-right:1px solid rgba(201,168,76,.08);background:rgba(3,2,1,.5);} #sb-svg{width:100%;height:100%;display:block;} #sb-info{overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(201,168,76,.12) transparent;padding:28px 32px;} .sb-layer-btns{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:24px;} .sb-lbtn{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:2px;text-transform:uppercase;padding:5px 12px;border:1px solid rgba(201,168,76,.15);background:none;color:var(--muted);cursor:pointer;transition:all .2s;} .sb-lbtn:hover{color:var(--gold);border-color:rgba(201,168,76,.45);} .sb-lbtn.active{color:var(--bg);background:var(--gold);border-color:var(--gold);} .sb-item-name{font-family:'Cinzel',serif;font-size:18px;color:var(--cream);margin-bottom:6px;} .sb-item-skt{font-family:'Cormorant Garamond',serif;font-size:16px;font-style:italic;color:rgba(201,168,76,.6);margin-bottom:14px;} .sb-item-section{margin-bottom:16px;} .sb-item-sec-lbl{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:3px;color:rgba(201,168,76,.4);text-transform:uppercase;margin-bottom:6px;} .sb-item-sec-body{font-size:13.5px;color:var(--text);line-height:1.75;} .sb-sci-box{padding:12px 16px;background:rgba(80,180,200,.04);border:1px solid rgba(80,180,200,.12);margin-bottom:14px;} .sb-sci-lbl{font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:2px;color:rgba(80,180,200,.5);text-transform:uppercase;margin-bottom:5px;} .sb-placeholder{padding:40px 32px;text-align:center;font-size:14px;font-style:italic;color:var(--muted);} @media(max-width:768px){ /* ── Subtle Body ── */ #subtle-ov .sb-body{grid-template-columns:1fr;height:auto;overflow:visible;} #sb-figure{height:300px;border-right:none;border-bottom:1px solid rgba(201,168,76,.08);} #sb-svg{height:300px;} #sb-info{padding:18px 14px;min-height:180px;} .sb-layer-btns{padding:10px 12px;gap:4px;} .sb-lbtn{font-size:5.5px;padding:4px 8px;} /* Canvas panel (Kundalini/Prana/Indriya) on mobile: scrollable tall block */ #sb-canvas-panel{ position:fixed!important; top:0!important;left:0!important;right:0!important;bottom:0!important; z-index:20!important; flex-direction:column!important; overflow-y:auto!important; -webkit-overflow-scrolling:touch; background:#030206!important; } #sb-canvas-panel .sb-canvas-hdr{ position:sticky;top:0;z-index:2;flex-shrink:0; } #sb-canvas-el{ width:100%!important; height:520px!important; min-height:520px!important; display:block!important; } /* ── Upanishad ── */ #upanishad-ov .up-body{grid-template-columns:1fr;height:auto;} #up-canvas-wrap{height:280px;} #up-info{padding:16px;border-left:none;border-top:1px solid rgba(201,168,76,.08);min-height:160px;} /* ── Cosmic Cycles ── */ #cosmic-ov .cc-body{height:auto;} #cc-canvas-wrap{height:300px;} #cc-info-bar{height:auto;max-height:200px;padding:12px 16px;} #kc-toggle{padding:8px 12px;gap:5px;flex-wrap:wrap;} #kc-toggle .knc-btn{font-size:5.5px;padding:4px 8px;} .cc-zoom-btns{top:10px;right:10px;} /* ── Mantra ── */ #mantra-ov .mr-body{padding:20px 14px;} #mr-grid{grid-template-columns:1fr;} .mr-mantra-text{font-size:clamp(16px,5vw,22px);} .mr-tab{font-size:6px;padding:7px 10px;} /* ── Macro-Micro (Yatha Pinde) ── */ #macro-ov .mm-body{height:auto;} #mm-canvas-wrap{height:320px;} .mm-controls{padding:10px 12px;gap:5px;flex-wrap:wrap;} .mm-cbtn{font-size:5.5px;padding:4px 8px;} #mm-detail-panel{ position:absolute!important; width:100%!important;height:55%!important; top:auto!important;bottom:0!important;right:0!important; border-left:none!important; border-top:1px solid rgba(201,168,76,.15)!important; } /* ── Fractal Mirror ── */ #fractal-ov .fm-body{grid-template-columns:1fr;height:auto;overflow-y:auto;} .fm-col{border-right:none;border-bottom:1px solid rgba(201,168,76,.08);min-height:220px;} .fm-content p{font-size:13px;} /* ── Dharma Compass ── */ #dc-body{padding:14px;} .dc-domain-hdr{flex-direction:column;gap:10px;} .dc-p-body{padding:0 14px 14px;} .dc-p-head{padding:12px 14px;} .dc-p-num{font-size:18px;min-width:26px;} /* ── Knowledge Map general ── */ .kmap-hero,.kmap-section{padding:22px 14px;} #kmap-net-wrap{height:280px;} } /* ═══════════════════════════════════════════════ UPANISHAD CONSTELLATION ═══════════════════════════════════════════════ */ #upanishad-ov .up-body{display:grid;grid-template-columns:1fr 300px;height:calc(100vh - 130px);overflow:hidden;} #up-canvas-wrap{position:relative;overflow:hidden;background:rgba(3,2,1,.7);display:flex;flex-direction:column;} #up-canvas{display:block;width:100%;flex:1;cursor:crosshair;} #up-info{overflow-y:auto;padding:24px 28px;scrollbar-width:thin;scrollbar-color:rgba(160,120,220,.15) transparent;border-left:1px solid rgba(201,168,76,.08);} .up-controls{display:flex;gap:6px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid rgba(201,168,76,.06);} .up-cbtn{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:2px;text-transform:uppercase;padding:5px 11px;border:1px solid rgba(160,120,220,.2);background:none;color:var(--muted);cursor:pointer;transition:all .2s;} .up-cbtn:hover{color:rgba(200,170,255,.9);border-color:rgba(160,120,220,.5);} .up-cbtn.active{color:var(--bg);background:rgba(160,120,220,.8);border-color:rgba(160,120,220,.8);} .up-item-name{font-family:'Cinzel',serif;font-size:17px;color:var(--cream);margin-bottom:4px;} .up-item-veda{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px;color:rgba(160,120,220,.6);text-transform:uppercase;margin-bottom:14px;} .up-item-section{margin-bottom:14px;} .up-item-sec-lbl{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:3px;color:rgba(201,168,76,.4);text-transform:uppercase;margin-bottom:5px;} .up-item-sec-body{font-size:13px;color:var(--text);line-height:1.7;} .up-verse{padding:10px 14px;border-left:2px solid rgba(160,120,220,.3);background:rgba(160,120,220,.03);margin:10px 0;} .up-verse-skt{font-family:'Cormorant Garamond',serif;font-size:14px;font-style:italic;color:rgba(220,200,255,.8);margin-bottom:4px;} .up-verse-trans{font-size:12px;color:var(--tdim);line-height:1.5;} .up-placeholder{padding:40px;text-align:center;font-size:14px;font-style:italic;color:var(--muted);} @media(max-width:768px){#upanishad-ov .up-body{grid-template-columns:1fr;height:auto;}#up-canvas-wrap{height:320px;}#up-info{height:auto;}} /* ═══════════════════════════════════════════════ COSMIC CYCLES EXPLORER ═══════════════════════════════════════════════ */ #cosmic-ov .cc-body{display:flex;flex-direction:column;height:calc(100vh - 130px);overflow:hidden;} #cc-canvas-wrap{flex:1;position:relative;overflow:hidden;background:rgba(3,2,1,.8);} #cc-canvas{display:block;width:100%;height:100%;} #cc-info-bar{height:180px;overflow-y:auto;padding:16px 40px;border-top:1px solid rgba(201,168,76,.08);scrollbar-width:thin;} .cc-zoom-btns{position:absolute;right:20px;top:20px;display:flex;flex-direction:column;gap:4px;z-index:5;} .cc-zbtn{width:32px;height:32px;background:rgba(5,4,2,.85);border:1px solid rgba(201,168,76,.2);color:var(--muted);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;} .cc-zbtn:hover{color:var(--gold);border-color:rgba(201,168,76,.5);} .cc-scale-lbl{position:absolute;left:20px;top:20px;font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px;color:rgba(201,168,76,.4);text-transform:uppercase;background:rgba(3,2,1,.7);padding:6px 10px;} .cc-now-line{position:absolute;top:0;bottom:0;width:1px;background:rgba(201,168,76,.6);pointer-events:none;} .cc-now-lbl{position:absolute;bottom:8px;font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:2px;color:rgba(201,168,76,.6);text-transform:uppercase;transform:translateX(-50%);} .cc-info-title{font-family:'Cinzel',serif;font-size:16px;color:var(--cream);margin-bottom:6px;} .cc-info-body{font-size:13px;color:var(--text);line-height:1.7;max-width:800px;} .cc-info-scale{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px;color:rgba(201,168,76,.4);text-transform:uppercase;margin-bottom:8px;} /* ═══════════════════════════════════════════════ MANTRA RESONANCE MAP ═══════════════════════════════════════════════ */ #mantra-ov .mr-body{overflow-y:auto;padding:32px 48px;scrollbar-width:thin;} .mr-intro{max-width:700px;margin:0 auto 40px;text-align:center;} .mr-intro-text{font-size:16px;font-style:italic;color:var(--tdim);line-height:1.7;} #mr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:2px;margin-bottom:40px;} .mr-card{background:var(--surf);border:1px solid rgba(201,168,76,.07);overflow:hidden;transition:border-color .25s;cursor:pointer;} .mr-card:hover{border-color:rgba(201,168,76,.2);} .mr-card-head{padding:22px 24px 16px;position:relative;} .mr-mantra-text{font-family:'Cormorant Garamond',serif;font-size:clamp(18px,2.5vw,28px);color:var(--gold);line-height:1.4;margin-bottom:8px;font-style:italic;} .mr-mantra-roman{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:2px;color:var(--muted);text-transform:uppercase;margin-bottom:8px;} .mr-mantra-meaning{font-size:13px;font-style:italic;color:var(--tdim);line-height:1.6;} .mr-card-body{display:none;border-top:1px solid rgba(201,168,76,.07);} .mr-card-body.open{display:block;} .mr-tabs{display:flex;border-bottom:1px solid rgba(201,168,76,.08);overflow-x:auto;scrollbar-width:none;} .mr-tabs::-webkit-scrollbar{display:none;} .mr-tab{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:2px;text-transform:uppercase;padding:9px 14px;color:var(--muted);background:none;border:none;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;white-space:nowrap;} .mr-tab:hover{color:var(--gold);} .mr-tab.active{color:var(--gold);border-bottom-color:var(--gold);} .mr-panel{display:none;padding:18px 24px;font-size:13.5px;color:var(--text);line-height:1.8;} .mr-panel.active{display:block;} .mr-wave{margin:14px 0;height:48px;position:relative;overflow:hidden;background:rgba(201,168,76,.03);border:1px solid rgba(201,168,76,.08);} .mr-wave canvas{position:absolute;top:0;left:0;width:100%;height:100%;} .mr-syllab{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0;} .mr-syl{padding:5px 10px;border:1px solid rgba(201,168,76,.2);font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:1px;color:var(--tdim);} .mr-syl b{color:var(--gold);} @media(max-width:768px){#mantra-ov .mr-body{padding:20px 16px;}#mr-grid{grid-template-columns:1fr;}} /* ═══════════════════════════════════════════════ MACROCOSM–MICROCOSM (YATHA PINDE) ═══════════════════════════════════════════════ */ #macro-ov .mm-body{display:flex;flex-direction:column;height:calc(100vh - 130px);overflow:hidden;} #mm-canvas-wrap{flex:1;position:relative;overflow:hidden;min-height:200px;} #mm-canvas{display:block;width:100%;height:100%;cursor:crosshair;} .mm-controls{display:flex;gap:8px;padding:14px 24px;border-top:1px solid rgba(201,168,76,.08);flex-wrap:wrap;background:rgba(3,2,1,.9);} .mm-cbtn{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:2px;text-transform:uppercase;padding:6px 14px;border:1px solid rgba(180,160,80,.2);background:none;color:var(--muted);cursor:pointer;transition:all .2s;} .mm-cbtn:hover{color:rgba(220,200,100,.9);border-color:rgba(180,160,80,.5);} .mm-cbtn.active{color:var(--bg);background:rgba(180,160,80,.8);border-color:rgba(180,160,80,.8);} #mm-tip{position:absolute;background:rgba(8,6,4,.96);border:1px solid rgba(201,168,76,.25);padding:12px 16px;pointer-events:none;opacity:0;transition:opacity .15s;max-width:220px;z-index:5;} .mm-tip-title{font-family:'Cinzel',serif;font-size:12px;color:var(--cream);margin-bottom:3px;} .mm-tip-scale{font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:2px;color:var(--muted);text-transform:uppercase;margin-bottom:5px;} .mm-tip-body{font-size:11.5px;font-style:italic;color:var(--tdim);line-height:1.5;} /* ── ASK THIS ERA BUTTON (inline in content) ── */ .e-oracle-btn{ display:inline-flex;align-items:center;gap:8px; margin-top:8px;margin-bottom:4px; padding:8px 20px; font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:2px;text-transform:uppercase; color:rgba(180,160,230,.8); border:1px solid rgba(140,100,200,.3);background:none; cursor:pointer;transition:all .3s;pointer-events:all; } .e-oracle-btn:hover{color:rgba(200,180,250,.9);border-color:rgba(140,100,200,.55);background:rgba(140,100,200,.08);box-shadow:0 0 16px rgba(140,100,200,.1);} .e-oracle-btn::before{content:'◈';font-size:12px;} /* ── AI ORACLE OVERLAY ── */ #oracle-ov{ position:fixed;inset:0;z-index:650; background:rgba(3,2,4,.97); backdrop-filter:blur(12px); opacity:0;pointer-events:none;visibility:hidden; transition:opacity .5s,visibility 0s .5s; display:flex;flex-direction:column;align-items:center;justify-content:center; padding:40px 20px 24px; } #oracle-ov.on{opacity:1;pointer-events:all;visibility:visible;transition:opacity .5s,visibility 0s;} #oracle-close{ position:absolute;top:20px;right:24px; background:none;border:1px solid rgba(107,90,62,.3); color:var(--muted);width:30px;height:30px; cursor:pointer;font-size:13px;font-family:'IBM Plex Mono',monospace; display:flex;align-items:center;justify-content:center;transition:all .2s; } #oracle-close:hover{border-color:var(--gold);color:var(--gold);} #oracle-era-label{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:4px; color:rgba(140,100,200,.6);text-transform:uppercase;margin-bottom:6px; } #oracle-era-name{ font-family:'Cormorant Garamond',serif;font-size:clamp(22px,3.5vw,38px); font-style:italic;color:var(--gold);margin-bottom:28px;text-align:center; } #oracle-chat{ width:100%;max-width:640px; flex:1;max-height:calc(100vh - 280px); overflow-y:auto;margin-bottom:16px; display:flex;flex-direction:column;gap:14px; scrollbar-width:thin;scrollbar-color:rgba(140,100,200,.2) transparent; } #oracle-chat::-webkit-scrollbar{width:2px;} #oracle-chat::-webkit-scrollbar-thumb{background:rgba(140,100,200,.2);} .oracle-msg-user{ align-self:flex-end; background:rgba(201,168,76,.06);border:1px solid rgba(201,168,76,.15); padding:10px 16px;max-width:80%; font-size:14px;color:var(--cream);line-height:1.65; } .oracle-msg-era{ align-self:flex-start; background:rgba(140,100,200,.05);border-left:2px solid rgba(140,100,200,.4); padding:12px 18px;max-width:90%; font-family:'Cormorant Garamond',serif;font-size:17px; font-style:italic;color:rgba(220,210,240,.9);line-height:1.75; } .oracle-msg-era.thinking{opacity:.5;animation:oraclePulse 1.4s ease-in-out infinite;} @keyframes oraclePulse{0%,100%{opacity:.4;}50%{opacity:.8;}} #oracle-input-wrap{ width:100%;max-width:640px; display:flex;gap:10px;align-items:flex-end; } #oracle-input{ flex:1;background:rgba(5,4,8,.9);border:1px solid rgba(140,100,200,.25); color:var(--cream);font-size:14px;line-height:1.6;padding:10px 14px; font-family:'Cormorant Garamond',serif;resize:none; transition:border-color .2s;outline:none; } #oracle-input:focus{border-color:rgba(140,100,200,.55);} #oracle-input::placeholder{color:var(--muted);font-style:italic;} #oracle-send{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px; text-transform:uppercase;color:rgba(180,160,230,.7); border:1px solid rgba(140,100,200,.3);background:rgba(140,100,200,.06); padding:10px 18px;cursor:pointer;transition:all .25s;white-space:nowrap; align-self:stretch; } #oracle-send:hover{color:rgba(210,190,250,.9);border-color:rgba(140,100,200,.6);background:rgba(140,100,200,.12);} #oracle-send:disabled{opacity:.3;pointer-events:none;} #oracle-hint{ font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:2px; color:rgba(107,90,62,.45);text-transform:uppercase;margin-top:10px;text-align:center; } /* ── THE VOID ── */ #void-ov{ position:fixed;inset:0;z-index:700; background:#000; opacity:0;pointer-events:none;visibility:hidden; transition:opacity 3s ease,visibility 0s 3s; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:24px; } #void-ov.on{opacity:1;pointer-events:all;visibility:visible;transition:opacity 3s ease,visibility 0s;} #void-line1,#void-line2,#void-line3{ font-family:'Cormorant Garamond',serif; color:#fff; text-align:center; opacity:0; transition:opacity 4s ease; cursor:default; line-height:1.6; } #void-line1{font-size:clamp(20px,3vw,32px);font-style:italic;letter-spacing:2px;} #void-line2{font-size:clamp(12px,1.6vw,18px);color:rgba(255,255,255,.45);letter-spacing:4px;font-family:'IBM Plex Mono',monospace;text-transform:uppercase;} #void-line3{font-size:clamp(10px,1.2vw,14px);color:rgba(255,255,255,.2);letter-spacing:6px;font-family:'IBM Plex Mono',monospace;text-transform:uppercase;} #void-ov.on #void-line1{opacity:1;} #void-ov.on #void-line2{opacity:1;transition-delay:3s;} #void-ov.on #void-line3{opacity:1;transition-delay:6s;} /* ── THE WITNESS ── */ #witness-ov{ position:fixed;inset:0;z-index:600; background:transparent; pointer-events:none;visibility:hidden; display:flex;align-items:center;justify-content:center; opacity:0;transition:opacity 3s ease,visibility 0s 3s; } #witness-ov.on{opacity:1;visibility:visible;transition:opacity 3s ease,visibility 0s;} #witness-q{ font-family:'Cormorant Garamond',serif; font-size:clamp(18px,2.8vw,32px); font-style:italic; color:rgba(255,255,255,.85); text-align:center; letter-spacing:1px; text-shadow:0 0 60px rgba(201,168,76,.15); pointer-events:none; padding:0 40px; line-height:1.5; } /* ── POLARITY MAP ── */ #polarity-body{padding:20px 36px 60px;max-width:1100px;margin:0 auto;} .pm-legend{display:flex;gap:20px;margin-bottom:28px;flex-wrap:wrap;align-items:center;} .pm-leg-item{display:flex;align-items:center;gap:7px;font-family:'IBM Plex Mono',monospace;font-size:7.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);} .pm-leg-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;} .pm-chart{position:relative;width:100%;overflow-x:auto;} .pm-inner{min-width:700px;padding-bottom:20px;} .pm-axis-labels{display:flex;justify-content:space-between;margin-bottom:10px;padding:0 60px;} .pm-axis-lbl{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px;color:var(--muted);text-transform:uppercase;} .pm-axis-lbl.dharma{color:rgba(76,143,201,.7);} .pm-axis-lbl.adharma{color:rgba(201,76,76,.7);} /* The main chart row */ .pm-rows{display:flex;flex-direction:column;gap:3px;} .pm-era-row{display:grid;grid-template-columns:140px 1fr;gap:12px;align-items:center;cursor:pointer;padding:4px 0;transition:background .2s;border-radius:2px;} .pm-era-row:hover{background:rgba(201,168,76,.04);} .pm-era-row:hover .pm-era-name{color:var(--gold);} .pm-era-name{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:1px;color:var(--muted);text-align:right;padding-right:8px;line-height:1.3;transition:color .2s;} .pm-era-name em{display:block;font-style:normal;font-size:6.5px;color:var(--tdim);margin-top:1px;} .pm-bar-track{position:relative;height:22px;background:rgba(201,168,76,.03);border:1px solid rgba(201,168,76,.07);} /* Center axis line */ .pm-bar-track::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(201,168,76,.12);z-index:1;} /* The fill bar */ .pm-bar-fill{position:absolute;top:3px;bottom:3px;transition:all 1s cubic-bezier(.16,1,.3,1);z-index:2;} .pm-bar-fill.dharma{left:50%;background:linear-gradient(to right,rgba(76,143,201,.5),rgba(76,143,201,.15));} .pm-bar-fill.adharma{right:50%;background:linear-gradient(to left,rgba(201,76,76,.5),rgba(201,76,76,.15));} .pm-bar-fill.neutral{left:50%;transform:translateX(-50%);background:rgba(201,168,76,.2);} /* Guna dot inside bar */ .pm-guna{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:1px;color:rgba(201,168,76,.5);z-index:3;white-space:nowrap;} .pm-bar-fill.adharma .pm-guna{right:auto;left:6px;} /* Section dividers */ .pm-divider{grid-column:1/-1;height:1px;background:rgba(201,168,76,.06);margin:6px 0;} .pm-section-lbl{grid-column:1/-1;font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px;color:rgba(201,168,76,.3);text-transform:uppercase;margin-top:8px;margin-bottom:2px;} /* Tooltip row */ .pm-era-row:hover .pm-bar-track{border-color:rgba(201,168,76,.2);} /* ── CONCEPT WEB ── */ #cweb-filters{display:flex;gap:5px;flex-wrap:wrap;padding:10px 24px 8px;background:rgba(3,2,1,.95);border-bottom:1px solid rgba(201,168,76,.06);position:sticky;top:65px;z-index:4;} .cw-cat-btn{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:1.5px;text-transform:uppercase;padding:3px 11px;border:1px solid rgba(107,90,62,.2);background:none;color:var(--muted);cursor:pointer;transition:all .2s;} .cw-cat-btn:hover,.cw-cat-btn.active{color:var(--gold);border-color:rgba(201,168,76,.4);background:rgba(201,168,76,.05);} #cweb-body{display:grid;grid-template-columns:1fr 340px;height:calc(100vh - 130px);} #cweb-canvas-wrap{position:relative;overflow:hidden;border-right:1px solid rgba(201,168,76,.08);} #cweb-canvas{display:block;cursor:crosshair;} #cweb-info{overflow-y:auto;padding:0;background:rgba(3,2,1,.6);} .cwi-empty{padding:40px 28px;font-family:'Cormorant Garamond',serif;font-size:16px;font-style:italic;color:var(--tdim);line-height:1.7;text-align:center;margin-top:60px;} .cwi-concept{padding:24px 24px 40px;} .cwi-skt{font-family:'Cormorant Garamond',serif;font-size:26px;font-style:italic;color:var(--gold);display:block;margin-bottom:4px;line-height:1.1;} .cwi-cat{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px;color:var(--muted);text-transform:uppercase;display:block;margin-bottom:12px;} .cwi-def{font-size:13.5px;line-height:1.8;color:var(--text);margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid rgba(201,168,76,.08);} .cwi-eras-lbl{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px;color:var(--gdim);text-transform:uppercase;margin-bottom:10px;} .cwi-era-item{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid rgba(201,168,76,.05);cursor:pointer;transition:background .2s;padding-left:4px;} .cwi-era-item:hover{background:rgba(201,168,76,.04);} .cwi-era-item:hover .cwi-era-name{color:var(--gold);} .cwi-era-num{font-family:'IBM Plex Mono',monospace;font-size:7px;color:var(--gdim);min-width:20px;margin-top:2px;} .cwi-era-name{font-family:'Cinzel',serif;font-size:11px;color:var(--cream);margin-bottom:2px;} .cwi-era-note{font-size:11.5px;color:var(--text);line-height:1.55;font-style:italic;} /* ── MAHĀVĀKYA ENGINE ── */ #mv-ov{} .mv-body{padding:36px 40px 60px;max-width:1000px;margin:0 auto;} .mv-intro{text-align:center;margin-bottom:36px;} .mv-intro-om{font-size:40px;color:var(--gold);display:block;margin-bottom:10px;animation:omP 4s ease-in-out infinite;} .mv-intro-h{font-family:'Cinzel',serif;font-size:clamp(20px,3vw,34px);color:var(--white);margin-bottom:6px;} .mv-intro-s{font-family:'Cormorant Garamond',serif;font-size:16px;font-style:italic;color:var(--tdim);} .mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;} .mv-card{border:1px solid rgba(201,168,76,.14);background:rgba(201,168,76,.025);padding:24px 22px;cursor:pointer;transition:all .35s;position:relative;overflow:hidden;} .mv-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--card-col,var(--gold));opacity:.3;transition:opacity .35s;} .mv-card:hover{border-color:rgba(201,168,76,.4);transform:translateY(-2px);box-shadow:0 12px 40px rgba(0,0,0,.5);} .mv-card:hover::after{opacity:.8;} .mv-card-n{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px;color:var(--muted);margin-bottom:12px;} .mv-card-skt{font-family:'Cormorant Garamond',serif;font-size:clamp(20px,2.5vw,30px);font-style:italic;color:var(--gold);display:block;margin-bottom:6px;line-height:1.15;} .mv-card-trans{font-family:'Cinzel',serif;font-size:9px;letter-spacing:2.5px;color:var(--cream);text-transform:uppercase;display:block;margin-bottom:8px;} .mv-card-src{font-family:'IBM Plex Mono',monospace;font-size:7.5px;color:var(--muted);} .mv-card-hint{position:absolute;bottom:12px;right:14px;font-family:'IBM Plex Mono',monospace;font-size:7px;color:var(--muted);letter-spacing:1px;} /* Deep view */ #mv-deep{position:fixed;inset:0;z-index:650;background:rgba(3,2,1,.99);opacity:0;pointer-events:none;visibility:hidden;transition:opacity .4s,visibility 0s .4s;overflow-y:auto;} #mv-deep.on{opacity:1;pointer-events:all;visibility:visible;transition:opacity .4s,visibility 0s;} .mvd-hdr{padding:30px 50px 24px;border-bottom:1px solid rgba(201,168,76,.1);position:sticky;top:0;background:rgba(3,2,1,.97);z-index:5;} .mvd-back{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:2px;color:var(--muted);background:none;border:none;cursor:pointer;padding:0;margin-bottom:18px;display:flex;align-items:center;gap:6px;transition:color .2s;} .mvd-back:hover{color:var(--gold);} .mvd-skt{font-family:'Cormorant Garamond',serif;font-size:clamp(28px,4.5vw,56px);font-style:italic;color:var(--gold);display:block;line-height:1;margin-bottom:8px;} .mvd-trans{font-family:'Cinzel',serif;font-size:clamp(11px,1.4vw,16px);letter-spacing:4px;color:var(--cream);text-transform:uppercase;display:block;margin-bottom:4px;} .mvd-src{font-family:'IBM Plex Mono',monospace;font-size:8.5px;color:var(--muted);} .mvd-meaning{padding:20px 50px;background:rgba(201,168,76,.025);border-bottom:1px solid rgba(201,168,76,.08);} .mvd-meaning-txt{font-family:'Cormorant Garamond',serif;font-size:clamp(15px,1.8vw,20px);font-style:italic;color:var(--gpale);line-height:1.85;max-width:820px;} .mvd-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;padding:30px 50px 70px;gap:16px;} .mvd-col{border:1px solid rgba(201,168,76,.1);padding:20px;background:rgba(201,168,76,.018);} .mvd-col-lbl{font-family:'IBM Plex Mono',monospace;font-size:7.5px;letter-spacing:3px;color:var(--gdim);text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:8px;} .mvd-col-lbl::after{content:'';flex:1;height:1px;background:rgba(201,168,76,.08);} .mvd-col p{font-size:14px;line-height:1.85;color:var(--text);margin-bottom:9px;} .mvd-col blockquote{border-left:2px solid rgba(201,168,76,.25);padding:7px 0 7px 12px;font-style:italic;color:var(--cream);font-size:13px;line-height:1.7;margin-bottom:9px;} .mvd-col blockquote cite{display:block;font-size:8px;font-style:normal;color:var(--muted);margin-top:4px;font-family:'IBM Plex Mono',monospace;} /* ── RISHI LINEAGE MAP ── */ #rl-ov{} #rl-era-filters{display:flex;gap:5px;flex-wrap:wrap;padding:10px 24px 8px;background:rgba(3,2,1,.95);border-bottom:1px solid rgba(201,168,76,.06);position:sticky;top:65px;z-index:4;} .rl-ef{font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:1.5px;text-transform:uppercase;padding:3px 10px;border:1px solid rgba(107,90,62,.2);background:none;color:var(--muted);cursor:pointer;transition:all .2s;} .rl-ef:hover,.rl-ef.active{color:var(--gold);border-color:rgba(201,168,76,.4);background:rgba(201,168,76,.05);} #rl-canvas-wrap{position:relative;height:calc(100vh - 130px);} #rl-canvas{display:block;} #rl-info{position:absolute;bottom:0;left:0;right:0;padding:14px 36px 20px;background:linear-gradient(to top,rgba(3,2,1,.98) 50%,transparent);pointer-events:none;opacity:0;transition:opacity .35s;} #rl-info.on{opacity:1;} .rli-name{font-family:'Cinzel',serif;font-size:16px;color:var(--gold);margin-bottom:2px;} .rli-manv{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:2px;color:var(--muted);margin-bottom:6px;} .rli-desc{font-size:13px;color:var(--text);line-height:1.6;max-width:700px;margin-bottom:8px;} .rli-works-lbl{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px;color:var(--gdim);text-transform:uppercase;margin-bottom:4px;} .rli-work-item{font-family:'IBM Plex Mono',monospace;font-size:8.5px;color:var(--tdim);line-height:1.7;} .rli-work-item::before{content:'· ';color:var(--gdim);} .rli-shakha-txt{font-size:11px;font-style:italic;color:rgba(201,168,76,.5);margin:6px 0 8px;} .rli-eras{display:flex;flex-wrap:wrap;gap:4px;} .rli-tag{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:1px;padding:3px 8px;border:1px solid rgba(201,168,76,.2);color:var(--tdim);cursor:pointer;transition:all .2s;} .rli-tag:hover{color:var(--gold);border-color:var(--gold);background:rgba(201,168,76,.06);} /* ── FORGOTTEN TEXTS ── */ #fgt-btn{position:fixed;bottom:68px;right:18px;z-index:201;font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:1.5px;color:var(--muted);border:1px solid rgba(107,90,62,.2);background:rgba(5,4,2,.9);padding:6px 12px;cursor:pointer;transition:all .4s;display:none;} #fgt-btn.show{display:block;} #fgt-btn.pulse{animation:fgtP 2.5s ease-in-out infinite;} @keyframes fgtP{0%,100%{border-color:rgba(107,90,62,.2);color:var(--muted);}50%{border-color:rgba(201,168,76,.5);color:var(--gold);box-shadow:0 0 16px rgba(201,168,76,.2);}} #forgotten-ov{position:fixed;inset:0;z-index:600;background:rgba(3,2,1,.98);opacity:0;pointer-events:none;visibility:hidden;transition:opacity .5s,visibility 0s .5s;overflow-y:auto;} #forgotten-ov.on{opacity:1;pointer-events:all;visibility:visible;transition:opacity .5s,visibility 0s;} .fgt-lock{padding:60px 50px;text-align:center;} .fgt-lock-glyph{font-size:48px;color:rgba(201,168,76,.2);display:block;margin-bottom:20px;} .fgt-lock-h{font-family:'Cinzel',serif;font-size:22px;color:var(--muted);margin-bottom:10px;} .fgt-lock-s{font-size:14px;color:var(--tdim);font-style:italic;margin-bottom:28px;} .fgt-prog-rail{width:300px;height:2px;background:rgba(201,168,76,.08);margin:0 auto;border-radius:2px;overflow:hidden;} .fgt-prog-fill{height:100%;background:var(--gold);transition:width .8s ease;} .fgt-prog-txt{font-family:'IBM Plex Mono',monospace;font-size:8px;color:var(--muted);margin-top:8px;letter-spacing:1.5px;} /* ── TURIYA ── */ #turiya-ov{position:fixed;inset:0;z-index:700;background:radial-gradient(ellipse at 50% 40%,#0d0b14 0%,#060408 60%,#030205 100%);opacity:0;pointer-events:none;visibility:hidden;transition:opacity 2.5s ease,visibility 0s 2.5s;display:flex;flex-direction:column;align-items:center;justify-content:center;} #turiya-ov.on{opacity:1;pointer-events:all;visibility:visible;transition:opacity 2.5s ease,visibility 0s;} .t-word{font-family:'Cinzel',serif;font-size:clamp(26px,4vw,46px);color:rgba(220,210,240,.85);letter-spacing:14px;text-transform:uppercase;opacity:0;transition:opacity 3.5s ease;text-shadow:0 0 60px rgba(180,160,230,.12);} .t-word.show{opacity:1;} #t-cursor{display:inline-block;width:1px;height:1em;background:rgba(180,160,230,.4);vertical-align:middle;animation:tBlink 1.6s step-end infinite;opacity:0;transition:opacity 3s 2s;margin-left:4px;} #turiya-ov.on #t-cursor{opacity:1;} @keyframes tBlink{0%,100%{opacity:1;}50%{opacity:0;}} #t-exit{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);font-family:'IBM Plex Mono',monospace;font-size:7.5px;letter-spacing:3px;color:rgba(180,160,230,.18);text-transform:uppercase;cursor:pointer;border:none;background:none;opacity:0;transition:opacity 5s 8s,color .3s;} #turiya-ov.on #t-exit{opacity:1;} #t-exit:hover{color:rgba(180,160,230,.5);} #t-back{ position:fixed;top:24px;left:24px; font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:2px;text-transform:uppercase; color:rgba(180,160,230,.6); background:rgba(10,5,20,.7); border:1px solid rgba(180,160,230,.25); padding:8px 16px;cursor:pointer; opacity:0;transition:opacity 3s 6s,color .3s,border-color .3s,background .3s; backdrop-filter:blur(8px); } #t-back:hover{color:rgba(210,190,255,.9);border-color:rgba(180,160,230,.6);background:rgba(20,10,40,.8);} #turiya-ov.on #t-back{opacity:1;} #t-secret{ position:fixed;bottom:24px;left:50%;transform:translateX(-50%); font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:1.5px; color:rgba(180,160,230,.45);text-align:center; opacity:0;transition:opacity 2s 8s; width:90vw;max-width:420px; line-height:1.8; background:rgba(5,3,12,.7); border:1px solid rgba(180,160,230,.12); padding:10px 16px; backdrop-filter:blur(8px); } #turiya-ov.on #t-secret{opacity:1;} #turiya-ov.on #t-back{opacity:1;} #t-back:hover{color:rgba(180,160,230,.55);border-color:rgba(180,160,230,.28);} /* ═══════════════════════════════════════════════ MOBILE — ≤768px Desktop is completely untouched above this line ═══════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════ KNOWLEDGE CIVILIZATION MAP ════════════════════════════════════════════════════ */ #kmap-ov{scrollbar-width:thin;scrollbar-color:rgba(80,160,180,.2) transparent;} #kmap-ov::-webkit-scrollbar{width:3px;} #kmap-ov::-webkit-scrollbar-thumb{background:rgba(80,160,180,.2);} .kmap-hero{padding:52px 60px 44px;border-bottom:1px solid rgba(201,168,76,.08);background:linear-gradient(180deg,rgba(20,40,50,.15) 0%,transparent 100%);} .kmap-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:5px;color:rgba(80,180,200,.5);text-transform:uppercase;margin-bottom:14px;} .kmap-title{font-family:'Cinzel',serif;font-size:clamp(18px,3vw,36px);color:var(--white);letter-spacing:3px;margin-bottom:10px;} .kmap-title span{color:rgba(80,185,205,.9);} .kmap-sub{font-size:clamp(13px,1.4vw,17px);font-style:italic;color:var(--tdim);max-width:580px;line-height:1.65;margin-bottom:28px;} .kmap-stats{display:flex;gap:36px;flex-wrap:wrap;} .kmap-stat-n{font-family:'Cinzel',serif;font-size:clamp(20px,2.5vw,32px);color:rgba(80,185,205,.8);display:block;} .kmap-stat-l{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:3px;color:var(--muted);text-transform:uppercase;margin-top:3px;} .kmap-section{padding:48px 60px;} .kmap-section-label{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:5px;color:rgba(201,168,76,.35);text-transform:uppercase;margin-bottom:8px;} .kmap-section-title{font-family:'Cinzel',serif;font-size:clamp(13px,1.8vw,20px);color:var(--white);letter-spacing:2px;margin-bottom:6px;} .kmap-section-desc{font-size:14px;font-style:italic;color:var(--tdim);max-width:560px;line-height:1.6;margin-bottom:32px;} .kmap-divider{border:none;border-top:1px solid rgba(201,168,76,.07);margin:0;} #kmap-domains{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:2px;} .kmap-domain{background:var(--surf);border:1px solid rgba(201,168,76,.07);padding:20px 18px;cursor:pointer;transition:all .25s;position:relative;overflow:hidden;} .kmap-domain::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--dc);opacity:.35;transition:opacity .25s;} .kmap-domain:hover{background:var(--surf2);border-color:rgba(201,168,76,.18);} .kmap-domain:hover::after,.kmap-domain.active::after{opacity:1;} .kmap-domain.active{background:var(--surf2);border-color:rgba(201,168,76,.2);} .kmap-d-icon{font-size:17px;margin-bottom:9px;display:block;} .kmap-d-name{font-family:'Cinzel',serif;font-size:9.5px;letter-spacing:1.5px;color:var(--cream);text-transform:uppercase;margin-bottom:4px;} .kmap-d-count{font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:2px;color:var(--muted);} #kmap-filter{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:24px;} .kmap-fbtn{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:2px;text-transform:uppercase;padding:5px 12px;border:1px solid rgba(201,168,76,.15);background:none;color:var(--muted);cursor:pointer;transition:all .2s;} .kmap-fbtn:hover{color:var(--gold);border-color:rgba(201,168,76,.45);} .kmap-fbtn.active{color:var(--bg);background:var(--gold);border-color:var(--gold);} #kmap-scholars{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:2px;} .kmap-scholar{background:var(--surf);border:1px solid rgba(201,168,76,.07);overflow:hidden;transition:border-color .25s;position:relative;} .kmap-scholar:hover{border-color:rgba(201,168,76,.22);} .kmap-scholar::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sc);opacity:.5;transition:opacity .25s;} .kmap-scholar:hover::before,.kmap-scholar.open-card::before{opacity:1;} .kmap-s-head{padding:20px 22px 16px;display:flex;gap:12px;align-items:flex-start;cursor:pointer;user-select:none;} .kmap-s-era{font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;border:1px solid rgba(201,168,76,.12);padding:3px 8px;white-space:nowrap;flex-shrink:0;margin-top:2px;background:rgba(201,168,76,.03);} .kmap-s-info{flex:1;} .kmap-s-name{font-family:'Cinzel',serif;font-size:13px;letter-spacing:1px;color:var(--cream);margin-bottom:5px;} .kmap-s-badge{font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:1.5px;text-transform:uppercase;padding:2px 8px;border:1px solid;display:inline-block;} .kmap-s-contrib{padding:0 22px 14px;font-size:13.5px;font-style:italic;color:rgba(220,200,160,.75);line-height:1.7;border-top:1px solid rgba(201,168,76,.06);padding-top:13px;} .kmap-s-body{display:none;padding:0 22px 20px;} .kmap-s-body.open{display:block;animation:kmapFadeIn .3s ease;} @keyframes kmapFadeIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}} .kmap-s-tabs{display:flex;gap:0;border-bottom:1px solid rgba(201,168,76,.1);margin-bottom:16px;overflow-x:auto;scrollbar-width:none;} .kmap-s-tabs::-webkit-scrollbar{display:none;} .kmap-s-tab{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:2px;text-transform:uppercase;padding:8px 14px;color:var(--muted);background:none;border:none;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;white-space:nowrap;} .kmap-s-tab:hover{color:var(--gold);} .kmap-s-tab.active{color:var(--gold);border-bottom-color:var(--gold);} .kmap-s-panel{display:none;}.kmap-s-panel.active{display:block;} .kmap-s-row{display:flex;gap:10px;margin-bottom:11px;align-items:flex-start;} .kmap-s-lbl{font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:2px;color:var(--muted);text-transform:uppercase;min-width:80px;padding-top:2px;flex-shrink:0;} .kmap-s-val{font-size:13px;color:var(--text);line-height:1.65;} .kmap-s-quote{ margin:14px 0;padding:12px 16px; border-left:2px solid rgba(201,168,76,.3); background:rgba(201,168,76,.03); } .kmap-s-quote-text{font-size:13px;font-style:italic;color:rgba(240,220,160,.8);line-height:1.7;margin-bottom:5px;} .kmap-s-quote-src{font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;} .kmap-s-discoveries{display:flex;flex-direction:column;gap:8px;margin:12px 0;} .kmap-s-disc{ background:rgba(201,168,76,.04);border:1px solid rgba(201,168,76,.1); padding:10px 14px; } .kmap-s-disc-title{font-family:'Cinzel',serif;font-size:10px;letter-spacing:1px;color:var(--cream);margin-bottom:4px;} .kmap-s-disc-desc{font-size:12px;color:var(--tdim);line-height:1.6;} .kmap-s-disc-ref{font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:1.5px;color:rgba(201,168,76,.4);text-transform:uppercase;margin-top:5px;} .kmap-s-texts{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px;} .kmap-s-tag{font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:1.5px;color:rgba(80,185,205,.7);border:1px solid rgba(80,185,205,.2);padding:3px 9px;cursor:pointer;transition:all .2s;} .kmap-s-tag:hover{color:rgba(120,215,235,.9);border-color:rgba(80,185,205,.5);background:rgba(80,185,205,.05);} .kmap-s-toggle{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:1px;color:var(--muted);float:right;margin-top:3px;pointer-events:none;flex-shrink:0;} .kmap-s-science-box{margin:14px 0;padding:12px 16px;background:rgba(80,185,205,.04);border:1px solid rgba(80,185,205,.12);} .kmap-s-sci-lbl{font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:2px;color:rgba(80,185,205,.5);text-transform:uppercase;margin-bottom:6px;} .kmap-s-sci-text{font-size:12.5px;color:var(--text);line-height:1.65;} /* Texts */ #kmap-texts{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:2px;} .kmap-text{background:var(--surf);border:1px solid rgba(201,168,76,.07);padding:0;cursor:pointer;transition:all .25s;position:relative;overflow:hidden;} .kmap-text:hover{background:rgba(19,16,10,.9);border-color:rgba(201,168,76,.22);} .kmap-text-head{padding:22px 22px 16px;position:relative;} .kmap-text-glyph{position:absolute;right:14px;top:12px;font-family:'Cormorant Garamond',serif;font-size:32px;color:rgba(201,168,76,.07);font-style:italic;pointer-events:none;line-height:1;} .kmap-text-name{font-family:'Cinzel',serif;font-size:12px;letter-spacing:1.5px;color:var(--cream);margin-bottom:5px;padding-right:40px;} .kmap-text-author{font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:2px;color:var(--muted);text-transform:uppercase;margin-bottom:4px;} .kmap-text-year{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:1.5px;color:rgba(201,168,76,.5);margin-bottom:10px;} .kmap-text-badge{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:1.5px;text-transform:uppercase;padding:2px 9px;border:1px solid;margin-bottom:10px;} .kmap-text-desc{font-size:13px;font-style:italic;color:var(--tdim);line-height:1.7;padding:0 22px 14px;border-top:1px solid rgba(201,168,76,.05);padding-top:13px;} .kmap-text-body{display:none;padding:0 22px 20px;border-top:1px solid rgba(201,168,76,.07);} .kmap-text-body.open{display:block;animation:kmapFadeIn .3s ease;} .kmap-text-section{margin-bottom:14px;} .kmap-text-sec-lbl{font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:2.5px;color:rgba(201,168,76,.4);text-transform:uppercase;margin-bottom:6px;padding-top:14px;} .kmap-text-sec-body{font-size:12.5px;color:var(--text);line-height:1.7;} .kmap-text-verse{margin:10px 0;padding:10px 14px;border-left:2px solid rgba(201,168,76,.25);background:rgba(201,168,76,.03);} .kmap-text-verse-skt{font-family:'Cormorant Garamond',serif;font-size:14px;font-style:italic;color:rgba(240,220,160,.8);line-height:1.6;margin-bottom:3px;} .kmap-text-verse-trans{font-size:11.5px;color:var(--tdim);line-height:1.5;margin-bottom:4px;} .kmap-text-verse-ref{font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:1.5px;color:rgba(201,168,76,.35);text-transform:uppercase;} .kmap-text-chapters{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;} .kmap-text-chapter{font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:1px;color:var(--tdim);border:1px solid rgba(201,168,76,.1);padding:3px 8px;} .kmap-text-expand-hint{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;padding:8px 22px;border-top:1px solid rgba(201,168,76,.06);display:flex;justify-content:space-between;align-items:center;background:rgba(201,168,76,.02);} .kmap-text-expand-hint span{transition:color .2s;} .kmap-text:hover .kmap-text-expand-hint span{color:var(--gold);} /* Network */ #kmap-net-wrap{position:relative;height:520px;background:rgba(3,2,1,.6);border:1px solid rgba(201,168,76,.1);overflow:hidden;} #kmap-net{display:block;width:100%;height:100%;cursor:grab;} #kmap-net:active{cursor:grabbing;} #kmap-net-tip{position:absolute;background:rgba(5,3,1,.97);border:1px solid rgba(201,168,76,.25);padding:12px 16px;pointer-events:none;opacity:0;transition:opacity .15s;max-width:240px;z-index:5;} .knt-name{font-family:'Cinzel',serif;font-size:12px;color:var(--cream);margin-bottom:3px;} .knt-type{font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:2px;color:var(--muted);text-transform:uppercase;margin-bottom:6px;} .knt-desc{font-size:12px;font-style:italic;color:var(--tdim);line-height:1.55;margin-bottom:6px;} .knt-links{font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:1px;color:rgba(80,185,205,.6);} #kmap-net-legend{position:absolute;bottom:14px;left:18px;display:flex;gap:14px;flex-wrap:wrap;background:rgba(5,3,1,.5);padding:8px 12px;} .knl-item{display:flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;} .knl-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;} #kmap-net-stats{position:absolute;top:14px;right:14px;font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:1.5px;color:rgba(201,168,76,.3);text-transform:uppercase;line-height:1.8;} #kmap-net-controls{display:flex;gap:8px;flex-wrap:wrap;padding:14px 0 0;} .knc-btn{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:2px;text-transform:uppercase;padding:6px 14px;border:1px solid rgba(201,168,76,.15);background:none;color:var(--muted);cursor:pointer;transition:all .2s;} .knc-btn:hover{color:var(--gold);border-color:rgba(201,168,76,.45);} .knc-btn.active{color:var(--bg);background:var(--gold);border-color:var(--gold);} #kmap-tl{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:rgba(201,168,76,.1) transparent;padding-bottom:6px;} #kmap-tl::-webkit-scrollbar{height:2px;} #kmap-tl::-webkit-scrollbar-thumb{background:rgba(201,168,76,.1);} #kmap-tl-inner{min-width:900px;position:relative;padding:60px 60px 16px;height:150px;} #kmap-tl-axis{position:absolute;left:60px;right:60px;top:104px;height:1px;background:linear-gradient(to right,transparent,rgba(201,168,76,.22),rgba(201,168,76,.22),transparent);} .kmap-tl-node{position:absolute;top:46px;transform:translateX(-50%);text-align:center;} .kmap-tl-dot{width:7px;height:7px;border-radius:50%;border:1px solid rgba(201,168,76,.45);background:var(--bg);margin:0 auto 5px;position:relative;top:50px;} .kmap-tl-dot.major{width:11px;height:11px;background:rgba(201,168,76,.12);box-shadow:0 0 7px rgba(201,168,76,.22);} .kmap-tl-lbl{font-family:'IBM Plex Mono',monospace;font-size:5.5px;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;white-space:nowrap;max-width:65px;line-height:1.35;} .kmap-tl-count{font-family:'Cinzel',serif;font-size:13px;color:rgba(201,168,76,.22);margin-bottom:2px;} .kmap-period{position:absolute;top:98px;height:12px;border-top:1px solid;border-bottom:1px solid;opacity:.2;} @media(max-width:768px){ .kmap-hero,.kmap-section{padding:28px 16px;} #kmap-domains{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));} #kmap-scholars,#kmap-texts{grid-template-columns:1fr;} #kmap-net-wrap{height:300px;} } /* ── LANDSCAPE MODE FIXES ── */ @media(max-width:1024px) and (orientation:landscape){ /* Prevent viewport height changes from causing reflows/crashes */ #content-stage{ bottom:60px!important; } #toolbar{ position:fixed!important; bottom:0!important; z-index:250!important; pointer-events:all!important; } #nav{ bottom:auto!important; top:10px!important; z-index:220!important; } #prog{ display:none!important; } /* Ensure modals don't trigger resize loops */ .modal-base{ height:100vh!important; height:100svh!important; } } @media(max-width:768px){ /* ── Hide intro splash screen ── */ /* Homepage shows on mobile */ #dr-btn{display:none!important;} /* ── Custom cursor off on touch ── */ #cur,#cur2{display:none!important;} body{cursor:auto!important;} /* ── Header ── */ #hdr{padding:10px 16px;height:auto;} .h-logo{font-size:10px;letter-spacing:2px;} #hdr button[title="Search eras (/ key)"]{display:none;} .h-om{font-size:18px;} .h-hint{display:none;} #hdr-search-btn{display:none!important;} #toolbar-search-mobile{display:flex!important;} #axis-wrap{display:none!important;} #axis-pulse{display:none!important;} #axis-spark{display:none!important;} #track-wrap{display:none!important;} .era-dot,.era-yr{display:none;} /* ── Track/era particle canvas ── */ #erac{display:none;} #bgc{opacity:.3;} #grain{opacity:.4;} /* ── Polarity bands ── */ #deva-band,#asura-band,#deva-lbl,#asura-lbl{display:none!important;} /* ───────────────────────────────────────────── MOBILE BOTTOM STACK (bottom → top): [0–52px] toolbar [52–76px] progress dots [76–116px] nav prev/next content-stage bottom = 116px ───────────────────────────────────────────── */ /* ── Toolbar — anchored at very bottom ── */ #toolbar{ top:auto!important; bottom:0!important; left:0!important;right:0!important; transform:none!important; flex-direction:row!important; justify-content:center; flex-wrap:nowrap; gap:0; padding:4px 4px; height:48px; border-radius:0; background:rgba(3,2,1,.97); border-top:1px solid rgba(201,168,76,.12); z-index:230; align-items:center; overflow:visible; } .tb-label{display:none;} .tb-glyph{font-size:18px;} .tbtn{padding:12px 16px;min-height:44px;display:flex;align-items:center;justify-content:center;width:auto;border-bottom:none;border-right:1px solid rgba(201,168,76,.08);} .marga-btn{font-size:0;padding:10px 16px;gap:0;flex-direction:column;align-items:center;min-height:44px;justify-content:center;width:auto;border-bottom:none;border-right:1px solid rgba(201,168,76,.08);} .marga-btn .marga-glyph{font-size:18px;opacity:.85;} .marga-btn .marga-arrow{font-size:5px;margin-top:2px;margin-left:0;} .marga-btn.open .marga-arrow{transform:rotate(180deg);} .tbtn-turiya{font-size:0;padding:10px 16px;min-height:44px;display:flex;align-items:center;justify-content:center;width:auto;border-bottom:none;border-right:1px solid rgba(201,168,76,.08);} .tbtn-turiya .tb-glyph{font-size:18px;} #hdr-search-btn{display:none!important;} #toolbar-search-mobile{display:flex!important;} .tbtn-rishi-main{display:none!important;} .tbtn-rishi-more{display:flex!important;} /* ── Progress dots — strip above toolbar ── */ #prog{ left:0;right:0;top:auto; bottom:52px; transform:none; flex-direction:row; justify-content:center; gap:5px; padding:0 12px; background:rgba(3,2,1,.92); border-top:1px solid rgba(201,168,76,.06); height:26px; align-items:center; overflow-x:auto; scrollbar-width:none; z-index:225; } #prog::-webkit-scrollbar{display:none;} .pd{width:5px;height:5px;flex-shrink:0;} .pd::after{display:none!important;} .pd-lbl{display:none;} /* ── Nav buttons — above progress strip ── */ #nav{ bottom:76px; gap:8px; z-index:210; } .nb{font-size:8px;letter-spacing:2px;padding:7px 16px;} #nctr{font-size:9px;min-width:60px;} /* ── Return to Brahman ── */ #return-btn{ bottom:auto; top:58px; left:50%; transform:translateX(-50%) translateY(-20px); font-size:6.5px; padding:5px 14px; } #return-btn.show{ transform:translateX(-50%) translateY(0); } /* ── Forgotten texts button ── */ #fgt-btn{ bottom:auto; top:58px; right:12px; font-size:6px; padding:5px 10px; } /* ── CONTENT STAGE — full width, clears all bottom UI ── */ #content-stage{ position:fixed!important; left:0!important;right:0!important; top:44px!important; bottom:120px!important; width:100%!important; max-width:100%!important; align-items:flex-start!important; padding:0!important; z-index:50; } /* Force left-side text alignment on mobile */ #content-stage.side-right, #content-stage.side-left{ left:0!important; right:0!important; } #content-box{ width:100%!important; height:100%!important; padding:0!important; text-align:left!important; } #content-inner{ max-height:100%!important; height:100%; padding:14px 20px 24px!important; overflow-y:auto; } /* Override all side-specific styles for mobile */ #content-stage.side-left #content-inner, #content-stage.side-right #content-inner{ padding:14px 20px 24px!important; } #content-stage.side-left .content-accent, #content-stage.side-right .content-accent{ margin-left:0!important; margin-right:auto!important; } #content-stage.side-left .e-quote, #content-stage.side-right .e-quote{ border-left:2px solid var(--gdim)!important; border-right:none!important; padding:8px 0 8px 14px!important; } #content-stage.side-left .e-polarity, #content-stage.side-right .e-polarity{ justify-content:flex-start!important; } #content-stage.side-left .e-fractal, #content-stage.side-right .e-fractal{ direction:ltr!important; } #content-stage.side-left .layer-tabs-row, #content-stage.side-right .layer-tabs-row{ justify-content:flex-start!important; } #content-stage.side-left .e-tags, #content-stage.side-right .e-tags{ justify-content:flex-start!important; } /* ── Background glyph — smaller, centered ── */ #bg-glyph{ font-size:clamp(60px,28vw,110px)!important; opacity:.3!important; left:50%!important;right:auto!important; transform:translate(-50%,-50%)!important; z-index:2!important; } /* ── Era typography — bigger, more readable ── */ .e-label{font-size:9px;letter-spacing:4px;margin-bottom:10px;} .e-avatar-name{font-size:clamp(26px,7vw,38px)!important;line-height:1.1;} .e-avatar-subtitle{font-size:clamp(15px,4vw,20px)!important;margin-bottom:10px;} .e-date{font-size:10px;letter-spacing:2px;margin-bottom:14px;} .e-body{font-size:16px!important;line-height:1.92!important;margin-bottom:18px;} .e-quote{font-size:14px!important;line-height:1.7!important;padding:10px 0 10px 14px;} .content-accent{width:40px;height:2px;margin-bottom:14px;} /* ── Fractal scale — 2 col on mobile ── */ .e-fractal{grid-template-columns:1fr 1fr!important;gap:6px;} .fractal-val{font-size:12px;} /* ── Polarity chips ── */ .e-polarity{flex-direction:column;gap:5px;} .pol-chip{font-size:12.5px;min-width:0;} /* ── Layer tabs ── */ .ltab{font-size:7.5px;padding:5px 10px;} .layer-body{font-size:14px!important;line-height:1.85!important;} /* ── Tags ── */ .e-tag{font-size:8px;padding:5px 11px;} /* ── Discover button ── */ .e-discover{font-size:9px;padding:10px 22px;margin-top:16px;width:100%;text-align:center;display:block;} /* ── Consciousness spectrum bar ── */ #cspec{display:none!important;} /* cspec hidden on mobile */ /* ── Panel (Dive Deeper drawer) → full-screen bottom sheet ── */ #panel{ width:100%!important; max-width:100%!important; top:auto!important; bottom:0!important; right:0!important; left:0!important; height:88vh!important; transform:translateY(100%)!important; border-left:none!important; border-top:1px solid rgba(201,168,76,.15)!important; } #ov.on #panel{transform:translateY(0)!important;} .ptop{height:2px;} .phead{padding:18px 20px 14px;} .ptitle{font-size:15px;} .psub{font-size:12px;} .pbody{padding:16px 20px 80px;} .psec p{font-size:14px;line-height:1.8;} .fgrid{grid-template-columns:1fr;} .pcls{top:12px;right:12px;} /* ── All modals — full screen with more padding ── */ .modal-hdr{padding:16px 18px 14px;} .modal-title{font-size:12px;} .modal-sub{font-size:7px;} .modal-back{font-size:7px;padding:5px 10px;} /* ── Mahāvākya ── */ .mv-body{padding:20px 18px 50px;} .mv-grid{grid-template-columns:1fr!important;} .mv-card{padding:18px 16px;} .mv-card-skt{font-size:clamp(18px,5vw,26px);} .mvd-hdr{padding:18px 18px 16px;} .mvd-skt{font-size:clamp(22px,6vw,38px);} .mvd-cols{grid-template-columns:1fr!important;padding:18px 18px 50px;gap:12px;} .mvd-meaning{padding:14px 18px;} /* ── Rishi lineage ── */ #rl-canvas-wrap{height:calc(100vh - 200px);} #rl-info{padding:12px 16px 20px;z-index:215;pointer-events:auto;background:linear-gradient(to top,rgba(3,2,1,.99) 60%,rgba(3,2,1,.85));} #rl-info .rli-tag{pointer-events:all;} .rli-name{font-size:14px;} .rli-desc{font-size:12.5px;} #rl-era-filters{padding:8px 14px 6px;gap:4px;z-index:225;} .rl-ef{font-size:5.5px;padding:3px 8px;} /* ── Kosha ── */ #kosha-grid{grid-template-columns:1fr 1fr!important;gap:6px;padding:14px 14px 60px;} .kt-skt{font-size:16px;} .kt-essence{font-size:11px;} #kosha-search-wrap{padding:10px 14px 8px;} #kosha-filters{padding:8px 14px 6px;gap:4px;} .kf-btn{font-size:6px;padding:3px 9px;} .kd-hdr{padding:16px 16px 14px;gap:10px;} .kd-skt{font-size:clamp(20px,5vw,36px);} .kd-essence{padding:14px 18px;} .kd-body{padding:18px 18px 16px;} .kd-layers{grid-template-columns:1fr!important;} .kd-layer-txt{font-size:13.5px;line-height:1.8;} .kd-connections{padding:0 18px 50px;} /* ── Forgotten texts ── */ #forgotten-ov .modal-hdr+div,#forgotten-body>div{padding:24px 18px 60px!important;} /* ── Polarity Map ── */ #polarity-body{padding:14px 14px 50px;} .pm-legend{gap:10px;margin-bottom:16px;} .pm-leg-item{font-size:7px;} .pm-inner{min-width:100%;} .pm-axis-labels{padding:0 10px;} .pm-era-row{grid-template-columns:90px 1fr;gap:6px;} .pm-era-name{font-size:7px;} /* ── Concept Web ── */ #cweb-body{grid-template-columns:1fr!important;grid-template-rows:55vh 1fr;height:auto;} #cweb-canvas-wrap{height:55vh;border-right:none;border-bottom:1px solid rgba(201,168,76,.08);} #cweb-info{max-height:45vh;overflow-y:auto;} .cwi-concept{padding:16px 16px 30px;} .cwi-skt{font-size:20px;} #cweb-filters{padding:8px 14px 6px;gap:4px;} .cw-cat-btn{font-size:6px;padding:3px 8px;} /* ── Turiya ── */ .t-word{font-size:clamp(22px,7vw,38px)!important;letter-spacing:8px!important;} #t-exit{font-size:7px;} #t-back{font-size:6.5px;padding:5px 10px;} /* ── Touch scroll hint ── */ #shint{bottom:140px;font-size:7px;} /* ── Scroll bar styling for readability ── */ #content-inner::-webkit-scrollbar{width:2px;} #content-inner::-webkit-scrollbar-thumb{background:rgba(201,168,76,.25);} } .sky-sub-ov{position:absolute;top:84px;left:0;right:0;bottom:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .3s ease;background:#020408;} .sky-sub-ov.on{opacity:1!important;pointer-events:all!important;} .sky-stbtn.active{ color:rgba(200,220,255,.9)!important; border-color:rgba(140,180,240,.45)!important; background:rgba(140,180,240,.07)!important; } /* ── Era Quick Search ── */ #era-search-ov{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:800; width:min(580px,94vw);background:rgba(6,5,3,.97);border:1px solid rgba(201,168,76,.25); border-top:none;border-radius:0 0 4px 4px;opacity:0;pointer-events:none;visibility:hidden; transition:opacity .2s ease,transform .2s ease,visibility 0s .2s;transform:translateX(-50%) translateY(-10px); box-shadow:0 16px 48px rgba(0,0,0,.7);} @media(max-width:768px){ #era-search-ov{top:44px;width:100%;border-radius:0;border-left:none;border-right:none;} .esr-item{padding:13px 16px;} .esr-name{font-size:13px;} #era-search-input{font-size:16px;padding:14px 16px;} } #era-search-ov.on{opacity:1;pointer-events:all;visibility:visible;transform:translateX(-50%) translateY(0);transition:opacity .2s ease,transform .2s ease,visibility 0s;} #era-search-input{width:100%;background:transparent;border:none;border-bottom:1px solid rgba(201,168,76,.15); color:var(--cream);font-family:'Cormorant Garamond',serif;font-size:18px;padding:16px 20px; outline:none;letter-spacing:.5px;} #era-search-input::placeholder{color:rgba(107,90,62,.4);font-style:italic;} #era-search-results{max-height:340px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(201,168,76,.15) transparent;} .esr-item{display:flex;align-items:center;gap:14px;padding:11px 20px;cursor:pointer; transition:background .15s;border-bottom:1px solid rgba(201,168,76,.05);} .esr-item:hover,.esr-item.active{background:rgba(201,168,76,.07);} .esr-glyph{font-size:22px;width:30px;text-align:center;flex-shrink:0;opacity:.7;} .esr-name{font-family:'Cinzel',serif;font-size:12px;color:var(--cream);letter-spacing:.5px;} .esr-sub{font-family:'IBM Plex Mono',monospace;font-size:7px;color:var(--muted); letter-spacing:1px;text-transform:uppercase;margin-top:2px;} .esr-num{font-family:'IBM Plex Mono',monospace;font-size:8px;color:var(--gdim); margin-left:auto;flex-shrink:0;} #era-search-hint{padding:8px 20px;font-family:'IBM Plex Mono',monospace;font-size:6.5px; letter-spacing:2px;color:rgba(107,90,62,.35);text-transform:uppercase; display:flex;justify-content:space-between;} #hdr-search-btn:hover{color:var(--gold)!important;border-color:rgba(201,168,76,.5)!important;background:rgba(201,168,76,.05)!important;} /* ══════════════════════════════════════════════════════════ YOG VASHISHT — STYLES A page unlike any other in Living Sanatan Timeline. Ink-wash aesthetic. Manuscript texture. Brush-stroke motion. /* ══════════════════════════════════════════════════════════ ERA EXPERIENCE PAGES — Shared styles for interactive sub-pages opened from each era on the timeline. Consistent header, content panels, back navigation. ══════════════════════════════════════════════════════════ */ /* ── Consistent Era Page Header ── */ .era-exp-hdr{ position:absolute;top:0;left:0;right:0;z-index:20; padding:12px 18px;display:flex;align-items:center;justify-content:space-between; background:linear-gradient(to bottom,rgba(3,2,4,.92) 50%,transparent); pointer-events:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); } .era-exp-hdr>*{pointer-events:auto;} .era-exp-back{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px; text-transform:uppercase;color:var(--muted);background:none; border:1px solid rgba(107,90,62,.25);padding:6px 14px; cursor:pointer;transition:all .2s; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } .era-exp-back:hover{color:var(--gold);border-color:var(--gold);} .era-exp-title{ font-family:'Cinzel',serif;font-size:10px;letter-spacing:2px; color:rgba(201,168,76,.4);text-align:center;flex:1; } .era-exp-close{ background:none;border:1px solid rgba(107,90,62,.2);color:var(--muted); width:28px;height:28px;cursor:pointer;font-size:11px; display:flex;align-items:center;justify-content:center;transition:all .2s; font-family:'IBM Plex Mono',monospace; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } .era-exp-close:hover{border-color:var(--gold);color:var(--gold);} /* ── Content scroll panel (below canvas) ── */ .era-exp-content{ position:absolute;inset:0;z-index:22; background:rgba(3,2,4,.97); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); opacity:0;pointer-events:none;visibility:hidden; transition:opacity .4s,visibility 0s .4s; overflow-y:auto;-webkit-overflow-scrolling:touch; } .era-exp-content.open{opacity:1;pointer-events:auto;visibility:visible;transition:opacity .4s,visibility 0s;} .era-exp-content-hdr{ position:sticky;top:0;z-index:3;padding:12px 18px; background:rgba(3,2,4,.95);border-bottom:1px solid rgba(201,168,76,.06); display:flex;align-items:center;gap:12px; } .era-exp-content-back{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px; text-transform:uppercase;color:var(--muted);background:none;border:none; cursor:pointer;transition:color .2s; } .era-exp-content-back:hover{color:var(--gold);} .era-exp-content-title{ font-family:'Cinzel',serif;font-size:11px;letter-spacing:2px; } .era-exp-body{padding:24px 22px 60px;max-width:700px;margin:0 auto;} /* ── Tab bar for era pages ── */ .era-exp-tabs{ position:absolute;bottom:0;left:0;right:0;z-index:18; display:flex;justify-content:center;gap:2px;flex-wrap:wrap; padding:8px 12px 12px; background:linear-gradient(to top,rgba(2,2,4,.95) 60%,transparent); pointer-events:none; } .era-exp-tabs>*{pointer-events:auto;} .era-exp-tab{ font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:2px; text-transform:uppercase;padding:6px 14px; background:none;cursor:pointer;transition:all .3s; touch-action:manipulation;-webkit-tap-highlight-color:transparent; border:1px solid rgba(201,168,76,.1);color:rgba(201,168,76,.3); } .era-exp-tab:hover{color:rgba(201,168,76,.6);border-color:rgba(201,168,76,.25);} .era-exp-tab.active{color:var(--gold);border-color:rgba(201,168,76,.35);background:rgba(201,168,76,.05);} /* ── Hint text ── */ .era-exp-hint{ position:absolute;z-index:15; font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px; color:rgba(201,168,76,.2);text-transform:uppercase; pointer-events:none;text-align:center; animation:eraHintPulse 3s ease-in-out infinite; } @keyframes eraHintPulse{0%,100%{opacity:.2;}50%{opacity:.45;}} /* ── Section cards in content ── */ .era-exp-section{ margin-bottom:8px;border:1px solid rgba(201,168,76,.06); background:rgba(201,168,76,.01);cursor:pointer;transition:all .3s; } .era-exp-section:hover{border-color:rgba(201,168,76,.15);background:rgba(201,168,76,.03);} .era-exp-section-head{ padding:16px 18px 14px;display:flex;align-items:center;gap:14px; } .era-exp-section-glyph{font-size:22px;flex-shrink:0;width:32px;text-align:center;opacity:.6;} .era-exp-section-info{flex:1;min-width:0;} .era-exp-section-name{ font-family:'Cinzel',serif;font-size:12px;color:var(--cream); letter-spacing:1px;margin-bottom:2px; } .era-exp-section-sub{ font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:2px; color:rgba(201,168,76,.3);text-transform:uppercase;margin-bottom:4px; } .era-exp-section-hook{ font-family:'Cormorant Garamond',serif;font-size:13px; font-style:italic;color:rgba(208,188,152,.4);line-height:1.6; } .era-exp-section-body{ padding:0 18px;max-height:0;overflow:hidden;opacity:0; transition:max-height .5s cubic-bezier(.16,1,.3,1),opacity .3s,padding .3s; } .era-exp-section.open .era-exp-section-body{max-height:1200px;opacity:1;padding:0 18px 18px;} .era-exp-section-detail{ font-family:'Cormorant Garamond',serif;font-size:14px; line-height:1.85;color:var(--cream); } .era-exp-section-detail strong{color:rgba(220,190,130,.8);font-weight:500;} .era-exp-section-detail em{color:rgba(200,170,100,.6);font-style:italic;} /* ── Insight block ── */ .era-exp-insight{ margin:16px 0;padding:14px 18px; border-left:2px solid rgba(201,168,76,.12); background:rgba(201,168,76,.02); } .era-exp-insight-text{ font-family:'Cormorant Garamond',serif;font-size:15px; font-style:italic;color:rgba(220,190,130,.5);line-height:1.75; } .era-exp-insight-src{ font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:2px; color:rgba(201,168,76,.2);text-transform:uppercase;margin-top:6px; } /* ── Kosha tags (shared) ── */ .era-exp-kosha{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px;} .era-exp-ktag{ display:inline-block;padding:3px 10px; font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:1px; color:rgba(201,168,76,.5);text-transform:uppercase; border:1px solid rgba(201,168,76,.15); cursor:pointer;transition:all .25s; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } .era-exp-ktag:hover{color:var(--gold);border-color:var(--gold);background:rgba(201,168,76,.06);} /* ── Mobile ── */ @media(max-width:768px){ .era-exp-hdr{padding:10px 14px;} .era-exp-title{font-size:8px;} .era-exp-body{padding:18px 16px 60px;} .era-exp-section-name{font-size:11px;} .era-exp-section-detail{font-size:13px;} .era-exp-tab{font-size:6px;padding:5px 10px;} .era-exp-hint{font-size:6px;} } /* ══════════════════════════════════════════════════════════ ERA 1: BRAHMAN — The Void ══════════════════════════════════════════════════════════ */ #brahman-exp{background:#000!important;} .brahman-reveal{ position:absolute;inset:0;z-index:5; display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;padding:40px 24px;pointer-events:auto;cursor:pointer; } .brahman-text{ font-family:'Cormorant Garamond',serif;font-style:italic; color:rgba(255,255,255,0);line-height:1.8; max-width:500px;text-align:center; transition:color 4s ease; } .brahman-text.visible{color:rgba(220,200,160,.6);} .brahman-text-dim{color:rgba(220,200,160,.15)!important;} .brahman-question{ font-family:'Cinzel',serif;font-size:clamp(16px,3vw,24px); letter-spacing:3px;margin-top:20px; color:rgba(220,190,130,0);transition:color 3s ease 2s; } .brahman-question.visible{color:rgba(220,190,130,.7);} /* ══════════════════════════════════════════════════════════ ERA 2: SPANDA — The First Pulse ══════════════════════════════════════════════════════════ */ #spanda-exp{background:radial-gradient(ellipse at 50% 50%,#060504 0%,#020201 100%)!important;} /* ══════════════════════════════════════════════════════════ ERA 3: NADA BRAHMA — Sound Creates Form ══════════════════════════════════════════════════════════ */ #nada-exp{background:radial-gradient(ellipse at 50% 50%,#080604 0%,#030201 100%)!important;} /* ══════════════════════════════════════════════════════════ ERA 7: THE KALPA — Cosmic Scale ══════════════════════════════════════════════════════════ */ #kalpa-exp{background:#020204!important;} #kalpa-scale-label{ position:absolute;top:56px;left:50%;transform:translateX(-50%);z-index:15; text-align:center;pointer-events:none; } .kalpa-scale-name{ font-family:'Cinzel',serif;font-size:clamp(14px,2.5vw,20px); color:rgba(200,220,255,.7);letter-spacing:2px; transition:all .5s; } .kalpa-scale-size{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px; color:rgba(140,180,220,.3);text-transform:uppercase;margin-top:4px; } ══════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════ SAMUDRA MANTHAN — The Churning of the Cosmic Ocean The grandest interactive experience in Living Sanatan. Canvas: ocean, mountain, serpent, vortex sky, 14 treasures. User drags to churn. Treasures emerge in sequence. ══════════════════════════════════════════════════════════ */ #manthan-ov{ background:#020204!important; overflow:hidden!important; } /* ── Full-screen canvas ── */ #manthan-canvas{ position:absolute;inset:0;width:100%;height:100%; z-index:1;touch-action:none; } /* ── Top header bar ── */ .manthan-hdr{ position:absolute;top:0;left:0;right:0;z-index:20; padding:12px 18px; display:flex;align-items:center;justify-content:space-between; background:linear-gradient(to bottom,rgba(2,2,4,.9) 40%,transparent); pointer-events:none; } .manthan-hdr>*{pointer-events:auto;} .manthan-back{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px; text-transform:uppercase;color:var(--muted);background:none; border:1px solid rgba(107,90,62,.25);padding:6px 14px; cursor:pointer;transition:all .2s; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } .manthan-back:hover{color:var(--gold);border-color:var(--gold);} .manthan-hdr-title{ font-family:'Cinzel',serif;font-size:10px;letter-spacing:2px; color:rgba(140,180,200,.4); } /* ── Churn progress bar ── */ #manthan-progress{ position:absolute;bottom:80px;left:50%;transform:translateX(-50%);z-index:15; width:min(300px,70vw);height:3px; background:rgba(140,180,200,.08);border-radius:2px; pointer-events:none;overflow:hidden; } #manthan-progress-fill{ height:100%;width:0%; background:linear-gradient(to right,rgba(60,140,200,.4),rgba(220,180,80,.6)); border-radius:2px;transition:width .3s; } /* ── Churn instruction ── */ #manthan-hint{ position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:15; font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px; color:rgba(140,180,200,.25);text-transform:uppercase; pointer-events:none;text-align:center; animation:manthanHintPulse 3s ease-in-out infinite; } @keyframes manthanHintPulse{0%,100%{opacity:.25;}50%{opacity:.5;}} /* ── Treasure Counter ── */ #manthan-counter{ position:absolute;top:52px;right:18px;z-index:15; font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px; color:rgba(140,180,200,.2);text-transform:uppercase; pointer-events:none; } /* ── Treasure Reveal Panel ── */ #manthan-treasure{ position:absolute;inset:0;z-index:25; display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;padding:40px 24px; background:radial-gradient(ellipse at 50% 50%,rgba(2,2,4,.85) 0%,rgba(2,2,4,.97) 100%); opacity:0;pointer-events:none; transition:opacity 1.2s ease; } #manthan-treasure.visible{opacity:1;pointer-events:auto;} .mt-glyph{ font-size:clamp(48px,10vw,80px); margin-bottom:12px; animation:mtGlyphRise 1.5s ease-out both; filter:drop-shadow(0 0 30px rgba(220,180,80,.3)); } @keyframes mtGlyphRise{ from{opacity:0;transform:translateY(40px) scale(.7);filter:blur(8px) drop-shadow(0 0 30px rgba(220,180,80,.3));} to{opacity:1;transform:translateY(0) scale(1);filter:blur(0) drop-shadow(0 0 30px rgba(220,180,80,.3));} } .mt-skt{ font-family:'Noto Sans Devanagari',sans-serif;font-size:clamp(16px,3vw,22px); font-weight:300;color:rgba(200,170,100,.2);margin-bottom:2px; } .mt-name{ font-family:'Cinzel',serif;font-size:clamp(20px,4vw,32px); letter-spacing:3px;margin-bottom:4px; } .mt-sub{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px; text-transform:uppercase;margin-bottom:16px; } .mt-desc{ font-family:'Cormorant Garamond',serif;font-size:clamp(14px,2.5vw,17px); font-style:italic;line-height:1.8; max-width:520px;margin:0 auto 20px; } .mt-desc strong{font-weight:500;} .mt-desc em{font-style:italic;} .mt-continue{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px; text-transform:uppercase;color:rgba(140,180,200,.4); background:none;border:1px solid rgba(140,180,200,.15); padding:8px 24px;cursor:pointer;transition:all .3s; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } .mt-continue:hover{color:var(--gold);border-color:var(--gold);} /* ── Treasure color theming ── */ .mt-poison .mt-name{color:rgba(100,60,180,.85);} .mt-poison .mt-sub{color:rgba(100,60,180,.3);} .mt-poison .mt-desc{color:rgba(180,150,220,.5);} .mt-divine .mt-name{color:rgba(220,190,130,.85);} .mt-divine .mt-sub{color:rgba(220,190,130,.3);} .mt-divine .mt-desc{color:rgba(208,188,152,.5);} .mt-lakshmi .mt-name{color:rgba(240,180,100,.85);} .mt-lakshmi .mt-sub{color:rgba(240,180,100,.3);} .mt-lakshmi .mt-desc{color:rgba(240,200,140,.5);} .mt-amrita .mt-name{color:rgba(200,230,255,.9);} .mt-amrita .mt-sub{color:rgba(140,180,220,.4);} .mt-amrita .mt-desc{color:rgba(200,220,240,.6);} /* ── Final Completion Screen ── */ #manthan-complete{ position:absolute;inset:0;z-index:30; display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;padding:40px 24px; background:radial-gradient(ellipse at 50% 40%,rgba(10,8,20,.9) 0%,rgba(2,2,4,.98) 100%); opacity:0;pointer-events:none; transition:opacity 2s ease; } #manthan-complete.visible{opacity:1;pointer-events:auto;} .mc-skt{ font-family:'Noto Sans Devanagari',sans-serif;font-size:clamp(30px,7vw,52px); font-weight:300;color:rgba(200,170,100,.12);margin-bottom:8px; animation:mcReveal 2s 1s ease-out both; } .mc-title{ font-family:'Cinzel',serif;font-size:clamp(22px,4vw,36px); color:rgba(200,230,255,.8);letter-spacing:4px;margin-bottom:20px; animation:mcReveal 2s 2s ease-out both; } .mc-text{ font-family:'Cormorant Garamond',serif;font-size:clamp(14px,2.5vw,18px); font-style:italic;color:rgba(200,220,240,.5); line-height:1.85;max-width:520px;margin-bottom:24px; animation:mcReveal 2s 3s ease-out both; } .mc-restart{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px; text-transform:uppercase;color:rgba(140,180,200,.3); background:none;border:1px solid rgba(140,180,200,.12); padding:8px 20px;cursor:pointer;transition:all .3s; animation:mcReveal 2s 5s ease-out both; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } .mc-restart:hover{color:var(--gold);border-color:var(--gold);} @keyframes mcReveal{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}} /* ── Kosha tags ── */ .mt-kosha{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin-top:10px;} .mt-kosha-tag{ display:inline-block;padding:3px 10px; font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:1px; color:rgba(140,180,200,.4);text-transform:uppercase; border:1px solid rgba(140,180,200,.12); cursor:pointer;transition:all .25s; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } .mt-kosha-tag:hover{color:var(--gold);border-color:var(--gold);background:rgba(180,150,90,.06);} /* ── Mobile ── */ @media(max-width:768px){ .manthan-hdr{padding:10px 14px;} #manthan-counter{top:46px;right:14px;font-size:6px;} #manthan-hint{font-size:6px;bottom:20px;} #manthan-progress{bottom:60px;width:80vw;} .mt-desc{font-size:14px;} } /* ══════════════════════════════════════════════════════════ TRILOKA ANATOMICA — The Body as Three Worlds Brain = Brahma · Heart = Vishnu · Gut = Shiva Saptarishis mapped to organs. Canvas body silhouette. ══════════════════════════════════════════════════════════ */ #triloka-ov{ background:radial-gradient(ellipse at 50% 40%,#080608 0%,#040305 50%,#020103 100%)!important; } /* ── Canvas: full overlay body silhouette ── */ #tri-body-canvas{ position:absolute;inset:0;width:100%;height:100%; z-index:1;touch-action:none; } /* ── Tap zones — invisible overlays on the body regions ── */ .tri-zone{ position:absolute;z-index:3; border-radius:50%; cursor:pointer; transition:box-shadow .4s,background .4s; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } .tri-zone:hover,.tri-zone.active{ box-shadow:0 0 40px var(--tri-glow),0 0 80px var(--tri-glow); background:var(--tri-glow-bg); } #tri-z-brain{--tri-glow:rgba(220,180,80,.15);--tri-glow-bg:rgba(220,180,80,.04);} #tri-z-heart{--tri-glow:rgba(60,140,220,.15);--tri-glow-bg:rgba(60,140,220,.04);} #tri-z-gut{--tri-glow:rgba(180,140,255,.15);--tri-glow-bg:rgba(180,140,255,.04);} /* ── Zone labels (always visible) ── */ .tri-zone-label{ position:absolute;left:50%;transform:translateX(-50%); font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:3px; text-transform:uppercase;pointer-events:none;white-space:nowrap; opacity:.4;transition:opacity .3s; } .tri-zone.active .tri-zone-label{opacity:.8;} #tri-z-brain .tri-zone-label{color:rgba(220,180,80,.8);bottom:-18px;} #tri-z-heart .tri-zone-label{color:rgba(60,140,220,.8);bottom:-18px;} #tri-z-gut .tri-zone-label{color:rgba(180,140,255,.8);bottom:-18px;} /* ── Pulse ring on zones ── */ .tri-zone::after{ content:'';position:absolute;inset:-6px;border-radius:50%; border:1px solid var(--tri-glow); animation:triPulseRing 3s ease-in-out infinite; pointer-events:none; } @keyframes triPulseRing{ 0%,100%{opacity:.15;transform:scale(1);} 50%{opacity:.35;transform:scale(1.12);} } /* ── Info Panel — slides in from right ── */ #tri-panel{ position:absolute;top:0;right:0;bottom:0; width:min(460px,92vw); background:rgba(5,4,3,.97); border-left:1px solid rgba(201,168,76,.08); z-index:10; transform:translateX(100%); transition:transform .5s cubic-bezier(.16,1,.3,1); overflow-y:auto;-webkit-overflow-scrolling:touch; backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); } #tri-panel.open{transform:translateX(0);} .tri-p-close{ position:sticky;top:0;z-index:3; padding:12px 18px; background:rgba(5,4,3,.95); border-bottom:1px solid rgba(201,168,76,.06); display:flex;align-items:center; } .tri-p-close-btn{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px; text-transform:uppercase;color:var(--muted);background:none;border:none; cursor:pointer;transition:color .2s; } .tri-p-close-btn:hover{color:var(--gold);} .tri-p-body{padding:24px 22px 60px;} /* ── Loka Header ── */ .tri-loka-skt{ font-family:'Noto Sans Devanagari',sans-serif;font-size:clamp(22px,4vw,32px); font-weight:300;margin-bottom:2px; } .tri-loka-name{ font-family:'Cinzel',serif;font-size:clamp(18px,3vw,26px); letter-spacing:3px;margin-bottom:4px; } .tri-loka-sub{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px; text-transform:uppercase;margin-bottom:18px; } .tri-loka-desc{ font-family:'Cormorant Garamond',serif;font-size:15px; line-height:1.85;color:var(--cream);margin-bottom:24px; } .tri-loka-desc strong{font-weight:500;} .tri-loka-desc em{font-style:italic;} /* Color theming per loka */ .tri-p-brahma .tri-loka-skt{color:rgba(220,180,80,.2);} .tri-p-brahma .tri-loka-name{color:rgba(220,180,80,.85);} .tri-p-brahma .tri-loka-sub{color:rgba(220,180,80,.3);} .tri-p-brahma .tri-loka-desc strong{color:rgba(220,180,80,.8);} .tri-p-brahma .tri-loka-desc em{color:rgba(220,180,80,.55);} .tri-p-vishnu .tri-loka-skt{color:rgba(60,140,220,.2);} .tri-p-vishnu .tri-loka-name{color:rgba(100,170,240,.85);} .tri-p-vishnu .tri-loka-sub{color:rgba(60,140,220,.3);} .tri-p-vishnu .tri-loka-desc strong{color:rgba(100,170,240,.8);} .tri-p-vishnu .tri-loka-desc em{color:rgba(80,150,230,.55);} .tri-p-shiva .tri-loka-skt{color:rgba(180,140,255,.2);} .tri-p-shiva .tri-loka-name{color:rgba(200,170,255,.85);} .tri-p-shiva .tri-loka-sub{color:rgba(180,140,255,.3);} .tri-p-shiva .tri-loka-desc strong{color:rgba(200,170,255,.8);} .tri-p-shiva .tri-loka-desc em{color:rgba(180,150,240,.55);} /* ── Rishi Cards ── */ .tri-rishi-label{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px; text-transform:uppercase;margin-bottom:12px;padding-bottom:8px; border-bottom:1px solid rgba(201,168,76,.06); } .tri-p-brahma .tri-rishi-label{color:rgba(220,180,80,.3);} .tri-p-vishnu .tri-rishi-label{color:rgba(60,140,220,.3);} .tri-p-shiva .tri-rishi-label{color:rgba(180,140,255,.3);} .tri-rishi{ margin-bottom:6px; border:1px solid rgba(201,168,76,.06); background:rgba(201,168,76,.01); transition:all .35s; cursor:pointer; } .tri-rishi:hover{border-color:rgba(201,168,76,.15);background:rgba(201,168,76,.03);} .tri-rishi-head{ padding:14px 18px 12px; display:flex;align-items:flex-start;gap:12px; } .tri-rishi-skt{ font-family:'Noto Sans Devanagari',sans-serif;font-size:18px; flex-shrink:0;line-height:1; } .tri-p-brahma .tri-rishi-skt{color:rgba(220,180,80,.4);} .tri-p-vishnu .tri-rishi-skt{color:rgba(60,140,220,.4);} .tri-p-shiva .tri-rishi-skt{color:rgba(180,140,255,.4);} .tri-rishi-info{flex:1;min-width:0;} .tri-rishi-name{ font-family:'Cinzel',serif;font-size:11px;color:var(--cream); letter-spacing:1px;margin-bottom:2px; } .tri-rishi-organ{ font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:2px; text-transform:uppercase;margin-bottom:4px; } .tri-p-brahma .tri-rishi-organ{color:rgba(220,180,80,.35);} .tri-p-vishnu .tri-rishi-organ{color:rgba(60,140,220,.35);} .tri-p-shiva .tri-rishi-organ{color:rgba(180,140,255,.35);} .tri-rishi-etym{ font-family:'Cormorant Garamond',serif;font-size:13px; font-style:italic;color:rgba(208,188,152,.5);line-height:1.6; } .tri-rishi-body{ padding:0 18px; max-height:0;overflow:hidden;opacity:0; transition:max-height .5s cubic-bezier(.16,1,.3,1),opacity .3s,padding .3s; } .tri-rishi.open .tri-rishi-body{ max-height:500px;opacity:1;padding:0 18px 16px; } .tri-rishi-detail{ font-family:'Cormorant Garamond',serif;font-size:14px; line-height:1.8;color:var(--cream); } .tri-rishi-detail strong{font-weight:500;} .tri-rishi-detail em{font-style:italic;} .tri-p-brahma .tri-rishi-detail strong{color:rgba(220,180,80,.8);} .tri-p-vishnu .tri-rishi-detail strong{color:rgba(100,170,240,.8);} .tri-p-shiva .tri-rishi-detail strong{color:rgba(200,170,255,.8);} /* ── Kosha tags ── */ .tri-kosha-tag{ display:inline-block;padding:3px 10px;margin:2px 3px; font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:1px; color:rgba(180,150,90,.5);text-transform:uppercase; border:1px solid rgba(180,150,90,.15); cursor:pointer;transition:all .25s; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } .tri-kosha-tag:hover{color:var(--gold);border-color:var(--gold);background:rgba(180,150,90,.06);} /* ── Insight quote ── */ .tri-insight{ margin:16px 0;padding:14px 18px; border-left:2px solid rgba(201,168,76,.12); background:rgba(201,168,76,.02); } .tri-insight-text{ font-family:'Cormorant Garamond',serif;font-size:15px; font-style:italic;line-height:1.75; } .tri-p-brahma .tri-insight-text{color:rgba(220,180,80,.55);} .tri-p-vishnu .tri-insight-text{color:rgba(100,170,240,.55);} .tri-p-shiva .tri-insight-text{color:rgba(200,170,255,.55);} .tri-insight-src{ font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:2px; color:rgba(180,150,90,.2);text-transform:uppercase;margin-top:6px; } /* ── Hint ── */ #tri-hint{ position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:4; font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px; color:rgba(180,150,90,.2);text-transform:uppercase; pointer-events:none;animation:triHintPulse 3s ease-in-out infinite; } @keyframes triHintPulse{0%,100%{opacity:.2;}50%{opacity:.45;};} /* ── Mobile ── */ @media(max-width:768px){ #tri-panel{width:100%;border-left:none;border-top:1px solid rgba(201,168,76,.08);} .tri-p-body{padding:18px 16px 60px;} .tri-rishi-head{padding:12px 14px 10px;gap:10px;} .tri-rishi-name{font-size:10px;} .tri-rishi-etym{font-size:12px;} .tri-rishi-detail{font-size:13px;} } /* ══════════════════════════════════════════════════════════ ADHYĀSA — The Superimposition Map Shankaracharya's Adhyasa Bhashya as interactive experience. Peel layers. Dissolve illusion. Find what remains. ══════════════════════════════════════════════════════════ */ /* ── Overlay ── */ #adhyasa-ov{ background:radial-gradient(ellipse at 50% 45%,#08060a 0%,#040306 50%,#020103 100%)!important; } /* ── Canvas ── */ #adh-canvas{ position:absolute;inset:0;width:100%;height:100%; z-index:1;pointer-events:none; } /* ── Stage — holds the interactive layers ── */ #adh-stage{ position:absolute;inset:0;z-index:2; display:flex;flex-direction:column; align-items:center;justify-content:center; padding:60px 20px 80px; pointer-events:none; } /* ── The Object — what the user peels ── */ #adh-object{ position:relative; width:min(360px,80vw);height:min(360px,80vw); display:flex;align-items:center;justify-content:center; pointer-events:auto; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; } /* ── Concentric layers — nested rings ── */ .adh-layer{ position:absolute; border-radius:50%; display:flex;align-items:center;justify-content:center; transition:all 1.2s cubic-bezier(.16,1,.3,1); pointer-events:none; } .adh-layer.dissolving{ transform:scale(2.5)!important; opacity:0!important; filter:blur(24px)!important; } /* Layer 0: Nāma (Name) — outermost */ .adh-l-nama{ width:100%;height:100%; background:radial-gradient(circle,rgba(80,60,40,.08) 0%,rgba(80,60,40,.02) 70%,transparent 100%); border:1px solid rgba(180,140,80,.12); box-shadow:0 0 60px rgba(180,140,80,.04),inset 0 0 40px rgba(180,140,80,.02); } /* Layer 1: Rūpa (Form) */ .adh-l-rupa{ width:78%;height:78%; background:radial-gradient(circle,rgba(100,70,50,.1) 0%,rgba(100,70,50,.03) 70%,transparent 100%); border:1px solid rgba(200,150,90,.1); box-shadow:0 0 40px rgba(200,150,90,.03),inset 0 0 30px rgba(200,150,90,.02); } /* Layer 2: Vedanā (Sensation) */ .adh-l-vedana{ width:56%;height:56%; background:radial-gradient(circle,rgba(120,80,60,.12) 0%,rgba(120,80,60,.04) 70%,transparent 100%); border:1px solid rgba(220,160,100,.12); box-shadow:0 0 30px rgba(220,160,100,.04),inset 0 0 20px rgba(220,160,100,.03); } /* Layer 3: Saṃjñā (Concept) */ .adh-l-samjna{ width:36%;height:36%; background:radial-gradient(circle,rgba(140,100,70,.15) 0%,rgba(140,100,70,.05) 70%,transparent 100%); border:1px solid rgba(220,180,120,.15); box-shadow:0 0 20px rgba(220,180,120,.05),inset 0 0 12px rgba(220,180,120,.04); } /* Layer 4: Chit (Awareness) — innermost, always visible */ .adh-l-chit{ width:16%;height:16%; background:radial-gradient(circle,rgba(220,190,130,.2) 0%,rgba(220,190,130,.06) 70%,transparent 100%); border:1px solid rgba(220,190,130,.3); box-shadow:0 0 40px rgba(220,190,130,.08); animation:adhChitPulse 4s ease-in-out infinite; } @keyframes adhChitPulse{ 0%,100%{box-shadow:0 0 40px rgba(220,190,130,.08);transform:scale(1);} 50%{box-shadow:0 0 60px rgba(220,190,130,.15);transform:scale(1.04);} } /* ── Layer Label (appears when that layer is active) ── */ .adh-layer-label{ position:absolute; font-family:'Cinzel',serif;font-size:clamp(10px,2vw,14px); color:rgba(220,190,130,.6);letter-spacing:2px; text-align:center; opacity:0;transition:opacity .6s; pointer-events:none; white-space:nowrap; } .adh-layer-label.visible{opacity:1;} /* ── Insight Panel — bottom of screen ── */ #adh-insight{ position:absolute;bottom:0;left:0;right:0;z-index:5; padding:20px 24px 32px; background:linear-gradient(to top,rgba(4,3,6,.95) 60%,transparent); text-align:center; pointer-events:none; opacity:0;transition:opacity .8s; } #adh-insight.visible{opacity:1;pointer-events:auto;} .adh-ins-skt{ font-family:'Noto Sans Devanagari',sans-serif;font-size:14px; color:rgba(200,170,100,.2);margin-bottom:2px; } .adh-ins-name{ font-family:'Cinzel',serif;font-size:clamp(16px,3vw,22px); color:rgba(220,190,130,.8);letter-spacing:2px;margin-bottom:6px; } .adh-ins-eng{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px; color:rgba(180,150,90,.3);text-transform:uppercase;margin-bottom:12px; } .adh-ins-text{ font-family:'Cormorant Garamond',serif;font-size:clamp(14px,2.5vw,17px); font-style:italic;color:rgba(208,188,152,.6); line-height:1.75;max-width:540px;margin:0 auto 14px; } .adh-ins-teaching{ font-family:'Cormorant Garamond',serif;font-size:15px; color:var(--cream);line-height:1.8; max-width:560px;margin:0 auto 16px; text-align:left; max-height:0;overflow:hidden; transition:max-height .6s cubic-bezier(.16,1,.3,1),opacity .4s; opacity:0; } #adh-insight.expanded .adh-ins-teaching{ max-height:600px;opacity:1; } .adh-ins-teaching strong{color:rgba(220,190,130,.8);font-weight:500;} .adh-ins-teaching em{color:rgba(200,170,100,.6);} .adh-ins-more{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px; color:rgba(180,150,90,.3);text-transform:uppercase; background:none;border:1px solid rgba(180,150,90,.15); padding:6px 16px;cursor:pointer;transition:all .25s; pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent; margin-bottom:10px; } .adh-ins-more:hover{color:var(--gold);border-color:var(--gold);} #adh-insight.expanded .adh-ins-more{display:none;} .adh-ins-kosha{ display:flex;flex-wrap:wrap;justify-content:center;gap:4px; margin-top:8px; } /* ── Hint — tap to peel ── */ #adh-hint{ position:absolute;z-index:5; bottom:calc(50% - 100px);left:50%;transform:translateX(-50%); font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px; color:rgba(180,150,90,.2);text-transform:uppercase; pointer-events:none; animation:adhHintPulse 3s ease-in-out infinite; } @keyframes adhHintPulse{ 0%,100%{opacity:.2;}50%{opacity:.5;} } /* ── Counter ── */ #adh-counter{ position:absolute;top:58px;right:20px;z-index:5; font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px; color:rgba(180,150,90,.2);text-transform:uppercase; pointer-events:none; } /* ── Final Revelation — fills the screen ── */ #adh-final{ position:absolute;inset:0;z-index:6; display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;padding:40px 24px; opacity:0;pointer-events:none; transition:opacity 3s ease; } #adh-final.visible{opacity:1;pointer-events:auto;} .adh-final-skt{ font-family:'Noto Sans Devanagari',sans-serif;font-size:clamp(28px,6vw,48px); font-weight:300;color:rgba(200,170,100,.12); margin-bottom:8px; animation:adhFinalSktIn 3s 1s ease-out both; } @keyframes adhFinalSktIn{from{letter-spacing:16px;opacity:0;filter:blur(8px);}to{letter-spacing:4px;opacity:1;filter:blur(0);}} .adh-final-title{ font-family:'Cinzel',serif;font-size:clamp(22px,4vw,36px); color:rgba(220,190,130,.85);letter-spacing:3px; margin-bottom:20px; animation:adhFinalFade 2s 2s ease-out both; } .adh-final-text{ font-family:'Cormorant Garamond',serif;font-size:clamp(15px,2.5vw,19px); font-style:italic;color:rgba(208,188,152,.6); line-height:1.85;max-width:520px; animation:adhFinalFade 2s 3s ease-out both; margin-bottom:24px; } .adh-final-quote{ font-family:'Cormorant Garamond',serif;font-size:clamp(13px,2vw,16px); color:rgba(180,150,90,.4);line-height:1.7;max-width:460px; animation:adhFinalFade 2s 5s ease-out both; margin-bottom:28px; } .adh-final-src{ font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:3px; color:rgba(180,150,90,.2);text-transform:uppercase; animation:adhFinalFade 2s 6s ease-out both; margin-bottom:24px; } @keyframes adhFinalFade{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}} .adh-final-restart{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px; text-transform:uppercase;color:rgba(180,150,90,.3); background:none;border:1px solid rgba(180,150,90,.12); padding:8px 20px;cursor:pointer;transition:all .3s; animation:adhFinalFade 2s 7s ease-out both; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } .adh-final-restart:hover{color:var(--gold);border-color:var(--gold);} /* ── Kosha tags reuse from YV ── */ .adh-kosha-tag{ display:inline-block; padding:3px 10px;margin:2px 3px; font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:1px; color:rgba(180,150,90,.5);text-transform:uppercase; border:1px solid rgba(180,150,90,.15); cursor:pointer;transition:all .25s; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } .adh-kosha-tag:hover{color:var(--gold);border-color:var(--gold);background:rgba(180,150,90,.06);} /* ── Mobile ── */ @media(max-width:768px){ #adh-object{width:min(300px,85vw);height:min(300px,85vw);} #adh-insight{padding:14px 18px 24px;} .adh-ins-text{font-size:14px;} .adh-ins-teaching{font-size:14px;} #adh-counter{top:52px;right:14px;} #adh-hint{font-size:6px;} } /* ── YV Overlay ── */ #yv-ov{ background:radial-gradient(ellipse at 50% 30%,#0c0a06 0%,#060503 50%,#030201 100%)!important; } /* ── Page Header ── */ .yv-page-hdr{ position:sticky;top:0;z-index:10; padding:14px 20px 12px; background:rgba(6,5,3,.97); border-bottom:1px solid rgba(180,150,90,.1); display:flex;align-items:center;justify-content:space-between; backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); } .yv-back{ font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:2px; text-transform:uppercase;color:var(--muted);background:none;border:1px solid rgba(107,90,62,.25); padding:6px 14px;cursor:pointer;transition:all .2s; } .yv-back:hover{color:var(--gold);border-color:var(--gold);} .yv-hdr-title{font-family:'Cinzel',serif;font-size:11px;letter-spacing:2px;color:rgba(180,150,90,.6);} .yv-hdr-x{background:none;border:1px solid rgba(107,90,62,.2);color:var(--muted);width:28px;height:28px;cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;transition:all .2s;} .yv-hdr-x:hover{border-color:var(--gold);color:var(--gold);} /* ── Hero / Landing ── */ .yv-hero{ position:relative; min-height:100vh;min-height:100svh; display:flex;flex-direction:column; align-items:center;justify-content:center; text-align:center; padding:60px 24px 80px; overflow:hidden; } #yv-hero-canvas{ position:absolute;inset:0;width:100%;height:100%; pointer-events:none;z-index:0; } .yv-hero-content{position:relative;z-index:2;max-width:700px;} /* Ink wash grain overlay specific to YV */ .yv-grain{ position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.08; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='6' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E"); } /* Sanskrit title — large, brushstroke feel */ .yv-skt-title{ font-family:'Noto Sans Devanagari',sans-serif; font-size:clamp(42px,8vw,72px); font-weight:300; color:rgba(200,170,100,.12); letter-spacing:6px; line-height:1; margin-bottom:12px; animation:yvSktReveal 3s ease-out both; } @keyframes yvSktReveal{ from{opacity:0;letter-spacing:20px;filter:blur(8px);} to{opacity:1;letter-spacing:6px;filter:blur(0);} } .yv-title{ font-family:'Cinzel',serif;font-size:clamp(28px,5vw,48px); font-weight:400;color:rgba(220,190,120,.85); letter-spacing:4px;line-height:1.15; margin-bottom:8px; animation:yvFadeUp 1.2s .6s ease-out both; } .yv-title em{font-style:italic;color:rgba(200,170,100,.6);font-family:'Cormorant Garamond',serif;font-weight:400;} .yv-subtitle{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:5px; text-transform:uppercase;color:rgba(180,150,90,.3); margin-bottom:32px; animation:yvFadeUp 1.2s .9s ease-out both; } .yv-hero-quote{ font-family:'Cormorant Garamond',serif;font-size:clamp(15px,2.5vw,20px); font-style:italic;color:rgba(200,180,130,.55); line-height:1.75;max-width:580px;margin:0 auto 40px; animation:yvFadeUp 1.2s 1.2s ease-out both; } .yv-hero-sig{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px; color:rgba(180,150,90,.25);text-transform:uppercase; margin-bottom:40px; animation:yvFadeUp 1.2s 1.5s ease-out both; } @keyframes yvFadeUp{ from{opacity:0;transform:translateY(18px);} to{opacity:1;transform:translateY(0);} } /* ── Significance Banner ── */ .yv-sig-banner{ max-width:620px;margin:0 auto 48px; border:1px solid rgba(180,150,90,.12); background:rgba(180,150,90,.02); padding:24px 22px;text-align:left; animation:yvFadeUp 1.2s 1.8s ease-out both; position:relative; } .yv-sig-banner::before{ content:'⚑';position:absolute;top:-10px;left:20px; font-size:14px;color:rgba(180,150,90,.35); background:rgba(6,5,3,1);padding:0 8px; } .yv-sig-label{ font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:3px; text-transform:uppercase;color:rgba(180,150,90,.4);margin-bottom:10px; } .yv-sig-text{ font-family:'Cormorant Garamond',serif;font-size:15px; line-height:1.85;color:var(--cream); } .yv-sig-text strong{color:rgba(220,190,120,.8);font-weight:500;} .yv-sig-text em{color:rgba(200,170,100,.65);} /* ── Recommendation note ── */ .yv-rec{ max-width:480px;margin:0 auto 48px; font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:1px; color:rgba(180,150,90,.3);line-height:1.8;text-align:center; animation:yvFadeUp 1.2s 2.1s ease-out both; } .yv-rec a{color:rgba(180,150,90,.5);text-decoration:underline;text-underline-offset:2px;} .yv-rec a:hover{color:var(--gold);} /* ── Prakarana Navigation — the six books ── */ .yv-prakarana-nav{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; max-width:680px; margin:0 auto 60px; animation:yvFadeUp 1.2s 2.4s ease-out both; } .yv-pk-btn{ position:relative; background:rgba(180,150,90,.02); border:1px solid rgba(180,150,90,.08); padding:20px 14px 16px; text-align:center; cursor:pointer; transition:all .4s cubic-bezier(.16,1,.3,1); overflow:hidden; } .yv-pk-btn::before{ content:'';position:absolute;bottom:0;left:0;right:0;height:2px; background:var(--gold);transform:scaleX(0);transition:transform .4s cubic-bezier(.16,1,.3,1); transform-origin:center; } .yv-pk-btn:hover::before,.yv-pk-btn.active::before{transform:scaleX(1);} .yv-pk-btn:hover,.yv-pk-btn.active{ background:rgba(180,150,90,.06);border-color:rgba(180,150,90,.2); } .yv-pk-num{ font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:3px; color:rgba(180,150,90,.25);text-transform:uppercase;margin-bottom:6px;display:block; } .yv-pk-skt{ font-family:'Noto Sans Devanagari',sans-serif;font-size:18px; color:rgba(200,170,100,.5);display:block;margin-bottom:4px; transition:color .3s; } .yv-pk-btn:hover .yv-pk-skt,.yv-pk-btn.active .yv-pk-skt{color:rgba(220,190,120,.8);} .yv-pk-name{ font-family:'Cinzel',serif;font-size:9px;letter-spacing:1.5px; color:rgba(180,150,90,.4);display:block;margin-bottom:3px; transition:color .3s; } .yv-pk-btn:hover .yv-pk-name,.yv-pk-btn.active .yv-pk-name{color:var(--cream);} .yv-pk-eng{ font-family:'IBM Plex Mono',monospace;font-size:5.5px;letter-spacing:2px; color:rgba(180,150,90,.2);text-transform:uppercase;display:block; } /* ── Prakarana Section (content area) ── */ .yv-section{ display:none; padding:0 24px 80px; max-width:780px;margin:0 auto; animation:yvInkIn .8s ease-out both; } .yv-section.active{display:block;} /* ── Section Sub-Navigation ── */ .yv-sec-nav{ position:sticky;top:0;z-index:4; background:rgba(6,5,3,.96); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border-bottom:1px solid rgba(180,150,90,.08); padding:10px 0;margin:0 -24px 32px; display:flex;align-items:center;gap:10px; padding-left:24px;padding-right:24px; } .yv-sec-nav-back{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:1.5px; text-transform:uppercase;color:var(--muted); background:none;border:1px solid rgba(107,90,62,.2); padding:5px 12px;cursor:pointer;transition:all .25s; white-space:nowrap;flex-shrink:0; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } .yv-sec-nav-back:hover{color:var(--gold);border-color:var(--gold);} .yv-sec-nav-tabs{ display:flex;gap:2px;overflow-x:auto; scrollbar-width:none;-ms-overflow-style:none; flex:1; } .yv-sec-nav-tabs::-webkit-scrollbar{display:none;} .yv-sec-nav-tab{ font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:1px; text-transform:uppercase;color:rgba(180,150,90,.3); background:none;border:1px solid rgba(180,150,90,.08); padding:4px 10px;cursor:pointer;transition:all .25s; white-space:nowrap;flex-shrink:0; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } .yv-sec-nav-tab:hover{color:rgba(180,150,90,.6);border-color:rgba(180,150,90,.2);} .yv-sec-nav-tab.active{color:var(--gold);border-color:rgba(180,150,90,.35);background:rgba(180,150,90,.06);} @keyframes yvInkIn{ from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:translateY(0);} } .yv-sec-header{ text-align:center;margin-bottom:40px;padding-bottom:24px; border-bottom:1px solid rgba(180,150,90,.08); } .yv-sec-skt{ font-family:'Noto Sans Devanagari',sans-serif;font-size:clamp(24px,5vw,36px); font-weight:300;color:rgba(200,170,100,.15);margin-bottom:4px; } .yv-sec-title{ font-family:'Cinzel',serif;font-size:clamp(20px,3.5vw,30px); color:rgba(220,190,120,.8);letter-spacing:3px;margin-bottom:6px; } .yv-sec-eng{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:4px; color:rgba(180,150,90,.3);text-transform:uppercase;margin-bottom:16px; } .yv-sec-intro{ font-family:'Cormorant Garamond',serif;font-size:16px; line-height:1.85;color:var(--cream); max-width:600px;margin:0 auto;text-align:center; font-style:italic; } /* ── Teaching Cards — ink-blot style ── */ .yv-teachings{ display:flex;flex-direction:column;gap:3px; margin-bottom:40px; } .yv-teach{ position:relative; padding:22px 24px 20px; background:rgba(180,150,90,.015); border-left:2px solid rgba(180,150,90,.1); cursor:pointer; transition:all .35s cubic-bezier(.16,1,.3,1); } .yv-teach:hover{ background:rgba(180,150,90,.04); border-left-color:rgba(180,150,90,.4); padding-left:28px; } .yv-teach-title{ font-family:'Cinzel',serif;font-size:13px;color:var(--cream); letter-spacing:1px;margin-bottom:6px; transition:color .3s; } .yv-teach:hover .yv-teach-title{color:var(--gold);} .yv-teach-text{ font-family:'Cormorant Garamond',serif;font-size:15px; line-height:1.8;color:rgba(208,188,152,.7); max-height:0;overflow:hidden; transition:max-height .5s cubic-bezier(.16,1,.3,1),opacity .3s,margin .3s; opacity:0; } .yv-teach.open .yv-teach-text{ max-height:800px;opacity:1;margin-top:10px; } .yv-teach-hint{ font-family:'IBM Plex Mono',monospace;font-size:6px;letter-spacing:2px; color:rgba(180,150,90,.2);text-transform:uppercase; position:absolute;right:16px;top:24px; transition:opacity .3s; } .yv-teach.open .yv-teach-hint{opacity:0;} /* ── Story Cards ── */ .yv-stories{margin-bottom:40px;} .yv-stories-label{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:4px; color:rgba(180,150,90,.3);text-transform:uppercase;margin-bottom:14px; padding-bottom:8px;border-bottom:1px solid rgba(180,150,90,.06); } .yv-story{ padding:18px 20px; border:1px solid rgba(180,150,90,.06); background:rgba(180,150,90,.01); margin-bottom:8px; cursor:pointer; transition:all .35s; position:relative; } .yv-story:hover{ border-color:rgba(180,150,90,.2); background:rgba(180,150,90,.04); } .yv-story-name{ font-family:'Cinzel',serif;font-size:12px;color:var(--cream); letter-spacing:1px;margin-bottom:3px; } .yv-story-hook{ font-family:'Cormorant Garamond',serif;font-size:13px; font-style:italic;color:rgba(200,180,130,.4); line-height:1.6; } .yv-story-arrow{ position:absolute;right:16px;top:50%;transform:translateY(-50%); font-family:'IBM Plex Mono',monospace;font-size:10px;color:rgba(180,150,90,.2); transition:all .3s; } .yv-story:hover .yv-story-arrow{color:var(--gold);right:12px;} /* ── Story Detail Panel (overlay within overlay) ── */ #yv-story-detail{ position:absolute;inset:0;z-index:15; background:rgba(5,4,2,.98); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); transform:translateX(100%); transition:transform .5s cubic-bezier(.16,1,.3,1); overflow-y:auto;-webkit-overflow-scrolling:touch; } #yv-story-detail.open{transform:translateX(0);} .yv-sd-close{ position:sticky;top:0;z-index:3; padding:14px 20px; background:rgba(5,4,2,.95); border-bottom:1px solid rgba(180,150,90,.08); display:flex;align-items:center;gap:10px; } .yv-sd-back{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px; text-transform:uppercase;color:var(--muted);background:none;border:none; cursor:pointer;padding:0;transition:color .2s; } .yv-sd-back:hover{color:var(--gold);} .yv-sd-body{padding:32px 24px 80px;max-width:680px;margin:0 auto;} .yv-sd-skt{ font-family:'Noto Sans Devanagari',sans-serif; font-size:20px;color:rgba(200,170,100,.2); text-align:center;margin-bottom:4px; } .yv-sd-title{ font-family:'Cinzel',serif;font-size:clamp(22px,4vw,32px); color:rgba(220,190,120,.85);text-align:center; letter-spacing:2px;margin-bottom:6px; } .yv-sd-context{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px; color:rgba(180,150,90,.3);text-transform:uppercase;text-align:center; margin-bottom:28px; } .yv-sd-text{ font-family:'Cormorant Garamond',serif;font-size:16px; line-height:1.92;color:var(--cream); } .yv-sd-text p{margin-bottom:16px;} .yv-sd-text strong{color:rgba(220,190,120,.8);font-weight:500;} .yv-sd-text em{color:rgba(200,170,100,.65);} /* ── Insight Quote blocks ── */ .yv-insight{ margin:24px 0;padding:18px 22px; border-left:2px solid rgba(200,170,100,.2); background:rgba(200,170,100,.02); } .yv-insight-text{ font-family:'Cormorant Garamond',serif;font-size:17px; font-style:italic;color:rgba(220,200,150,.7);line-height:1.75; } .yv-insight-src{ font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:2px; color:rgba(180,150,90,.25);text-transform:uppercase;margin-top:8px; } /* ── Kosha Link Tags ── */ .yv-kosha-tag{ display:inline-block; padding:3px 10px;margin:2px 3px; font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:1px; color:rgba(180,150,90,.5);text-transform:uppercase; border:1px solid rgba(180,150,90,.15); cursor:pointer;transition:all .25s; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } .yv-kosha-tag:hover{color:var(--gold);border-color:var(--gold);background:rgba(180,150,90,.06);} /* ── Section Footer ── */ .yv-sec-footer{ text-align:center;padding-top:32px;margin-top:32px; border-top:1px solid rgba(180,150,90,.06); } .yv-sec-footer-text{ font-family:'Cormorant Garamond',serif;font-size:14px; font-style:italic;color:rgba(180,150,90,.25); } /* ── Scroll-into-view line divider ── */ .yv-divider{ width:40px;height:1px; background:linear-gradient(to right,transparent,rgba(180,150,90,.25),transparent); margin:0 auto 32px; } /* ── Mobile ── */ @media(max-width:768px){ .yv-prakarana-nav{grid-template-columns:repeat(2,1fr);} .yv-pk-btn{padding:14px 10px 12px;} .yv-pk-skt{font-size:15px;} .yv-pk-name{font-size:8px;} .yv-teach{padding:16px 18px 14px;} .yv-teach-title{font-size:12px;} .yv-teach-text{font-size:14px;} .yv-sd-body{padding:24px 18px 60px;} .yv-sig-banner{padding:18px 16px;} } /* ── Intro enhancements ── */ @keyframes rotS{from{transform:translate(-50%,-50%) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(360deg);}} #enter-btn:hover{border-color:rgba(201,168,76,.8)!important;box-shadow:0 0 28px rgba(201,168,76,.2);background:rgba(201,168,76,.06)!important;} /* ══════════════════════════════════════════════════════════ SAMUDRA MANTHAN — Enhanced Sub-Tabs (Devas/Asuras) ══════════════════════════════════════════════════════════ */ /* ── Tab bar at bottom of churning scene ── */ #manthan-tabs{ position:absolute;bottom:0;left:0;right:0;z-index:18; display:flex;justify-content:center;gap:2px; padding:8px 12px 12px; background:linear-gradient(to top,rgba(2,2,4,.95) 60%,transparent); pointer-events:none; } #manthan-tabs>*{pointer-events:auto;} .manthan-tab{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px; text-transform:uppercase;padding:7px 18px; background:none;cursor:pointer;transition:all .3s; touch-action:manipulation;-webkit-tap-highlight-color:transparent; border:1px solid rgba(140,180,200,.1);color:rgba(140,180,200,.3); } .manthan-tab:hover{color:rgba(140,180,200,.6);border-color:rgba(140,180,200,.25);} .manthan-tab.active{color:rgba(220,190,130,.8);border-color:rgba(220,190,130,.3);background:rgba(220,190,130,.05);} .manthan-tab-deva{border-color:rgba(220,190,100,.12);color:rgba(220,190,100,.3);} .manthan-tab-deva:hover,.manthan-tab-deva.active{color:rgba(220,190,100,.8);border-color:rgba(220,190,100,.35);background:rgba(220,190,100,.05);} .manthan-tab-asura{border-color:rgba(200,80,80,.12);color:rgba(200,80,80,.3);} .manthan-tab-asura:hover,.manthan-tab-asura.active{color:rgba(200,100,100,.8);border-color:rgba(200,80,80,.35);background:rgba(200,80,80,.05);} /* ── Content panels for Devas/Asuras ── */ #manthan-content{ position:absolute;inset:0;z-index:22; background:rgba(3,2,4,.97); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); opacity:0;pointer-events:none;visibility:hidden; transition:opacity .4s,visibility 0s .4s; overflow-y:auto;-webkit-overflow-scrolling:touch; } #manthan-content.open{opacity:1;pointer-events:auto;visibility:visible;transition:opacity .4s,visibility 0s;} .mc-close-bar{ position:sticky;top:0;z-index:3;padding:12px 18px; background:rgba(3,2,4,.95);border-bottom:1px solid rgba(201,168,76,.06); display:flex;align-items:center;gap:14px; } .mc-close-btn{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px; text-transform:uppercase;color:var(--muted);background:none;border:none; cursor:pointer;transition:color .2s; } .mc-close-btn:hover{color:var(--gold);} .mc-section-title{ font-family:'Cinzel',serif;font-size:11px;letter-spacing:2px; } .mc-body{padding:24px 22px 60px;max-width:700px;margin:0 auto;} /* ── Being cards (Deva or Asura) ── */ .mc-being{ margin-bottom:8px;border:1px solid rgba(201,168,76,.06); background:rgba(201,168,76,.01);cursor:pointer;transition:all .3s; } .mc-being:hover{border-color:rgba(201,168,76,.15);background:rgba(201,168,76,.03);} .mc-being-head{ padding:16px 18px 14px;display:flex;align-items:center;gap:14px; } .mc-being-glyph{ font-size:24px;flex-shrink:0;width:36px;text-align:center; } .mc-being-info{flex:1;min-width:0;} .mc-being-name{ font-family:'Cinzel',serif;font-size:12px;color:var(--cream); letter-spacing:1px;margin-bottom:2px; } .mc-being-role{ font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:2px; text-transform:uppercase;margin-bottom:4px; } .mc-being-hook{ font-family:'Cormorant Garamond',serif;font-size:13px; font-style:italic;line-height:1.6; } .mc-being-body{ padding:0 18px;max-height:0;overflow:hidden;opacity:0; transition:max-height .5s cubic-bezier(.16,1,.3,1),opacity .3s,padding .3s; } .mc-being.open .mc-being-body{max-height:800px;opacity:1;padding:0 18px 18px;} .mc-being-detail{ font-family:'Cormorant Garamond',serif;font-size:14px; line-height:1.85;color:var(--cream); } .mc-being-detail strong{font-weight:500;} .mc-being-detail em{font-style:italic;} /* Deva theming */ .mc-deva .mc-being-role{color:rgba(220,190,100,.3);} .mc-deva .mc-being-hook{color:rgba(220,190,100,.4);} .mc-deva .mc-being-detail strong{color:rgba(220,190,100,.8);} .mc-deva .mc-being-detail em{color:rgba(220,190,100,.55);} /* Asura theming */ .mc-asura .mc-being-role{color:rgba(200,80,80,.3);} .mc-asura .mc-being-hook{color:rgba(200,100,100,.4);} .mc-asura .mc-being-detail strong{color:rgba(200,100,100,.8);} .mc-asura .mc-being-detail em{color:rgba(200,100,100,.55);} /* ── Insight box ── */ .mc-insight{ margin:16px 0;padding:14px 18px; border-left:2px solid rgba(201,168,76,.1); background:rgba(201,168,76,.02); } .mc-insight-text{ font-family:'Cormorant Garamond',serif;font-size:14px; font-style:italic;color:rgba(208,188,152,.5);line-height:1.75; } @media(max-width:768px){ .mc-being-head{padding:12px 14px 10px;gap:10px;} .mc-being-name{font-size:11px;} .mc-being-detail{font-size:13px;} } /* ══════════════════════════════════════════════════════════ ERA 4: SHIVA-SHAKTI — Divine Union The primal polarity. Consciousness and creative power. Drag them apart to birth the universe. Release — union. ══════════════════════════════════════════════════════════ */ #ss-exp{background:radial-gradient(circle at 50% 45%,rgba(20,10,30,1) 0%,rgba(5,3,10,1) 60%,rgba(0,0,2,1) 100%);} /* The two poles — Shiva (upper/violet) and Shakti (lower/rose-gold) */ .ss-pole{ position:absolute; width:74px;height:74px; z-index:4; touch-action:none;-webkit-tap-highlight-color:transparent; cursor:grab; display:flex;align-items:center;justify-content:center; transform:translate(-50%,-50%); transition:filter .4s ease; } .ss-pole:active{cursor:grabbing;} .ss-pole.dragging{filter:brightness(1.2);} .ss-pole-core{ position:absolute;inset:0; border-radius:50%; pointer-events:none; } .ss-pole-label{ position:absolute; font-family:'Cinzel',serif; font-size:11px;letter-spacing:2px; white-space:nowrap; opacity:.55; pointer-events:none; transition:opacity .4s; } .ss-pole-skt{ position:absolute; font-family:'Noto Sans Devanagari',sans-serif; font-size:15px;letter-spacing:1px; opacity:.38; pointer-events:none; transition:opacity .4s; } #ss-shiva .ss-pole-label{color:rgba(210,195,255,.75);top:-32px;left:50%;transform:translateX(-50%);} #ss-shiva .ss-pole-skt{color:rgba(210,195,255,.45);top:-54px;left:50%;transform:translateX(-50%);} #ss-shakti .ss-pole-label{color:rgba(255,195,160,.75);bottom:-32px;left:50%;transform:translateX(-50%);} #ss-shakti .ss-pole-skt{color:rgba(255,195,160,.45);bottom:-54px;left:50%;transform:translateX(-50%);} /* Separation meter — shows how far from union */ #ss-meter{ position:absolute; left:50%; bottom:118px; transform:translateX(-50%); z-index:6; opacity:0; transition:opacity .5s; pointer-events:none; text-align:center; } #ss-meter.visible{opacity:1;} .ss-meter-bar{ width:160px;height:1px; background:rgba(201,168,76,.1); position:relative; margin:0 auto; } .ss-meter-fill{ position:absolute;left:50%;top:0;height:100%; background:linear-gradient(to right,rgba(210,195,255,.55),rgba(255,195,160,.55)); transform:translateX(-50%); transition:width .08s linear; } .ss-meter-lbl{ font-family:'IBM Plex Mono',monospace; font-size:6px;letter-spacing:3px; color:rgba(201,168,76,.35); text-transform:uppercase; margin-top:8px; } /* Descent text — philosophical phrase that reveals with distance */ #ss-descent{ position:absolute; left:50%;top:50%; transform:translate(-50%,-50%); max-width:440px;width:86%; z-index:3; text-align:center; opacity:0; pointer-events:none; transition:opacity .7s ease; } #ss-descent.visible{opacity:1;} .ss-descent-text{ font-family:'Cormorant Garamond',serif; font-size:clamp(15px,2.4vw,20px); font-style:italic; color:rgba(220,200,180,.6); line-height:1.85; margin-bottom:8px; } .ss-descent-skt{ font-family:'Noto Sans Devanagari',sans-serif; font-size:13px;letter-spacing:.5px; color:rgba(201,168,76,.35); } /* Union flash — cinematic overlay during snap-back */ #ss-flash{ position:absolute;inset:0;z-index:8; pointer-events:none; background:radial-gradient(circle at 50% 50%,rgba(255,230,170,.55) 0%,rgba(240,210,140,.2) 20%,rgba(0,0,0,0) 55%); opacity:0; transition:opacity .6s ease-out; } #ss-flash.firing{opacity:1;} /* Ardhanarishvara reveal — the united form */ #ss-ardhana{ position:absolute; left:50%;top:50%; transform:translate(-50%,-50%); z-index:5; opacity:0; pointer-events:none; transition:opacity 1.2s ease; text-align:center; } #ss-ardhana.visible{opacity:1;pointer-events:auto;cursor:pointer;} .ss-ardhana-glyph{ font-size:clamp(60px,12vw,100px); background:linear-gradient(to right,rgba(210,195,255,.85) 0%,rgba(240,220,180,.95) 50%,rgba(255,195,160,.85) 100%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; line-height:1;margin-bottom:14px; filter:drop-shadow(0 0 22px rgba(240,220,160,.4)); animation:ssArdhanaBreath 4.5s ease-in-out infinite; } @keyframes ssArdhanaBreath{0%,100%{filter:drop-shadow(0 0 22px rgba(240,220,160,.4));transform:scale(1);}50%{filter:drop-shadow(0 0 38px rgba(240,220,160,.7));transform:scale(1.025);}} .ss-ardhana-name{ font-family:'Cinzel',serif; font-size:clamp(14px,2.2vw,18px); letter-spacing:3px; color:rgba(240,220,180,.75); margin-bottom:4px; } .ss-ardhana-skt{ font-family:'Noto Sans Devanagari',sans-serif; font-size:17px; color:rgba(210,195,255,.55); margin-bottom:10px; } .ss-ardhana-sub{ font-family:'Cormorant Garamond',serif; font-size:14px;font-style:italic; color:rgba(220,200,180,.55); line-height:1.7; max-width:340px; margin:0 auto 14px; } .ss-ardhana-hint{ font-family:'IBM Plex Mono',monospace; font-size:6.5px;letter-spacing:3px; color:rgba(201,168,76,.35); text-transform:uppercase; animation:eraHintPulse 3s ease-in-out infinite; } /* Recognition layer — the final "you were never two" moment */ #ss-recognition{ position:absolute; left:50%;top:50%; transform:translate(-50%,-50%); max-width:520px;width:88%; z-index:7; opacity:0; pointer-events:none; transition:opacity 1.6s ease; text-align:center; } #ss-recognition.visible{opacity:1;} .ss-rec-line{ font-family:'Cormorant Garamond',serif; font-style:italic; color:rgba(240,220,180,.85); line-height:1.8; margin-bottom:10px; } .ss-rec-1{font-size:clamp(17px,2.8vw,22px);} .ss-rec-2{font-size:clamp(15px,2.4vw,19px);color:rgba(220,200,180,.65);} .ss-rec-3{font-size:clamp(14px,2.2vw,17px);color:rgba(201,168,76,.55);margin-top:18px;} .ss-rec-reset{ margin-top:26px; background:none; border:1px solid rgba(201,168,76,.2); color:rgba(201,168,76,.55); font-family:'IBM Plex Mono',monospace; font-size:7px;letter-spacing:3px; padding:9px 18px; text-transform:uppercase; cursor:pointer; transition:all .25s; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } .ss-rec-reset:hover{color:var(--gold);border-color:var(--gold);} /* Stage indicator — top center under header */ #ss-stage-name{ position:absolute; top:60px;left:50%; transform:translateX(-50%); z-index:5; font-family:'Cinzel',serif; font-size:11px;letter-spacing:4px; color:rgba(220,200,180,.4); text-transform:uppercase; pointer-events:none; transition:opacity .5s,color .5s; opacity:.8; } @media(max-width:768px){ .ss-pole{width:64px;height:64px;} #ss-shiva .ss-pole-label,#ss-shakti .ss-pole-label{font-size:10px;} #ss-shiva .ss-pole-skt,#ss-shakti .ss-pole-skt{font-size:13px;} #ss-meter{bottom:108px;} .ss-meter-bar{width:130px;} #ss-stage-name{font-size:9px;top:54px;} } /* ══════════════════════════════════════════════════════════ ERA 5: HIRANYAGARBHA — The Golden Womb An 8-act cinematic journey: from pre-cosmic silence to the moment cosmic intelligence first recognizes itself. ══════════════════════════════════════════════════════════ */ #hg-exp{ background: radial-gradient(circle at 50% 42%,rgba(40,26,8,1) 0%,rgba(14,8,3,1) 45%,rgba(3,2,1,1) 100%); } /* Stage progress indicator — row of 8 dots, top center */ #hg-stages{ position:absolute; top:52px;left:50%; transform:translateX(-50%); z-index:5; display:flex;gap:8px; pointer-events:none; } .hg-stage-dot{ width:5px;height:5px;border-radius:50%; background:rgba(201,168,76,.12); transition:all .7s cubic-bezier(.16,1,.3,1); } .hg-stage-dot.done{ background:rgba(240,200,110,.5); box-shadow:0 0 8px rgba(240,200,110,.45); } .hg-stage-dot.current{ background:rgba(255,220,140,.85); box-shadow:0 0 14px rgba(255,220,140,.7),0 0 28px rgba(255,220,140,.35); transform:scale(1.65); } /* Stage label — "Act I · The Silence" */ #hg-stage-label{ position:absolute; top:76px;left:50%; transform:translateX(-50%); z-index:5; font-family:'IBM Plex Mono',monospace; font-size:6.5px;letter-spacing:4px; color:rgba(201,168,76,.38); text-transform:uppercase; pointer-events:none; text-align:center; transition:opacity .5s,color .8s; } /* The primary narrative overlay — poetic text revealing with each act */ #hg-narrative{ position:absolute; left:50%;top:50%; transform:translate(-50%,-50%); max-width:560px;width:88%; z-index:4; text-align:center; pointer-events:none; } .hg-narr-line{ opacity:0; transition:opacity 1.8s cubic-bezier(.16,1,.3,1),transform 1.8s cubic-bezier(.16,1,.3,1); transform:translateY(14px); margin-bottom:14px; } .hg-narr-line.visible{opacity:1;transform:translateY(0);} .hg-narr-skt{ font-family:'Noto Sans Devanagari',sans-serif; font-size:clamp(18px,3vw,26px); color:rgba(255,215,130,.72); letter-spacing:.5px; text-shadow:0 0 22px rgba(255,195,110,.25); } .hg-narr-trans{ font-family:'Cinzel',serif; font-size:clamp(13px,2vw,17px); letter-spacing:3px; color:rgba(240,210,160,.55); text-transform:uppercase; margin-top:2px; } .hg-narr-poetry{ font-family:'Cormorant Garamond',serif; font-size:clamp(16px,2.6vw,22px); font-style:italic; color:rgba(225,200,160,.78); line-height:1.85; } .hg-narr-whisper{ font-family:'Cormorant Garamond',serif; font-size:clamp(13px,2vw,17px); color:rgba(201,168,76,.48); line-height:1.8; letter-spacing:.3px; } .hg-narr-source{ font-family:'IBM Plex Mono',monospace; font-size:7px;letter-spacing:3px; color:rgba(201,168,76,.28); text-transform:uppercase; margin-top:8px; } /* Advance button — the user's steering wheel through creation */ #hg-advance{ position:absolute; left:50%;bottom:112px; transform:translateX(-50%); z-index:7; background:rgba(8,5,2,.6); border:1px solid rgba(240,210,140,.25); color:rgba(240,210,140,.65); font-family:'IBM Plex Mono',monospace; font-size:8px;letter-spacing:4px; padding:12px 22px; text-transform:uppercase; cursor:pointer; transition:all .3s; touch-action:manipulation;-webkit-tap-highlight-color:transparent; border-radius:1px; backdrop-filter:blur(4px); opacity:0; } #hg-advance.visible{opacity:1;} #hg-advance:hover{ color:rgba(255,230,170,.95); border-color:rgba(255,230,170,.6); box-shadow:0 0 22px rgba(255,220,140,.18); } #hg-advance:active{transform:translateX(-50%) scale(.97);} .hg-adv-arrow{ display:inline-block; margin-left:6px; transition:transform .3s; } #hg-advance:hover .hg-adv-arrow{transform:translateX(3px);} /* Rewind — bottom-left subtle */ #hg-rewind{ position:absolute; left:18px;bottom:62px; z-index:7; background:none; border:1px solid rgba(107,90,62,.2); color:rgba(201,168,76,.35); font-family:'IBM Plex Mono',monospace; font-size:7px;letter-spacing:2px; padding:6px 12px; text-transform:uppercase; cursor:pointer; transition:all .25s; touch-action:manipulation;-webkit-tap-highlight-color:transparent; opacity:0; } #hg-rewind.visible{opacity:.85;} #hg-rewind:hover{color:var(--gold);border-color:var(--gold);} /* Final recognition block — appears after act 8 */ #hg-recognition{ position:absolute; left:50%;top:50%; transform:translate(-50%,-50%); max-width:600px;width:90%; z-index:8; text-align:center; opacity:0; pointer-events:none; transition:opacity 2s ease; padding:28px 20px; } #hg-recognition.visible{opacity:1;pointer-events:auto;} .hg-rec-heading{ font-family:'Cinzel',serif; font-size:clamp(14px,2.2vw,18px); letter-spacing:4px; color:rgba(255,220,140,.75); text-transform:uppercase; margin-bottom:22px; } .hg-rec-body{ font-family:'Cormorant Garamond',serif; font-size:clamp(16px,2.6vw,21px); font-style:italic; color:rgba(230,210,175,.88); line-height:1.95; margin-bottom:14px; } .hg-rec-mahavakya{ margin-top:24px;padding:18px 0; border-top:1px solid rgba(201,168,76,.12); border-bottom:1px solid rgba(201,168,76,.12); } .hg-rec-skt{ font-family:'Noto Sans Devanagari',sans-serif; font-size:clamp(20px,3.2vw,28px); color:rgba(255,220,140,.82); letter-spacing:1px; margin-bottom:6px; text-shadow:0 0 24px rgba(255,195,110,.3); } .hg-rec-eng{ font-family:'Cormorant Garamond',serif; font-size:clamp(14px,2.2vw,18px); font-style:italic; color:rgba(220,200,170,.6); } .hg-rec-source{ font-family:'IBM Plex Mono',monospace; font-size:6.5px;letter-spacing:3px; color:rgba(201,168,76,.35); text-transform:uppercase; margin-top:8px; } .hg-rec-btns{ margin-top:26px; display:flex;gap:10px;justify-content:center;flex-wrap:wrap; } .hg-rec-btn{ background:none; border:1px solid rgba(201,168,76,.3); color:rgba(201,168,76,.65); font-family:'IBM Plex Mono',monospace; font-size:7px;letter-spacing:3px; padding:10px 18px; text-transform:uppercase; cursor:pointer; transition:all .25s; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } .hg-rec-btn:hover{color:var(--gold);border-color:var(--gold);background:rgba(201,168,76,.05);} /* Hum ring overlay — sonic pulses in act 5 (drawn on canvas; this is the wordmark) */ #hg-hum-label{ position:absolute; left:50%;bottom:155px; transform:translateX(-50%); z-index:4; font-family:'IBM Plex Mono',monospace; font-size:7px;letter-spacing:4px; color:rgba(255,220,140,.35); text-transform:uppercase; pointer-events:none; opacity:0; transition:opacity .8s; text-align:center; } #hg-hum-label.visible{opacity:1;} /* Mandala-ring zoom anchor — act 7 badge */ #hg-tattva-names{ position:absolute; left:50%;top:50%; transform:translate(-50%,-50%); z-index:3; pointer-events:none; opacity:0; transition:opacity 1.2s ease; width:100%;height:100%; } #hg-tattva-names.visible{opacity:1;} .hg-tattva-label{ position:absolute; font-family:'Noto Sans Devanagari',sans-serif; font-size:11px; color:rgba(255,220,140,.55); letter-spacing:.5px; white-space:nowrap; transform:translate(-50%,-50%); text-shadow:0 0 10px rgba(255,195,110,.35); } .hg-tattva-label-en{ position:absolute; font-family:'IBM Plex Mono',monospace; font-size:6px;letter-spacing:2px; color:rgba(201,168,76,.4); text-transform:uppercase; white-space:nowrap; transform:translate(-50%,-50%); } /* Mobile */ @media(max-width:768px){ #hg-stages{top:46px;} #hg-stage-label{top:66px;} #hg-advance{bottom:108px;font-size:7px;padding:10px 16px;} #hg-rewind{bottom:58px;font-size:6px;} .hg-rec-heading{font-size:11px;letter-spacing:3px;} .hg-tattva-label{font-size:9px;} .hg-tattva-label-en{display:none;} } /* ══════════════════════════════════════════════════════════ ERA 6 — VIRĀṬ · The Cosmic Body A 7-act cinematic journey: universe as living body. ══════════════════════════════════════════════════════════ */ #virat-exp{ background: radial-gradient(ellipse at 50% 50%, rgba(28,20,48,1) 0%, rgba(10,8,20,1) 45%, rgba(2,2,4,1) 100%); } /* Stage progress indicator — row of 7 dots, top center */ #vr-stages{ position:absolute; top:52px; left:50%; transform:translateX(-50%); z-index:5; display:flex; gap:9px; pointer-events:none; } .vr-stage-dot{ width:5px; height:5px; border-radius:50%; background:rgba(201,168,76,.12); transition:all .7s cubic-bezier(.16,1,.3,1); } .vr-stage-dot.done{ background:rgba(240,200,110,.5); box-shadow:0 0 8px rgba(240,200,110,.45); } .vr-stage-dot.current{ background:rgba(255,220,140,.9); box-shadow:0 0 14px rgba(255,220,140,.75),0 0 28px rgba(255,220,140,.4); transform:scale(1.7); } /* Stage label */ #vr-stage-label{ position:absolute; top:76px; left:50%; transform:translateX(-50%); z-index:5; font-family:'IBM Plex Mono', monospace; font-size:7px; letter-spacing:4.5px; color:rgba(220,195,130,.55); text-transform:uppercase; white-space:nowrap; transition:opacity .9s; pointer-events:none; text-shadow:0 0 14px rgba(200,160,90,.3); } /* Primary narrative overlay — fades between acts */ #vr-narrative{ position:absolute; left:50%; top:auto; bottom:29%; transform:translateX(-50%); max-width:620px; width:88%; z-index:6; text-align:center; font-family:'Cormorant Garamond', serif; font-size:clamp(15px,2.4vw,20px); font-style:italic; line-height:1.85; color:rgba(235,218,185,.82); opacity:0; pointer-events:none; transition:opacity 1.4s ease; text-shadow:0 2px 22px rgba(0,0,0,.9); } #vr-narrative.visible{opacity:1;} #vr-narrative strong{ color:rgba(255,225,150,.95); font-weight:500; font-style:normal; } #vr-narrative em{ color:rgba(220,190,255,.85); font-style:italic; } /* Purusha Sukta correspondences (Act 3) — floating body-part labels */ #vr-correspondences{ position:absolute; inset:0; z-index:4; pointer-events:none; opacity:0; transition:opacity 1.4s; } #vr-correspondences.visible{opacity:1;} .vr-corr-label{ position:absolute; font-family:'IBM Plex Mono', monospace; font-size:7.5px; letter-spacing:2.5px; color:rgba(220,195,130,.55); text-transform:uppercase; white-space:nowrap; transform:translate(-50%,-50%); transition:opacity .9s, color .5s; text-shadow:0 0 14px rgba(200,160,90,.4); } .vr-corr-label .vr-corr-skt{ display:block; font-family:'Noto Sans Devanagari', sans-serif; font-size:10px; color:rgba(255,225,150,.75); letter-spacing:.5px; margin-bottom:3px; text-shadow:0 0 12px rgba(255,200,120,.35); } .vr-corr-line{ position:absolute; height:1px; background:linear-gradient(90deg, transparent, rgba(220,195,130,.35), transparent); transform-origin:left center; pointer-events:none; opacity:.55; } /* Sanskrit verse (Acts 2, 6) */ #vr-verse{ position:absolute; top:18%; left:50%; transform:translateX(-50%); max-width:620px; width:88%; z-index:6; text-align:center; opacity:0; pointer-events:none; transition:opacity 1.6s ease; } #vr-verse.visible{opacity:1;} .vr-verse-skt{ font-family:'Noto Sans Devanagari', sans-serif; font-size:clamp(13px,2.1vw,17px); color:rgba(255,220,140,.78); line-height:1.65; letter-spacing:.5px; margin-bottom:6px; text-shadow:0 0 18px rgba(255,195,110,.25); } .vr-verse-eng{ font-family:'Cormorant Garamond', serif; font-size:clamp(12px,2vw,15px); font-style:italic; color:rgba(220,200,170,.55); } .vr-verse-src{ font-family:'IBM Plex Mono', monospace; font-size:6px; letter-spacing:3px; color:rgba(201,168,76,.35); text-transform:uppercase; margin-top:5px; } /* Vishvarūpa central glyph (Act 6) */ #vr-vishvarupa{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.8); z-index:3; pointer-events:none; opacity:0; transition:opacity 2.2s, transform 2.2s cubic-bezier(.16,1,.3,1); font-family:'Noto Sans Devanagari', sans-serif; font-size:clamp(80px,14vw,160px); color:rgba(255,215,140,.18); text-shadow: 0 0 40px rgba(255,200,120,.4), 0 0 80px rgba(200,140,60,.25), 0 0 140px rgba(160,100,40,.2); letter-spacing:-5px; } #vr-vishvarupa.visible{ opacity:1; transform:translate(-50%,-50%) scale(1); } /* Advance button */ #vr-advance{ position:absolute; left:50%; bottom:96px; transform:translateX(-50%); background:rgba(255,220,140,.04); border:1px solid rgba(255,220,140,.28); color:rgba(255,220,140,.85); font-family:'IBM Plex Mono', monospace; font-size:7.5px; letter-spacing:3.5px; padding:12px 22px; text-transform:uppercase; cursor:pointer; z-index:7; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); opacity:0; transition:all .35s, opacity 1.2s; touch-action:manipulation; -webkit-tap-highlight-color:transparent; border-radius:2px; } .vr-adv-arrow{ display:inline-block; margin-left:10px; transition:transform .35s; } #vr-advance.visible{opacity:1;} #vr-advance:hover{ color:#fff; border-color:rgba(255,220,140,.55); background:rgba(255,220,140,.09); text-shadow:0 0 12px rgba(255,220,140,.5); } #vr-advance:active{transform:translateX(-50%) scale(.97);} #vr-advance:hover .vr-adv-arrow{transform:translateX(3px);} /* Rewind button */ #vr-rewind{ position:absolute; left:50%; bottom:48px; transform:translateX(-50%); background:none; border:none; color:rgba(201,168,76,.4); font-family:'IBM Plex Mono', monospace; font-size:6.5px; letter-spacing:3px; text-transform:uppercase; cursor:pointer; z-index:7; opacity:0; transition:all .35s, opacity 1.2s; touch-action:manipulation; -webkit-tap-highlight-color:transparent; } #vr-rewind.visible{opacity:.85;} #vr-rewind:hover{color:var(--gold);} /* Recognition block (final act 7) */ #vr-recognition{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); max-width:620px; width:90%; z-index:8; text-align:center; opacity:0; pointer-events:none; transition:opacity 2s ease; padding:28px 20px; } #vr-recognition.visible{opacity:1; pointer-events:auto;} .vr-rec-heading{ font-family:'Cinzel', serif; font-size:clamp(14px,2.2vw,18px); letter-spacing:4px; color:rgba(255,220,140,.78); text-transform:uppercase; margin-bottom:22px; } .vr-rec-body{ font-family:'Cormorant Garamond', serif; font-size:clamp(16px,2.6vw,21px); font-style:italic; color:rgba(230,212,175,.88); line-height:1.95; margin-bottom:14px; } .vr-rec-body em{color:rgba(220,190,255,.9);} .vr-rec-body strong{color:rgba(255,225,150,.95); font-weight:500; font-style:normal;} .vr-rec-mahavakya{ margin-top:24px; padding:18px 0; border-top:1px solid rgba(201,168,76,.14); border-bottom:1px solid rgba(201,168,76,.14); } .vr-rec-skt{ font-family:'Noto Sans Devanagari', sans-serif; font-size:clamp(20px,3.2vw,28px); color:rgba(255,220,140,.85); letter-spacing:1px; margin-bottom:6px; text-shadow:0 0 28px rgba(255,195,110,.32); } .vr-rec-eng{ font-family:'Cormorant Garamond', serif; font-size:clamp(14px,2.2vw,18px); font-style:italic; color:rgba(220,200,170,.62); } .vr-rec-source{ font-family:'IBM Plex Mono', monospace; font-size:6.5px; letter-spacing:3px; color:rgba(201,168,76,.35); text-transform:uppercase; margin-top:8px; } .vr-rec-btns{ margin-top:26px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; } .vr-rec-btn{ background:none; border:1px solid rgba(201,168,76,.3); color:rgba(201,168,76,.68); font-family:'IBM Plex Mono', monospace; font-size:7px; letter-spacing:3px; padding:10px 18px; text-transform:uppercase; cursor:pointer; transition:all .25s; touch-action:manipulation; -webkit-tap-highlight-color:transparent; } .vr-rec-btn:hover{ color:var(--gold); border-color:var(--gold); background:rgba(201,168,76,.05); } /* Mobile adjustments */ @media(max-width:768px){ #vr-stages{top:46px;} #vr-stage-label{top:66px;} #vr-advance{bottom:108px; font-size:7px; padding:10px 16px;} #vr-rewind{bottom:58px; font-size:6px;} .vr-rec-heading{font-size:11px; letter-spacing:3px;} #vr-narrative{bottom:32%;} #vr-verse{top:14%;} .vr-corr-label{font-size:7px; letter-spacing:1.8px;} .vr-corr-label .vr-corr-skt{font-size:9px;} } /* ══════════════════════════════════════════════════════════ ERA 8 — SVĀYAMBHUVA MANVANTARA · Seven Seers Interactive cosmic night sky · Saptarishi Mandala ══════════════════════════════════════════════════════════ */ #svay-exp{ background: radial-gradient(ellipse at 50% 30%, rgba(20,22,44,1) 0%, rgba(8,10,20,1) 55%, rgba(2,2,6,1) 100%); } /* Stage progress indicator — 6 dots */ #sv-stages{ position:absolute; top:52px; left:50%; transform:translateX(-50%); z-index:5; display:flex; gap:9px; pointer-events:none; } .sv-stage-dot{ width:5px; height:5px; border-radius:50%; background:rgba(201,168,76,.12); transition:all .7s cubic-bezier(.16,1,.3,1); } .sv-stage-dot.done{ background:rgba(240,210,130,.5); box-shadow:0 0 8px rgba(240,210,130,.45); } .sv-stage-dot.current{ background:rgba(255,230,160,.92); box-shadow:0 0 14px rgba(255,230,160,.75),0 0 28px rgba(255,230,160,.4); transform:scale(1.7); } #sv-stage-label{ position:absolute; top:76px; left:50%; transform:translateX(-50%); z-index:5; font-family:'IBM Plex Mono', monospace; font-size:7px; letter-spacing:4.5px; color:rgba(220,210,170,.55); text-transform:uppercase; white-space:nowrap; transition:opacity .9s; pointer-events:none; text-shadow:0 0 14px rgba(200,180,110,.3); } /* Narrative text */ #sv-narrative{ position:absolute; left:50%; bottom:29%; transform:translateX(-50%); max-width:620px; width:88%; z-index:6; text-align:center; font-family:'Cormorant Garamond', serif; font-size:clamp(15px,2.4vw,20px); font-style:italic; line-height:1.85; color:rgba(230,220,195,.82); opacity:0; pointer-events:none; transition:opacity 1.4s ease; text-shadow:0 2px 22px rgba(0,0,0,.9); } #sv-narrative.visible{opacity:1;} #sv-narrative strong{color:rgba(255,235,170,.95); font-weight:500; font-style:normal;} #sv-narrative em{color:rgba(200,215,255,.85);} /* Sanskrit verse */ #sv-verse{ position:absolute; top:18%; left:50%; transform:translateX(-50%); max-width:620px; width:88%; z-index:6; text-align:center; opacity:0; pointer-events:none; transition:opacity 1.6s ease; } #sv-verse.visible{opacity:1;} .sv-verse-skt{ font-family:'Noto Sans Devanagari', sans-serif; font-size:clamp(13px,2.1vw,17px); color:rgba(255,230,160,.8); line-height:1.65; letter-spacing:.5px; margin-bottom:6px; text-shadow:0 0 18px rgba(255,215,130,.25); } .sv-verse-eng{ font-family:'Cormorant Garamond', serif; font-size:clamp(12px,2vw,15px); font-style:italic; color:rgba(220,210,170,.55); } .sv-verse-src{ font-family:'IBM Plex Mono', monospace; font-size:6px; letter-spacing:3px; color:rgba(201,168,76,.35); text-transform:uppercase; margin-top:5px; } /* Seer counter (Act 3) */ #sv-counter{ position:absolute; top:108px; left:50%; transform:translateX(-50%); z-index:6; font-family:'IBM Plex Mono', monospace; font-size:7px; letter-spacing:3px; color:rgba(220,195,130,.55); text-transform:uppercase; pointer-events:none; opacity:0; transition:opacity 1s; } #sv-counter.visible{opacity:1;} /* Seer card — floating info when a star is awakened */ #sv-seer-card{ position:absolute; left:50%; bottom:auto; top:44%; transform:translate(-50%,-50%) scale(.92); z-index:7; width:min(330px,86vw); background:rgba(20,15,30,.78); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid rgba(255,220,140,.2); border-radius:4px; padding:22px 22px 20px; text-align:center; opacity:0; pointer-events:none; transition:opacity .55s, transform .55s cubic-bezier(.16,1,.3,1); box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 40px rgba(255,220,140,.1); } #sv-seer-card.visible{opacity:1; transform:translate(-50%,-50%) scale(1); pointer-events:auto;} .sv-seer-skt{ font-family:'Noto Sans Devanagari', sans-serif; font-size:26px; color:rgba(255,230,160,.9); letter-spacing:1px; margin-bottom:4px; text-shadow:0 0 22px rgba(255,210,130,.35); } .sv-seer-roman{ font-family:'Cinzel', serif; font-size:13px; letter-spacing:5px; color:rgba(230,215,175,.75); text-transform:uppercase; margin-bottom:10px; } .sv-seer-desc{ font-family:'Cormorant Garamond', serif; font-size:13.5px; font-style:italic; line-height:1.6; color:rgba(220,205,170,.72); margin-bottom:10px; } .sv-seer-lineage{ font-family:'IBM Plex Mono', monospace; font-size:6.5px; letter-spacing:2.5px; color:rgba(200,170,110,.55); text-transform:uppercase; padding-top:10px; border-top:1px solid rgba(255,220,140,.12); } .sv-seer-chakra{ display:inline-block; margin-top:4px; color:rgba(200,180,220,.7); } /* Chakra labels (Act 5) */ #sv-chakra-labels{ position:absolute; inset:0; z-index:4; pointer-events:none; opacity:0; transition:opacity 1.4s; } #sv-chakra-labels.visible{opacity:1;} .sv-chakra-label{ position:absolute; font-family:'IBM Plex Mono', monospace; font-size:7px; letter-spacing:2.5px; color:rgba(220,195,130,.55); text-transform:uppercase; white-space:nowrap; transform:translate(-50%,-50%); transition:opacity .9s; text-shadow:0 0 14px rgba(200,160,90,.4); } .sv-chakra-label .sv-chakra-skt{ display:block; font-family:'Noto Sans Devanagari', sans-serif; font-size:10px; color:rgba(255,225,150,.72); letter-spacing:.5px; margin-bottom:3px; } /* Advance button */ #sv-advance{ position:absolute; left:50%; bottom:96px; transform:translateX(-50%); background:rgba(255,230,160,.04); border:1px solid rgba(255,230,160,.28); color:rgba(255,230,160,.88); font-family:'IBM Plex Mono', monospace; font-size:7.5px; letter-spacing:3.5px; padding:12px 22px; text-transform:uppercase; cursor:pointer; z-index:7; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); opacity:0; transition:all .35s, opacity 1.2s; touch-action:manipulation; -webkit-tap-highlight-color:transparent; border-radius:2px; } .sv-adv-arrow{display:inline-block; margin-left:10px; transition:transform .35s;} #sv-advance.visible{opacity:1;} #sv-advance:hover{color:#fff; border-color:rgba(255,230,160,.55); background:rgba(255,230,160,.09); text-shadow:0 0 12px rgba(255,230,160,.5);} #sv-advance:active{transform:translateX(-50%) scale(.97);} #sv-advance:hover .sv-adv-arrow{transform:translateX(3px);} /* Rewind button */ #sv-rewind{ position:absolute; left:50%; bottom:48px; transform:translateX(-50%); background:none; border:none; color:rgba(201,168,76,.4); font-family:'IBM Plex Mono', monospace; font-size:6.5px; letter-spacing:3px; text-transform:uppercase; cursor:pointer; z-index:7; opacity:0; transition:all .35s, opacity 1.2s; touch-action:manipulation; -webkit-tap-highlight-color:transparent; } #sv-rewind.visible{opacity:.85;} #sv-rewind:hover{color:var(--gold);} /* Recognition block */ #sv-recognition{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); max-width:620px; width:90%; z-index:8; text-align:center; opacity:0; pointer-events:none; transition:opacity 2s ease; padding:28px 20px; } #sv-recognition.visible{opacity:1; pointer-events:auto;} .sv-rec-heading{ font-family:'Cinzel', serif; font-size:clamp(14px,2.2vw,18px); letter-spacing:4px; color:rgba(255,230,160,.8); text-transform:uppercase; margin-bottom:22px; } .sv-rec-body{ font-family:'Cormorant Garamond', serif; font-size:clamp(16px,2.6vw,21px); font-style:italic; color:rgba(232,216,180,.88); line-height:1.95; margin-bottom:14px; } .sv-rec-body em{color:rgba(210,220,255,.9);} .sv-rec-body strong{color:rgba(255,230,160,.95); font-weight:500; font-style:normal;} .sv-rec-mahavakya{ margin-top:24px; padding:18px 0; border-top:1px solid rgba(201,168,76,.14); border-bottom:1px solid rgba(201,168,76,.14); } .sv-rec-skt{ font-family:'Noto Sans Devanagari', sans-serif; font-size:clamp(20px,3.2vw,28px); color:rgba(255,230,160,.88); letter-spacing:1px; margin-bottom:6px; text-shadow:0 0 28px rgba(255,215,130,.32); } .sv-rec-eng{ font-family:'Cormorant Garamond', serif; font-size:clamp(14px,2.2vw,18px); font-style:italic; color:rgba(220,205,170,.62); } .sv-rec-source{ font-family:'IBM Plex Mono', monospace; font-size:6.5px; letter-spacing:3px; color:rgba(201,168,76,.35); text-transform:uppercase; margin-top:8px; } .sv-rec-btns{ margin-top:26px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; } .sv-rec-btn{ background:none; border:1px solid rgba(201,168,76,.3); color:rgba(201,168,76,.68); font-family:'IBM Plex Mono', monospace; font-size:7px; letter-spacing:3px; padding:10px 18px; text-transform:uppercase; cursor:pointer; transition:all .25s; touch-action:manipulation; -webkit-tap-highlight-color:transparent; } .sv-rec-btn:hover{color:var(--gold); border-color:var(--gold); background:rgba(201,168,76,.05);} /* Mobile */ @media(max-width:768px){ #sv-stages{top:46px;} #sv-stage-label{top:66px;} #sv-counter{top:96px; font-size:6.5px;} #sv-advance{bottom:108px; font-size:7px; padding:10px 16px;} #sv-rewind{bottom:58px; font-size:6px;} .sv-rec-heading{font-size:11px; letter-spacing:3px;} #sv-narrative{bottom:32%;} #sv-verse{top:13%;} .sv-seer-skt{font-size:22px;} .sv-seer-roman{font-size:11px; letter-spacing:4px;} .sv-chakra-label{font-size:6.5px; letter-spacing:2px;} .sv-chakra-label .sv-chakra-skt{font-size:9px;} } /* ══════════════════════════════════════════════════════════ ERA 9 — MATSYA · The Great Flood · First Avatar 9-act cinematic ocean experience ══════════════════════════════════════════════════════════ */ #matsya-exp{ background: radial-gradient(ellipse at 50% 25%, rgba(8,20,42,1) 0%, rgba(4,10,22,1) 50%, rgba(1,3,8,1) 100%); } /* Stage dots (9) */ #mt-stages{ position:absolute; top:52px; left:50%; transform:translateX(-50%); z-index:5; display:flex; gap:7px; pointer-events:none; } .mt-stage-dot{ width:5px; height:5px; border-radius:50%; background:rgba(120,180,220,.14); transition:all .7s cubic-bezier(.16,1,.3,1); } .mt-stage-dot.done{ background:rgba(130,200,245,.5); box-shadow:0 0 8px rgba(130,200,245,.45); } .mt-stage-dot.current{ background:rgba(180,230,255,.95); box-shadow:0 0 14px rgba(180,230,255,.75),0 0 28px rgba(130,200,245,.4); transform:scale(1.7); } #mt-stage-label{ position:absolute; top:76px; left:50%; transform:translateX(-50%); z-index:5; font-family:'IBM Plex Mono', monospace; font-size:7px; letter-spacing:4.5px; color:rgba(180,210,240,.55); text-transform:uppercase; white-space:nowrap; transition:opacity .9s; pointer-events:none; text-shadow:0 0 14px rgba(120,180,220,.3); } /* Narrative */ #mt-narrative{ position:absolute; left:50%; bottom:29%; transform:translateX(-50%); max-width:640px; width:88%; z-index:6; text-align:center; font-family:'Cormorant Garamond', serif; font-size:clamp(15px,2.4vw,20px); font-style:italic; line-height:1.85; color:rgba(230,238,248,.86); opacity:0; pointer-events:none; transition:opacity 1.4s ease; text-shadow:0 2px 22px rgba(0,0,0,.9); } #mt-narrative.visible{opacity:1;} #mt-narrative strong{color:rgba(200,230,255,.98); font-weight:500; font-style:normal;} #mt-narrative em{color:rgba(255,215,150,.9);} /* Verse */ #mt-verse{ position:absolute; top:18%; left:50%; transform:translateX(-50%); max-width:640px; width:88%; z-index:6; text-align:center; opacity:0; pointer-events:none; transition:opacity 1.6s ease; } #mt-verse.visible{opacity:1;} .mt-verse-skt{ font-family:'Noto Sans Devanagari', sans-serif; font-size:clamp(13px,2.1vw,17px); color:rgba(200,230,255,.82); line-height:1.65; letter-spacing:.5px; margin-bottom:6px; text-shadow:0 0 18px rgba(120,180,220,.35); } .mt-verse-eng{ font-family:'Cormorant Garamond', serif; font-size:clamp(12px,2vw,15px); font-style:italic; color:rgba(210,220,240,.58); } .mt-verse-src{ font-family:'IBM Plex Mono', monospace; font-size:6px; letter-spacing:3px; color:rgba(150,180,210,.38); text-transform:uppercase; margin-top:5px; } /* Growth label + scale (Act 1) */ #mt-growth-label{ position:absolute; top:108px; left:50%; transform:translateX(-50%); z-index:6; font-family:'IBM Plex Mono', monospace; font-size:7px; letter-spacing:3px; color:rgba(180,210,240,.5); text-transform:uppercase; pointer-events:none; opacity:0; transition:opacity 1s; } #mt-growth-label.visible{opacity:1;} #mt-growth-scale{ position:absolute; top:126px; left:50%; transform:translateX(-50%); z-index:6; font-family:'Cormorant Garamond', serif; font-style:italic; font-size:13px; color:rgba(200,230,255,.75); pointer-events:none; opacity:0; transition:opacity .8s; text-shadow:0 0 10px rgba(100,150,200,.3); } #mt-growth-scale.visible{opacity:1;} /* Steering hint (Act 6) */ #mt-steer-hint{ position:absolute; bottom:155px; left:50%; transform:translateX(-50%); z-index:6; font-family:'IBM Plex Mono', monospace; font-size:7px; letter-spacing:3px; color:rgba(200,230,255,.55); text-transform:uppercase; pointer-events:none; opacity:0; transition:opacity 1s; } #mt-steer-hint.visible{opacity:1;} /* Veda counter (Act 8) */ #mt-vedas-counter{ position:absolute; top:108px; left:50%; transform:translateX(-50%); z-index:6; font-family:'IBM Plex Mono', monospace; font-size:7px; letter-spacing:3px; color:rgba(255,220,140,.62); text-transform:uppercase; pointer-events:none; opacity:0; transition:opacity 1s; text-shadow:0 0 10px rgba(255,210,130,.3); } #mt-vedas-counter.visible{opacity:1;} /* Advance button */ #mt-advance{ position:absolute; left:50%; bottom:96px; transform:translateX(-50%); background:rgba(180,220,255,.04); border:1px solid rgba(180,220,255,.30); color:rgba(210,235,255,.9); font-family:'IBM Plex Mono', monospace; font-size:7.5px; letter-spacing:3.5px; padding:12px 22px; text-transform:uppercase; cursor:pointer; z-index:7; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); opacity:0; transition:all .35s, opacity 1.2s; touch-action:manipulation; -webkit-tap-highlight-color:transparent; border-radius:2px; } .mt-adv-arrow{display:inline-block; margin-left:10px; transition:transform .35s;} #mt-advance.visible{opacity:1;} #mt-advance:hover{color:#fff; border-color:rgba(180,220,255,.6); background:rgba(180,220,255,.09); text-shadow:0 0 12px rgba(180,220,255,.5);} #mt-advance:active{transform:translateX(-50%) scale(.97);} #mt-advance:hover .mt-adv-arrow{transform:translateX(3px);} /* Rewind button */ #mt-rewind{ position:absolute; left:50%; bottom:48px; transform:translateX(-50%); background:none; border:none; color:rgba(150,180,210,.4); font-family:'IBM Plex Mono', monospace; font-size:6.5px; letter-spacing:3px; text-transform:uppercase; cursor:pointer; z-index:7; opacity:0; transition:all .35s, opacity 1.2s; touch-action:manipulation; -webkit-tap-highlight-color:transparent; } #mt-rewind.visible{opacity:.85;} #mt-rewind:hover{color:var(--gold);} /* Recognition block */ #mt-recognition{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); max-width:640px; width:90%; z-index:8; text-align:center; opacity:0; pointer-events:none; transition:opacity 2s ease; padding:28px 20px; } #mt-recognition.visible{opacity:1; pointer-events:auto;} .mt-rec-heading{ font-family:'Cinzel', serif; font-size:clamp(14px,2.2vw,18px); letter-spacing:4px; color:rgba(200,230,255,.85); text-transform:uppercase; margin-bottom:22px; } .mt-rec-body{ font-family:'Cormorant Garamond', serif; font-size:clamp(16px,2.6vw,21px); font-style:italic; color:rgba(232,240,250,.88); line-height:1.95; margin-bottom:14px; } .mt-rec-body em{color:rgba(255,215,150,.92);} .mt-rec-body strong{color:rgba(200,230,255,.98); font-weight:500; font-style:normal;} .mt-rec-mahavakya{ margin-top:24px; padding:18px 0; border-top:1px solid rgba(180,220,255,.18); border-bottom:1px solid rgba(180,220,255,.18); } .mt-rec-skt{ font-family:'Noto Sans Devanagari', sans-serif; font-size:clamp(20px,3.2vw,28px); color:rgba(255,230,160,.88); letter-spacing:1px; margin-bottom:6px; text-shadow:0 0 28px rgba(255,215,130,.35); } .mt-rec-eng{ font-family:'Cormorant Garamond', serif; font-size:clamp(14px,2.2vw,18px); font-style:italic; color:rgba(220,230,245,.65); } .mt-rec-source{ font-family:'IBM Plex Mono', monospace; font-size:6.5px; letter-spacing:3px; color:rgba(150,180,210,.38); text-transform:uppercase; margin-top:8px; } .mt-rec-btns{ margin-top:26px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; } .mt-rec-btn{ background:none; border:1px solid rgba(180,220,255,.32); color:rgba(200,230,255,.72); font-family:'IBM Plex Mono', monospace; font-size:7px; letter-spacing:3px; padding:10px 18px; text-transform:uppercase; cursor:pointer; transition:all .25s; touch-action:manipulation; -webkit-tap-highlight-color:transparent; } .mt-rec-btn:hover{color:#fff; border-color:rgba(200,230,255,.7); background:rgba(180,220,255,.06);} /* Mobile */ @media(max-width:768px){ #mt-stages{top:46px; gap:6px;} .mt-stage-dot{width:4px; height:4px;} #mt-stage-label{top:66px;} #mt-growth-label,#mt-vedas-counter{top:96px; font-size:6.5px;} #mt-growth-scale{top:112px; font-size:12px;} #mt-advance{bottom:108px; font-size:7px; padding:10px 16px;} #mt-rewind{bottom:58px; font-size:6px;} .mt-rec-heading{font-size:11px; letter-spacing:3px;} #mt-narrative{bottom:32%;} #mt-verse{top:14%;} #mt-steer-hint{bottom:168px; font-size:6.5px;} } /* ══════════════════════════════════════════════════════════ ABOUT · Updates Tab — Build Log in Rahul's voice ══════════════════════════════════════════════════════════ */ .ab-updates{ max-width:720px; margin:0 auto; padding:8px 4px 40px; color:rgba(220,210,180,.9); } .ab-up-header{ text-align:center; padding:4px 8px 28px; margin-bottom:22px; border-bottom:1px solid rgba(201,168,76,.1); } .ab-up-eyebrow{ font-family:'IBM Plex Mono', monospace; font-size:7px; letter-spacing:5px; color:rgba(201,168,76,.55); text-transform:uppercase; margin-bottom:12px; } .ab-up-head{ font-family:'Cinzel', serif; font-size:clamp(20px, 3.4vw, 30px); letter-spacing:2px; color:rgba(255,230,170,.95); margin-bottom:12px; text-shadow:0 0 22px rgba(255,210,130,.18); } .ab-up-lede{ font-family:'Cormorant Garamond', serif; font-size:clamp(14px, 2.1vw, 17px); font-style:italic; color:rgba(215,205,180,.72); line-height:1.7; max-width:560px; margin:0 auto 22px; } .ab-up-lede strong{ font-style:normal; color:rgba(255,225,160,.95); font-weight:500; } .ab-up-stats{ display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border:1px solid rgba(201,168,76,.12); border-radius:2px; background:rgba(201,168,76,.03); } .ab-up-stat{text-align:center;} .ab-up-stat-n{ font-family:'Cinzel', serif; font-size:17px; color:rgba(255,230,160,.9); letter-spacing:1px; line-height:1; } .ab-up-stat-l{ font-family:'IBM Plex Mono', monospace; font-size:6px; letter-spacing:2px; color:rgba(201,168,76,.55); text-transform:uppercase; margin-top:4px; } .ab-up-stat-sep{ color:rgba(201,168,76,.3); font-size:14px; padding:0 2px; } /* Timeline */ .ab-up-timeline{ position:relative; padding-left:8px; } .ab-up-timeline::before{ content:''; position:absolute; left:19px; top:6px; bottom:6px; width:1px; background:linear-gradient(to bottom, rgba(201,168,76,0) 0%, rgba(201,168,76,.18) 8%, rgba(201,168,76,.18) 92%, rgba(201,168,76,0) 100%); } .ab-up-item{ display:flex; gap:16px; padding:14px 0 4px; opacity:0; transform:translateY(8px); transition:opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1); } .ab-up-item.visible{opacity:1; transform:translateY(0);} .ab-up-rail{ width:24px; flex-shrink:0; position:relative; padding-top:18px; } .ab-up-dot{ position:relative; left:4px; width:9px; height:9px; border-radius:50%; background:rgba(201,168,76,.7); box-shadow:0 0 10px rgba(201,168,76,.5); } .ab-up-body{ flex:1; min-width:0; padding:10px 18px 22px; border:1px solid rgba(201,168,76,.08); background:linear-gradient(180deg, rgba(201,168,76,.025) 0%, rgba(201,168,76,.005) 100%); border-radius:3px; transition:border-color .3s, background .3s, transform .3s; } .ab-up-body:hover{ border-color:rgba(201,168,76,.18); background:linear-gradient(180deg, rgba(201,168,76,.04) 0%, rgba(201,168,76,.015) 100%); } .ab-up-meta{ display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap; } .ab-up-date{ font-family:'IBM Plex Mono', monospace; font-size:7px; letter-spacing:2.5px; color:rgba(201,168,76,.5); text-transform:uppercase; } .ab-up-chip{ display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:6.5px; letter-spacing:2.5px; text-transform:uppercase; padding:3px 8px; border:1px solid rgba(201,168,76,.25); border-radius:1px; background:rgba(201,168,76,.04); } .ab-up-title{ font-family:'Cinzel', serif; font-size:clamp(14px, 2.1vw, 17px); color:rgba(240,220,185,.96); letter-spacing:.5px; margin-bottom:10px; line-height:1.35; } .ab-up-text{ font-family:'Cormorant Garamond', serif; font-size:clamp(13px, 1.9vw, 15.5px); color:rgba(215,205,180,.85); line-height:1.75; } .ab-up-text em{ color:rgba(255,215,140,.88); font-style:italic; } .ab-up-text strong{ color:rgba(255,230,170,.95); font-weight:500; } .ab-up-text code{ font-family:'IBM Plex Mono', monospace; font-size:.85em; color:rgba(180,220,255,.9); background:rgba(120,150,200,.08); padding:1px 5px; border-radius:2px; border:1px solid rgba(120,150,200,.15); white-space:nowrap; } /* Footer */ .ab-up-footer{ text-align:center; margin-top:34px; padding-top:24px; border-top:1px solid rgba(201,168,76,.08); } .ab-up-foot-line{ font-family:'IBM Plex Mono', monospace; font-size:7px; letter-spacing:4px; color:rgba(201,168,76,.4); text-transform:uppercase; margin-bottom:14px; } .ab-up-foot-sig{ font-family:'Cormorant Garamond', serif; font-size:14px; font-style:italic; color:rgba(210,200,170,.65); margin-bottom:14px; } .ab-up-foot-sig a{ color:rgba(255,220,140,.85); text-decoration:none; border-bottom:1px solid rgba(255,220,140,.25); transition:color .2s, border-color .2s; } .ab-up-foot-sig a:hover{ color:rgba(255,235,170,1); border-bottom-color:rgba(255,235,170,.6); } .ab-up-foot-rr{ font-family:'Cinzel', serif; font-size:14px; letter-spacing:4px; color:rgba(255,220,140,.7); } /* Mobile */ @media(max-width:768px){ .ab-updates{padding:4px 2px 30px;} .ab-up-stats{flex-wrap:wrap; gap:6px; padding:8px 12px;} .ab-up-stat-sep{display:none;} .ab-up-stat{flex:1 0 45%;} .ab-up-timeline::before{left:15px;} .ab-up-item{gap:10px;} .ab-up-rail{width:18px;} .ab-up-dot{width:7px; height:7px;} .ab-up-body{padding:10px 14px 16px;} .ab-up-meta{gap:7px;} .ab-up-date{font-size:6.5px;} .ab-up-chip{font-size:6px; padding:2px 6px;} } /* ══════════════════════════════════════════════════════════ ERA 11: VAIVASVATA MANVANTARA — The 7th Age · Current Atmospheric: deep indigo night, golden Seers, precession sky ══════════════════════════════════════════════════════════ */ #vaiv-exp{ background:radial-gradient(ellipse at 50% 35%,#0a1226 0%,#050914 55%,#020308 100%)!important; } /* ── Act progress dots ── */ #vaiv-exp #vv-stages{ position:absolute;top:62px;left:50%;transform:translateX(-50%); display:flex;gap:8px;z-index:30;pointer-events:none; } #vaiv-exp .vv-stage-dot{ width:6px;height:6px;border-radius:50%; background:rgba(200,180,110,.22); transition:all .6s ease; } #vaiv-exp .vv-stage-dot.current{ background:rgba(255,225,140,1); box-shadow:0 0 14px rgba(255,225,140,.9),0 0 28px rgba(255,225,140,.5); transform:scale(1.5); } #vaiv-exp .vv-stage-dot.done{ background:rgba(200,180,110,.7); box-shadow:0 0 6px rgba(200,180,110,.5); } #vaiv-exp #vv-stage-label{ position:absolute;top:82px;left:50%;transform:translateX(-50%); font-family:'IBM Plex Mono',monospace;font-size:7.5px;letter-spacing:4px; color:rgba(220,190,130,.5);text-transform:uppercase; z-index:30;pointer-events:none; white-space:nowrap; } /* ── Act 0: Zoom display ── */ #vaiv-exp #vv-zoom-display{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); text-align:center;z-index:20;pointer-events:none; opacity:0;transition:opacity 1.2s ease; } #vaiv-exp #vv-zoom-display.visible{opacity:1;} #vaiv-exp .vv-zoom-year{ font-family:'Cinzel',serif;font-size:clamp(32px,6vw,64px); color:rgba(255,230,150,.95);letter-spacing:3px; text-shadow:0 0 40px rgba(255,210,130,.4),0 0 80px rgba(255,190,100,.2); font-variant-numeric:tabular-nums; transition:all 1.1s ease; } #vaiv-exp .vv-zoom-scale{ font-family:'Cormorant Garamond',serif;font-style:italic; font-size:clamp(13px,2.3vw,19px); color:rgba(220,200,160,.65);margin-top:12px;letter-spacing:2px; } /* ── Narrative overlay (recurring) ── */ #vaiv-exp #vv-narrative{ position:absolute;bottom:140px;left:50%;transform:translateX(-50%); max-width:min(560px,88%);text-align:center;z-index:25; font-family:'Cormorant Garamond',serif;font-size:clamp(15px,2.4vw,19px); line-height:1.8;color:rgba(235,220,185,0); padding:22px 30px; background:rgba(10,14,28,.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border:1px solid rgba(200,180,110,.1);border-radius:14px; pointer-events:none; transition:opacity 1s ease,transform 1s ease; opacity:0; } #vaiv-exp #vv-narrative.visible{ opacity:1;color:rgba(235,220,185,.92); } #vaiv-exp #vv-narrative em{color:rgba(255,220,140,.9);font-style:italic;} #vaiv-exp #vv-narrative strong{color:rgba(255,230,180,.95);font-weight:500;} /* ── Sanskrit verse (recurring) ── */ #vaiv-exp #vv-verse{ position:absolute;top:24%;left:50%;transform:translateX(-50%); text-align:center;z-index:22;pointer-events:none; font-family:'Noto Sans Devanagari',serif;font-size:clamp(22px,4.2vw,38px); color:rgba(255,220,140,0);letter-spacing:2px; text-shadow:0 0 30px rgba(255,200,100,.4); transition:opacity 1.4s ease; max-width:90%; } #vaiv-exp #vv-verse.visible{opacity:1;color:rgba(255,220,140,.92);} /* ── Act 1: Seer tap hint + counter ── */ #vaiv-exp #vv-seer-hint{ position:absolute;bottom:180px;left:50%;transform:translateX(-50%); font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:4px; color:rgba(220,200,150,.55);text-transform:uppercase; z-index:20;pointer-events:none; padding:10px 18px;border:1px solid rgba(200,180,110,.15);border-radius:20px; background:rgba(10,14,28,.5); opacity:0;transition:opacity .8s ease; } #vaiv-exp #vv-seer-hint.visible{opacity:1;} #vaiv-exp #vv-seer-counter{ position:absolute;top:120px;left:50%;transform:translateX(-50%); font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:3.5px; color:rgba(255,225,140,.75);text-transform:uppercase; z-index:20;pointer-events:none; opacity:0;transition:opacity .8s; font-variant-numeric:tabular-nums; } #vaiv-exp #vv-seer-counter.visible{opacity:1;} /* ── Act 1: Seer reveal panel ── */ #vaiv-exp #vv-seer-reveal{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9); width:min(500px,90%); background:linear-gradient(180deg,rgba(18,22,42,.96),rgba(10,14,26,.97)); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); border:1px solid rgba(255,220,140,.25);border-radius:18px; padding:32px 30px 26px;text-align:center;z-index:40; box-shadow:0 0 80px rgba(255,200,120,.18),0 30px 80px rgba(0,0,0,.6); opacity:0;pointer-events:none;transition:all .6s cubic-bezier(.25,.9,.4,1); } #vaiv-exp #vv-seer-reveal.visible{ opacity:1;pointer-events:auto; transform:translate(-50%,-50%) scale(1); } #vaiv-exp .vv-sr-skt{ font-family:'Noto Sans Devanagari',serif;font-size:clamp(28px,5vw,42px); color:rgba(255,225,140,.95);letter-spacing:2px; margin-bottom:4px; text-shadow:0 0 24px rgba(255,200,100,.4); } #vaiv-exp .vv-sr-name{ font-family:'Cinzel',serif;font-size:clamp(18px,3vw,26px); color:rgba(250,240,215,.95);letter-spacing:3px; margin-bottom:6px; } #vaiv-exp .vv-sr-role{ font-family:'IBM Plex Mono',monospace;font-size:7.5px;letter-spacing:4px; color:rgba(220,190,130,.55);text-transform:uppercase; margin-bottom:20px; } #vaiv-exp .vv-sr-body{ font-family:'Cormorant Garamond',serif;font-size:clamp(14px,2.3vw,17px); line-height:1.75;color:rgba(220,205,170,.88);margin-bottom:20px; font-style:italic; } #vaiv-exp .vv-sr-body em{color:rgba(255,220,140,.9);} #vaiv-exp .vv-sr-body strong{color:rgba(250,240,210,.95);font-weight:500;} #vaiv-exp .vv-sr-gotra{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3.5px; color:rgba(200,180,120,.5);text-transform:uppercase; padding:8px 16px;border-top:1px solid rgba(200,180,110,.12); margin-bottom:16px; } #vaiv-exp .vv-sr-dismiss{ background:transparent;border:1px solid rgba(255,220,140,.35); color:rgba(255,225,150,.85); font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:3px; text-transform:uppercase;padding:10px 24px;border-radius:22px; cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation; transition:all .3s; } #vaiv-exp .vv-sr-dismiss:hover,#vaiv-exp .vv-sr-dismiss:active{ background:rgba(255,220,140,.12);border-color:rgba(255,220,140,.6); } /* ── Act 2: Lineage chooser ── */ #vaiv-exp #vv-choose{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:min(720px,94%);max-height:84vh;overflow-y:auto; background:linear-gradient(180deg,rgba(18,22,42,.97),rgba(10,14,26,.98)); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); border:1px solid rgba(255,220,140,.22);border-radius:18px; padding:32px 28px;z-index:40; box-shadow:0 0 80px rgba(255,200,120,.15),0 30px 80px rgba(0,0,0,.6); opacity:0;pointer-events:none;transition:all .7s cubic-bezier(.25,.9,.4,1); -webkit-overflow-scrolling:touch; } #vaiv-exp #vv-choose.visible{opacity:1;pointer-events:auto;} #vaiv-exp .vv-choose-title{ font-family:'Cinzel',serif;font-size:clamp(20px,3.5vw,28px); color:rgba(250,240,215,.95);letter-spacing:2.5px;text-align:center; margin-bottom:6px; } #vaiv-exp .vv-choose-sub{ font-family:'Cormorant Garamond',serif;font-style:italic; font-size:clamp(13px,2.2vw,16px);text-align:center; color:rgba(220,200,160,.7);margin-bottom:22px;line-height:1.5; } #vaiv-exp .vv-choose-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px;margin-bottom:16px; } #vaiv-exp .vv-choose-card{ background:rgba(20,26,48,.6); border:1px solid rgba(200,180,110,.18);border-radius:12px; padding:16px 14px 14px;text-align:center;cursor:pointer; -webkit-tap-highlight-color:transparent;touch-action:manipulation; transition:all .35s; position:relative;overflow:hidden; } #vaiv-exp .vv-choose-card:hover,#vaiv-exp .vv-choose-card:active{ background:rgba(40,50,90,.7); border-color:rgba(255,220,140,.5); transform:translateY(-2px); box-shadow:0 0 30px rgba(255,200,120,.15); } #vaiv-exp .vv-choose-card::before{ content:'';position:absolute;inset:0; background:radial-gradient(circle at 50% 0,var(--vv-glow,rgba(255,220,140,.15)),transparent 60%); pointer-events:none;opacity:.5; } #vaiv-exp .vv-cc-skt{ font-family:'Noto Sans Devanagari',serif;font-size:20px; color:rgba(255,225,140,.9);margin-bottom:4px; position:relative; } #vaiv-exp .vv-cc-name{ font-family:'Cinzel',serif;font-size:14px;letter-spacing:2px; color:rgba(250,240,215,.95);margin-bottom:6px;position:relative; } #vaiv-exp .vv-cc-role{ font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:2.5px; color:rgba(200,180,120,.55);text-transform:uppercase; margin-bottom:10px;position:relative; } #vaiv-exp .vv-cc-desc{ font-family:'Cormorant Garamond',serif;font-size:12.5px;font-style:italic; line-height:1.5;color:rgba(220,205,170,.75); position:relative; } #vaiv-exp .vv-choose-footnote{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px; color:rgba(180,160,110,.4);text-align:center;text-transform:uppercase; padding-top:8px; } /* ── Act 3: Yuga ring info ── */ #vaiv-exp #vv-yuga-info{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); text-align:center;z-index:20;pointer-events:none; opacity:0;transition:opacity 1s; } #vaiv-exp #vv-yuga-info.visible{opacity:1;} #vaiv-exp .vv-yuga-big{ font-family:'Cinzel',serif;font-size:clamp(72px,14vw,140px); color:rgba(255,225,140,.95);font-weight:500;line-height:1; text-shadow:0 0 40px rgba(255,200,100,.5),0 0 80px rgba(255,180,80,.25); font-variant-numeric:tabular-nums; } #vaiv-exp .vv-yuga-label{ font-family:'Cormorant Garamond',serif;font-style:italic; font-size:clamp(16px,2.8vw,22px); color:rgba(235,220,185,.9);margin-top:6px; } #vaiv-exp .vv-yuga-sub{ font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:2.5px; color:rgba(200,180,130,.65);text-transform:uppercase; margin-top:10px; } #vaiv-exp .vv-yuga-sub span{color:rgba(255,225,140,.95);} /* ── Act 4: Kali clock ── */ #vaiv-exp #vv-kali-clock{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); text-align:center;z-index:20;pointer-events:none; width:min(460px,92%); opacity:0;transition:opacity 1s; } #vaiv-exp #vv-kali-clock.visible{opacity:1;} #vaiv-exp .vv-kc-label{ font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:4px; color:rgba(200,180,130,.6);text-transform:uppercase;margin-bottom:10px; } #vaiv-exp .vv-kc-big{ font-family:'Cinzel',serif;font-size:clamp(28px,5.5vw,48px); color:rgba(255,150,130,.95);letter-spacing:3px; text-shadow:0 0 30px rgba(255,120,100,.4); margin-bottom:18px; } #vaiv-exp .vv-kc-ticker{ font-family:'IBM Plex Mono',monospace;font-size:clamp(14px,2.6vw,20px); color:rgba(255,220,160,.92);letter-spacing:2px; font-variant-numeric:tabular-nums; padding:12px 20px;border:1px solid rgba(255,150,130,.25);border-radius:10px; background:rgba(30,10,10,.4); display:inline-block; } #vaiv-exp .vv-kc-of{ font-family:'Cormorant Garamond',serif;font-style:italic; font-size:clamp(12px,2vw,15px); color:rgba(200,180,140,.55);margin-top:10px; } #vaiv-exp .vv-kc-bar{ width:100%;height:3px;background:rgba(255,180,130,.08); border-radius:2px;overflow:hidden;margin:18px 0 8px; } #vaiv-exp .vv-kc-fill{ height:100%;width:1.19%; background:linear-gradient(90deg,rgba(255,150,100,.9),rgba(255,190,130,.7)); box-shadow:0 0 10px rgba(255,160,110,.6); } #vaiv-exp .vv-kc-pct{ font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:3px; color:rgba(200,170,130,.6);text-transform:uppercase; } /* ── Act 5: Seer teaching ── */ #vaiv-exp #vv-teaching{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:min(640px,92%);max-height:82vh;overflow-y:auto; background:linear-gradient(180deg,rgba(18,22,42,.97),rgba(10,14,26,.98)); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); border:1px solid var(--vv-seer-col,rgba(255,220,140,.3));border-radius:18px; padding:30px 28px 26px;z-index:40; box-shadow:0 0 80px var(--vv-seer-glow,rgba(255,200,120,.2)),0 30px 80px rgba(0,0,0,.6); opacity:0;pointer-events:none;transition:all .7s cubic-bezier(.25,.9,.4,1); -webkit-overflow-scrolling:touch; } #vaiv-exp #vv-teaching.visible{opacity:1;pointer-events:auto;} #vaiv-exp .vv-te-skt{ font-family:'Noto Sans Devanagari',serif;font-size:clamp(26px,4.5vw,36px); color:var(--vv-seer-col,rgba(255,225,140,.95));text-align:center; letter-spacing:2px;margin-bottom:2px; text-shadow:0 0 24px var(--vv-seer-glow,rgba(255,200,100,.4)); } #vaiv-exp .vv-te-name{ font-family:'Cinzel',serif;font-size:clamp(17px,3vw,24px); color:rgba(250,240,215,.96);text-align:center;letter-spacing:3px; margin-bottom:6px; } #vaiv-exp .vv-te-role{ font-family:'IBM Plex Mono',monospace;font-size:7.5px;letter-spacing:4px; color:rgba(200,180,130,.55);text-transform:uppercase;text-align:center; margin-bottom:18px; } #vaiv-exp .vv-te-quote{ border-left:2px solid var(--vv-seer-col,rgba(255,220,140,.4)); padding:8px 16px;margin:0 0 18px; font-family:'Cormorant Garamond',serif;font-style:italic; font-size:clamp(14px,2.4vw,17px);line-height:1.7; color:rgba(240,225,190,.88); } #vaiv-exp .vv-te-body{ font-family:'Cormorant Garamond',serif;font-size:clamp(14px,2.3vw,17px); line-height:1.8;color:rgba(220,205,170,.88);margin-bottom:20px; } #vaiv-exp .vv-te-body em{color:var(--vv-seer-col,rgba(255,220,140,.9));font-style:italic;} #vaiv-exp .vv-te-body strong{color:rgba(250,240,210,.95);font-weight:500;} #vaiv-exp .vv-te-practice{ background:rgba(30,36,60,.5); border:1px solid rgba(200,180,110,.15);border-radius:10px; padding:14px 16px;margin-top:8px; } #vaiv-exp .vv-te-practice-lbl{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3.5px; color:rgba(200,180,130,.55);text-transform:uppercase;margin-bottom:8px; } #vaiv-exp .vv-te-practice-body{ font-family:'Cormorant Garamond',serif;font-size:clamp(13px,2.2vw,15px); line-height:1.7;color:rgba(235,220,185,.9); } #vaiv-exp .vv-te-practice-body strong{color:var(--vv-seer-col,rgba(255,220,140,.9));} /* Kosha-linked terms */ #vaiv-exp .vv-kterm{ color:rgba(255,220,140,.95);cursor:pointer; border-bottom:1px dotted rgba(255,220,140,.3); transition:all .3s; } #vaiv-exp .vv-kterm:hover,#vaiv-exp .vv-kterm:active{ color:rgba(255,235,170,1); border-bottom-color:rgba(255,235,170,.7); } /* ── Act 6: Precession info ── */ #vaiv-exp #vv-prec-info{ position:absolute;bottom:180px;left:50%;transform:translateX(-50%); text-align:center;z-index:20;pointer-events:none; width:min(360px,85%); padding:14px 20px; background:rgba(10,14,28,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border:1px solid rgba(200,180,110,.15);border-radius:12px; opacity:0;transition:opacity 1s; } #vaiv-exp #vv-prec-info.visible{opacity:1;} #vaiv-exp .vv-prec-year{ font-family:'IBM Plex Mono',monospace;font-size:clamp(13px,2.3vw,17px); color:rgba(255,225,140,.95);letter-spacing:2.5px; font-variant-numeric:tabular-nums;margin-bottom:6px; } #vaiv-exp .vv-prec-pole{ font-family:'Cormorant Garamond',serif;font-style:italic; font-size:clamp(12px,2vw,15px); color:rgba(220,200,160,.75); } #vaiv-exp .vv-prec-pole span{color:rgba(255,225,140,.9);font-weight:500;} #vaiv-exp .vv-prec-hint{ font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:2.5px; color:rgba(180,160,110,.45);text-transform:uppercase;margin-top:8px; } /* ── Act 7: Living lineage panel ── */ #vaiv-exp #vv-lineage-panel{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:min(560px,92%);max-height:80vh;overflow-y:auto; background:linear-gradient(180deg,rgba(18,22,42,.97),rgba(10,14,26,.98)); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); border:1px solid var(--vv-seer-col,rgba(255,220,140,.25));border-radius:18px; padding:26px 24px;z-index:40; box-shadow:0 0 80px var(--vv-seer-glow,rgba(255,200,120,.18)),0 30px 80px rgba(0,0,0,.6); opacity:0;pointer-events:none;transition:all .7s cubic-bezier(.25,.9,.4,1); -webkit-overflow-scrolling:touch; } #vaiv-exp #vv-lineage-panel.visible{opacity:1;pointer-events:auto;} #vaiv-exp .vv-lp-lbl{ font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:4px; color:rgba(200,180,130,.55);text-transform:uppercase;text-align:center; margin-bottom:16px; } #vaiv-exp .vv-lp-lbl span{color:var(--vv-seer-col,rgba(255,225,140,.95));letter-spacing:3px;} #vaiv-exp .vv-lp-body{ font-family:'Cormorant Garamond',serif;font-size:clamp(13.5px,2.2vw,16px); line-height:1.75;color:rgba(220,205,170,.88); } #vaiv-exp .vv-lp-chain{ display:flex;flex-direction:column;gap:4px; margin:16px 0; } #vaiv-exp .vv-lp-link{ padding:10px 14px; background:rgba(30,36,60,.55); border-left:2px solid var(--vv-seer-col,rgba(255,220,140,.4)); border-radius:0 8px 8px 0; font-family:'Cormorant Garamond',serif;font-size:clamp(12.5px,2.1vw,15px); line-height:1.6;color:rgba(235,220,185,.88); position:relative; } #vaiv-exp .vv-lp-link strong{color:rgba(250,240,210,.98);font-weight:500;} #vaiv-exp .vv-lp-link em{color:var(--vv-seer-col,rgba(255,220,140,.9));font-style:italic;} #vaiv-exp .vv-lp-era{ font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:2.5px; color:rgba(180,160,110,.5);text-transform:uppercase; display:block;margin-bottom:3px; } /* ── Act 8: Recognition ── */ #vaiv-exp #vv-recognition{ position:absolute;inset:0; display:flex;flex-direction:column;align-items:center;justify-content:center; padding:30px 24px;z-index:50; background:radial-gradient(ellipse at 50% 50%,rgba(18,22,42,.95),rgba(4,6,14,.98)); backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px); opacity:0;pointer-events:none;transition:opacity 1.4s ease; overflow-y:auto; -webkit-overflow-scrolling:touch; } #vaiv-exp #vv-recognition.visible{opacity:1;pointer-events:auto;} #vaiv-exp .vv-rec-heading{ font-family:'Cinzel',serif;font-size:clamp(22px,4vw,34px); color:rgba(255,225,140,.95);letter-spacing:4px;text-align:center; margin-bottom:16px; text-shadow:0 0 30px rgba(255,200,100,.35); } #vaiv-exp .vv-rec-body{ font-family:'Cormorant Garamond',serif;font-style:italic; font-size:clamp(15px,2.6vw,19px);line-height:1.8; color:rgba(235,220,185,.92);text-align:center;max-width:620px; margin-bottom:18px; } #vaiv-exp .vv-rec-body em{color:rgba(255,220,140,.95);} #vaiv-exp .vv-rec-body strong{color:rgba(255,235,180,.98);font-weight:500;} #vaiv-exp .vv-rec-mahavakya{ text-align:center;margin:8px 0 16px;padding:18px 20px; border-top:1px solid rgba(255,220,140,.18); border-bottom:1px solid rgba(255,220,140,.18); } #vaiv-exp .vv-rec-skt{ font-family:'Noto Sans Devanagari',serif;font-size:clamp(24px,4.5vw,36px); color:rgba(255,225,140,.95);letter-spacing:2px;margin-bottom:6px; text-shadow:0 0 26px rgba(255,200,100,.35); } #vaiv-exp .vv-rec-eng{ font-family:'Cinzel',serif;font-size:clamp(13px,2.3vw,17px); color:rgba(240,225,190,.9);letter-spacing:2.5px;margin-bottom:4px; } #vaiv-exp .vv-rec-source{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px; color:rgba(180,160,110,.5);text-transform:uppercase; } #vaiv-exp .vv-rec-stats{ display:flex;flex-wrap:wrap;gap:10px;justify-content:center; margin-bottom:20px;max-width:540px; } #vaiv-exp .vv-rec-stat{ padding:10px 16px; background:rgba(30,36,60,.55); border:1px solid rgba(200,180,110,.18);border-radius:20px; font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:2.5px; color:rgba(220,205,170,.85);text-transform:uppercase; } #vaiv-exp .vv-rec-stat strong{color:rgba(255,225,140,.95);font-weight:500;} #vaiv-exp .vv-rec-btns{ display:flex;gap:12px;flex-wrap:wrap;justify-content:center; } #vaiv-exp .vv-rec-btn{ background:transparent;border:1px solid rgba(255,220,140,.35); color:rgba(255,225,150,.85); font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:3px; text-transform:uppercase;padding:11px 22px;border-radius:22px; cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation; transition:all .3s; } #vaiv-exp .vv-rec-btn:hover,#vaiv-exp .vv-rec-btn:active{ background:rgba(255,220,140,.12);border-color:rgba(255,220,140,.6); color:rgba(255,235,170,.98); } /* ── Advance / rewind buttons ── */ #vaiv-exp #vv-advance{ position:absolute;bottom:130px;left:50%;transform:translateX(-50%); background:rgba(10,14,28,.7);border:1px solid rgba(255,220,140,.4); color:rgba(255,225,150,.95); font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:3.5px; text-transform:uppercase;padding:13px 26px;border-radius:24px; cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation; z-index:28; opacity:0;pointer-events:none; transition:all .5s cubic-bezier(.25,.9,.4,1); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); display:flex;align-items:center;gap:8px; } #vaiv-exp #vv-advance.visible{opacity:1;pointer-events:auto;} #vaiv-exp #vv-advance:hover,#vaiv-exp #vv-advance:active{ background:rgba(255,220,140,.14);border-color:rgba(255,220,140,.7); box-shadow:0 0 20px rgba(255,200,120,.25); } #vaiv-exp .vv-adv-arrow{ transition:transform .3s;display:inline-block; } #vaiv-exp #vv-advance:hover .vv-adv-arrow{transform:translateX(3px);} #vaiv-exp #vv-rewind{ position:absolute;top:62px;right:70px; background:transparent;border:1px solid rgba(255,220,140,.2); color:rgba(255,220,140,.6); font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:3px; text-transform:uppercase;padding:7px 14px;border-radius:14px; cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation; z-index:31;transition:all .3s; opacity:0;pointer-events:none; } #vaiv-exp #vv-rewind.visible{opacity:1;pointer-events:auto;} #vaiv-exp #vv-rewind:hover,#vaiv-exp #vv-rewind:active{ background:rgba(255,220,140,.1);color:rgba(255,225,150,.85); } /* ── Mobile optimizations ── */ @media(max-width:680px){ #vaiv-exp #vv-stage-label{font-size:6.5px;letter-spacing:3px;} #vaiv-exp #vv-stages{top:58px;} #vaiv-exp #vv-stage-label{top:74px;} #vaiv-exp #vv-rewind{top:58px;right:60px;font-size:7px;padding:6px 10px;} #vaiv-exp #vv-advance{bottom:115px;font-size:8.5px;padding:11px 20px;letter-spacing:3px;} #vaiv-exp .vv-choose-grid{grid-template-columns:1fr 1fr;gap:8px;} #vaiv-exp .vv-choose-card{padding:12px 10px 10px;} #vaiv-exp .vv-cc-skt{font-size:18px;} #vaiv-exp .vv-cc-name{font-size:12px;letter-spacing:1.5px;} #vaiv-exp .vv-cc-desc{font-size:11.5px;} #vaiv-exp #vv-seer-hint{bottom:160px;font-size:7px;letter-spacing:3px;padding:8px 14px;} #vaiv-exp #vv-seer-counter{top:100px;} #vaiv-exp #vv-narrative{bottom:115px;font-size:14px;padding:16px 20px;} #vaiv-exp #vv-prec-info{bottom:160px;} #vaiv-exp #vv-seer-reveal{padding:24px 22px 22px;} #vaiv-exp #vv-teaching{padding:22px 20px;} #vaiv-exp .vv-rec-btn{font-size:8px;padding:10px 16px;letter-spacing:2.5px;} } /* small screens in landscape */ @media(max-height:580px){ #vaiv-exp #vv-narrative{bottom:95px;padding:12px 18px;font-size:13.5px;} #vaiv-exp #vv-advance{bottom:92px;} #vaiv-exp #vv-seer-hint{bottom:135px;} } /* ══════════════════════════════════════════════════════════ ERA 13: NARASIṂHA — The Threshold Atmospheric: deep ember red, lion-gold, twilight purple ══════════════════════════════════════════════════════════ */ #nrs-exp{ background:radial-gradient(ellipse at 50% 35%,#1a0806 0%,#0c0402 55%,#040201 100%)!important; } #nrs-exp #nm-stages{ position:absolute;top:62px;left:50%;transform:translateX(-50%); display:flex;gap:8px;z-index:30;pointer-events:none; } #nrs-exp .nm-stage-dot{ width:6px;height:6px;border-radius:50%; background:rgba(220,160,100,.18);transition:all .5s; } #nrs-exp .nm-stage-dot.current{ background:rgba(255,180,90,.95); box-shadow:0 0 12px rgba(255,140,60,.7); transform:scale(1.4); } #nrs-exp .nm-stage-dot.done{background:rgba(180,120,60,.55);} #nrs-exp #nm-stage-label{ position:absolute;top:80px;left:50%;transform:translateX(-50%); font-family:'IBM Plex Mono',monospace;font-size:7.5px;letter-spacing:5px; color:rgba(230,180,130,.6);text-transform:uppercase; z-index:30;pointer-events:none;text-align:center; text-shadow:0 0 12px rgba(255,140,60,.4); } #nrs-exp #nm-narrative{ position:absolute;bottom:160px;left:50%;transform:translate(-50%,8px); width:min(86vw,640px); font-family:'Cormorant Garamond',serif;font-style:italic; font-size:clamp(15px,2vw,20px);line-height:1.7; color:rgba(245,225,190,0);text-align:center;padding:18px 26px; background:rgba(8,4,2,.55); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); border:1px solid rgba(220,140,80,.12); z-index:25;pointer-events:none; transition:opacity 1.2s,transform 1.2s,color 1.2s; } #nrs-exp #nm-narrative.visible{color:rgba(245,225,190,.94);transform:translate(-50%,0);} #nrs-exp #nm-narrative em{color:rgba(255,180,90,.96);font-style:italic;} #nrs-exp #nm-narrative strong{color:rgba(255,225,170,.98);font-weight:500;} #nrs-exp #nm-verse{ position:absolute;top:14%;left:50%;transform:translateX(-50%); font-family:'Noto Sans Devanagari',serif; font-size:clamp(15px,2.4vw,22px);letter-spacing:1px; color:rgba(255,180,90,0);text-align:center; z-index:25;pointer-events:none; text-shadow:0 0 24px rgba(255,140,60,.4); opacity:0;transition:opacity 1.6s,color 1.6s; } #nrs-exp #nm-verse.visible{opacity:1;color:rgba(255,180,90,.92);} /* ── Act 1: Tapas meter ── */ #nrs-exp #nm-tapas{ position:absolute;top:108px;left:50%;transform:translateX(-50%); width:min(88vw,560px);text-align:center;z-index:28;pointer-events:none;opacity:0; transition:opacity .8s;padding:18px 24px; background:rgba(12,4,2,.7);backdrop-filter:blur(8px); border:1px solid rgba(220,80,40,.22); } #nrs-exp #nm-tapas.visible{opacity:1;pointer-events:auto;} #nrs-exp .nm-tp-eyebrow{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:5px; color:rgba(255,140,80,.7);text-transform:uppercase;margin-bottom:8px; } #nrs-exp .nm-tp-q{ font-family:'Cormorant Garamond',serif;font-style:italic;font-size:14px; color:rgba(230,210,180,.82);line-height:1.6;margin-bottom:14px; } #nrs-exp .nm-tp-q em{color:rgba(255,180,90,.92);} #nrs-exp .nm-tp-meter{ width:100%;height:6px;background:rgba(40,16,8,.7); border:1px solid rgba(220,80,40,.3);position:relative;overflow:hidden; } #nrs-exp .nm-tp-fill{ position:absolute;left:0;top:0;height:100%;width:0%; background:linear-gradient(90deg,rgba(255,80,40,.9),rgba(255,180,90,.95)); transition:width .4s;box-shadow:0 0 14px rgba(255,140,60,.6); } #nrs-exp .nm-tp-counter{ font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:3px; color:rgba(255,180,90,.92);margin-top:10px; } /* ── Act 2: Boons grid (5 cards) ── */ #nrs-exp #nm-boons{ position:absolute;top:108px;left:50%;transform:translateX(-50%); width:min(94vw,780px);z-index:28;pointer-events:none;opacity:0; transition:opacity .8s;padding:16px 20px; background:rgba(12,6,3,.65);backdrop-filter:blur(8px); border:1px solid rgba(220,140,80,.18); } #nrs-exp #nm-boons.visible{opacity:1;pointer-events:auto;} #nrs-exp .nm-bn-eyebrow{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:5px; color:rgba(255,180,90,.7);text-transform:uppercase;text-align:center;margin-bottom:8px; } #nrs-exp .nm-bn-q{ font-family:'Cormorant Garamond',serif;font-style:italic;font-size:14px; color:rgba(230,210,180,.78);text-align:center;margin-bottom:14px;line-height:1.55; } #nrs-exp .nm-bn-grid{ display:grid;grid-template-columns:repeat(5,1fr);gap:8px; } #nrs-exp .nm-bn-card{ padding:12px 10px;background:rgba(20,8,4,.65);border:1px solid rgba(220,140,80,.22); cursor:pointer;transition:all .3s;text-align:center; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } #nrs-exp .nm-bn-card:hover,#nrs-exp .nm-bn-card.open{ border-color:rgba(255,180,90,.6);background:rgba(40,16,6,.7); } #nrs-exp .nm-bn-num{ font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:4px; color:rgba(255,140,80,.7);text-transform:uppercase;margin-bottom:6px; } #nrs-exp .nm-bn-skt{ font-family:'Noto Sans Devanagari',serif;font-size:13px; color:rgba(255,180,90,.95);margin-bottom:4px;line-height:1.3; } #nrs-exp .nm-bn-name{ font-family:'Cinzel',serif;font-size:9px;letter-spacing:1.5px; color:rgba(245,220,180,.92);margin-bottom:8px;text-transform:uppercase;line-height:1.3; } #nrs-exp .nm-bn-body{ font-family:'Cormorant Garamond',serif;font-size:12px;line-height:1.5; color:rgba(220,200,170,.78);font-style:italic; } #nrs-exp .nm-bn-counter{ font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:3px; color:rgba(255,140,80,.55);text-transform:uppercase;text-align:center;margin-top:12px; } /* ── Act 4: Prahlada mantra ── */ #nrs-exp #nm-prahlada{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95); width:min(88vw,520px);text-align:center;z-index:28;pointer-events:none;opacity:0; transition:opacity .8s,transform .8s;padding:28px 24px; background:rgba(8,4,2,.85);backdrop-filter:blur(12px); border:1px solid rgba(255,210,130,.25); box-shadow:0 0 40px rgba(255,180,90,.15); } #nrs-exp #nm-prahlada.visible{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);} #nrs-exp .nm-pr-eyebrow{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:5px; color:rgba(255,225,170,.7);text-transform:uppercase;margin-bottom:12px; } #nrs-exp .nm-pr-line{ font-family:'Cormorant Garamond',serif;font-style:italic; font-size:clamp(14px,1.85vw,16.5px);line-height:1.7; color:rgba(245,225,190,.92);margin-bottom:18px; } #nrs-exp .nm-pr-mantra{ font-family:'Noto Sans Devanagari',serif; font-size:clamp(16px,2.4vw,22px);letter-spacing:1.5px; color:rgba(255,225,170,.96); text-shadow:0 0 18px rgba(255,180,90,.45); padding:14px 16px;cursor:pointer; border:1px dashed rgba(255,210,130,.3); margin-bottom:10px;transition:all .3s; animation:nmMantraGlow 4s ease-in-out infinite; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } @keyframes nmMantraGlow{ 0%,100%{text-shadow:0 0 18px rgba(255,180,90,.45);} 50%{text-shadow:0 0 30px rgba(255,210,130,.75),0 0 60px rgba(255,180,90,.3);} } #nrs-exp .nm-pr-mantra:hover{background:rgba(255,210,130,.06);border-style:solid;} #nrs-exp .nm-pr-tap{ font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:3px; color:rgba(255,180,90,.5);text-transform:uppercase;margin-bottom:10px; } #nrs-exp .nm-pr-counter{ font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:3px; color:rgba(255,225,170,.92); } /* ── Act 5: Five trials ── */ #nrs-exp #nm-trials{ position:absolute;top:108px;left:50%;transform:translateX(-50%); width:min(94vw,720px);z-index:28;pointer-events:none;opacity:0; transition:opacity .8s;padding:16px 20px; background:rgba(16,4,2,.75);backdrop-filter:blur(8px); border:1px solid rgba(220,80,40,.25); } #nrs-exp #nm-trials.visible{opacity:1;pointer-events:auto;} #nrs-exp .nm-tr-eyebrow{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:5px; color:rgba(255,140,80,.7);text-transform:uppercase;text-align:center;margin-bottom:8px; } #nrs-exp .nm-tr-q{ font-family:'Cormorant Garamond',serif;font-style:italic;font-size:14px; color:rgba(230,210,180,.78);text-align:center;margin-bottom:14px;line-height:1.55; } #nrs-exp .nm-tr-q em{color:rgba(255,180,90,.92);} #nrs-exp .nm-tr-grid{ display:grid;grid-template-columns:repeat(5,1fr);gap:8px; } #nrs-exp .nm-tr-card{ padding:12px 8px;background:rgba(28,8,4,.7);border:1px solid rgba(220,80,40,.3); cursor:pointer;transition:all .3s;text-align:center; touch-action:manipulation;-webkit-tap-highlight-color:transparent; min-height:130px;display:flex;flex-direction:column;align-items:center; } #nrs-exp .nm-tr-card:hover,#nrs-exp .nm-tr-card.open{ border-color:rgba(255,180,90,.6);background:rgba(48,16,8,.78); } #nrs-exp .nm-tr-icon{ font-size:28px;color:rgba(255,140,80,.85);margin-bottom:6px;line-height:1; text-shadow:0 0 14px rgba(255,80,40,.5); } #nrs-exp .nm-tr-name{ font-family:'Cinzel',serif;font-size:10px;letter-spacing:2px; color:rgba(245,220,180,.92);margin-bottom:6px;text-transform:uppercase; } #nrs-exp .nm-tr-body{ font-family:'Cormorant Garamond',serif;font-size:12px;line-height:1.5; color:rgba(220,200,170,.78);font-style:italic; } #nrs-exp .nm-tr-counter{ font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:3px; color:rgba(255,140,80,.55);text-transform:uppercase;text-align:center;margin-top:12px; } /* ── Act 6: The Question ── */ #nrs-exp #nm-question{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95); width:min(88vw,520px);text-align:center;z-index:28;pointer-events:none;opacity:0; transition:opacity .8s,transform .8s;padding:28px 24px; background:rgba(8,4,2,.88);backdrop-filter:blur(12px); border:1px solid rgba(255,80,40,.35); box-shadow:0 0 50px rgba(255,80,40,.18); } #nrs-exp #nm-question.visible{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);} #nrs-exp .nm-qn-line{ font-family:'Cormorant Garamond',serif; font-size:clamp(15px,2.1vw,19px);line-height:1.65; color:rgba(255,180,140,.96);font-style:italic;margin-bottom:14px; } #nrs-exp .nm-qn-line em{color:rgba(255,140,90,1);} #nrs-exp .nm-qn-skt{ font-family:'Noto Sans Devanagari',serif;font-size:24px; color:rgba(255,140,80,.95);margin-bottom:6px; text-shadow:0 0 18px rgba(255,80,40,.5); } #nrs-exp .nm-qn-rom{ font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:3px; color:rgba(220,140,90,.7);text-transform:uppercase;margin-bottom:18px; } #nrs-exp .nm-qn-prahlada{ font-family:'Cormorant Garamond',serif;font-style:italic; font-size:clamp(14px,1.85vw,16px);line-height:1.7; color:rgba(255,225,170,.92);margin-bottom:14px; } #nrs-exp .nm-qn-prahlada em{color:rgba(255,210,130,.96);} #nrs-exp .nm-qn-tap{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:4px; color:rgba(255,140,80,.7);text-transform:uppercase; animation:nmTapPulse 1.6s ease-in-out infinite; } @keyframes nmTapPulse{0%,100%{opacity:.7;}50%{opacity:1;}} /* ── Act 7: pillar break flash ── */ #nrs-exp #nm-pillar{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:min(88vw,520px);text-align:center;z-index:30;pointer-events:none;opacity:0; transition:opacity 1s;padding:28px 24px; } #nrs-exp #nm-pillar.visible{opacity:1;} #nrs-exp .nm-pl-line{ font-family:'Cormorant Garamond',serif;font-style:italic; font-size:clamp(16px,2.4vw,20px);line-height:1.7; color:rgba(255,210,130,.96); text-shadow:0 0 18px rgba(255,180,90,.45); } #nrs-exp .nm-pl-line strong{color:rgba(255,235,180,1);} /* ── Act 8: Threshold grid ── */ #nrs-exp #nm-threshold{ position:absolute;top:96px;left:50%;transform:translateX(-50%); width:min(94vw,820px);z-index:28;pointer-events:none;opacity:0; transition:opacity 1s;padding:16px 20px; background:rgba(8,4,2,.78);backdrop-filter:blur(12px); border:1px solid rgba(255,210,130,.22); max-height:80vh;overflow-y:auto;-webkit-overflow-scrolling:touch; } #nrs-exp #nm-threshold.visible{opacity:1;pointer-events:auto;} #nrs-exp .nm-th-eyebrow{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:5px; color:rgba(255,210,130,.7);text-transform:uppercase;text-align:center;margin-bottom:14px; } #nrs-exp .nm-th-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:10px; } #nrs-exp .nm-th-card{ padding:14px 12px;background:rgba(20,8,4,.7);border:1px solid rgba(255,180,90,.22); text-align:center; } #nrs-exp .nm-th-skt{ font-family:'Noto Sans Devanagari',serif;font-size:18px; color:rgba(255,210,130,.95);margin-bottom:6px; } #nrs-exp .nm-th-name{ font-family:'Cinzel',serif;font-size:10px;letter-spacing:2px; color:rgba(245,220,180,.92);margin-bottom:8px;text-transform:uppercase; } #nrs-exp .nm-th-body{ font-family:'Cormorant Garamond',serif;font-size:12.5px;line-height:1.6; color:rgba(220,200,170,.84); } #nrs-exp .nm-th-body strong{color:rgba(255,210,130,.96);font-weight:500;} #nrs-exp .nm-th-line{ font-family:'Cormorant Garamond',serif;font-style:italic; font-size:clamp(14px,1.85vw,16px);line-height:1.7; color:rgba(245,225,190,.92);text-align:center; margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,210,130,.12); } #nrs-exp .nm-th-line em{color:rgba(255,210,130,.95);} /* ── Act 9: Recognition ── */ #nrs-exp #nm-recognition{ position:absolute;top:0;left:0;right:0;bottom:0; z-index:35;pointer-events:none;opacity:0; background:radial-gradient(ellipse at 50% 35%,rgba(40,18,8,.95) 0%,rgba(4,2,1,.97) 80%); backdrop-filter:blur(16px);overflow-y:auto;-webkit-overflow-scrolling:touch; padding:70px 22px 60px;transition:opacity 1.2s; } #nrs-exp #nm-recognition.visible{opacity:1;pointer-events:auto;} #nrs-exp .nm-rec-eyebrow{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:6px; color:rgba(255,210,130,.6);text-transform:uppercase;text-align:center;margin-bottom:12px; } #nrs-exp .nm-rec-heading{ font-family:'Cinzel',serif;font-size:clamp(24px,4vw,38px);letter-spacing:5px; color:rgba(255,225,170,.96);text-align:center; text-shadow:0 0 24px rgba(255,180,90,.35);margin-bottom:30px; } #nrs-exp .nm-rec-body{ font-family:'Cormorant Garamond',serif; font-size:clamp(14.5px,1.9vw,17px);line-height:1.85; color:rgba(225,215,190,.92);max-width:600px;margin:0 auto 30px; } #nrs-exp .nm-rec-body p{margin-bottom:14px;} #nrs-exp .nm-rec-body strong{color:rgba(255,225,170,.98);font-weight:500;} #nrs-exp .nm-rec-body em{color:rgba(255,210,130,.95);font-style:italic;} #nrs-exp .nm-rec-line{ font-style:italic;text-align:center;color:rgba(255,210,130,.92);font-size:1.05em;padding-top:6px; } #nrs-exp .nm-rec-mahavakya{ max-width:560px;margin:0 auto 30px;padding:24px 20px; background:rgba(255,210,130,.04);border:1px solid rgba(255,210,130,.15);text-align:center; } #nrs-exp .nm-rec-skt{ font-family:'Noto Sans Devanagari',serif; font-size:clamp(20px,3vw,26px);letter-spacing:2px; color:rgba(255,225,170,.98); text-shadow:0 0 22px rgba(255,200,120,.3);margin-bottom:8px; } #nrs-exp .nm-rec-rom{ font-family:'Cinzel',serif;font-style:italic; font-size:clamp(13px,1.7vw,15.5px);letter-spacing:2px; color:rgba(220,200,160,.7);margin-bottom:10px; } #nrs-exp .nm-rec-eng{ font-family:'Cormorant Garamond',serif;font-style:italic; font-size:clamp(14px,1.8vw,16px); color:rgba(245,225,190,.88);line-height:1.6;margin-bottom:14px; } #nrs-exp .nm-rec-source{ font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:3px; color:rgba(180,140,80,.65);text-transform:uppercase; } #nrs-exp .nm-rec-stats{ max-width:520px;margin:0 auto 30px; display:grid;grid-template-columns:repeat(3,1fr);gap:1px; background:rgba(255,210,130,.1);border:1px solid rgba(255,210,130,.15); } #nrs-exp .nm-rec-stat{background:rgba(8,6,4,.85);padding:14px 8px;text-align:center;} #nrs-exp .nm-rec-stat-n{ font-family:'Cinzel',serif;font-size:clamp(16px,2.4vw,20px); color:rgba(255,225,170,.95);letter-spacing:1px; } #nrs-exp .nm-rec-stat-l{ font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:2px; color:rgba(180,160,120,.65);text-transform:uppercase;margin-top:4px;line-height:1.4; } #nrs-exp .nm-rec-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;max-width:500px;margin:0 auto;} #nrs-exp .nm-rec-btn{ background:none;border:1px solid rgba(255,210,130,.4); color:rgba(255,225,170,.85); font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:4px; padding:11px 22px;text-transform:uppercase;cursor:pointer; transition:all .3s; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } #nrs-exp .nm-rec-btn:hover{ background:rgba(255,210,130,.08);border-color:rgba(255,235,180,.85); color:rgba(255,240,200,1); } /* ── Advance + rewind ── */ #nrs-exp #nm-advance{ position:absolute;bottom:96px;left:50%;transform:translateX(-50%); z-index:32; background:rgba(255,180,90,.06); border:1px solid rgba(255,180,90,.45); color:rgba(255,210,150,.92); font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:4px; padding:12px 24px;text-transform:uppercase;cursor:pointer; transition:all .3s;opacity:0; display:flex;align-items:center;gap:8px; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } #nrs-exp #nm-advance.visible{opacity:1;} #nrs-exp #nm-advance:hover{background:rgba(255,180,90,.14);color:rgba(255,235,190,1);} #nrs-exp .nm-adv-arrow{transition:transform .3s;} #nrs-exp #nm-advance:hover .nm-adv-arrow{transform:translateX(4px);} #nrs-exp #nm-rewind{ position:absolute;top:54px;right:64px;z-index:32; background:none;border:1px solid rgba(220,140,80,.18); color:rgba(220,140,80,.6); font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px; padding:7px 11px;cursor:pointer;text-transform:uppercase; transition:all .25s; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } #nrs-exp #nm-rewind:hover{color:rgba(255,225,170,.85);border-color:rgba(255,210,130,.55);} /* ── Mobile ── */ @media(max-width:680px){ #nrs-exp #nm-stages{top:58px;} #nrs-exp #nm-stage-label{top:74px;font-size:6.5px;letter-spacing:3px;} #nrs-exp #nm-rewind{top:58px;right:60px;font-size:7px;padding:6px 10px;} #nrs-exp #nm-advance{bottom:115px;font-size:8.5px;padding:11px 20px;letter-spacing:3px;} #nrs-exp #nm-narrative{bottom:120px;font-size:14px;padding:14px 18px;} #nrs-exp #nm-tapas,#nrs-exp #nm-boons,#nrs-exp #nm-trials,#nrs-exp #nm-threshold{ top:100px;width:94vw;padding:12px 14px; } #nrs-exp .nm-bn-grid{grid-template-columns:1fr 1fr;} #nrs-exp .nm-bn-skt{font-size:14px;} #nrs-exp .nm-bn-name{font-size:9px;} #nrs-exp .nm-tr-grid{grid-template-columns:1fr 1fr;} #nrs-exp .nm-tr-card{min-height:auto;} #nrs-exp .nm-th-grid{grid-template-columns:1fr 1fr;} #nrs-exp #nm-prahlada,#nrs-exp #nm-question{padding:22px 18px;width:94vw;} #nrs-exp #nm-recognition{padding:60px 18px 50px;} #nrs-exp .nm-rec-stats{max-width:100%;} } @media(max-height:580px){ #nrs-exp #nm-narrative{bottom:95px;padding:12px 18px;font-size:13.5px;} #nrs-exp #nm-advance{bottom:92px;} } /* ══════════════════════════════════════════════════════════ FAQ TAB — appears as 7th layer-tab on every era Styled to fit existing layer-tab aesthetic ══════════════════════════════════════════════════════════ */ .ltab.ltab-faq{ position:relative; } .ltab.ltab-faq::before{ content:'?'; position:absolute; top:2px;right:4px; font-size:7px;color:rgba(201,168,76,.55); font-family:'IBM Plex Mono',monospace; } .ltab.ltab-faq.active::before{color:var(--bg);} /* FAQ content body inside layer-body */ .era-faq-wrap{ display:flex;flex-direction:column;gap:0; font-family:'Cormorant Garamond',serif; } .era-faq-intro{ margin-bottom:16px;padding-bottom:14px; border-bottom:1px solid rgba(201,168,76,.12); } .era-faq-eyebrow{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:5px; color:rgba(201,168,76,.65);text-transform:uppercase;margin-bottom:8px; } .era-faq-lede{ font-family:'Cormorant Garamond',serif;font-style:italic; font-size:14.5px;line-height:1.7; color:rgba(220,200,170,.78); } .era-faq-lede em{color:rgba(245,225,190,.92);} .era-faq-item{ padding:14px 0; border-bottom:1px solid rgba(201,168,76,.07); } .era-faq-item:last-of-type{border-bottom:none;} .era-faq-q{ font-family:'Cinzel',serif; font-size:13px;letter-spacing:.5px; color:rgba(255,225,170,.92); margin-bottom:8px;line-height:1.45; font-weight:500; } .era-faq-q::before{ content:'Q · '; color:rgba(201,168,76,.5); font-family:'IBM Plex Mono',monospace; font-size:9px;letter-spacing:2px; margin-right:4px; } .era-faq-a{ font-family:'Cormorant Garamond',serif; font-size:14.5px;line-height:1.75; color:rgba(220,200,170,.84); padding-left:14px; border-left:1px solid rgba(201,168,76,.18); } .era-faq-a em{color:rgba(255,210,130,.92);font-style:italic;} .era-faq-a strong{color:rgba(245,225,190,.96);font-weight:500;} .era-faq-foot{ margin-top:18px;padding-top:14px; border-top:1px solid rgba(201,168,76,.08); display:grid;grid-template-columns:1fr;gap:8px; font-family:'IBM Plex Mono',monospace; font-size:8.5px;letter-spacing:1.5px; color:rgba(180,160,120,.55);text-transform:uppercase; line-height:1.65; } .era-faq-foot-l,.era-faq-foot-r{ font-style:normal; } @media(max-width:680px){ .era-faq-q{font-size:12.5px;} .era-faq-a{font-size:13.5px;padding-left:10px;} .era-faq-foot{font-size:7.5px;letter-spacing:1px;} } /* ══════════════════════════════════════════════════════════ WHO THIS IS FOR — accessible from Om guide Sincere, slow, atmospheric. Uses the dark background. ══════════════════════════════════════════════════════════ */ #whofor-ov{ background:radial-gradient(ellipse at 50% 30%,#0e0a06 0%,#060402 60%,#020100 100%)!important; overflow-y:auto;-webkit-overflow-scrolling:touch; } .wf-wrap{ max-width:760px;margin:0 auto; padding:60px 36px 80px; } .wf-om{ font-size:90px;color:rgba(255,210,130,.85); text-align:center;line-height:1;margin-bottom:20px; text-shadow:0 0 50px rgba(255,180,90,.3); animation:wfOmPulse 6s ease-in-out infinite; } @keyframes wfOmPulse{ 0%,100%{text-shadow:0 0 50px rgba(255,180,90,.3);} 50%{text-shadow:0 0 80px rgba(255,210,130,.55);} } .wf-eyebrow{ font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:6px; color:rgba(201,168,76,.65);text-transform:uppercase;text-align:center;margin-bottom:18px; } .wf-line{ font-family:'Cormorant Garamond',serif; font-size:clamp(20px,3.2vw,28px);line-height:1.55; color:rgba(255,225,170,.96);text-align:center; margin-bottom:50px;font-style:italic; } .wf-line em{color:rgba(255,210,130,.96);} .wf-section{ margin-bottom:42px; } .wf-section-emphasis{ background:rgba(201,168,76,.04); border:1px solid rgba(201,168,76,.18); padding:30px 32px; } .wf-skt{ font-family:'Noto Sans Devanagari',serif; font-size:24px;color:rgba(255,210,130,.95); text-align:center;margin-bottom:6px; text-shadow:0 0 22px rgba(255,200,120,.25); } .wf-skt-rom{ font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:3px; color:rgba(180,160,120,.6);text-transform:uppercase;text-align:center; margin-bottom:18px; } .wf-section-title{ font-family:'Cinzel',serif; font-size:14px;letter-spacing:3px; color:rgba(255,225,170,.92);text-transform:uppercase; margin-bottom:14px; } .wf-body p{ font-family:'Cormorant Garamond',serif; font-size:17px;line-height:1.85; color:rgba(225,215,190,.88); margin-bottom:14px; } .wf-body p:last-child{margin-bottom:0;} .wf-body em{color:rgba(255,210,130,.92);font-style:italic;} .wf-body strong{color:rgba(255,225,170,.96);font-weight:500;} .wf-list{ list-style:none;padding:0;margin:0; } .wf-list li{ font-family:'Cormorant Garamond',serif; font-size:16.5px;line-height:1.75; color:rgba(225,215,190,.86); padding:10px 0 10px 22px; border-bottom:1px solid rgba(201,168,76,.07); position:relative; } .wf-list li::before{ content:'∴'; position:absolute;left:0;top:10px; color:rgba(255,180,90,.75); font-size:13px; } .wf-list li:last-child{border-bottom:none;} .wf-list li em{color:rgba(255,210,130,.9);} .wf-list li strong{color:rgba(245,225,190,.94);font-weight:500;} .wf-mahavakya{ margin:50px auto;max-width:560px;padding:30px 26px; background:rgba(255,210,130,.04); border:1px solid rgba(255,210,130,.2); text-align:center; } .wf-mv-skt{ font-family:'Noto Sans Devanagari',serif; font-size:18px;line-height:1.7;color:rgba(255,225,170,.95); margin-bottom:14px; text-shadow:0 0 24px rgba(255,200,120,.25); } .wf-mv-rom{ font-family:'Cinzel',serif;font-style:italic; font-size:13px;letter-spacing:1.5px;line-height:1.6; color:rgba(220,200,160,.7);margin-bottom:14px; } .wf-mv-eng{ font-family:'Cormorant Garamond',serif;font-style:italic; font-size:16px;line-height:1.7;color:rgba(245,225,190,.9);margin-bottom:12px; } .wf-mv-source{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px; color:rgba(180,140,80,.65);text-transform:uppercase; } .wf-foot{ margin-top:50px;padding-top:30px; border-top:1px solid rgba(201,168,76,.18); text-align:center; } .wf-foot-text{ font-family:'Cormorant Garamond',serif;font-style:italic; font-size:16px;line-height:1.75; color:rgba(225,215,190,.84); max-width:540px;margin:0 auto 24px; } .wf-foot-btns{ display:flex;gap:14px;justify-content:center;flex-wrap:wrap; } .wf-btn{ background:none;border:1px solid rgba(201,168,76,.4); color:rgba(245,225,190,.85); font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:4px; padding:13px 26px;text-transform:uppercase;cursor:pointer; transition:all .3s; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } .wf-btn:hover{ background:rgba(201,168,76,.08);border-color:rgba(255,225,170,.85); color:rgba(255,240,200,1); } .wf-btn-primary{ background:rgba(201,168,76,.08);border-color:rgba(255,210,130,.55); color:rgba(255,235,180,.95); } .wf-sign{ margin-top:30px;text-align:center; font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:3px; color:rgba(180,140,80,.55);text-transform:uppercase; } @media(max-width:680px){ .wf-wrap{padding:48px 22px 60px;} .wf-om{font-size:72px;} .wf-line{font-size:20px;margin-bottom:38px;} .wf-section-emphasis{padding:22px 18px;} .wf-body p{font-size:15.5px;} .wf-list li{font-size:15px;} .wf-mahavakya{padding:24px 18px;margin:40px 0;} .wf-mv-skt{font-size:15.5px;} .wf-foot-btns{flex-direction:column;align-items:center;} .wf-btn{width:100%;max-width:280px;} } /* ════════════════════════════════════════════════════════════════════ LAYOUT FIX BLOCK · 20260427 Fixes overlap + z-index issues across all big era-experience overlays (Vaivasvata, Narasiṃha, future builds). ════════════════════════════════════════════════════════════════════ */ /* ── Z-INDEX RESCUE ── .era-exp-content panels now sit ABOVE all animation overlays + advance buttons + stage labels + reveal panels. .era-exp-tabs sit above content so the tab bar still works. .era-exp-hdr stays on top so close button is always reachable. */ .era-exp-content{ z-index:100!important; background:rgba(2,1,3,.985)!important; } .era-exp-content-hdr{ z-index:101!important; background:rgba(2,1,3,.99)!important; padding:14px 20px!important; } .era-exp-tabs{ z-index:102!important; } .era-exp-hdr{ z-index:103!important; } /* When content panel is OPEN, suppress the canvas + animation overlays underneath. Toggled by JS via .content-active class on overlay root. */ #vaiv-exp.content-active > canvas, #nrs-exp.content-active > canvas{ filter:blur(2px) brightness(.4); pointer-events:none; } /* ── Hide overlay-stage panels while content is open ── Targets each known stage/reveal panel id pattern by namespace. */ #vaiv-exp.content-active #vv-narrative, #vaiv-exp.content-active #vv-verse, #vaiv-exp.content-active #vv-advance, #vaiv-exp.content-active #vv-rewind, #vaiv-exp.content-active #vv-stages, #vaiv-exp.content-active #vv-stage-label, #vaiv-exp.content-active #vv-prec-info, #vaiv-exp.content-active #vv-seer-counter, #vaiv-exp.content-active #vv-seer-hint, #vaiv-exp.content-active #vv-kali-clock, #vaiv-exp.content-active #vv-yuga-info, #vaiv-exp.content-active #vv-zoom-display, #vaiv-exp.content-active #vv-choose, #vaiv-exp.content-active #vv-lineage-panel, #vaiv-exp.content-active #vv-seer-reveal, #vaiv-exp.content-active #vv-teaching, #vaiv-exp.content-active #vv-recognition, #vaiv-exp.content-active .era-exp-hint, #nrs-exp.content-active #nm-narrative, #nrs-exp.content-active #nm-verse, #nrs-exp.content-active #nm-stages, #nrs-exp.content-active #nm-stage-label, #nrs-exp.content-active #nm-tapas, #nrs-exp.content-active #nm-boons, #nrs-exp.content-active #nm-trials, #nrs-exp.content-active #nm-prahlada, #nrs-exp.content-active #nm-question, #nrs-exp.content-active #nm-pillar, #nrs-exp.content-active #nm-threshold, #nrs-exp.content-active #nm-recognition, #nrs-exp.content-active #nm-advance, #nrs-exp.content-active #nm-rewind, #nrs-exp.content-active .era-exp-hint{ visibility:hidden!important; opacity:0!important; pointer-events:none!important; transition:opacity .25s,visibility 0s .25s!important; } /* ════════════════════════════════════════════════════════════════════ VAIVASVATA — DESKTOP LAYOUT FIXES The narrative sat at bottom:140px and the advance button sat at bottom:130px — they collided. Lift narrative higher; lift advance so neither touches the tab bar (which itself is ~46px tall + padding). ════════════════════════════════════════════════════════════════════ */ #vaiv-exp #vv-narrative{ bottom:auto!important; top:auto!important; /* Use a flexible vertical placement: roughly 25% from bottom, never closer than ~190px to the bottom edge so it clears the advance button + tab bar. */ bottom:200px!important; width:min(560px,86vw)!important; max-width:min(560px,86vw)!important; max-height:30vh!important; overflow-y:auto!important; -webkit-overflow-scrolling:touch!important; line-height:1.8!important; /* fix prior height:1.8 typo */ height:auto!important; padding:18px 24px!important; scrollbar-width:thin; scrollbar-color:rgba(201,168,76,.15) transparent; } #vaiv-exp #vv-advance{ bottom:130px!important; } #vaiv-exp #vv-rewind{ /* prevent collision with close X (top:0,right:18px area) */ top:62px!important; right:70px!important; } #vaiv-exp #vv-prec-info, #vaiv-exp #vv-seer-hint{ /* Both were at bottom:180px — separate them so they never fight */ bottom:auto!important; } #vaiv-exp #vv-prec-info{ top:auto!important; bottom:240px!important; } #vaiv-exp #vv-seer-hint{ top:auto!important; bottom:200px!important; } #vaiv-exp #vv-seer-counter{ /* originally top:120px — push it to clear the stage label area */ top:128px!important; } /* Centred reveal panels: cap heights so they don't bleed into the tabs */ #vaiv-exp #vv-choose, #vaiv-exp #vv-lineage-panel, #vaiv-exp #vv-teaching, #vaiv-exp #vv-seer-reveal{ max-height:min(78vh,720px)!important; overflow-y:auto!important; -webkit-overflow-scrolling:touch!important; } /* ════════════════════════════════════════════════════════════════════ NARASIṂHA — DESKTOP LAYOUT FIXES Narrative was bottom:160px, advance was bottom:96px. Tab bar is ~46px. Lift narrative; lift advance; cap heights of large panels. ════════════════════════════════════════════════════════════════════ */ #nrs-exp #nm-narrative{ bottom:200px!important; width:min(640px,86vw)!important; max-height:28vh!important; overflow-y:auto!important; -webkit-overflow-scrolling:touch!important; padding:16px 24px!important; } #nrs-exp #nm-advance{ bottom:130px!important; } #nrs-exp #nm-rewind{ top:62px!important; right:70px!important; } /* Tap-target zones for the act stages must sit ABOVE the narrative so users can interact with the heads/pillar/etc. WITHOUT the narrative panel intercepting clicks. */ #nrs-exp #nm-prahlada, #nrs-exp #nm-question, #nrs-exp #nm-pillar{ z-index:33!important; /* above narrative (z25) and verse (z25) */ } /* Threshold grid: cap height so it never touches advance/tabs */ #nrs-exp #nm-threshold{ max-height:calc(100vh - 280px)!important; overflow-y:auto!important; -webkit-overflow-scrolling:touch!important; } /* Boons + Trials grids: same — cap height on desktop so users see all five cards without the bottom row being hidden by narrative/advance. */ #nrs-exp #nm-boons, #nrs-exp #nm-trials{ max-height:calc(100vh - 320px)!important; overflow-y:auto!important; -webkit-overflow-scrolling:touch!important; } /* Tapas meter: same cap so the "Tap to add years" instruction is never hidden behind the advance button on small desktop windows. */ #nrs-exp #nm-tapas{ max-height:calc(100vh - 320px)!important; overflow-y:auto!important; -webkit-overflow-scrolling:touch!important; } /* When ANY centred reveal panel is open, the canvas behind it should not eat clicks meant for the panel's interactive cards. */ #nrs-exp #nm-prahlada.visible, #nrs-exp #nm-question.visible, #nrs-exp #nm-pillar.visible{ /* already set in main CSS; pointer-events:auto enforced below */ } /* ════════════════════════════════════════════════════════════════════ GENERIC: every era-exp panel that pops in via .visible should intercept its own pointer-events (so the canvas behind doesn't steal clicks intended for the panel's buttons/cards). ════════════════════════════════════════════════════════════════════ */ .modal-base [id$="-narrative"].visible, .modal-base [id$="-verse"].visible{ /* These are pure-text overlays — keep pointer-events:none so users can still click through to canvas-rendered targets behind them. */ pointer-events:none!important; } /* Tab bar visual: subtle solid backstop so tab labels never read as crossed-out when prose narrative scrolls behind. */ .era-exp-tabs{ background:linear-gradient(to top,rgba(2,2,4,.985) 70%,rgba(2,2,4,.7) 90%,transparent)!important; padding:10px 12px 14px!important; min-height:46px; } /* ════════════════════════════════════════════════════════════════════ MOBILE LAYOUT — re-tune everything for the smaller viewport ════════════════════════════════════════════════════════════════════ */ @media(max-width:680px){ #vaiv-exp #vv-narrative{ bottom:170px!important; width:94vw!important; max-width:94vw!important; max-height:32vh!important; padding:14px 16px!important; font-size:13.5px!important; } #vaiv-exp #vv-advance{ bottom:108px!important; font-size:8.5px!important;padding:11px 18px!important; } #vaiv-exp #vv-rewind{ top:58px!important;right:62px!important; font-size:7px!important;padding:6px 10px!important; } #vaiv-exp #vv-prec-info{ bottom:230px!important; width:94vw!important; max-width:94vw!important;} #vaiv-exp #vv-seer-hint{ bottom:185px!important; } #vaiv-exp #vv-choose, #vaiv-exp #vv-lineage-panel, #vaiv-exp #vv-teaching, #vaiv-exp #vv-seer-reveal{ max-height:calc(100vh - 200px)!important; width:94vw!important; } #nrs-exp #nm-narrative{ bottom:165px!important; width:94vw!important;max-width:94vw!important; max-height:30vh!important; padding:12px 16px!important; font-size:13.5px!important; } #nrs-exp #nm-advance{ bottom:108px!important; font-size:8.5px!important;padding:11px 18px!important; } #nrs-exp #nm-rewind{ top:58px!important;right:62px!important; font-size:7px!important;padding:6px 10px!important; } #nrs-exp #nm-tapas, #nrs-exp #nm-boons, #nrs-exp #nm-trials, #nrs-exp #nm-threshold{ max-height:calc(100vh - 360px)!important; } /* Tab bar slightly taller on mobile (smaller font, more padding for tap) */ .era-exp-tabs{padding:12px 10px 16px!important;min-height:54px;} .era-exp-tab{padding:8px 10px!important;font-size:7px!important;letter-spacing:1.5px!important;} } /* ════════════════════════════════════════════════════════════════════ SHORT VIEWPORTS (laptops with smaller screens, landscape mobiles) ════════════════════════════════════════════════════════════════════ */ @media(max-height:680px){ #vaiv-exp #vv-narrative, #nrs-exp #nm-narrative{ bottom:160px!important; max-height:24vh!important; padding:12px 18px!important; } #vaiv-exp #vv-advance, #nrs-exp #nm-advance{ bottom:96px!important; } } @media(max-height:560px){ #vaiv-exp #vv-narrative, #nrs-exp #nm-narrative{ bottom:130px!important; max-height:20vh!important; padding:10px 14px!important; font-size:12.5px!important; } #vaiv-exp #vv-advance, #nrs-exp #nm-advance{ bottom:80px!important; } .era-exp-tabs{padding:6px 10px 8px!important;min-height:36px;} .era-exp-tab{padding:5px 10px!important;font-size:6.5px!important;} } /* ════════════════════════════════════════════════════════════════════ EXTRA: tap-targets — ensure no element ever occupies less than 44px when it's the user's primary interaction surface. Applies to all .nm-bn-card, .nm-tr-card, .nm-th-card, .vv reveal cards, etc. ════════════════════════════════════════════════════════════════════ */ #nrs-exp .nm-bn-card, #nrs-exp .nm-tr-card, #nrs-exp .nm-th-card{ min-height:44px; } /* ════════════════════════════════════════════════════════════════════ PANEL CLICK PASS-THROUGH FIX The centered reveal panels (question, prahlada, etc.) were intercepting clicks meant for the canvas-rendered tap targets behind them. Make the panel containers transparent to clicks while keeping their interactive children (mantra text, buttons) clickable. ════════════════════════════════════════════════════════════════════ */ /* nm-question: NO interactive children — transparent to clicks so user can tap the pillar on the canvas behind it. */ #nrs-exp #nm-question.visible{ pointer-events:none!important; } /* nm-prahlada: only the mantra is interactive — make panel transparent but mantra clickable. */ #nrs-exp #nm-prahlada.visible{ pointer-events:none!important; } #nrs-exp #nm-prahlada.visible .nm-pr-mantra{ pointer-events:auto!important; } /* nm-pillar: this panel is purely decorative ("the pillar splits") — transparent to clicks. */ #nrs-exp #nm-pillar.visible{ pointer-events:none!important; } /* nm-tapas: the meter is on the canvas; the panel only shows instructions — transparent to clicks. */ #nrs-exp #nm-tapas{ pointer-events:none!important; } /* Boons + Trials: cards ARE interactive, panel itself isn't — keep cards clickable, panel transparent. */ #nrs-exp #nm-boons.visible, #nrs-exp #nm-trials.visible{ pointer-events:none!important; } #nrs-exp .nm-bn-card, #nrs-exp .nm-tr-card{ pointer-events:auto!important; } /* Threshold: read-only grid — transparent. */ #nrs-exp #nm-threshold.visible{ pointer-events:none!important; } /* Recognition: full overlay with buttons — buttons must remain interactive but the body shouldn't block underneath canvas. */ #nrs-exp #nm-recognition.visible{ pointer-events:auto!important; /* full overlay needs scroll */ } /* ════════════════════════════════════════════════════════════════════ OVERLAY ISOLATION FIX · 20260428 When the "Discover Deeper" panel (#ov) or any .modal-base overlay is open, hide all timeline-chrome elements (header, nav, content stage, polarity bands, consciousness spectrum, sparks, tooltips, forgotten-ones button) so no underlying text/UI bleeds through. This is a body-level rule — toggled via .ov-isolated / .modal-isolated. ════════════════════════════════════════════════════════════════════ */ /* Make #ov fully opaque so absolutely nothing behind shows through */ #ov{ background:rgba(3,2,4,.985)!important; backdrop-filter:blur(18px)!important; -webkit-backdrop-filter:blur(18px)!important; } /* When ANY overlay is open, hide every timeline-chrome layer that sits at z-index 1-300. The overlay itself sits at z-400 or higher and must be the only thing the user sees. */ body.ov-active #hdr, body.ov-active #nav, body.ov-active #prog, body.ov-active #return-btn, body.ov-active #shint, body.ov-active #cspec, body.ov-active #content-stage, body.ov-active .polarity-label, body.ov-active #deva-band, body.ov-active #asura-band, body.ov-active #ttip, body.ov-active #fgt-btn, body.ov-active #axis-wrap, body.ov-active #track-wrap, body.ov-active #bg-glyph, body.ov-active .spark{ visibility:hidden!important; opacity:0!important; pointer-events:none!important; transition:opacity .25s,visibility 0s .25s!important; } /* For full-screen .modal-base overlays (Vaivasvata, Narasiṃha, etc.) — these sit at z-600. They cover everything visually, but any ttip/spark may still poke through. Hide those too. */ body.modal-active #ttip, body.modal-active .spark, body.modal-active #bg-glyph, body.modal-active #fgt-btn{ visibility:hidden!important; opacity:0!important; pointer-events:none!important; } /* Tighten the panel itself — make sure its background is fully opaque so era-side content doesn't ghost through the panel border on the left edge. */ #panel{ background:#0a0806!important; box-shadow:-30px 0 80px rgba(0,0,0,.6),0 0 0 1px rgba(201,168,76,.15)!important; } /* The panel's sticky header backstop — opaque, no bleed-through */ .phead{background:#0a0806!important;} /* ════════════════════════════════════════════════════════════════════ ERA 12: VARĀHA — Cosmic Boar palette Deep ocean blue → rising amber/earth-gold ════════════════════════════════════════════════════════════════════ */ #vh-exp{ background:radial-gradient(ellipse at 50% 60%,#0a1a2c 0%,#040a18 55%,#02050c 100%)!important; } #vh-exp #vh-stages{ position:absolute;top:62px;left:50%;transform:translateX(-50%); display:flex;gap:8px;z-index:30;pointer-events:none; } #vh-exp .vh-stage-dot{width:6px;height:6px;border-radius:50%;background:rgba(180,160,100,.18);transition:all .5s;} #vh-exp .vh-stage-dot.current{background:rgba(200,140,80,.95);box-shadow:0 0 12px rgba(200,140,80,.7);transform:scale(1.4);} #vh-exp .vh-stage-dot.done{background:rgba(160,120,70,.55);} #vh-exp #vh-stage-label{ position:absolute;top:80px;left:50%;transform:translateX(-50%);z-index:30;pointer-events:none; font-family:'IBM Plex Mono',monospace;font-size:7.5px;letter-spacing:5px; color:rgba(200,180,140,.6);text-transform:uppercase;text-align:center; } #vh-exp #vh-narrative{ position:absolute;bottom:200px;left:50%;transform:translate(-50%,8px); width:min(86vw,640px);max-height:28vh;overflow-y:auto; font-family:'Cormorant Garamond',serif;font-style:italic; font-size:clamp(15px,2vw,20px);line-height:1.7; color:rgba(225,210,180,0);text-align:center;padding:18px 26px; background:rgba(8,12,20,.65); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); border:1px solid rgba(200,140,80,.12); z-index:25;pointer-events:none; transition:opacity 1.2s,transform 1.2s,color 1.2s; } #vh-exp #vh-narrative.visible{color:rgba(225,210,180,.94);transform:translate(-50%,0);} #vh-exp #vh-narrative em{color:rgba(200,180,140,.96);} #vh-exp #vh-narrative strong{color:rgba(245,225,180,.98);font-weight:500;} #vh-exp #vh-verse{ position:absolute;top:14%;left:50%;transform:translateX(-50%); font-family:'Noto Sans Devanagari',serif; font-size:clamp(15px,2.4vw,22px);letter-spacing:1px; color:rgba(220,180,120,0);text-align:center; z-index:25;pointer-events:none; text-shadow:0 0 24px rgba(220,160,80,.4); opacity:0;transition:opacity 1.6s,color 1.6s; } #vh-exp #vh-verse.visible{opacity:1;color:rgba(220,180,120,.92);} /* Cry panel */ #vh-exp #vh-cry{ position:absolute;top:108px;left:50%;transform:translateX(-50%); width:min(88vw,560px);text-align:center;z-index:28;pointer-events:none;opacity:0; transition:opacity .8s;padding:18px 24px; background:rgba(8,12,20,.7);backdrop-filter:blur(8px); border:1px solid rgba(120,180,220,.22); } #vh-exp #vh-cry.visible{opacity:1;} #vh-exp .vh-cry-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:5px;color:rgba(120,180,220,.7);text-transform:uppercase;margin-bottom:8px;} #vh-exp .vh-cry-q{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:14px;color:rgba(225,215,190,.82);line-height:1.6;margin-bottom:14px;} #vh-exp .vh-cry-counter{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:3px;color:rgba(200,180,140,.92);} /* Descent panel */ #vh-exp #vh-descent{ position:absolute;top:108px;left:50%;transform:translateX(-50%); width:min(94vw,720px);max-height:calc(100vh - 320px);overflow-y:auto; z-index:28;pointer-events:none;opacity:0; transition:opacity .8s;padding:16px 20px; background:rgba(12,8,4,.78);backdrop-filter:blur(8px); border:1px solid rgba(200,140,80,.22); } #vh-exp #vh-descent.visible{opacity:1;pointer-events:none;} #vh-exp .vh-d-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:5px;color:rgba(200,140,80,.7);text-transform:uppercase;text-align:center;margin-bottom:10px;} #vh-exp .vh-d-q{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:13.5px;color:rgba(225,215,190,.78);text-align:center;margin-bottom:14px;line-height:1.55;} #vh-exp .vh-d-meter{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin-bottom:14px;} #vh-exp .vh-d-meter-lbl{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:3px;color:rgba(200,140,80,.55);text-transform:uppercase;} #vh-exp .vh-d-meter-bar{height:5px;background:rgba(40,16,8,.7);border:1px solid rgba(200,140,80,.25);overflow:hidden;} #vh-exp .vh-d-meter-fill{height:100%;width:0%;background:linear-gradient(90deg,rgba(120,180,220,.5),rgba(220,160,80,.95));transition:width .5s;box-shadow:0 0 12px rgba(220,160,80,.4);} #vh-exp .vh-d-meter-pct{font-family:'IBM Plex Mono',monospace;font-size:9px;color:rgba(220,180,120,.85);} #vh-exp .vh-d-counter{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px;color:rgba(200,140,80,.55);text-transform:uppercase;text-align:center;margin-bottom:10px;} #vh-exp .vh-d-reveal{font-family:'Cormorant Garamond',serif;font-size:13.5px;line-height:1.65;color:rgba(225,215,190,.86);background:rgba(20,8,4,.5);padding:14px 16px;border:1px solid rgba(200,140,80,.18);min-height:60px;font-style:italic;} #vh-exp .vh-d-reveal:empty::before{content:'tap the heart of the asura on the canvas to expose the next lie';opacity:.4;font-size:12px;} /* Recognition */ #vh-exp #vh-recognition{ position:absolute;top:0;left:0;right:0;bottom:0;z-index:35;pointer-events:none;opacity:0; background:radial-gradient(ellipse at 50% 35%,rgba(40,28,12,.95) 0%,rgba(4,2,1,.97) 80%); backdrop-filter:blur(16px);overflow-y:auto; padding:70px 22px 60px;transition:opacity 1.2s; } #vh-exp #vh-recognition.visible{opacity:1;pointer-events:auto;} #vh-exp .vh-rec-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:6px;color:rgba(220,180,120,.6);text-transform:uppercase;text-align:center;margin-bottom:12px;} #vh-exp .vh-rec-heading{font-family:'Cinzel',serif;font-size:clamp(24px,4vw,38px);letter-spacing:5px;color:rgba(245,225,180,.96);text-align:center;text-shadow:0 0 24px rgba(220,160,80,.35);margin-bottom:30px;} #vh-exp .vh-rec-body{font-family:'Cormorant Garamond',serif;font-size:clamp(14.5px,1.9vw,17px);line-height:1.85;color:rgba(225,215,190,.92);max-width:600px;margin:0 auto 30px;} #vh-exp .vh-rec-body p{margin-bottom:14px;} #vh-exp .vh-rec-body strong{color:rgba(245,225,180,.98);font-weight:500;} #vh-exp .vh-rec-body em{color:rgba(220,180,120,.95);} #vh-exp .vh-rec-line{font-style:italic;text-align:center;color:rgba(220,180,120,.92);font-size:1.05em;} #vh-exp .vh-rec-mahavakya{max-width:560px;margin:0 auto 30px;padding:24px 20px;background:rgba(220,160,80,.04);border:1px solid rgba(220,160,80,.15);text-align:center;} #vh-exp .vh-rec-skt{font-family:'Noto Sans Devanagari',serif;font-size:clamp(20px,3vw,26px);letter-spacing:2px;color:rgba(245,225,180,.98);text-shadow:0 0 22px rgba(220,160,80,.3);margin-bottom:8px;} #vh-exp .vh-rec-rom{font-family:'Cinzel',serif;font-style:italic;font-size:clamp(13px,1.7vw,15.5px);letter-spacing:2px;color:rgba(200,180,140,.7);margin-bottom:10px;} #vh-exp .vh-rec-eng{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(14px,1.8vw,16px);color:rgba(245,225,180,.88);margin-bottom:14px;} #vh-exp .vh-rec-source{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:3px;color:rgba(180,140,80,.65);text-transform:uppercase;} #vh-exp .vh-rec-stats{max-width:520px;margin:0 auto 30px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(220,160,80,.1);border:1px solid rgba(220,160,80,.15);} #vh-exp .vh-rec-stat{background:rgba(8,6,4,.85);padding:14px 8px;text-align:center;} #vh-exp .vh-rec-stat-n{font-family:'Cinzel',serif;font-size:clamp(16px,2.4vw,20px);color:rgba(245,225,180,.95);} #vh-exp .vh-rec-stat-l{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:2px;color:rgba(180,160,120,.65);text-transform:uppercase;margin-top:4px;line-height:1.4;} #vh-exp .vh-rec-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;max-width:500px;margin:0 auto;} #vh-exp .vh-rec-btn{background:none;border:1px solid rgba(220,180,120,.4);color:rgba(245,225,180,.85);font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:4px;padding:11px 22px;text-transform:uppercase;cursor:pointer;transition:all .3s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;} #vh-exp .vh-rec-btn:hover{background:rgba(220,180,120,.08);border-color:rgba(245,225,180,.85);color:rgba(255,235,200,1);} #vh-exp #vh-advance{ position:absolute;bottom:130px;left:50%;transform:translateX(-50%);z-index:32; background:rgba(220,160,80,.06);border:1px solid rgba(220,160,80,.45); color:rgba(245,210,150,.92); font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:4px; padding:12px 24px;text-transform:uppercase;cursor:pointer; transition:all .3s;opacity:0;display:flex;align-items:center;gap:8px; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } #vh-exp #vh-advance.visible{opacity:1;} #vh-exp #vh-advance:hover{background:rgba(220,160,80,.14);color:rgba(255,235,190,1);} #vh-exp .vh-adv-arrow{transition:transform .3s;} #vh-exp #vh-advance:hover .vh-adv-arrow{transform:translateX(4px);} #vh-exp #vh-rewind{ position:absolute;top:62px;right:70px;z-index:32; background:none;border:1px solid rgba(180,140,80,.18); color:rgba(180,140,80,.6); font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px; padding:7px 11px;cursor:pointer;text-transform:uppercase;transition:all .25s; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } #vh-exp #vh-rewind:hover{color:rgba(245,225,180,.85);border-color:rgba(220,180,120,.55);} /* ════════════════════════════════════════════════════════════════════ ERA 14: VĀMANA — palette of measured cosmos Twilight-blue with cosmic gold; expansion = warmth toward white-gold ════════════════════════════════════════════════════════════════════ */ #vm-exp{ background:radial-gradient(ellipse at 50% 35%,#1a1226 0%,#0a0816 55%,#02010a 100%)!important; } #vm-exp #vm-stages{ position:absolute;top:62px;left:50%;transform:translateX(-50%); display:flex;gap:8px;z-index:30;pointer-events:none; } #vm-exp .vm-stage-dot{width:6px;height:6px;border-radius:50%;background:rgba(220,200,140,.18);transition:all .5s;} #vm-exp .vm-stage-dot.current{background:rgba(255,225,150,.95);box-shadow:0 0 12px rgba(255,210,130,.7);transform:scale(1.4);} #vm-exp .vm-stage-dot.done{background:rgba(180,160,110,.55);} #vm-exp #vm-stage-label{ position:absolute;top:80px;left:50%;transform:translateX(-50%);z-index:30;pointer-events:none; font-family:'IBM Plex Mono',monospace;font-size:7.5px;letter-spacing:5px; color:rgba(220,200,160,.6);text-transform:uppercase;text-align:center; } #vm-exp #vm-narrative{ position:absolute;bottom:200px;left:50%;transform:translate(-50%,8px); width:min(86vw,640px);max-height:28vh;overflow-y:auto; font-family:'Cormorant Garamond',serif;font-style:italic; font-size:clamp(15px,2vw,20px);line-height:1.7; color:rgba(245,230,200,0);text-align:center;padding:18px 26px; background:rgba(8,6,16,.65); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); border:1px solid rgba(220,180,120,.12); z-index:25;pointer-events:none; transition:opacity 1.2s,transform 1.2s,color 1.2s; } #vm-exp #vm-narrative.visible{color:rgba(245,230,200,.94);transform:translate(-50%,0);} #vm-exp #vm-narrative em{color:rgba(255,210,130,.96);} #vm-exp #vm-narrative strong{color:rgba(255,235,190,.98);font-weight:500;} #vm-exp #vm-verse{ position:absolute;top:14%;left:50%;transform:translateX(-50%); font-family:'Noto Sans Devanagari',serif;font-size:clamp(15px,2.4vw,22px);letter-spacing:1px; color:rgba(255,210,130,0);text-align:center;z-index:25;pointer-events:none; text-shadow:0 0 24px rgba(255,180,90,.4);opacity:0;transition:opacity 1.6s,color 1.6s; } #vm-exp #vm-verse.visible{opacity:1;color:rgba(255,210,130,.92);} /* Bali virtues */ #vm-exp #vm-bali{ position:absolute;top:108px;left:50%;transform:translateX(-50%); width:min(94vw,720px);max-height:calc(100vh - 320px);overflow-y:auto; z-index:28;pointer-events:none;opacity:0; transition:opacity .8s;padding:16px 20px; background:rgba(12,8,18,.72);backdrop-filter:blur(8px); border:1px solid rgba(220,180,120,.22); } #vm-exp #vm-bali.visible{opacity:1;pointer-events:none;} #vm-exp #vm-bali.visible .vm-b-card{pointer-events:auto;} #vm-exp .vm-b-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:5px;color:rgba(255,210,130,.7);text-transform:uppercase;text-align:center;margin-bottom:10px;} #vm-exp .vm-b-q{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:13.5px;color:rgba(230,215,185,.78);text-align:center;margin-bottom:14px;line-height:1.55;} #vm-exp .vm-b-q em{color:rgba(255,210,130,.92);} #vm-exp .vm-b-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px;} #vm-exp .vm-b-card{padding:12px 10px;background:rgba(20,12,28,.65);border:1px solid rgba(220,180,120,.22);cursor:pointer;transition:all .3s;text-align:center;touch-action:manipulation;-webkit-tap-highlight-color:transparent;min-height:130px;display:flex;flex-direction:column;} #vm-exp .vm-b-card:hover,#vm-exp .vm-b-card.open{border-color:rgba(255,210,130,.6);background:rgba(40,24,52,.7);} #vm-exp .vm-b-num{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:3px;color:rgba(255,180,90,.7);text-transform:uppercase;margin-bottom:6px;} #vm-exp .vm-b-skt{font-family:'Noto Sans Devanagari',serif;font-size:14px;color:rgba(255,210,130,.95);margin-bottom:4px;} #vm-exp .vm-b-name{font-family:'Cinzel',serif;font-size:9px;letter-spacing:1.5px;color:rgba(245,230,200,.92);margin-bottom:8px;text-transform:uppercase;} #vm-exp .vm-b-body{font-family:'Cormorant Garamond',serif;font-size:11.5px;line-height:1.5;color:rgba(225,215,190,.78);font-style:italic;} #vm-exp .vm-b-counter{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px;color:rgba(255,180,90,.55);text-transform:uppercase;text-align:center;} /* Request panel */ #vm-exp #vm-request{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95); width:min(88vw,520px);text-align:center;z-index:28;pointer-events:none;opacity:0; transition:opacity .8s,transform .8s;padding:28px 24px; background:rgba(8,6,18,.88);backdrop-filter:blur(12px); border:1px solid rgba(255,210,130,.35); box-shadow:0 0 50px rgba(255,180,90,.18); } #vm-exp #vm-request.visible{opacity:1;pointer-events:none;transform:translate(-50%,-50%) scale(1);} #vm-exp .vm-r-line{font-family:'Cormorant Garamond',serif;font-size:14px;line-height:1.7;color:rgba(245,230,200,.88);font-style:italic;margin-bottom:16px;} #vm-exp .vm-r-line em{color:rgba(255,210,130,.95);} #vm-exp .vm-r-skt{font-family:'Noto Sans Devanagari',serif;font-size:22px;color:rgba(255,225,150,.95);margin-bottom:6px;text-shadow:0 0 18px rgba(255,180,90,.5);} #vm-exp .vm-r-rom{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:3px;color:rgba(220,180,120,.7);text-transform:uppercase;margin-bottom:10px;} #vm-exp .vm-r-trans{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:15px;color:rgba(255,225,170,.92);margin-bottom:18px;} #vm-exp .vm-r-court{font-family:'Cormorant Garamond',serif;font-size:13.5px;line-height:1.65;color:rgba(225,215,190,.82);font-style:italic;margin-bottom:14px;} #vm-exp .vm-r-court em{color:rgba(255,210,130,.92);} #vm-exp .vm-r-tap{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:4px;color:rgba(255,180,90,.7);text-transform:uppercase;animation:vmTapPulse 1.6s ease-in-out infinite;} @keyframes vmTapPulse{0%,100%{opacity:.7;}50%{opacity:1;}} /* Trivikrama growth */ #vm-exp #vm-trivikrama{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:min(88vw,520px);text-align:center;z-index:28;pointer-events:none;opacity:0; transition:opacity .8s;padding:24px; background:rgba(8,6,18,.7);backdrop-filter:blur(10px); border:1px solid rgba(255,210,130,.3); } #vm-exp #vm-trivikrama.visible{opacity:1;pointer-events:none;} #vm-exp .vm-t-eyebrow{font-family:'Noto Sans Devanagari',serif;font-size:22px;color:rgba(255,225,150,.95);margin-bottom:6px;text-shadow:0 0 22px rgba(255,180,90,.45);} #vm-exp .vm-t-line{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:15px;color:rgba(245,230,200,.88);margin-bottom:18px;} #vm-exp .vm-t-line em{color:rgba(255,210,130,.95);} #vm-exp .vm-t-meter{margin-bottom:14px;} #vm-exp .vm-t-meter-bar{height:6px;background:rgba(40,28,52,.7);border:1px solid rgba(255,210,130,.3);overflow:hidden;margin-bottom:6px;} #vm-exp .vm-t-meter-fill{height:100%;width:0%;background:linear-gradient(90deg,rgba(180,140,255,.7),rgba(255,210,130,.95),rgba(255,255,220,1));transition:width .4s;box-shadow:0 0 14px rgba(255,210,130,.6);} #vm-exp .vm-t-scale{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:3px;color:rgba(255,210,130,.85);text-transform:uppercase;} #vm-exp .vm-t-tap{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:4px;color:rgba(255,180,90,.7);text-transform:uppercase;} /* Three steps */ #vm-exp #vm-steps{ position:absolute;top:108px;left:50%;transform:translateX(-50%); width:min(94vw,720px);max-height:calc(100vh - 320px);overflow-y:auto; z-index:28;pointer-events:none;opacity:0; transition:opacity .8s;padding:18px 20px; background:rgba(8,6,18,.75);backdrop-filter:blur(10px); border:1px solid rgba(255,210,130,.25); } #vm-exp #vm-steps.visible{opacity:1;pointer-events:none;} #vm-exp #vm-steps.visible .vm-s-card{pointer-events:auto;} #vm-exp .vm-s-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:5px;color:rgba(255,210,130,.7);text-transform:uppercase;text-align:center;margin-bottom:14px;} #vm-exp .vm-s-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px;} #vm-exp .vm-s-card{padding:18px 14px;background:rgba(20,14,32,.65);border:1px solid rgba(220,180,120,.18);cursor:pointer;transition:all .4s;text-align:center;opacity:.45;touch-action:manipulation;-webkit-tap-highlight-color:transparent;min-height:140px;} #vm-exp .vm-s-card.unlocked{opacity:1;} #vm-exp .vm-s-card.taken{background:rgba(40,28,60,.7);border-color:rgba(255,210,130,.55);} #vm-exp .vm-s-card.unlocked:hover{border-color:rgba(255,225,150,.85);} #vm-exp .vm-s-skt{font-family:'Noto Sans Devanagari',serif;font-size:20px;color:rgba(255,210,130,.95);margin-bottom:8px;} #vm-exp .vm-s-name{font-family:'Cinzel',serif;font-size:10px;letter-spacing:2px;color:rgba(245,230,200,.92);margin-bottom:10px;text-transform:uppercase;} #vm-exp .vm-s-desc{font-family:'Cormorant Garamond',serif;font-size:13px;line-height:1.6;color:rgba(225,215,190,.84);font-style:italic;} #vm-exp .vm-s-counter{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px;color:rgba(255,180,90,.55);text-transform:uppercase;text-align:center;} /* Recognition */ #vm-exp #vm-recognition{ position:absolute;top:0;left:0;right:0;bottom:0;z-index:35;pointer-events:none;opacity:0; background:radial-gradient(ellipse at 50% 35%,rgba(40,28,52,.95) 0%,rgba(4,2,8,.97) 80%); backdrop-filter:blur(16px);overflow-y:auto;padding:70px 22px 60px;transition:opacity 1.2s; } #vm-exp #vm-recognition.visible{opacity:1;pointer-events:auto;} #vm-exp .vm-rec-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:6px;color:rgba(255,210,130,.6);text-transform:uppercase;text-align:center;margin-bottom:12px;} #vm-exp .vm-rec-heading{font-family:'Cinzel',serif;font-size:clamp(24px,4vw,38px);letter-spacing:5px;color:rgba(255,225,170,.96);text-align:center;text-shadow:0 0 24px rgba(255,180,90,.35);margin-bottom:30px;} #vm-exp .vm-rec-body{font-family:'Cormorant Garamond',serif;font-size:clamp(14.5px,1.9vw,17px);line-height:1.85;color:rgba(225,215,190,.92);max-width:600px;margin:0 auto 30px;} #vm-exp .vm-rec-body p{margin-bottom:14px;} #vm-exp .vm-rec-body strong{color:rgba(255,225,170,.98);font-weight:500;} #vm-exp .vm-rec-body em{color:rgba(255,210,130,.95);} #vm-exp .vm-rec-line{font-style:italic;text-align:center;color:rgba(255,210,130,.92);font-size:1.05em;} #vm-exp .vm-rec-mahavakya{max-width:560px;margin:0 auto 30px;padding:24px 20px;background:rgba(255,210,130,.04);border:1px solid rgba(255,210,130,.15);text-align:center;} #vm-exp .vm-rec-skt{font-family:'Noto Sans Devanagari',serif;font-size:clamp(20px,3vw,26px);letter-spacing:2px;color:rgba(255,225,170,.98);text-shadow:0 0 22px rgba(255,200,120,.3);margin-bottom:8px;} #vm-exp .vm-rec-rom{font-family:'Cinzel',serif;font-style:italic;font-size:clamp(13px,1.7vw,15.5px);letter-spacing:2px;color:rgba(220,200,160,.7);margin-bottom:10px;} #vm-exp .vm-rec-eng{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(14px,1.8vw,16px);color:rgba(245,225,190,.88);margin-bottom:14px;} #vm-exp .vm-rec-source{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:3px;color:rgba(180,140,80,.65);text-transform:uppercase;} #vm-exp .vm-rec-stats{max-width:520px;margin:0 auto 30px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,210,130,.1);border:1px solid rgba(255,210,130,.15);} #vm-exp .vm-rec-stat{background:rgba(8,6,12,.85);padding:14px 8px;text-align:center;} #vm-exp .vm-rec-stat-n{font-family:'Cinzel',serif;font-size:clamp(16px,2.4vw,20px);color:rgba(255,225,170,.95);} #vm-exp .vm-rec-stat-l{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:2px;color:rgba(180,160,120,.65);text-transform:uppercase;margin-top:4px;line-height:1.4;} #vm-exp .vm-rec-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;max-width:500px;margin:0 auto;} #vm-exp .vm-rec-btn{background:none;border:1px solid rgba(255,210,130,.4);color:rgba(255,225,170,.85);font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:4px;padding:11px 22px;text-transform:uppercase;cursor:pointer;transition:all .3s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;} #vm-exp .vm-rec-btn:hover{background:rgba(255,210,130,.08);border-color:rgba(255,235,180,.85);color:rgba(255,240,200,1);} #vm-exp #vm-advance{ position:absolute;bottom:130px;left:50%;transform:translateX(-50%);z-index:32; background:rgba(255,210,130,.06);border:1px solid rgba(255,210,130,.45); color:rgba(255,225,170,.92); font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:4px; padding:12px 24px;text-transform:uppercase;cursor:pointer; transition:all .3s;opacity:0;display:flex;align-items:center;gap:8px; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } #vm-exp #vm-advance.visible{opacity:1;} #vm-exp #vm-advance:hover{background:rgba(255,210,130,.14);color:rgba(255,235,190,1);} #vm-exp .vm-adv-arrow{transition:transform .3s;} #vm-exp #vm-advance:hover .vm-adv-arrow{transform:translateX(4px);} #vm-exp #vm-rewind{ position:absolute;top:62px;right:70px;z-index:32; background:none;border:1px solid rgba(180,140,80,.18);color:rgba(180,140,80,.6); font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px; padding:7px 11px;cursor:pointer;text-transform:uppercase;transition:all .25s; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } #vm-exp #vm-rewind:hover{color:rgba(255,225,170,.85);border-color:rgba(255,210,130,.55);} /* Mobile for vh + vm */ @media(max-width:680px){ #vh-exp #vh-narrative,#vm-exp #vm-narrative{ bottom:165px!important;width:94vw!important;max-width:94vw!important; max-height:30vh!important;padding:12px 16px!important;font-size:13.5px!important; } #vh-exp #vh-advance,#vm-exp #vm-advance{ bottom:108px!important;font-size:8.5px!important;padding:11px 18px!important; } #vh-exp #vh-rewind,#vm-exp #vm-rewind{ top:58px!important;right:62px!important;font-size:7px!important;padding:6px 10px!important; } #vh-exp #vh-cry,#vh-exp #vh-descent, #vm-exp #vm-bali,#vm-exp #vm-steps{ width:94vw!important;max-width:94vw!important; } #vm-exp .vm-b-grid{grid-template-columns:1fr 1fr;} #vm-exp .vm-s-cards{grid-template-columns:1fr;gap:8px;} #vm-exp .vm-s-card{min-height:auto;padding:14px 12px;} } /* Pointer-events pass-through for vh + vm panels — same fix as nm */ #vh-exp #vh-cry,#vh-exp #vh-cry.visible{pointer-events:none!important;} #vh-exp #vh-descent.visible{pointer-events:none!important;} #vm-exp #vm-request.visible{pointer-events:none!important;} #vm-exp #vm-trivikrama.visible{pointer-events:none!important;} /* Vāmana auto-advances — Continue button is fully hidden */ #vm-exp #vm-advance{display:none!important;} /* Varāha auto-advances — Continue button is fully hidden */ #vh-exp #vh-advance{display:none!important;} /* Hide vh/vm panels when content open */ #vh-exp.content-active #vh-narrative, #vh-exp.content-active #vh-verse, #vh-exp.content-active #vh-stages, #vh-exp.content-active #vh-stage-label, #vh-exp.content-active #vh-cry, #vh-exp.content-active #vh-descent, #vh-exp.content-active #vh-recognition, #vh-exp.content-active #vh-advance, #vh-exp.content-active #vh-rewind, #vh-exp.content-active .era-exp-hint, #vm-exp.content-active #vm-narrative, #vm-exp.content-active #vm-verse, #vm-exp.content-active #vm-stages, #vm-exp.content-active #vm-stage-label, #vm-exp.content-active #vm-bali, #vm-exp.content-active #vm-request, #vm-exp.content-active #vm-trivikrama, #vm-exp.content-active #vm-steps, #vm-exp.content-active #vm-recognition, #vm-exp.content-active #vm-advance, #vm-exp.content-active #vm-rewind, #vm-exp.content-active .era-exp-hint{ visibility:hidden!important;opacity:0!important;pointer-events:none!important; transition:opacity .25s,visibility 0s .25s!important; } #vh-exp.content-active > canvas,#vm-exp.content-active > canvas{ filter:blur(2px) brightness(.4);pointer-events:none; } /* ════════════════════════════════════════════════════════════════════ ERA 15 · PARAŚURĀMA — The Axe-Bearer Background: deep iron-blood gradient — molten metal, smoke, ember Accent: blade-gold (255,200,90) + ember-red (220,80,40) + ash (180,160,140) ════════════════════════════════════════════════════════════════════ */ #prs-exp{ background:radial-gradient(ellipse at 50% 35%,#1f1208 0%,#150804 50%,#070302 100%)!important; } #prs-exp #prs-stages{ position:absolute;top:62px;left:50%;transform:translateX(-50%); display:flex;gap:8px;z-index:30;pointer-events:none; } #prs-exp .prs-stage-dot{width:6px;height:6px;border-radius:50%;background:rgba(220,160,90,.18);transition:all .5s;} #prs-exp .prs-stage-dot.current{background:rgba(255,210,120,.95);box-shadow:0 0 14px rgba(255,160,80,.7);transform:scale(1.4);} #prs-exp .prs-stage-dot.done{background:rgba(180,130,80,.55);} #prs-exp #prs-stage-label{ position:absolute;top:80px;left:50%;transform:translateX(-50%);z-index:30;pointer-events:none; font-family:'IBM Plex Mono',monospace;font-size:7.5px;letter-spacing:5px; color:rgba(220,180,140,.65);text-transform:uppercase;text-align:center; } #prs-exp #prs-narrative{ position:absolute;bottom:200px;left:50%;transform:translate(-50%,8px); width:min(86vw,640px);max-height:28vh;overflow-y:auto; font-family:'Cormorant Garamond',serif;font-style:italic; font-size:clamp(15px,2vw,20px);line-height:1.7; color:rgba(245,225,195,0);text-align:center;padding:18px 26px; background:rgba(10,5,3,.7); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); border:1px solid rgba(220,140,80,.16); z-index:25;pointer-events:none; transition:opacity 1.2s,transform 1.2s,color 1.2s; } #prs-exp #prs-narrative.visible{color:rgba(245,225,195,.94);transform:translate(-50%,0);} #prs-exp #prs-narrative em{color:rgba(255,200,120,.96);} #prs-exp #prs-narrative strong{color:rgba(255,225,170,.98);font-weight:500;} #prs-exp #prs-verse{ position:absolute;top:14%;left:50%;transform:translateX(-50%); font-family:'Noto Sans Devanagari',serif;font-size:clamp(15px,2.4vw,22px);letter-spacing:1px; color:rgba(255,200,120,0);text-align:center;z-index:25;pointer-events:none; text-shadow:0 0 24px rgba(220,90,40,.5);opacity:0;transition:opacity 1.6s,color 1.6s; } #prs-exp #prs-verse.visible{opacity:1;color:rgba(255,200,120,.94);} /* Act 0 · Lineage cards */ #prs-exp #prs-lineage{ position:absolute;top:108px;left:50%;transform:translateX(-50%); width:min(94vw,720px);max-height:calc(100vh - 320px);overflow-y:auto; z-index:28;pointer-events:none;opacity:0; transition:opacity .8s;padding:16px 20px; background:rgba(12,6,4,.74);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); border:1px solid rgba(220,140,80,.22); } #prs-exp #prs-lineage.visible{opacity:1;pointer-events:none;} #prs-exp #prs-lineage.visible .prs-l-card{pointer-events:auto;} #prs-exp .prs-l-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:5px;color:rgba(255,200,120,.7);text-transform:uppercase;text-align:center;margin-bottom:10px;} #prs-exp .prs-l-q{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:13.5px;color:rgba(230,210,180,.78);text-align:center;margin-bottom:14px;line-height:1.55;} #prs-exp .prs-l-q em{color:rgba(255,200,120,.92);} #prs-exp .prs-l-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px;} #prs-exp .prs-l-card{padding:12px 10px;background:rgba(20,10,8,.65);border:1px solid rgba(220,140,80,.22);cursor:pointer;transition:all .3s;text-align:center;touch-action:manipulation;-webkit-tap-highlight-color:transparent;min-height:140px;display:flex;flex-direction:column;} #prs-exp .prs-l-card:hover,#prs-exp .prs-l-card.open{border-color:rgba(255,200,120,.6);background:rgba(40,18,10,.72);box-shadow:0 0 18px rgba(220,100,40,.18) inset;} #prs-exp .prs-l-num{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:3px;color:rgba(255,150,80,.7);text-transform:uppercase;margin-bottom:6px;} #prs-exp .prs-l-skt{font-family:'Noto Sans Devanagari',serif;font-size:14px;color:rgba(255,210,140,.95);margin-bottom:4px;} #prs-exp .prs-l-name{font-family:'Cinzel',serif;font-size:9px;letter-spacing:1.5px;color:rgba(245,225,195,.92);margin-bottom:8px;text-transform:uppercase;} #prs-exp .prs-l-body{font-family:'Cormorant Garamond',serif;font-size:11.5px;line-height:1.5;color:rgba(225,210,180,.78);font-style:italic;} #prs-exp .prs-l-counter{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px;color:rgba(255,150,80,.55);text-transform:uppercase;text-align:center;} /* Act 1 · Renuka */ #prs-exp #prs-renuka{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.96); width:min(86vw,620px);max-height:75vh;overflow-y:auto; z-index:27;opacity:0;pointer-events:none; background:rgba(12,6,4,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border:1px solid rgba(220,140,80,.26); padding:24px 28px; transition:opacity 1s,transform 1s; } #prs-exp #prs-renuka.visible{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);cursor:pointer;} #prs-exp .prs-r-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:7.5px;letter-spacing:5px;color:rgba(255,200,120,.7);text-transform:uppercase;text-align:center;margin-bottom:18px;} #prs-exp .prs-r-line{font-family:'Cormorant Garamond',serif;font-size:14px;line-height:1.7;color:rgba(245,225,195,.88);font-style:italic;margin-bottom:14px;} #prs-exp .prs-r-line em{color:rgba(255,200,120,.95);} #prs-exp .prs-r-line strong{color:rgba(255,225,170,.95);font-weight:500;font-style:normal;} #prs-exp .prs-r-tap{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:5px;color:rgba(255,180,100,.65);text-transform:uppercase;text-align:center;margin-top:14px;} /* Act 2 · Axe */ #prs-exp #prs-axe{ position:absolute;bottom:240px;left:50%;transform:translateX(-50%); width:min(86vw,520px);z-index:27;opacity:0;pointer-events:none; text-align:center; transition:opacity 1s; } #prs-exp #prs-axe.visible{opacity:1;pointer-events:auto;} #prs-exp .prs-a-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:7.5px;letter-spacing:5px;color:rgba(255,200,120,.75);text-transform:uppercase;margin-bottom:14px;} #prs-exp .prs-a-q{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:14px;color:rgba(230,210,180,.85);line-height:1.6;margin-bottom:18px;} #prs-exp .prs-a-q em{color:rgba(255,200,120,.95);} #prs-exp .prs-a-q strong{color:rgba(255,225,170,.95);font-weight:500;font-style:normal;} #prs-exp .prs-a-receive{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:5px;color:rgba(255,160,80,.7);text-transform:uppercase;margin-bottom:6px;} #prs-exp .prs-a-status{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:2px;color:rgba(220,150,80,.7);} /* Act 3 · Calf — same lined-narrative style as Renuka */ #prs-exp #prs-calf{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.96); width:min(86vw,620px);max-height:80vh;overflow-y:auto; z-index:27;opacity:0;pointer-events:none; background:rgba(12,6,4,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border:1px solid rgba(220,80,40,.28); padding:22px 26px; transition:opacity 1s,transform 1s; } #prs-exp #prs-calf.visible{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);cursor:pointer;} #prs-exp .prs-c-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:7.5px;letter-spacing:5px;color:rgba(255,140,80,.8);text-transform:uppercase;text-align:center;margin-bottom:16px;} #prs-exp .prs-c-line{font-family:'Cormorant Garamond',serif;font-size:13.5px;line-height:1.7;color:rgba(245,225,195,.88);font-style:italic;margin-bottom:12px;} #prs-exp .prs-c-line em{color:rgba(255,180,100,.95);} #prs-exp .prs-c-line strong{color:rgba(255,210,150,.95);font-weight:500;font-style:normal;} #prs-exp .prs-c-tap{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:5px;color:rgba(255,150,80,.65);text-transform:uppercase;text-align:center;margin-top:14px;} /* Act 4 · 21 cycles */ #prs-exp #prs-cycles{ position:absolute;bottom:200px;left:50%;transform:translateX(-50%); width:min(86vw,520px);z-index:27;opacity:0;pointer-events:none; text-align:center; background:rgba(12,6,4,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); border:1px solid rgba(220,80,40,.24); padding:16px 22px; transition:opacity 1s; } #prs-exp #prs-cycles.visible{opacity:1;pointer-events:auto;} #prs-exp .prs-cy-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:4px;color:rgba(255,160,80,.75);text-transform:uppercase;margin-bottom:8px;} #prs-exp .prs-cy-q{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:13px;color:rgba(230,210,180,.78);line-height:1.55;margin-bottom:14px;} #prs-exp .prs-cy-q em{color:rgba(255,180,100,.92);} #prs-exp .prs-cy-counter{display:flex;justify-content:center;align-items:baseline;gap:8px;margin-bottom:10px;} #prs-exp .prs-cy-num{font-family:'Cinzel',serif;font-size:48px;color:rgba(255,210,140,.95);line-height:1;letter-spacing:2px;text-shadow:0 0 22px rgba(220,90,40,.5);} #prs-exp .prs-cy-of{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:3px;color:rgba(220,160,90,.6);} #prs-exp .prs-cy-meter{height:3px;background:rgba(60,30,18,.6);border:1px solid rgba(220,140,80,.18);margin-bottom:10px;overflow:hidden;} #prs-exp .prs-cy-meter-fill{height:100%;width:0%;background:linear-gradient(90deg,rgba(255,160,80,.85),rgba(255,80,30,.95));transition:width .6s;} #prs-exp .prs-cy-stage{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:13.5px;color:rgba(255,200,140,.88);min-height:38px;line-height:1.5;margin-bottom:8px;} #prs-exp .prs-cy-instr{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:4px;color:rgba(220,140,80,.5);text-transform:uppercase;} /* Act 5 · Phase transition cards */ #prs-exp #prs-phase{ position:absolute;top:108px;left:50%;transform:translateX(-50%); width:min(94vw,820px);max-height:calc(100vh - 320px);overflow-y:auto; z-index:28;opacity:0;pointer-events:none; background:rgba(12,6,4,.74);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); border:1px solid rgba(220,140,80,.22); padding:16px 20px;transition:opacity .8s; } #prs-exp #prs-phase.visible{opacity:1;pointer-events:none;} #prs-exp #prs-phase.visible .prs-p-card{pointer-events:auto;} #prs-exp .prs-p-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:5px;color:rgba(255,200,120,.7);text-transform:uppercase;text-align:center;margin-bottom:10px;} #prs-exp .prs-p-q{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:13.5px;color:rgba(230,210,180,.78);text-align:center;margin-bottom:14px;line-height:1.55;} #prs-exp .prs-p-q em{color:rgba(255,200,120,.92);} #prs-exp .prs-p-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px;} #prs-exp .prs-p-card{padding:14px 12px;background:rgba(20,10,8,.65);border:1px solid rgba(220,140,80,.22);cursor:pointer;transition:all .3s;text-align:center;touch-action:manipulation;-webkit-tap-highlight-color:transparent;min-height:170px;display:flex;flex-direction:column;} #prs-exp .prs-p-card:hover,#prs-exp .prs-p-card.open{border-color:rgba(255,200,120,.6);background:rgba(40,18,10,.72);box-shadow:0 0 22px rgba(220,100,40,.18) inset;} #prs-exp .prs-p-icon{font-size:22px;color:rgba(255,200,120,.92);margin-bottom:8px;line-height:1;} #prs-exp .prs-p-name{font-family:'Cinzel',serif;font-size:10px;letter-spacing:1.6px;color:rgba(245,225,195,.95);text-transform:uppercase;margin-bottom:4px;} #prs-exp .prs-p-tag{font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:3px;color:rgba(220,140,80,.7);text-transform:uppercase;margin-bottom:8px;} #prs-exp .prs-p-body{font-family:'Cormorant Garamond',serif;font-size:11.5px;line-height:1.5;color:rgba(225,210,180,.78);font-style:italic;} #prs-exp .prs-p-counter{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px;color:rgba(255,150,80,.55);text-transform:uppercase;text-align:center;} /* Act 6 · Recognition */ #prs-exp #prs-recognition{ position:absolute;top:96px;left:50%;transform:translateX(-50%); width:min(94vw,720px);max-height:calc(100vh - 240px);overflow-y:auto; z-index:28;opacity:0;pointer-events:none; background:rgba(8,4,2,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border:1px solid rgba(220,140,80,.32); padding:30px 34px 26px; transition:opacity 1.2s; } #prs-exp #prs-recognition.visible{opacity:1;pointer-events:auto;} #prs-exp .prs-rec-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:6px;color:rgba(255,200,120,.85);text-transform:uppercase;text-align:center;margin-bottom:12px;} #prs-exp .prs-rec-heading{font-family:'Cinzel',serif;font-size:clamp(20px,3.4vw,30px);letter-spacing:2px;color:rgba(255,225,170,.95);text-align:center;margin-bottom:22px;text-shadow:0 0 26px rgba(220,90,40,.4);} #prs-exp .prs-rec-body p{font-family:'Cormorant Garamond',serif;font-size:15.5px;line-height:1.78;color:rgba(235,220,195,.9);margin-bottom:14px;} #prs-exp .prs-rec-body em{color:rgba(255,200,120,.95);} #prs-exp .prs-rec-body strong{color:rgba(255,225,170,.97);font-weight:500;} #prs-exp .prs-rec-line{font-style:italic;color:rgba(255,210,140,.95)!important;border-left:2px solid rgba(220,140,80,.35);padding-left:14px;margin-top:18px!important;} #prs-exp .prs-rec-mahavakya{margin:24px 0 18px;padding:18px 16px;background:rgba(20,10,6,.55);border:1px solid rgba(220,140,80,.2);text-align:center;} #prs-exp .prs-rec-skt{font-family:'Noto Sans Devanagari',serif;font-size:18px;color:rgba(255,210,140,.96);margin-bottom:6px;letter-spacing:1px;} #prs-exp .prs-rec-rom{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:12px;color:rgba(220,180,140,.78);margin-bottom:8px;letter-spacing:1px;} #prs-exp .prs-rec-eng{font-family:'Cormorant Garamond',serif;font-size:13.5px;color:rgba(245,225,195,.92);margin-bottom:6px;} #prs-exp .prs-rec-source{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px;color:rgba(220,140,80,.6);text-transform:uppercase;} #prs-exp .prs-rec-stats{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:3px;color:rgba(220,160,90,.55);text-transform:uppercase;text-align:center;margin-bottom:18px;} #prs-exp .prs-rec-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;} #prs-exp .prs-rec-btn{padding:10px 18px;background:rgba(20,10,6,.7);border:1px solid rgba(220,140,80,.4);color:rgba(255,210,140,.92);font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:3px;text-transform:uppercase;cursor:pointer;transition:all .3s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;} #prs-exp .prs-rec-btn:hover{background:rgba(50,22,10,.8);border-color:rgba(255,200,120,.7);} #prs-exp #prs-advance{display:none!important;} /* Pointer-events pass-through fixes — same as nm/vm */ #prs-exp #prs-renuka.visible{pointer-events:auto!important;} #prs-exp #prs-axe.visible{pointer-events:auto!important;} #prs-exp #prs-calf.visible{pointer-events:auto!important;} #prs-exp #prs-cycles.visible{pointer-events:auto!important;} /* Hide panels when content open */ #prs-exp.content-active #prs-narrative, #prs-exp.content-active #prs-verse, #prs-exp.content-active #prs-stages, #prs-exp.content-active #prs-stage-label, #prs-exp.content-active #prs-lineage, #prs-exp.content-active #prs-renuka, #prs-exp.content-active #prs-axe, #prs-exp.content-active #prs-calf, #prs-exp.content-active #prs-cycles, #prs-exp.content-active #prs-phase, #prs-exp.content-active #prs-recognition, #prs-exp.content-active #prs-advance, #prs-exp.content-active .era-exp-hint{ visibility:hidden!important;opacity:0!important;pointer-events:none!important; transition:opacity .25s,visibility 0s .25s!important; } #prs-exp.content-active > canvas{ filter:blur(2px) brightness(.4);pointer-events:none; } @media (max-width:680px){ #prs-exp #prs-lineage, #prs-exp #prs-cycles, #prs-exp #prs-phase, #prs-exp #prs-recognition{ width:94vw!important;max-width:94vw!important; } #prs-exp .prs-l-grid{grid-template-columns:1fr 1fr;} #prs-exp .prs-p-grid{grid-template-columns:1fr 1fr;gap:8px;} #prs-exp .prs-l-card,#prs-exp .prs-p-card{min-height:auto;padding:12px 10px;} #prs-exp .prs-cy-num{font-size:38px;} #prs-exp .prs-rec-heading{font-size:22px;} #prs-exp .prs-rec-body p{font-size:14.5px;line-height:1.7;} } /* ══════════════════════════════════════════════════════════ ERA 16: RĀMA — The Perfect King · Maryādā Purushottama Atmospheric: Ayodhya gold · forest green · Lanka crimson ══════════════════════════════════════════════════════════ */ #rama-exp{ background:radial-gradient(ellipse at 50% 30%,#1a0e04 0%,#0c0604 50%,#040201 100%)!important; } /* Stage dots */ #rama-exp #rm-stages{ position:absolute;top:62px;left:50%;transform:translateX(-50%); display:flex;gap:8px;z-index:30;pointer-events:none; } #rama-exp .rm-stage-dot{ width:6px;height:6px;border-radius:50%; background:rgba(220,180,120,.18); transition:all .5s; } #rama-exp .rm-stage-dot.current{ background:rgba(255,210,120,.95); box-shadow:0 0 12px rgba(255,200,100,.6); transform:scale(1.4); } #rama-exp .rm-stage-dot.done{background:rgba(180,140,80,.55);} #rama-exp #rm-stage-label{ position:absolute;top:80px;left:50%;transform:translateX(-50%); font-family:'IBM Plex Mono',monospace;font-size:7.5px;letter-spacing:5px; color:rgba(230,200,150,.6);text-transform:uppercase; z-index:30;pointer-events:none;text-align:center; text-shadow:0 0 12px rgba(255,180,90,.4); } #rama-exp #rm-narrative{ position:absolute;bottom:160px;left:50%;transform:translate(-50%,8px); width:min(86vw,640px); font-family:'Cormorant Garamond',serif;font-style:italic; font-size:clamp(15px,2vw,20px);line-height:1.7; color:rgba(245,225,190,0);text-align:center; padding:18px 26px; background:rgba(8,4,2,.55); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); border:1px solid rgba(220,170,90,.1); z-index:25;pointer-events:none; transition:opacity 1.2s,transform 1.2s,color 1.2s; } #rama-exp #rm-narrative.visible{color:rgba(245,225,190,.94);transform:translate(-50%,0);} #rama-exp #rm-narrative em{color:rgba(255,210,130,.96);font-style:italic;} #rama-exp #rm-narrative strong{color:rgba(255,235,180,.98);font-weight:500;} #rama-exp #rm-verse{ position:absolute;top:14%;left:50%;transform:translateX(-50%); font-family:'Noto Sans Devanagari',serif; font-size:clamp(15px,2.4vw,22px);letter-spacing:1px; color:rgba(255,210,130,0);text-align:center; z-index:25;pointer-events:none; text-shadow:0 0 24px rgba(255,180,90,.4); opacity:0;transition:opacity 1.6s,color 1.6s; } #rama-exp #rm-verse.visible{opacity:1;color:rgba(255,210,130,.92);} /* ── Act 1: boons ── */ #rama-exp #rm-boons{ position:absolute;top:108px;left:50%;transform:translateX(-50%); width:min(92vw,720px); z-index:28;pointer-events:none;opacity:0; transition:opacity .8s; padding:16px 20px; background:rgba(12,6,3,.65);backdrop-filter:blur(8px); border:1px solid rgba(220,140,80,.18); } #rama-exp #rm-boons.visible{opacity:1;pointer-events:auto;} #rama-exp .rm-bn-eyebrow{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:5px; color:rgba(220,140,80,.7);text-transform:uppercase;text-align:center;margin-bottom:8px; } #rama-exp .rm-bn-q{ font-family:'Cormorant Garamond',serif;font-style:italic; font-size:14px;color:rgba(230,210,180,.78);text-align:center; margin-bottom:14px;line-height:1.55; } #rama-exp .rm-bn-grid{ display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px; } #rama-exp .rm-bn-card{ padding:14px 12px 12px; background:rgba(20,10,4,.65);border:1px solid rgba(220,140,80,.22); cursor:pointer;transition:all .3s;text-align:center; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } #rama-exp .rm-bn-card:hover,#rama-exp .rm-bn-card.open{ border-color:rgba(255,200,120,.6);background:rgba(40,20,8,.7); } #rama-exp .rm-bn-num{ font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:4px; color:rgba(220,140,80,.7);text-transform:uppercase;margin-bottom:6px; } #rama-exp .rm-bn-skt{ font-family:'Noto Sans Devanagari',serif; font-size:18px;color:rgba(255,210,130,.95);margin-bottom:4px; } #rama-exp .rm-bn-name{ font-family:'Cinzel',serif;font-size:11px;letter-spacing:2px; color:rgba(245,220,180,.92);margin-bottom:8px;text-transform:uppercase; } #rama-exp .rm-bn-body{ font-family:'Cormorant Garamond',serif;font-size:13px;line-height:1.55; color:rgba(220,200,170,.78);font-style:italic; } #rama-exp .rm-bn-counter{ font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:3px; color:rgba(220,140,80,.55);text-transform:uppercase;text-align:center; margin-top:12px; } /* ── Act 2: Renunciation choice ── */ #rama-exp #rm-renunciation{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95); width:min(92vw,640px);text-align:center; z-index:30;pointer-events:none;opacity:0; transition:opacity .8s,transform .8s; } #rama-exp #rm-renunciation.visible{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);} #rama-exp .rm-rn-eyebrow{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:5px; color:rgba(220,140,80,.7);text-transform:uppercase;margin-bottom:14px; } #rama-exp .rm-rn-q{ font-family:'Cormorant Garamond',serif; font-size:clamp(15px,2.1vw,19px);line-height:1.7; color:rgba(245,225,190,.92);margin-bottom:24px;font-style:italic; } #rama-exp .rm-rn-q em{color:rgba(255,210,130,.95);font-weight:500;} #rama-exp .rm-rn-choices{ display:grid;grid-template-columns:1fr 1fr;gap:14px; } #rama-exp .rm-rn-choice{ background:rgba(12,6,3,.7);border:1px solid rgba(220,140,80,.3); padding:18px 16px;text-align:center;cursor:pointer;color:inherit; transition:all .3s; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } #rama-exp .rm-rn-choice:hover{border-color:rgba(255,210,130,.7);background:rgba(28,14,6,.8);} #rama-exp .rm-rn-skt{ font-family:'Noto Sans Devanagari',serif;font-size:24px; color:rgba(255,210,130,.95);margin-bottom:6px; } #rama-exp .rm-rn-name{ font-family:'Cinzel',serif;font-size:12px;letter-spacing:3px; color:rgba(255,225,170,.92);margin-bottom:8px;text-transform:uppercase; } #rama-exp .rm-rn-sub{ font-family:'Cormorant Garamond',serif;font-style:italic; font-size:13px;line-height:1.6;color:rgba(220,200,170,.75); } #rama-exp #rm-rn-response{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95); width:min(92vw,560px);text-align:center; padding:30px 26px; background:rgba(8,4,2,.95);backdrop-filter:blur(14px); border:1px solid rgba(255,210,130,.25); z-index:50;pointer-events:none;opacity:0; transition:opacity .5s,transform .5s; box-shadow:0 0 50px rgba(255,180,90,.18); } #rama-exp #rm-rn-response.visible{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);} #rama-exp .rm-rnr-skt{ font-family:'Noto Sans Devanagari',serif;font-size:24px; color:rgba(255,210,130,.95);margin-bottom:14px; text-shadow:0 0 18px rgba(255,180,90,.3); } #rama-exp .rm-rnr-body{ font-family:'Cormorant Garamond',serif; font-size:clamp(14px,1.85vw,17px);line-height:1.75; color:rgba(245,225,190,.92);text-align:left; } #rama-exp .rm-rnr-body p{margin-bottom:12px;} #rama-exp .rm-rnr-body strong{color:rgba(255,225,170,.98);font-weight:500;} #rama-exp .rm-rnr-body em{color:rgba(255,210,130,.95);font-style:italic;} #rama-exp .rm-rnr-cont{ margin-top:22px; background:none;border:1px solid rgba(255,210,130,.45); color:rgba(255,225,170,.85); font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:4px; padding:11px 26px;text-transform:uppercase;cursor:pointer; transition:all .3s; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } #rama-exp .rm-rnr-cont:hover{ background:rgba(255,210,130,.08);color:rgba(255,235,190,1); } /* ── Act 3: deer hint + circle warning ── */ #rama-exp #rm-deer-hint,#rama-exp #rm-circle-warn{ position:absolute;top:108px;left:50%;transform:translateX(-50%); width:min(86vw,520px);text-align:center;z-index:28;pointer-events:none;opacity:0; transition:opacity .8s;padding:16px 22px; background:rgba(8,12,6,.72);backdrop-filter:blur(8px); border:1px solid rgba(255,200,100,.2); } #rama-exp #rm-deer-hint.visible,#rama-exp #rm-circle-warn.visible{opacity:1;} #rama-exp .rm-dh-skt,#rama-exp .rm-cw-skt{ font-family:'Noto Sans Devanagari',serif;font-size:22px; color:rgba(255,210,130,.95);margin-bottom:8px; } #rama-exp .rm-dh-text,#rama-exp .rm-cw-text{ font-family:'Cormorant Garamond',serif;font-style:italic;font-size:14px; color:rgba(230,215,185,.85);line-height:1.65;margin-bottom:8px; } #rama-exp .rm-cw-text em{color:rgba(255,180,140,.95);font-weight:500;} #rama-exp .rm-dh-tap,#rama-exp .rm-cw-tap{ font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:3px; color:rgba(220,140,80,.55);text-transform:uppercase; } /* ── Act 4: Hanuman reveal ── */ #rama-exp #rm-hanuman{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.92); width:min(92vw,560px);text-align:center; padding:30px 28px;z-index:35;pointer-events:none;opacity:0; background:radial-gradient(ellipse at 50% 30%,rgba(40,18,4,.95) 0%,rgba(8,4,2,.97) 80%); border:1px solid rgba(255,180,90,.3); transition:opacity 1s,transform 1s; box-shadow:0 0 60px rgba(255,140,60,.25); } #rama-exp #rm-hanuman.visible{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);} #rama-exp .rm-hn-skt{ font-family:'Noto Sans Devanagari',serif;font-size:clamp(48px,9vw,80px); letter-spacing:6px;color:rgba(255,180,90,.98); text-shadow:0 0 32px rgba(255,140,60,.7),0 0 60px rgba(255,100,40,.35); line-height:1; animation:rmPulse 4s ease-in-out infinite; } @keyframes rmPulse{ 0%,100%{text-shadow:0 0 32px rgba(255,140,60,.7),0 0 60px rgba(255,100,40,.35);} 50%{text-shadow:0 0 48px rgba(255,160,80,.95),0 0 90px rgba(255,120,50,.5);} } #rama-exp .rm-hn-rom{ font-family:'Cinzel',serif;font-size:clamp(13px,1.8vw,17px);letter-spacing:14px; color:rgba(255,225,170,.9);margin:8px 0 14px; } #rama-exp .rm-hn-line{ font-family:'Cormorant Garamond',serif;font-style:italic; font-size:clamp(15px,2vw,18px);line-height:1.75; color:rgba(245,225,190,.95);max-width:480px;margin:0 auto 8px; } #rama-exp .rm-hn-line em{color:rgba(255,180,90,.96);} #rama-exp .rm-hn-cite{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px; color:rgba(220,140,80,.7);text-transform:uppercase;margin-bottom:18px; } #rama-exp .rm-hn-body{ font-family:'Cormorant Garamond',serif; font-size:clamp(13.5px,1.75vw,15.5px);line-height:1.75; color:rgba(220,200,170,.84);max-width:480px;margin:0 auto; } /* ── Act 5: Setu (bridge) ── */ #rama-exp #rm-setu{ position:absolute;top:108px;left:50%;transform:translateX(-50%); width:min(88vw,540px);text-align:center;z-index:28;pointer-events:none;opacity:0; transition:opacity .8s;padding:14px 22px; background:rgba(4,8,16,.7);backdrop-filter:blur(8px); border:1px solid rgba(140,180,220,.2); } #rama-exp #rm-setu.visible{opacity:1;} #rama-exp .rm-st-eyebrow{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:5px; color:rgba(160,200,220,.65);text-transform:uppercase;margin-bottom:6px; } #rama-exp .rm-st-q{ font-family:'Cormorant Garamond',serif;font-style:italic; font-size:13px;color:rgba(220,225,235,.82);line-height:1.6;margin-bottom:10px; } #rama-exp .rm-st-counter{ font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:3px; color:rgba(255,225,170,.9);margin-top:4px; } #rama-exp .rm-st-hint{ font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:3px; color:rgba(160,200,220,.45);text-transform:uppercase;margin-top:6px; } /* ── Act 6: Ravana ── */ #rama-exp #rm-ravana{ position:absolute;top:108px;left:50%;transform:translateX(-50%); width:min(88vw,520px);text-align:center;z-index:28;pointer-events:none;opacity:0; transition:opacity .8s;padding:14px 22px; background:rgba(20,4,8,.72);backdrop-filter:blur(8px); border:1px solid rgba(220,80,40,.25); } #rama-exp #rm-ravana.visible{opacity:1;} #rama-exp .rm-rv-eyebrow{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:5px; color:rgba(255,140,80,.7);text-transform:uppercase;margin-bottom:6px; } #rama-exp .rm-rv-name{ font-family:'Cinzel',serif;font-size:clamp(15px,2.2vw,20px);letter-spacing:3px; color:rgba(255,180,120,.95); text-shadow:0 0 14px rgba(220,80,40,.5); } #rama-exp .rm-rv-body{ font-family:'Cormorant Garamond',serif;font-style:italic;font-size:13px; color:rgba(225,200,180,.82);line-height:1.65;margin:8px 0 8px; } #rama-exp .rm-rv-counter{ font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:3px; color:rgba(255,180,120,.92);margin-bottom:4px; } #rama-exp .rm-rv-hint{ font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:3px; color:rgba(220,140,100,.5);text-transform:uppercase; } #rama-exp #rm-rv-reveal{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.92); width:min(88vw,520px);max-height:78vh;overflow-y:auto; padding:28px 26px 22px; background:rgba(8,4,2,.96);backdrop-filter:blur(14px); border:1px solid rgba(220,140,80,.3); z-index:55;pointer-events:none;opacity:0; transition:opacity .5s,transform .5s; box-shadow:0 0 50px rgba(220,80,40,.18); text-align:center; } #rama-exp #rm-rv-reveal.visible{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);} #rama-exp .rm-rvr-num{ font-family:'IBM Plex Mono',monospace;font-size:7.5px;letter-spacing:5px; color:rgba(220,80,40,.7);text-transform:uppercase;margin-bottom:10px; } #rama-exp .rm-rvr-name{ font-family:'Cinzel',serif;font-size:clamp(15px,2.2vw,20px);letter-spacing:3px; color:rgba(255,210,130,.95);margin-bottom:6px;text-transform:uppercase; } #rama-exp .rm-rvr-skt{ font-family:'Noto Sans Devanagari',serif;font-size:18px; color:rgba(255,200,140,.92);margin-bottom:16px; } #rama-exp .rm-rvr-body{ font-family:'Cormorant Garamond',serif; font-size:clamp(14px,1.85vw,16px);line-height:1.8; color:rgba(245,225,190,.9);text-align:left; } #rama-exp .rm-rvr-body strong{color:rgba(255,225,170,1);font-weight:500;} #rama-exp .rm-rvr-body em{color:rgba(255,200,120,.95);font-style:italic;} #rama-exp .rm-rvr-cont{ margin-top:18px; background:none;border:1px solid rgba(255,210,130,.45); color:rgba(255,225,170,.85); font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:4px; padding:11px 26px;text-transform:uppercase;cursor:pointer; transition:all .3s; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } #rama-exp .rm-rvr-cont:hover{background:rgba(255,210,130,.08);color:rgba(255,235,190,1);} /* ── Act 7: Ramarajya ── */ #rama-exp #rm-rajya{ position:absolute;top:108px;left:50%;transform:translateX(-50%); width:min(88vw,560px);text-align:center;z-index:28;pointer-events:none;opacity:0; transition:opacity .8s;padding:18px 24px; background:rgba(12,8,4,.7);backdrop-filter:blur(8px); border:1px solid rgba(255,210,130,.22); } #rama-exp #rm-rajya.visible{opacity:1;} #rama-exp .rm-rj-eyebrow{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:5px; color:rgba(255,210,130,.7);text-transform:uppercase;margin-bottom:8px; } #rama-exp .rm-rj-skt{ font-family:'Noto Sans Devanagari',serif;font-size:22px; color:rgba(255,225,170,.96);margin-bottom:10px; text-shadow:0 0 22px rgba(255,180,90,.3); } #rama-exp .rm-rj-body{ font-family:'Cormorant Garamond',serif; font-size:13.5px;color:rgba(230,215,185,.86);line-height:1.7; } #rama-exp .rm-rj-body em{color:rgba(255,210,130,.95);font-style:italic;} #rama-exp .rm-rj-counter{ font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:3px; color:rgba(255,225,170,.92);margin-top:10px; } /* ── Act 8: Recognition ── */ #rama-exp #rm-recognition{ position:absolute;top:0;left:0;right:0;bottom:0; z-index:35;pointer-events:none;opacity:0; background:radial-gradient(ellipse at 50% 35%,rgba(40,22,8,.95) 0%,rgba(4,2,1,.97) 80%); backdrop-filter:blur(16px);overflow-y:auto;-webkit-overflow-scrolling:touch; padding:70px 22px 60px;transition:opacity 1.2s; } #rama-exp #rm-recognition.visible{opacity:1;pointer-events:auto;} #rama-exp .rm-rec-eyebrow{ font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:6px; color:rgba(255,210,130,.6);text-transform:uppercase;text-align:center;margin-bottom:12px; } #rama-exp .rm-rec-heading{ font-family:'Cinzel',serif;font-size:clamp(24px,4vw,38px);letter-spacing:5px; color:rgba(255,225,170,.96);text-align:center; text-shadow:0 0 24px rgba(255,180,90,.35);margin-bottom:30px; } #rama-exp .rm-rec-body{ font-family:'Cormorant Garamond',serif; font-size:clamp(14.5px,1.9vw,17px);line-height:1.85; color:rgba(225,215,190,.92);max-width:600px;margin:0 auto 30px; } #rama-exp .rm-rec-body p{margin-bottom:14px;} #rama-exp .rm-rec-body strong{color:rgba(255,225,170,.98);font-weight:500;} #rama-exp .rm-rec-body em{color:rgba(255,210,130,.95);font-style:italic;} #rama-exp .rm-rec-line{ font-style:italic;text-align:center;color:rgba(255,210,130,.92);font-size:1.05em;padding-top:6px; } #rama-exp .rm-rec-mahavakya{ max-width:560px;margin:0 auto 30px;padding:24px 20px; background:rgba(255,210,130,.04);border:1px solid rgba(255,210,130,.15);text-align:center; } #rama-exp .rm-rec-skt{ font-family:'Noto Sans Devanagari',serif; font-size:clamp(20px,3vw,26px);letter-spacing:2px; color:rgba(255,225,170,.98); text-shadow:0 0 22px rgba(255,200,120,.3);margin-bottom:8px; } #rama-exp .rm-rec-rom{ font-family:'Cinzel',serif;font-style:italic; font-size:clamp(13px,1.7vw,15.5px);letter-spacing:2px; color:rgba(220,200,160,.7);margin-bottom:10px; } #rama-exp .rm-rec-eng{ font-family:'Cormorant Garamond',serif;font-style:italic; font-size:clamp(14px,1.8vw,16px); color:rgba(245,225,190,.88);line-height:1.6;margin-bottom:14px; } #rama-exp .rm-rec-source{ font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:3px; color:rgba(180,140,80,.65);text-transform:uppercase; } #rama-exp .rm-rec-stats{ max-width:520px;margin:0 auto 30px; display:grid;grid-template-columns:repeat(3,1fr);gap:1px; background:rgba(255,210,130,.1);border:1px solid rgba(255,210,130,.15); } #rama-exp .rm-rec-stat{background:rgba(8,6,4,.85);padding:14px 8px;text-align:center;} #rama-exp .rm-rec-stat-n{ font-family:'Cinzel',serif;font-size:clamp(16px,2.4vw,20px); color:rgba(255,225,170,.95);letter-spacing:1px; } #rama-exp .rm-rec-stat-l{ font-family:'IBM Plex Mono',monospace;font-size:6.5px;letter-spacing:2px; color:rgba(180,160,120,.65);text-transform:uppercase;margin-top:4px;line-height:1.4; } #rama-exp .rm-rec-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;max-width:500px;margin:0 auto;} #rama-exp .rm-rec-btn{ background:none;border:1px solid rgba(255,210,130,.4); color:rgba(255,225,170,.85); font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:4px; padding:11px 22px;text-transform:uppercase;cursor:pointer; transition:all .3s; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } #rama-exp .rm-rec-btn:hover{ background:rgba(255,210,130,.08);border-color:rgba(255,235,180,.85); color:rgba(255,240,200,1); } /* ── Advance + rewind ── */ #rama-exp #rm-advance{ position:absolute;bottom:96px;left:50%;transform:translateX(-50%); z-index:32; background:rgba(255,210,130,.06); border:1px solid rgba(255,210,130,.45); color:rgba(255,225,170,.92); font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:4px; padding:12px 24px;text-transform:uppercase;cursor:pointer; transition:all .3s;opacity:0; display:flex;align-items:center;gap:8px; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } #rama-exp #rm-advance.visible{opacity:1;} #rama-exp #rm-advance:hover{ background:rgba(255,210,130,.14);color:rgba(255,240,200,1); } #rama-exp .rm-adv-arrow{transition:transform .3s;} #rama-exp #rm-advance:hover .rm-adv-arrow{transform:translateX(4px);} #rama-exp #rm-rewind{ position:absolute;top:54px;right:64px;z-index:32; background:none;border:1px solid rgba(220,170,90,.18); color:rgba(220,170,90,.6); font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:3px; padding:7px 11px;cursor:pointer;text-transform:uppercase; transition:all .25s; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } #rama-exp #rm-rewind:hover{color:rgba(255,225,170,.85);border-color:rgba(255,210,130,.55);} /* ── Mobile ── */ @media(max-width:680px){ #rama-exp #rm-stages{top:58px;} #rama-exp #rm-stage-label{top:74px;font-size:6.5px;letter-spacing:3px;} #rama-exp #rm-rewind{top:58px;right:60px;font-size:7px;padding:6px 10px;} #rama-exp #rm-advance{bottom:115px;font-size:8.5px;padding:11px 20px;letter-spacing:3px;} #rama-exp #rm-narrative{bottom:120px;font-size:14px;padding:14px 18px;} #rama-exp #rm-boons,#rama-exp #rm-deer-hint,#rama-exp #rm-circle-warn, #rama-exp #rm-setu,#rama-exp #rm-ravana,#rama-exp #rm-rajya{ top:100px;width:92vw;padding:12px 16px; } #rama-exp .rm-bn-grid{grid-template-columns:1fr;gap:8px;} #rama-exp .rm-bn-card{padding:10px 12px;} #rama-exp .rm-bn-skt{font-size:16px;} #rama-exp .rm-bn-name{font-size:10px;} #rama-exp .rm-rn-choices{grid-template-columns:1fr;gap:10px;} #rama-exp #rm-rn-response{padding:24px 20px 20px;width:92vw;} #rama-exp #rm-hanuman{padding:24px 20px;width:92vw;} #rama-exp #rm-rv-reveal{padding:22px 20px 18px;width:92vw;} #rama-exp #rm-recognition{padding:60px 18px 50px;} #rama-exp .rm-rec-stats{max-width:100%;} #rama-exp .rm-rec-btn{font-size:8px;padding:10px 16px;letter-spacing:2.5px;} } @media(max-height:580px){ #rama-exp #rm-narrative{bottom:95px;padding:12px 18px;font-size:13.5px;} #rama-exp #rm-advance{bottom:92px;} } /* ════════════════════════════════════════════════════════ ABOUT PAGE — Policies / Legal tab ════════════════════════════════════════════════════════ */ .ab-policies{max-width:740px;margin:0 auto;padding:36px 28px 60px;} .ab-pol-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:5px;color:rgba(201,168,76,.55);text-transform:uppercase;text-align:center;margin-bottom:14px;} .ab-pol-head{font-family:'Cinzel',serif;font-size:clamp(22px,3.5vw,32px);letter-spacing:2px;color:rgba(245,230,200,.95);text-align:center;margin-bottom:16px;} .ab-pol-lede{font-family:'Cormorant Garamond',serif;font-size:15.5px;line-height:1.75;color:rgba(220,205,185,.75);text-align:center;max-width:580px;margin:0 auto 40px;font-style:italic;} .ab-pol-section{margin-bottom:32px;padding-bottom:28px;border-bottom:1px solid rgba(201,168,76,.1);} .ab-pol-section:last-of-type{border-bottom:none;} .ab-pol-section-title{font-family:'Cinzel',serif;font-size:11px;letter-spacing:3.5px;color:rgba(201,168,76,.85);text-transform:uppercase;margin-bottom:14px;} .ab-pol-body p{font-family:'Cormorant Garamond',serif;font-size:16px;line-height:1.82;color:rgba(225,215,195,.88);margin-bottom:14px;} .ab-pol-body p:last-child{margin-bottom:0;} .ab-pol-body em{color:rgba(255,210,150,.95);font-style:italic;} .ab-pol-body strong{color:rgba(245,230,200,.97);font-weight:500;} .ab-pol-body code{font-family:'IBM Plex Mono',monospace;font-size:13px;background:rgba(201,168,76,.07);padding:1px 6px;color:rgba(201,168,76,.9);} .ab-pol-body a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(201,168,76,.3);} .ab-pol-body a:hover{border-bottom-color:rgba(201,168,76,.7);} .ab-pol-footer{margin-top:36px;padding-top:20px;border-top:1px solid rgba(201,168,76,.12);text-align:center;} .ab-pol-footer-line{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:2.5px;color:rgba(201,168,76,.55);text-transform:uppercase;margin-bottom:6px;} .ab-pol-footer-date{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:2px;color:rgba(201,168,76,.35);text-transform:uppercase;} @media(max-width:600px){.ab-policies{padding:24px 18px 50px;}.ab-pol-body p{font-size:15px;}} /* ═══════════════════════════════════════════════════════════════════ LIVING MAP 2.0 — Geographic Sacred India ═══════════════════════════════════════════════════════════════════ */ #livemap-ov { background: radial-gradient(ellipse at 50% 30%, #080510 0%, #030208 70%, #010104 100%) !important; } /* Header */ .lm2-hdr { position: absolute; top: 0; left: 0; right: 0; z-index: 20; padding: 10px 18px; display: flex; align-items: center; gap: 14px; background: rgba(4,2,10,.92); border-bottom: 1px solid rgba(180,140,255,.08); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .lm2-hdr-center { flex: 1; text-align: center; } .lm2-title { font-family: 'Cinzel', serif; font-size: clamp(12px,1.6vw,17px); letter-spacing: 3px; color: rgba(220,190,255,.85); } .lm2-subtitle { font-family: 'IBM Plex Mono', monospace; font-size: 6.5px; letter-spacing: 2.5px; color: rgba(160,120,220,.35); text-transform: uppercase; margin-top: 3px; } /* Tab bar */ .lm2-tabs-bar { position: absolute; top: 46px; left: 0; right: 0; z-index: 19; display: flex; justify-content: center; gap: 0; background: rgba(3,1,8,.88); border-bottom: 1px solid rgba(160,100,255,.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .lm2-tab-btn { font-family: 'IBM Plex Mono', monospace; font-size: 8px; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(160,120,220,.4); background: transparent; border: none; border-bottom: 2px solid transparent; padding: 10px 24px; cursor: pointer; transition: all .3s; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .lm2-tab-btn:hover { color: rgba(200,160,255,.7); } .lm2-tab-btn.active { color: rgba(220,190,255,.92); border-bottom-color: rgba(180,120,255,.6); } /* Panels */ .lm2-panel { position: absolute; inset: 0; top: 80px; display: none; overflow: hidden; } .lm2-panel.active { display: block; } /* Era filter bar */ .lm2-era-bar { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 15; display: flex; gap: 6px; background: rgba(4,2,10,.88); border: 1px solid rgba(160,100,255,.12); border-radius: 30px; padding: 6px 10px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .lm2-era-btn { font-family: 'IBM Plex Mono', monospace; font-size: 7px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(160,120,220,.45); background: transparent; border: 1px solid transparent; border-radius: 20px; padding: 5px 12px; cursor: pointer; display: flex; align-items: center; gap: 5px; transition: all .25s; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .lm2-era-btn.active, .lm2-era-btn:hover { color: rgba(220,190,255,.9); border-color: rgba(160,100,255,.25); } .lm2-yuga-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } /* Site info card */ .lm2-site-card { position: absolute; right: 20px; top: 50%; transform: translateY(-50%) translateX(120%); z-index: 15; width: min(300px, calc(100vw - 40px)); background: rgba(4,2,10,.95); border: 1px solid rgba(180,140,255,.18); border-radius: 2px; padding: 22px 22px 18px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: transform .45s cubic-bezier(.22,1,.36,1), opacity .4s; pointer-events: none; opacity: 0; } .lm2-site-card.open { transform: translateY(-50%) translateX(0); pointer-events: auto; opacity: 1; } .lm2-sc-close { position: absolute; top: 10px; right: 14px; font-size: 11px; color: rgba(160,120,220,.4); cursor: pointer; line-height: 1; transition: color .2s; } .lm2-sc-close:hover { color: rgba(200,160,255,.8); } .lm2-sc-yuga-tag { font-family: 'IBM Plex Mono', monospace; font-size: 6px; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 8px; } .lm2-sc-name { font-family: 'Cinzel', serif; font-size: clamp(15px,2vw,20px); color: rgba(230,210,255,.95); margin-bottom: 3px; line-height: 1.2; } .lm2-sc-era-label { font-family: 'IBM Plex Mono', monospace; font-size: 7px; letter-spacing: 2px; color: rgba(160,120,220,.4); text-transform: uppercase; margin-bottom: 14px; } .lm2-sc-desc { font-family: 'Cormorant Garamond', serif; font-size: 14.5px; line-height: 1.75; color: rgba(200,185,225,.8); margin-bottom: 14px; } .lm2-sc-mantra { font-family: 'Noto Sans Devanagari', serif; font-size: 18px; color: rgba(255,210,130,.7); text-align: center; margin-bottom: 16px; letter-spacing: 2px; } .lm2-sc-enter { width: 100%; font-family: 'IBM Plex Mono', monospace; font-size: 8px; letter-spacing: 2px; text-transform: uppercase; color: rgba(200,160,255,.9); background: rgba(130,80,200,.12); border: 1px solid rgba(160,100,255,.3); padding: 10px; cursor: pointer; transition: all .25s; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .lm2-sc-enter:hover { background: rgba(130,80,200,.25); border-color: rgba(160,100,255,.55); color: rgba(230,190,255,1); } .lm2-sc-enter.no-era { opacity: .35; cursor: default; pointer-events: none; } /* Map tap hint */ .lm2-map-hint { position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%); z-index: 14; font-family: 'IBM Plex Mono', monospace; font-size: 7px; letter-spacing: 2px; color: rgba(180,140,255,.35); text-transform: uppercase; text-align: center; pointer-events: none; transition: opacity .5s; } .lm2-map-hint.hidden { opacity: 0; } /* Legend */ .lm2-legend { position: absolute; top: 12px; left: 18px; z-index: 14; display: flex; flex-direction: column; gap: 7px; } .lm2-leg-row { display: flex; align-items: center; gap: 7px; font-family: 'IBM Plex Mono', monospace; font-size: 6.5px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(180,150,220,.4); } .lm2-leg-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } /* BARGAD PANEL */ #lm2-bargad-panel { background: radial-gradient(ellipse at 50% 85%, #0d0a04 0%, #060402 60%, #020202 100%); } .lm2-bargad-overlay { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 12; width: min(500px, calc(100vw - 40px)); background: rgba(6,4,2,.88); border: 1px solid rgba(180,140,60,.12); padding: 18px 22px; text-align: center; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: all .4s; } .lm2-bargad-title { font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 3px; color: rgba(200,160,80,.8); margin-bottom: 10px; text-transform: uppercase; } .lm2-bargad-body { font-family: 'Cormorant Garamond', serif; font-size: 14px; line-height: 1.8; color: rgba(210,180,130,.65); font-style: italic; } .lm2-bargad-hint { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); font-family: 'IBM Plex Mono', monospace; font-size: 7px; letter-spacing: 2px; color: rgba(180,140,80,.3); text-transform: uppercase; z-index: 12; pointer-events: none; } /* NĀDA PANEL */ #lm2-nada-panel { background: radial-gradient(ellipse at 50% 30%, #060408 0%, #020206 70%, #010103 100%); } .lm2-nada-instruction { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 12; text-align: center; width: min(420px, calc(100vw - 40px)); background: rgba(4,2,8,.85); border: 1px solid rgba(200,160,80,.1); padding: 16px 20px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); pointer-events: none; transition: opacity .6s; } .lm2-nada-instruction.hidden { opacity: 0; } .lm2-nada-display { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 13; text-align: center; width: min(420px, calc(100vw - 40px)); background: rgba(4,2,8,.9); border: 1px solid rgba(255,200,80,.15); padding: 16px 24px 14px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); pointer-events: none; opacity: 0; transition: opacity .5s; } .lm2-nada-display.visible { opacity: 1; } .lm2-nd-site { font-family: 'Cinzel', serif; font-size: clamp(13px,1.8vw,18px); letter-spacing: 2px; color: rgba(255,220,140,.9); margin-bottom: 6px; } .lm2-nd-mantra { font-family: 'Noto Sans Devanagari', serif; font-size: clamp(20px,3vw,30px); color: rgba(255,210,100,.85); letter-spacing: 3px; text-shadow: 0 0 30px rgba(255,180,60,.5); margin-bottom: 6px; } .lm2-nd-freq { font-family: 'IBM Plex Mono', monospace; font-size: 7px; letter-spacing: 2px; color: rgba(200,170,80,.4); text-transform: uppercase; } .lm2-nada-wave { position: absolute; bottom: 116px; left: 50%; transform: translateX(-50%); width: min(500px, 90vw); height: 50px; z-index: 11; opacity: 0; transition: opacity .5s; pointer-events: none; } .lm2-nada-wave.active { opacity: 1; } @media(max-width:680px){ .lm2-era-bar { gap: 3px; padding: 4px 6px; } .lm2-era-btn { padding: 4px 8px; font-size: 6px; } .lm2-site-card { right: 10px; top: auto; bottom: 120px; transform: translateX(120%); } .lm2-site-card.open { transform: translateX(0); } .lm2-legend { display: none; } .lm2-bargad-overlay { bottom: 14px; } .lm2-nada-display, .lm2-nada-instruction { bottom: 14px; } } /* ═══════════════════════════════════════════════════════════════ SINDHU–SARASVATĪ EXPERIENCE — 7000–1900 BCE Palette: terracotta earth + Sarasvatī blue + ochre gold + twilight desert sky ═══════════════════════════════════════════════════════════════ */ #sd-exp{ background:radial-gradient(ellipse at 50% 40%,#241608 0%,#150c06 55%,#080503 100%)!important; } /* Stage dots */ #sd-exp #sd-stages{ position:absolute;top:60px;left:50%;transform:translateX(-50%); display:flex;gap:9px;z-index:30;pointer-events:none; } #sd-exp .sd-stage-dot{ width:6px;height:6px;border-radius:50%; background:rgba(220,170,90,.18); transition:all .55s; } #sd-exp .sd-stage-dot.current{ background:rgba(255,210,130,.95); box-shadow:0 0 14px rgba(255,200,130,.7); transform:scale(1.4); } #sd-exp .sd-stage-dot.done{background:rgba(200,160,100,.55);} /* Stage label */ #sd-exp #sd-stage-label{ position:absolute;top:78px;left:50%;transform:translateX(-50%);z-index:30; pointer-events:none; font-family:'IBM Plex Mono',monospace;font-size:7.5px; letter-spacing:5px;color:rgba(220,200,160,.7); text-transform:uppercase;text-align:center; } /* Year banner */ #sd-exp #sd-year{ position:absolute;top:108px;left:50%;transform:translateX(-50%);z-index:30; pointer-events:none; font-family:'IBM Plex Mono',monospace;font-size:9px; letter-spacing:6px;color:rgba(255,210,130,0); text-transform:uppercase;text-align:center; text-shadow:0 0 18px rgba(255,180,90,.4); transition:color 1.2s, opacity 1.2s;opacity:0; } #sd-exp #sd-year.visible{color:rgba(255,210,130,.85);opacity:1;} /* Narrative panel */ #sd-exp #sd-narrative{ position:absolute;bottom:200px;left:50%; transform:translate(-50%,8px); width:min(86vw,640px);max-height:28vh;overflow-y:auto; font-family:'Cormorant Garamond',serif;font-style:italic; font-size:clamp(15px,2vw,20px);line-height:1.7; color:rgba(245,228,200,0);text-align:center; padding:18px 26px; background:rgba(14,9,5,.72); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); border:1px solid rgba(220,170,90,.18); z-index:25;pointer-events:none; transition:opacity 1.2s,transform 1.2s,color 1.2s; } #sd-exp #sd-narrative.visible{ color:rgba(245,228,200,.94); transform:translate(-50%,0); } #sd-exp #sd-narrative em{color:rgba(255,210,140,.96);} #sd-exp #sd-narrative strong{color:rgba(255,225,180,.98);font-weight:500;} /* Verse panel */ #sd-exp #sd-verse{ position:absolute;top:14%;left:50%;transform:translateX(-50%); font-family:'Noto Sans Devanagari',serif; font-size:clamp(15px,2.4vw,22px); color:rgba(140,200,240,0);text-align:center; z-index:25;pointer-events:none; text-shadow:0 0 22px rgba(120,180,230,.5); opacity:0; transition:opacity 1.6s, color 1.6s; } #sd-exp #sd-verse.visible{ opacity:1;color:rgba(160,210,245,.94); } /* content-active hides the animation panels when reading tabs */ #sd-exp.content-active #sd-narrative, #sd-exp.content-active #sd-verse, #sd-exp.content-active #sd-stages, #sd-exp.content-active #sd-stage-label, #sd-exp.content-active #sd-year, #sd-exp.content-active .era-exp-hint{ visibility:hidden!important; opacity:0!important; pointer-events:none!important; } #sd-exp.content-active > canvas{ filter:blur(2px) brightness(.4); pointer-events:none; } /* Mobile */ @media(max-width:680px){ #sd-exp #sd-narrative{width:92vw!important;bottom:170px;} #sd-exp #sd-stages{top:54px;} #sd-exp #sd-stage-label{top:72px;font-size:7px;letter-spacing:4px;} #sd-exp #sd-year{top:96px;font-size:8px;letter-spacing:4px;} } /* ═══════════════════════════════════════════════════════════════ GATEWAY EXPERIENCE — 3-Stage Entry System Replaces the old "Enter the Yuga" intro page ═══════════════════════════════════════════════════════════════ */ #gw-ov{ position:fixed;inset:0;z-index:600; background:#000; display:flex;align-items:center;justify-content:center; overflow:hidden; transition:opacity .6s ease,visibility 0s .6s; } #gw-ov.gw-exiting{opacity:0;pointer-events:none;visibility:hidden;} #gw-canvas{ position:absolute;inset:0;width:100%;height:100%; pointer-events:none;z-index:0; } /* ── Stage base ── */ .gw-stage{ position:absolute;inset:0; display:flex;flex-direction:column; align-items:center;justify-content:center; opacity:0;pointer-events:none; transition:opacity .6s ease; z-index:2; cursor:pointer; } .gw-stage.gw-active{opacity:1;pointer-events:auto;} .gw-stage.gw-leaving{opacity:0;pointer-events:none;} /* ── STAGE 1: VOID ── */ #gw-void-line{ font-family:'Cormorant Garamond',serif; font-size:clamp(18px,2.8vw,32px); font-style:italic; font-weight:400; color:rgba(240,230,210,0); text-align:center; line-height:1.9; letter-spacing:0.02em; max-width:min(680px,86vw); margin-bottom:64px; transition:color 1.0s ease; } #gw-void-line.gw-lit{color:rgba(240,230,210,.88);} #gw-enter-btn{ font-family:'IBM Plex Mono',monospace; font-size:10px;letter-spacing:5px;text-transform:uppercase; color:rgba(200,168,80,0); background:transparent;border:1px solid rgba(200,168,80,0); padding:12px 36px;cursor:pointer; transition:color .8s ease, border-color .8s ease, box-shadow .3s ease, background .3s ease; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } #gw-enter-btn.gw-lit{ color:rgba(200,168,80,.85); border-color:rgba(200,168,80,.25); } #gw-enter-btn:hover{ background:rgba(200,168,80,.06); box-shadow:0 0 24px rgba(200,168,80,.12); color:rgba(220,188,100,.95); } #gw-skip{ position:fixed;bottom:32px;left:50%;transform:translateX(-50%); font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:3px; text-transform:uppercase;color:rgba(180,160,100,0); cursor:pointer;opacity:0; transition:color .8s ease, opacity .8s ease; touch-action:manipulation;-webkit-tap-highlight-color:transparent; z-index:5; } #gw-skip.gw-lit{color:rgba(180,160,100,.35);opacity:1;} #gw-skip:hover{color:rgba(200,180,120,.6);} /* ── STAGE 2: ORIENTATION ── */ #gw-orient-wrap{ display:flex;flex-direction:column;align-items:center; gap:0;margin-bottom:72px; } .gw-ol{ font-family:'Cormorant Garamond',serif; font-size:clamp(16px,2.2vw,26px); font-style:italic;font-weight:400; color:rgba(240,228,200,0); text-align:center;line-height:2.2; letter-spacing:0.025em; max-width:min(600px,88vw); margin:0;padding:0; transition:color .9s ease; } .gw-ol.gw-lit{color:rgba(240,228,200,.86);} #gw-ol2{ font-style:normal;font-size:clamp(13px,1.6vw,20px); letter-spacing:0.04em; color:rgba(200,180,120,0); } #gw-ol2.gw-lit{color:rgba(200,180,120,.7);} #gw-ol4{ font-style:normal;color:rgba(220,200,150,0); } #gw-ol4.gw-lit{color:rgba(220,200,150,.78);} #gw-begin-btn{ font-family:'IBM Plex Mono',monospace; font-size:9px;letter-spacing:5px;text-transform:uppercase; color:rgba(200,168,80,0); background:transparent;border:1px solid rgba(200,168,80,0); padding:13px 40px;cursor:pointer; opacity:0; transition:color .8s ease, border-color .8s ease, opacity .8s ease, box-shadow .3s ease, background .3s ease; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } #gw-begin-btn.gw-lit{ color:rgba(200,168,80,.85); border-color:rgba(200,168,80,.25); opacity:1; } #gw-begin-btn:hover{ background:rgba(200,168,80,.06); box-shadow:0 0 28px rgba(200,168,80,.14); color:rgba(220,188,100,.95); } /* ── STAGE 3: SYSTEM ENTRY ── */ #gw-system-label{ font-family:'IBM Plex Mono',monospace; font-size:7px;letter-spacing:6px;text-transform:uppercase; color:rgba(180,150,80,.5); margin-bottom:40px; text-align:center; } #gw-layers{ display:flex;flex-direction:column; gap:0; width:min(680px,90vw); margin-bottom:44px; } .gw-layer{ position:relative; display:flex;align-items:center; padding:18px 28px; border-top:1px solid rgba(200,168,80,.08); cursor:pointer; touch-action:manipulation;-webkit-tap-highlight-color:transparent; opacity:0;transform:translateY(14px); transition:opacity .8s ease, transform .8s ease, background .3s ease, border-color .3s ease; } .gw-layer:last-child{border-bottom:1px solid rgba(200,168,80,.08);} .gw-layer.gw-lit{opacity:1;transform:translateY(0);} .gw-layer:hover{background:rgba(200,168,80,.04);} .gw-layer:hover .gw-layer-arrow{opacity:1;transform:translateX(4px);} .gw-layer-tag{ font-family:'IBM Plex Mono',monospace; font-size:7px;letter-spacing:3px;text-transform:uppercase; color:rgba(200,168,80,.45); width:110px;flex-shrink:0; } .gw-layer-name{ font-family:'Cinzel',serif; font-size:clamp(13px,1.8vw,17px); color:rgba(240,228,205,.9); letter-spacing:.04em; flex:1; } .gw-layer-sub{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:clamp(11px,1.4vw,14px); color:rgba(200,185,155,.5); letter-spacing:.03em; flex:1.4; text-align:right; padding-right:16px; } .gw-layer-arrow{ font-family:'IBM Plex Mono',monospace; font-size:13px; color:rgba(200,168,80,.4); transition:opacity .3s ease, transform .3s ease; opacity:0; } #gwl-source .gw-layer-name{color:rgba(255,245,225,.95);} #gwl-field .gw-layer-name{color:rgba(230,210,255,.9);} #gwl-system .gw-layer-name{color:rgba(200,240,255,.88);} #gwl-experience .gw-layer-name{color:rgba(255,220,180,.88);} #gwl-self .gw-layer-name{color:rgba(180,255,220,.88);} #gw-timeline-btn{ font-family:'IBM Plex Mono',monospace; font-size:8px;letter-spacing:5px;text-transform:uppercase; color:rgba(200,168,80,0); background:transparent;border:1px solid rgba(200,168,80,0); padding:12px 36px;cursor:pointer; opacity:0; transition:color 1.2s ease, border-color 1.2s ease, opacity 1.2s ease, box-shadow .4s ease, background .4s ease; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } #gw-timeline-btn.gw-lit{ color:rgba(200,168,80,.8); border-color:rgba(200,168,80,.2); opacity:1; } #gw-timeline-btn:hover{ background:rgba(200,168,80,.06); box-shadow:0 0 28px rgba(200,168,80,.12); color:rgba(220,188,100,.95); } .gw-system-note{ margin-top:18px; font-family:'Cormorant Garamond',serif;font-style:italic; font-size:12px;letter-spacing:.04em; color:rgba(200,180,130,.3); text-align:center; opacity:0;transition:opacity 1.2s ease; } .gw-system-note.gw-lit{opacity:1;} /* ── Mobile ── */ @media(max-width:600px){ .gw-layer{flex-wrap:wrap;padding:14px 18px;gap:4px;} .gw-layer-tag{width:100%;margin-bottom:2px;} .gw-layer-sub{text-align:left;padding-right:0;flex:none;width:100%;} .gw-layer-arrow{display:none;} #gw-system-label{margin-bottom:24px;} } /* ═══════════════════════════════════════════════════════════════ MOBILE/RESPONSIVE/READABILITY AUDIT — 2026-05-03 Applied AFTER all other CSS so these targeted fixes win. Goal: every page reads cleanly on every screen, nothing overlaps, the magic stays intact. ═══════════════════════════════════════════════════════════════ */ /* ─── 1. Modal viewport heights — handle iPhone notch + Safari URL bar ─── */ .modal-base{ /* svh = small viewport height — accounts for browser chrome */ min-height:100vh; min-height:100svh; height:auto; } @supports(height:100dvh){ .modal-base{ min-height:100dvh; } } /* ─── 2. Era experience tab bar — wrap cleanly on narrow screens ─── */ .era-exp-tabs{ flex-wrap:wrap; row-gap:4px; /* Add safe-area inset for iOS home-indicator */ padding-bottom:max(12px,env(safe-area-inset-bottom)); } @media(max-width:520px){ .era-exp-tab{ font-size:6px; padding:6px 9px; letter-spacing:1.5px; } .era-exp-tabs{ padding:6px 8px max(10px,env(safe-area-inset-bottom)); } } /* ─── 3. Era exp body — comfortable reading width and bottom-clear ─── */ .era-exp-body{ /* Bottom padding clears tab bar even when it wraps to 2 rows */ padding-bottom:120px; } @media(max-width:768px){ .era-exp-body{ padding:18px 18px 130px; font-size:15px; } .era-exp-section-detail{ font-size:14px; line-height:1.85; } } /* ─── 4. Era exp content panel — clean above tab bar on mobile ─── */ @media(max-width:768px){ .era-exp-content{ /* Already absolute inset:0; ensure it stays above all animation chrome */ z-index:24; } .era-exp-content-hdr{ padding:10px 14px; } .era-exp-content-title{ font-size:10px; letter-spacing:1.5px; } } /* ─── 5. Universal content-active behaviour ─── */ /* When ANY era overlay has its tab content open, hide narrative/verse/hint panels that sit underneath. Selector targets all overlay sub-elements. */ .modal-base.content-active [class*="-narrative"], .modal-base.content-active [class*="-verse"], .modal-base.content-active [class$="-hint"], .modal-base.content-active .era-exp-hint{ visibility:hidden!important; opacity:0!important; pointer-events:none!important; } .modal-base.content-active > canvas{ filter:blur(2px) brightness(.4); pointer-events:none; } /* ─── 6. Touch-target minimum (Apple HIG / WCAG = 44px) ─── */ @media(hover:none){ .era-exp-back, .era-exp-close, .era-exp-tab, .nb, .marga-btn, .tbtn, .e-discover{ min-height:36px; } .era-exp-close{ width:36px; height:36px; } } /* ─── 7. Side panel content — readable on tablet/landscape phones ─── */ @media(min-width:769px) and (max-width:1100px){ #content-stage{ width:48%!important; max-width:48vw!important; } .e-body{ font-size:15px; line-height:1.85; } .e-quote{ font-size:14.5px; } .e-avatar-name{ font-size:clamp(20px,2.4vw,28px); } } /* ─── 8. Mobile content-stage breathing room ─── */ @media(max-width:768px){ #content-inner{ /* Slightly more comfortable padding for reading */ padding:18px 22px 32px!important; } #content-stage.side-left #content-inner, #content-stage.side-right #content-inner{ padding:18px 22px 32px!important; } .e-body{ font-size:15.5px; line-height:1.85; } .e-quote{ font-size:14.5px; line-height:1.75; } .e-avatar-name{ font-size:clamp(22px,6.5vw,30px); line-height:1.2; } .e-avatar-subtitle{ font-size:14px; line-height:1.4; } } /* ─── 9. Sindhu overlay mobile-specific clean-up ─── */ @media(max-width:520px){ #sd-exp #sd-narrative{ bottom:158px!important; width:94vw!important; padding:14px 18px!important; font-size:14px!important; max-height:32vh!important; } #sd-exp #sd-stages{ top:50px; gap:6px; } #sd-exp .sd-stage-dot{ width:5px; height:5px; } #sd-exp #sd-stage-label{ top:64px; font-size:6.5px; letter-spacing:3px; } #sd-exp #sd-year{ top:84px; font-size:7.5px; letter-spacing:3px; } #sd-exp #sd-verse{ font-size:18px!important; top:11%!important; } } /* ─── 10. Gateway responsive tweaks ─── */ @media(max-width:480px){ #gw-void-line{ font-size:18px; line-height:1.7; margin-bottom:48px; padding:0 18px; } #gw-enter-btn{ font-size:9px; padding:11px 30px; letter-spacing:4px; } .gw-ol{ font-size:15px!important; line-height:2!important; padding:0 18px; } #gw-ol2{ font-size:12px!important; } #gw-begin-btn{ font-size:8px; padding:11px 30px; letter-spacing:4px; } } /* ─── 11. Modal overlays — viewport-aware safe areas ─── */ .modal-base{ padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); } @supports(padding:max(0px)){ .modal-base{ padding-top:max(0px,env(safe-area-inset-top)); padding-bottom:max(0px,env(safe-area-inset-bottom)); } } /* ─── 12. About / Updates page mobile ─── */ @media(max-width:680px){ #about-ov .ab-method, #about-ov .ab-method-items{ padding:20px 16px; } /* Updates entry body — easier reading on phone */ .upd-entry{ padding:18px 16px!important; } .upd-body{ font-size:14.5px!important; line-height:1.85!important; } .upd-title{ font-size:15px!important; line-height:1.35!important; } } /* ─── 13. Search overlay polish ─── */ @media(max-width:520px){ .esr-item{ gap:11px; padding:12px 14px; } .esr-glyph{ font-size:18px; width:24px; } .esr-name{ font-size:12.5px; } .esr-sub{ font-size:6.5px; } } /* ─── 14. Hint text — slightly more visible on mobile ─── */ @media(max-width:768px){ .era-exp-hint{ font-size:7px; color:rgba(201,168,76,.32); } } /* ─── 15. Long-pressed buttons / no double-tap zoom on iOS ─── */ button, .tbtn, .marga-btn, .era-exp-tab, .era-exp-back, .era-exp-close, .nb, .e-discover, .dc-tab{ touch-action:manipulation; } /* ─── 16. Polarity bands — should never overlap content on mobile ─── */ @media(max-width:768px){ #deva-band, #asura-band, #deva-lbl, #asura-lbl{ display:none!important; } } /* ─── 17. Nav buttons — readable + clickable on mobile ─── */ @media(max-width:480px){ #nav{ gap:6px!important; } .nb{ font-size:7.5px; padding:7px 12px; letter-spacing:1.5px; } #nctr{ font-size:8.5px; min-width:52px; padding:0 6px; } } /* ─── 18. Ensure body cursor restoration when overlays close ─── */ @media(min-width:769px) and (hover:hover){ body{ cursor:none; } } /* ─── 19. Prevent horizontal scroll on the whole site ─── */ html, body{ overflow-x:hidden!important; max-width:100vw; } /* ─── 20. Era panel quote — better contrast on mobile ─── */ @media(max-width:768px){ .e-quote{ color:rgba(240,228,205,.85); } .e-quote cite{ color:rgba(180,150,90,.7); } .e-body{ color:rgba(220,210,180,.92); } .e-body strong{ color:rgba(255,240,210,.98); } } /* ═══════════════════════════════════════════════════════════════ SITE INDEX — full directory overlay ═══════════════════════════════════════════════════════════════ */ #site-index-ov{ position:fixed;inset:0;z-index:750; background:rgba(5,4,2,.985); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); opacity:0;visibility:hidden;pointer-events:none; transition:opacity .35s ease, visibility 0s .35s; overflow-y:auto;-webkit-overflow-scrolling:touch; display:flex;flex-direction:column; } #site-index-ov.on{ opacity:1;visibility:visible;pointer-events:auto; transition:opacity .35s ease, visibility 0s; } .si-hdr{ position:sticky;top:0;z-index:5; background:rgba(5,4,2,.96); border-bottom:1px solid rgba(201,168,76,.1); padding:22px 32px 18px; backdrop-filter:blur(8px); } .si-title{ font-family:'Cinzel',serif;font-size:18px;letter-spacing:3px; color:rgba(240,220,180,.92);margin-bottom:4px; } .si-sub{ font-family:'Cormorant Garamond',serif;font-style:italic;font-size:13.5px; color:rgba(200,180,130,.55); } .si-close{ position:absolute;top:18px;right:22px; background:none;border:1px solid rgba(201,168,76,.2); color:rgba(201,168,76,.5);width:32px;height:32px;cursor:pointer; font-size:13px;font-family:'IBM Plex Mono',monospace; display:flex;align-items:center;justify-content:center; transition:all .2s;touch-action:manipulation;-webkit-tap-highlight-color:transparent; } .si-close:hover{border-color:var(--gold);color:var(--gold);} .si-search-wrap{ position:sticky;top:90px;z-index:4; background:rgba(5,4,2,.94); padding:14px 32px; border-bottom:1px solid rgba(201,168,76,.06); } #si-search-input{ width:100%;background:transparent; border:1px solid rgba(201,168,76,.18); color:var(--cream);font-family:'Cormorant Garamond',serif; font-size:15px;padding:10px 16px;outline:none; letter-spacing:.3px; transition:border-color .2s; } #si-search-input:focus{border-color:rgba(201,168,76,.45);} #si-search-input::placeholder{color:rgba(120,100,70,.5);font-style:italic;} .si-body{ flex:1;padding:30px 32px 60px; max-width:1280px;margin:0 auto;width:100%;box-sizing:border-box; } .si-section{ margin-bottom:42px; } .si-section.hidden{display:none;} .si-section-hdr{ font-family:'Cinzel',serif;font-size:13px;letter-spacing:4px; color:rgba(201,168,76,.65);text-transform:uppercase; margin-bottom:6px; } .si-section-sub{ font-family:'Cormorant Garamond',serif;font-style:italic; font-size:13.5px;color:rgba(200,180,130,.45); margin-bottom:18px; } .si-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:8px; } .si-item{ display:flex;flex-direction:column; padding:14px 16px; background:rgba(201,168,76,.025); border:1px solid rgba(201,168,76,.08); cursor:pointer; transition:all .25s ease; text-align:left;font-family:inherit; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } .si-item:hover{ border-color:rgba(201,168,76,.32); background:rgba(201,168,76,.06); transform:translateY(-1px); } .si-item.hidden{display:none;} .si-item-glyph{ font-size:20px;color:rgba(255,210,140,.55); margin-bottom:6px;line-height:1; } .si-item-name{ font-family:'Cinzel',serif;font-size:13px; color:rgba(240,220,180,.92);letter-spacing:.5px; margin-bottom:4px;line-height:1.2; } .si-item-sub{ font-family:'Cormorant Garamond',serif; font-style:italic;font-size:12.5px; color:rgba(190,170,125,.55);line-height:1.4; } .si-item-tag{ font-family:'IBM Plex Mono',monospace;font-size:6.5px; letter-spacing:2px;color:rgba(201,168,76,.4); text-transform:uppercase;margin-top:6px; } .si-empty{ padding:36px 0;text-align:center; font-family:'Cormorant Garamond',serif;font-style:italic; color:rgba(200,180,130,.4);font-size:14px; display:none; } .si-empty.show{display:block;} .si-foot{ padding:14px 32px; border-top:1px solid rgba(201,168,76,.06); font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:2px; color:rgba(120,100,70,.5);text-transform:uppercase; display:flex;justify-content:space-between;align-items:center; } .si-foot kbd{ display:inline-block;padding:1px 6px; border:1px solid rgba(201,168,76,.18); font-family:'IBM Plex Mono',monospace;font-size:7px; color:rgba(180,150,90,.55); background:rgba(201,168,76,.04); } @media(max-width:600px){ .si-hdr{padding:18px 18px 14px;} .si-title{font-size:15px;letter-spacing:2px;} .si-sub{font-size:12px;} .si-search-wrap{padding:12px 18px;top:80px;} .si-body{padding:22px 18px 50px;} .si-grid{grid-template-columns:1fr;gap:6px;} .si-section{margin-bottom:30px;} .si-foot{padding:12px 18px;} } /* ═══════════════════════════════════════════════════════════════ FEEDBACK overlay ═══════════════════════════════════════════════════════════════ */ #feedback-ov{ position:fixed;inset:0;z-index:760; background:rgba(5,4,2,.985); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); opacity:0;visibility:hidden;pointer-events:none; transition:opacity .35s ease, visibility 0s .35s; overflow-y:auto;-webkit-overflow-scrolling:touch; } #feedback-ov.on{ opacity:1;visibility:visible;pointer-events:auto; transition:opacity .35s ease, visibility 0s; } .fb-hdr{ position:sticky;top:0;z-index:5; background:rgba(5,4,2,.96); border-bottom:1px solid rgba(201,168,76,.1); padding:22px 32px 18px;backdrop-filter:blur(8px); } .fb-title{ font-family:'Cinzel',serif;font-size:18px;letter-spacing:3px; color:rgba(240,220,180,.92);margin-bottom:4px; } .fb-sub{ font-family:'Cormorant Garamond',serif;font-style:italic;font-size:13.5px; color:rgba(200,180,130,.55); } .fb-close{ position:absolute;top:18px;right:22px; background:none;border:1px solid rgba(201,168,76,.2); color:rgba(201,168,76,.5);width:32px;height:32px;cursor:pointer; font-size:13px;font-family:'IBM Plex Mono',monospace; display:flex;align-items:center;justify-content:center; transition:all .2s;touch-action:manipulation;-webkit-tap-highlight-color:transparent; } .fb-close:hover{border-color:var(--gold);color:var(--gold);} .fb-body{ max-width:680px;margin:0 auto; padding:36px 32px 80px; } .fb-intro{ font-family:'Cormorant Garamond',serif;font-size:15.5px;line-height:1.85; color:rgba(220,210,180,.78); margin-bottom:32px; } .fb-intro p{margin:0 0 12px;} .fb-intro em{color:rgba(255,210,140,.85);font-style:italic;} .fb-label{ display:block; font-family:'IBM Plex Mono',monospace;font-size:7.5px;letter-spacing:3px; color:rgba(201,168,76,.5);text-transform:uppercase; margin:22px 0 10px; } .fb-label:first-child{margin-top:0;} .fb-opt{color:rgba(120,100,70,.5);font-size:6.5px;letter-spacing:2px;} .fb-kinds{ display:flex;flex-wrap:wrap;gap:6px; } .fb-kind{ font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:2px; text-transform:uppercase;color:rgba(201,168,76,.45); background:transparent;border:1px solid rgba(201,168,76,.15); padding:8px 14px;cursor:pointer; transition:all .2s;touch-action:manipulation;-webkit-tap-highlight-color:transparent; } .fb-kind:hover{border-color:rgba(201,168,76,.4);color:rgba(201,168,76,.85);} .fb-kind.active{background:rgba(201,168,76,.1);border-color:rgba(201,168,76,.5);color:rgba(255,210,140,.95);} .fb-textarea, .fb-input{ width:100%;box-sizing:border-box; background:rgba(201,168,76,.02); border:1px solid rgba(201,168,76,.15); color:rgba(240,228,200,.92);font-family:'Cormorant Garamond',serif; font-size:15px;line-height:1.6; padding:12px 14px;outline:none; resize:vertical; transition:border-color .2s, background .2s; } .fb-textarea:focus, .fb-input:focus{ border-color:rgba(201,168,76,.45); background:rgba(201,168,76,.04); } .fb-textarea::placeholder, .fb-input::placeholder{ color:rgba(120,100,70,.5);font-style:italic; } .fb-submit{ margin-top:28px; display:inline-block; font-family:'Cinzel',serif;font-size:11px;letter-spacing:4px;text-transform:uppercase; color:rgba(201,168,76,.85); background:transparent;border:1px solid rgba(201,168,76,.4); padding:13px 36px;cursor:pointer; transition:all .3s;touch-action:manipulation;-webkit-tap-highlight-color:transparent; } .fb-submit:hover{ background:rgba(201,168,76,.08); color:rgba(255,210,140,.98); border-color:rgba(201,168,76,.7); box-shadow:0 0 24px rgba(201,168,76,.12); } .fb-submit:disabled{opacity:.4;cursor:wait;} .fb-status{ margin-top:18px; font-family:'Cormorant Garamond',serif;font-style:italic; font-size:14px;line-height:1.65; color:rgba(180,220,170,.85); min-height:20px; } .fb-status.error{color:rgba(220,140,120,.85);} .fb-where{ margin-top:36px;padding:18px 20px; background:rgba(201,168,76,.03); border:1px solid rgba(201,168,76,.08); font-family:'Cormorant Garamond',serif;font-size:13.5px;line-height:1.7; color:rgba(200,180,130,.7); } .fb-where strong{color:rgba(240,220,180,.92);font-weight:500;} .fb-where em{color:rgba(255,210,140,.75);font-style:italic;} @media(max-width:600px){ .fb-hdr{padding:18px 18px 14px;} .fb-title{font-size:15px;letter-spacing:2px;} .fb-body{padding:24px 18px 50px;} .fb-intro{font-size:14.5px;} .fb-kinds{gap:5px;} .fb-kind{padding:7px 11px;font-size:7.5px;letter-spacing:1.5px;} .fb-submit{padding:12px 28px;font-size:10px;letter-spacing:3px;} } /* Hide header buttons properly on mobile if requested */ @media(max-width:520px){ #hdr-index-btn{padding:5px 10px;font-size:7px;} #hdr-search-btn{padding:5px 10px;font-size:7px;} } /* ════════════════════════════════════════════════════════════════════════════ DHARM — THE FOUNDATION OF ALL THINGS ════════════════════════════════════════════════════════════════════════════ */ #dharm-exp{ background:radial-gradient(ellipse at 50% 35%, #0d0e22 0%, #06061a 50%, #020208 100%); color:rgba(245,235,215,.95); font-family:'Cormorant Garamond', serif; } #dharm-exp .era-exp-hdr{ position:relative;z-index:5; background:linear-gradient(180deg, rgba(8,8,22,.95) 0%, rgba(8,8,22,.6) 70%, rgba(8,8,22,0) 100%); } #dharm-exp .era-exp-title{ font-family:'Cinzel',serif;letter-spacing:3px; background:linear-gradient(180deg,#fff5dd 0%, #d8b46a 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } /* Category pill row — top, just below header */ #dharm-cats.dh-cat-row{ position:absolute;top:64px;left:0;right:0;z-index:4; display:flex;justify-content:center;gap:8px;flex-wrap:wrap; padding:10px 14px 8px 14px; pointer-events:auto; } .dh-cat-btn{ background:rgba(20,18,40,.55); border:1px solid rgba(180,180,220,.18); color:rgba(220,220,240,.65); padding:8px 14px 7px 14px; border-radius:999px; font-family:'IBM Plex Mono',monospace; font-size:9.5px;letter-spacing:2.5px;text-transform:uppercase; cursor:pointer; display:flex;align-items:center;gap:7px; transition:all .35s cubic-bezier(.4,0,.2,1); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); touch-action:manipulation;-webkit-tap-highlight-color:transparent; } .dh-cat-btn .dh-cat-glyph{ font-size:13px;line-height:1;letter-spacing:0; color:rgba(220,200,150,.85); transition:all .35s ease; } .dh-cat-btn .dh-cat-lbl{font-family:'Cinzel',serif;font-size:9px;letter-spacing:2px;} .dh-cat-btn:hover{ background:rgba(40,35,70,.7); border-color:rgba(220,200,150,.35); color:rgba(245,235,215,.92); transform:translateY(-1px); } .dh-cat-btn.active{ background:rgba(50,40,80,.85); border-color:rgba(255,220,150,.55); color:rgba(255,245,220,1); box-shadow:0 0 22px rgba(255,210,150,.18), inset 0 0 12px rgba(255,210,150,.08); } .dh-cat-btn.active .dh-cat-glyph{ color:rgba(255,235,180,1); text-shadow:0 0 10px rgba(255,210,150,.55); } /* Active category label */ .dh-cat-label{ position:absolute;top:120px;left:0;right:0;z-index:3; text-align:center; font-family:'Cinzel',serif;font-size:13px;letter-spacing:5px; color:rgba(255,235,200,.85); text-transform:uppercase; pointer-events:none; text-shadow:0 0 18px rgba(255,210,150,.35); transition:opacity .5s ease; } .dh-cat-label .dh-cat-sub{ font-family:'IBM Plex Mono',monospace; font-size:9px;letter-spacing:3px; color:rgba(220,200,160,.5); margin-left:6px; } /* Display panel (selected thing) — slides up from bottom-center */ .dh-display{ position:absolute; left:50%;bottom:120px; transform:translate(-50%, 30px); z-index:3; width:min(560px, calc(100% - 40px)); padding:22px 28px 26px 28px; background:linear-gradient(180deg, rgba(20,18,42,.78) 0%, rgba(10,8,28,.88) 100%); border:1px solid rgba(255,220,160,.18); border-radius:6px; box-shadow:0 18px 60px rgba(0,0,0,.55), 0 0 40px rgba(255,210,150,.08), inset 0 0 30px rgba(255,210,150,.04); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); text-align:center; opacity:0;visibility:hidden; pointer-events:none; transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1), visibility 0s .55s; } .dh-display.on{ opacity:1;visibility:visible; transform:translate(-50%, 0); transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1), visibility 0s 0s; } .dh-disp-skt{ font-family:'Noto Sans Devanagari','Sanskrit Text',serif; font-size:22px;letter-spacing:1.5px; color:rgba(255,225,170,.92); margin-bottom:6px; text-shadow:0 0 18px rgba(255,210,150,.4); } .dh-disp-name{ font-family:'Cinzel',serif; font-size:15px;letter-spacing:5px; color:rgba(245,235,215,.95); text-transform:uppercase; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid rgba(255,220,160,.12); } .dh-disp-d{ font-family:'Cormorant Garamond',serif; font-size:18px;line-height:1.6; font-style:italic; color:rgba(245,238,220,.95); } .dh-disp-d::before{ content:'is '; font-style:normal; color:rgba(220,200,150,.55); font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:3px; text-transform:uppercase; display:block;margin-bottom:6px; } /* Hint — invite to tap */ #dharm-exp .era-exp-hint#dharm-hint{ position:absolute;left:50%;bottom:74px;transform:translateX(-50%); z-index:2; font-family:'IBM Plex Mono',monospace; font-size:8.5px;letter-spacing:3.5px; color:rgba(220,200,160,.45); text-transform:uppercase; pointer-events:none; transition:opacity .5s ease; } /* When content tab is open, dim/blur the canvas + chrome */ #dharm-exp.content-active #dharm-canvas, #dharm-exp.content-active #dharm-cats, #dharm-exp.content-active #dharm-cat-label, #dharm-exp.content-active #dharm-display, #dharm-exp.content-active #dharm-hint{ filter:blur(8px) brightness(.45); opacity:.4; transition:filter .45s ease, opacity .45s ease; pointer-events:none; } #dharm-exp:not(.content-active) #dharm-canvas, #dharm-exp:not(.content-active) #dharm-cats, #dharm-exp:not(.content-active) #dharm-cat-label{ filter:none;opacity:1; transition:filter .45s ease, opacity .45s ease; } /* Content panel inside dharm — inherit era-exp-content baseline + light tint */ #dharm-exp .era-exp-content{ background:linear-gradient(180deg, rgba(14,10,28,.985) 0%, rgba(8,5,18,.985) 100%); } /* Mobile */ @media(max-width:680px){ #dharm-cats.dh-cat-row{top:58px;gap:5px;padding:8px 8px 6px 8px;} .dh-cat-btn{padding:6px 10px 5px 10px;font-size:8px;letter-spacing:1.5px;gap:5px;} .dh-cat-btn .dh-cat-glyph{font-size:11px;} .dh-cat-btn .dh-cat-lbl{font-size:7.5px;letter-spacing:1.4px;} .dh-cat-label{top:100px;font-size:11px;letter-spacing:3.5px;} .dh-cat-label .dh-cat-sub{font-size:7.5px;letter-spacing:2px;} .dh-display{ bottom:104px; width:calc(100% - 24px); padding:16px 18px 18px 18px; } .dh-disp-skt{font-size:18px;} .dh-disp-name{font-size:11px;letter-spacing:3.5px;margin-bottom:10px;padding-bottom:9px;} .dh-disp-d{font-size:15.5px;line-height:1.5;} .dh-disp-d::before{font-size:8px;letter-spacing:2px;margin-bottom:4px;} #dharm-exp .era-exp-hint#dharm-hint{bottom:68px;font-size:7.5px;letter-spacing:2.5px;} } @media(max-width:420px){ /* On very narrow screens, allow horizontal scroll for the pills rather than wrapping awkwardly */ #dharm-cats.dh-cat-row{ flex-wrap:nowrap;justify-content:flex-start; overflow-x:auto;overflow-y:hidden; scrollbar-width:none;-ms-overflow-style:none; padding-left:14px;padding-right:14px; } #dharm-cats.dh-cat-row::-webkit-scrollbar{display:none;} .dh-cat-btn{flex:0 0 auto;} } /* Hint fade when display is shown */ .dh-display.on ~ #dharm-hint, #dharm-exp.dh-has-selection #dharm-hint{ opacity:0; } /* ════════════════════════════════════════════════════════════════════════════ ŚIVA LIṄGA — INTERACTIVE COSMIC SANCTUM Darshan-first design: lingam stays visible at all times. Floating side panel for readings. Vertical ritual bar for actions. ════════════════════════════════════════════════════════════════════════════ */ #shivling-exp{ background:radial-gradient(ellipse at 50% 38%, #0a1230 0%, #050818 50%, #02030c 100%); color:rgba(245,235,215,.95); font-family:'Cormorant Garamond', serif; } #shivling-exp .era-exp-hdr{ position:relative;z-index:5; background:linear-gradient(180deg, rgba(5,8,24,.92) 0%, rgba(5,8,24,.5) 75%, rgba(5,8,24,0) 100%); } #shivling-exp .era-exp-title{ font-family:'Cinzel',serif;letter-spacing:3px; background:linear-gradient(180deg,#fff5dd 0%, #d8b46a 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } /* Sacred Devanagari title — top center */ .sl-deva-title{ position:absolute;top:64px;left:0;right:0;z-index:3; text-align:center; pointer-events:none; } .sl-deva-title .sl-deva-skt{ font-family:'Noto Sans Devanagari','Sanskrit Text',serif; font-size:18px;letter-spacing:6px; color:rgba(255,225,170,.88); text-shadow:0 0 22px rgba(255,200,140,.5); margin-bottom:4px; } .sl-deva-title .sl-deva-en{ font-family:'IBM Plex Mono',monospace; font-size:8px;letter-spacing:4px; color:rgba(220,200,160,.5); text-transform:uppercase; } /* Hint at bottom — fades after first interaction */ .sl-hint{ position:absolute;left:50%;bottom:18px;transform:translateX(-50%); z-index:3; font-family:'Cormorant Garamond',serif;font-size:12.5px; color:rgba(220,200,160,.55); letter-spacing:1.5px; pointer-events:none; text-align:center; white-space:nowrap; animation: slHintPulse 4s ease-in-out infinite; } .sl-hint em{ font-style:italic;color:rgba(255,210,160,.75); } @keyframes slHintPulse { 0%,100%{opacity:.5;} 50%{opacity:.85;} } /* Counter bar — top right, shows briefly after each interaction */ .sl-counter-bar{ position:absolute;top:62px;right:18px;z-index:8; display:flex;flex-direction:column;gap:6px; padding:12px 14px; background:rgba(15,12,32,.78); border:1px solid rgba(255,210,150,.18); border-radius:6px; backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); opacity:0;transform:translateX(20px); pointer-events:none; transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1); } .sl-counter-bar.on{ opacity:.95;transform:translateX(0); } .sl-cnt{ display:flex;align-items:center;gap:8px; font-family:'IBM Plex Mono',monospace; font-size:10px;letter-spacing:2px; color:rgba(220,200,160,.85); text-transform:uppercase; min-width:120px; } .sl-cnt-glyph{font-size:12px;line-height:1;width:16px;text-align:center;} .sl-cnt-num{ font-family:'Cinzel',serif;font-size:13px;letter-spacing:1px; color:rgba(255,225,170,.95); min-width:24px;text-align:right; } .sl-cnt-lbl{ font-family:'Cormorant Garamond',serif;font-style:italic; font-size:11px;letter-spacing:1px; color:rgba(220,200,160,.7); text-transform:none; } /* Vertical ritual action bar — left edge */ .sl-ritual-bar{ position:absolute;left:14px;top:50%;transform:translateY(-50%); z-index:6; display:flex;flex-direction:column;gap:10px; } .sl-ritual-btn{ display:flex;flex-direction:column;align-items:center;gap:3px; padding:11px 9px 9px 9px; background:rgba(15,12,32,.7); border:1px solid rgba(255,210,150,.22); border-radius:6px; cursor:pointer; backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); transition:all .3s cubic-bezier(.4,0,.2,1); touch-action:manipulation;-webkit-tap-highlight-color:transparent; min-width:60px; } .sl-ritual-btn:hover{ background:rgba(35,25,55,.85); border-color:rgba(255,225,180,.55); transform:translateX(2px); box-shadow:0 0 18px rgba(255,200,120,.18); } .sl-ritual-btn:active{ transform:translateX(2px) scale(.96); background:rgba(60,40,80,.9); } .sl-ritual-glyph{ font-size:20px;line-height:1; filter:drop-shadow(0 0 6px rgba(255,200,140,.35)); } .sl-ritual-lbl{ font-family:'Cinzel',serif;font-size:8px;letter-spacing:1.5px; color:rgba(245,225,190,.85); text-transform:uppercase; } /* Darshan toggle button — right edge, prominent */ .sl-darshan-toggle{ position:absolute;right:14px;top:50%;transform:translateY(-50%); z-index:6; display:flex;flex-direction:column;align-items:center;gap:4px; padding:14px 12px 12px 12px; background:linear-gradient(135deg, rgba(40,30,70,.85) 0%, rgba(20,15,40,.85) 100%); border:1px solid rgba(255,210,150,.4); border-radius:7px; cursor:pointer; backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); transition:all .3s cubic-bezier(.4,0,.2,1); touch-action:manipulation;-webkit-tap-highlight-color:transparent; min-width:74px; box-shadow:0 0 22px rgba(255,200,120,.15); } .sl-darshan-toggle:hover{ background:linear-gradient(135deg, rgba(60,45,95,.92) 0%, rgba(35,25,60,.92) 100%); border-color:rgba(255,235,200,.7); transform:translateY(-50%) translateX(-2px); box-shadow:0 0 28px rgba(255,200,120,.3); } .sl-darshan-toggle:active{ transform:translateY(-50%) translateX(-2px) scale(.97); } .sl-darshan-toggle-glyph{ font-size:22px;line-height:1; filter:drop-shadow(0 0 8px rgba(255,200,140,.55)); } .sl-darshan-toggle-lbl{ font-family:'Cinzel',serif;font-size:8.5px;letter-spacing:1.6px; color:rgba(255,235,205,.95); text-transform:uppercase; text-align:center; line-height:1.3; } /* ── DARSHAN PANEL — floating side window, lingam stays visible ── */ .sl-darshan{ position:absolute; top:60px; right:-440px; /* off-screen by default */ width:420px; max-width:calc(100vw - 24px); height:calc(100vh - 90px); max-height:calc(100% - 90px); z-index:9; display:flex;flex-direction:column; background:linear-gradient(180deg, rgba(15,12,30,.97) 0%, rgba(8,6,18,.97) 100%); border:1px solid rgba(255,210,150,.25); border-right:none; border-radius:8px 0 0 8px; backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); box-shadow:-12px 0 50px rgba(0,0,0,.6), 0 0 60px rgba(255,200,120,.08); transition:right .55s cubic-bezier(.2,.7,.3,1), opacity .4s ease; opacity:0; pointer-events:none; } .sl-darshan.on{ right:0; opacity:1; pointer-events:auto; } .sl-darshan-hdr{ display:flex;align-items:flex-start;justify-content:space-between; padding:18px 20px 14px 22px; border-bottom:1px solid rgba(255,210,150,.15); flex:0 0 auto; } .sl-darshan-title-wrap{flex:1;min-width:0;} .sl-darshan-eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:7.5px;letter-spacing:3px; color:rgba(220,180,120,.6); text-transform:uppercase; margin-bottom:4px; } .sl-darshan-title{ font-family:'Cinzel',serif; font-size:18px;letter-spacing:1.5px; background:linear-gradient(180deg,#fff5dd 0%, #d8b46a 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; line-height:1.3; } .sl-darshan-close{ flex:0 0 auto; width:30px;height:30px; background:rgba(40,30,60,.6); border:1px solid rgba(255,210,150,.25); border-radius:50%; color:rgba(245,225,190,.85); font-size:14px; cursor:pointer; display:flex;align-items:center;justify-content:center; margin-left:10px; transition:all .25s ease; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } .sl-darshan-close:hover{ background:rgba(80,50,90,.9); border-color:rgba(255,225,180,.6); color:#fff; } .sl-darshan-pills{ display:flex;gap:6px; padding:12px 18px 14px 18px; overflow-x:auto; flex:0 0 auto; border-bottom:1px solid rgba(255,210,150,.1); scrollbar-width:none;-ms-overflow-style:none; } .sl-darshan-pills::-webkit-scrollbar{display:none;} .sl-chap-pill{ flex:0 0 auto; padding:7px 12px 6px 12px; background:rgba(20,15,40,.6); border:1px solid rgba(255,210,150,.18); border-radius:999px; color:rgba(220,200,160,.65); font-family:'IBM Plex Mono',monospace; font-size:8.5px;letter-spacing:1.8px; text-transform:uppercase; cursor:pointer; white-space:nowrap; transition:all .25s ease; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } .sl-chap-pill:hover{ background:rgba(40,30,70,.8); color:rgba(245,225,190,.9); border-color:rgba(255,225,180,.4); } .sl-chap-pill.active{ background:rgba(60,40,90,.85); border-color:rgba(255,225,180,.6); color:rgba(255,245,220,1); box-shadow:0 0 14px rgba(255,200,140,.25); } .sl-darshan-body{ flex:1 1 auto; overflow-y:auto; padding:18px 22px 28px 22px; scrollbar-width:thin; scrollbar-color:rgba(255,200,140,.3) transparent; } .sl-darshan-body::-webkit-scrollbar{width:5px;} .sl-darshan-body::-webkit-scrollbar-track{background:transparent;} .sl-darshan-body::-webkit-scrollbar-thumb{ background:rgba(255,200,140,.25); border-radius:3px; } .sl-darshan-body::-webkit-scrollbar-thumb:hover{ background:rgba(255,200,140,.5); } /* When darshan is open, dim canvas slightly so text reads better but lingam still visible */ #shivling-exp.sl-darshan-open #sl-canvas{ /* No filter — keep darshan crisp */ } /* Hide hint when darshan is open */ .sl-darshan.on ~ .sl-hint{ opacity:0; } /* ── MOBILE — stack and shrink ── */ @media(max-width:780px){ .sl-darshan{ width:calc(100vw - 16px); top:auto; bottom:0; height:62vh; max-height:62vh; right:auto; left:50%; transform:translateX(-50%) translateY(110%); border-radius:8px 8px 0 0; border:1px solid rgba(255,210,150,.25); border-bottom:none; transition:transform .55s cubic-bezier(.2,.7,.3,1), opacity .4s ease; } .sl-darshan.on{ transform:translateX(-50%) translateY(0); right:auto; } .sl-darshan-toggle{ right:8px; padding:11px 9px 9px 9px; min-width:62px; } .sl-darshan-toggle-glyph{font-size:18px;} .sl-darshan-toggle-lbl{font-size:7.5px;} .sl-ritual-bar{ left:8px;gap:8px; } .sl-ritual-btn{ padding:9px 7px 7px 7px; min-width:52px; } .sl-ritual-glyph{font-size:17px;} .sl-ritual-lbl{font-size:7px;} .sl-deva-title{top:56px;} .sl-deva-title .sl-deva-skt{font-size:14px;letter-spacing:4px;} .sl-deva-title .sl-deva-en{font-size:7px;letter-spacing:3px;} .sl-counter-bar{ top:auto;bottom:130px;right:8px; padding:8px 10px; } .sl-cnt{min-width:auto;font-size:8.5px;} .sl-cnt-glyph{font-size:10px;} .sl-cnt-num{font-size:11px;} .sl-cnt-lbl{font-size:9.5px;} .sl-hint{font-size:11px;bottom:14px;} .sl-darshan-title{font-size:15px;} .sl-darshan-body{font-size:14.5px;padding:14px 16px 22px 16px;} } @media(max-width:420px){ .sl-darshan-toggle-lbl{display:none;} .sl-ritual-lbl{display:none;} .sl-ritual-btn{padding:9px;min-width:42px;} .sl-darshan-toggle{padding:10px;min-width:42px;} .sl-counter-bar{padding:6px 8px;} } /* ════════════════════════════════════════════════════════════════════════════ DEVAS & ASURAS — THE COSMIC DUALISM Split-screen: left cool (deva), right warm (asura), axis in center. Darshan-first: cosmos stays visible. Reading panel slides in from right. ════════════════════════════════════════════════════════════════════════════ */ #devasura-exp{ background:#01010a; color:rgba(245,235,215,.95); font-family:'Cormorant Garamond', serif; } #devasura-exp .era-exp-hdr{ position:relative;z-index:5; background:linear-gradient(180deg, rgba(4,6,20,.92) 0%, rgba(4,6,20,.5) 75%, rgba(4,6,20,0) 100%); } #devasura-exp .era-exp-title{ font-family:'Cinzel',serif;letter-spacing:3px; background:linear-gradient(90deg,#a0c8ff 0%, #fff8ee 50%, #ffb070 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } /* Bottom hint */ .dv-hint{ position:absolute;left:50%;bottom:20px;transform:translateX(-50%); z-index:3; font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:3px; color:rgba(220,200,160,.45);text-transform:uppercase; pointer-events:none;white-space:nowrap; animation:slHintPulse 5s ease-in-out infinite; } /* Toggle button to open darshan panel */ .dv-darshan-toggle{ position:absolute;right:14px;top:50%;transform:translateY(-50%); z-index:6; display:flex;flex-direction:column;align-items:center;gap:4px; padding:14px 12px 12px 12px; background:linear-gradient(135deg,rgba(40,30,70,.85) 0%,rgba(20,15,40,.85) 100%); border:1px solid rgba(220,200,160,.4);border-radius:7px; cursor:pointer; backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); transition:all .3s cubic-bezier(.4,0,.2,1); touch-action:manipulation;-webkit-tap-highlight-color:transparent; min-width:74px; box-shadow:0 0 22px rgba(200,180,120,.15); } .dv-darshan-toggle:hover{ background:linear-gradient(135deg,rgba(60,45,95,.92) 0%,rgba(35,25,60,.92) 100%); border-color:rgba(255,230,180,.7); transform:translateY(-50%) translateX(-2px); box-shadow:0 0 28px rgba(200,180,120,.3); } .dv-darshan-toggle-glyph{font-size:22px;line-height:1;filter:drop-shadow(0 0 8px rgba(220,190,140,.55));} .dv-darshan-toggle-lbl{font-family:'Cinzel',serif;font-size:8.5px;letter-spacing:1.6px;color:rgba(255,230,200,.95);text-transform:uppercase;text-align:center;line-height:1.3;} /* Battles quick-access strip at the bottom */ .dv-battles-strip{ position:absolute;left:0;right:0;bottom:44px;z-index:4; overflow:hidden; pointer-events:none; } .dv-battles-strip-inner{ display:flex;align-items:center;gap:7px; padding:0 80px 0 14px; overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none; pointer-events:auto; } .dv-battles-strip-inner::-webkit-scrollbar{display:none;} .dv-bs-btn{ flex:0 0 auto; padding:7px 13px 6px 13px; background:rgba(15,12,30,.72); border:1px solid rgba(220,200,160,.25);border-radius:999px; color:rgba(240,220,180,.85); font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:1.8px;text-transform:uppercase; cursor:pointer;white-space:nowrap; backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); transition:all .25s ease; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } .dv-bs-btn:hover{ background:rgba(40,30,65,.9); border-color:rgba(255,225,160,.55); color:rgba(255,240,210,1); } .dv-bs-story{font-size:8.5px;letter-spacing:1.5px;} .dv-bs-divider{flex:0 0 1px;height:18px;background:rgba(220,200,160,.25);margin:0 3px;} /* ── FLOATING DARSHAN PANEL ── */ .dv-darshan{ position:absolute; top:60px; right:-460px; width:440px; max-width:calc(100vw - 24px); height:calc(100% - 90px); max-height:calc(100% - 90px); z-index:9; display:flex;flex-direction:column; background:linear-gradient(180deg,rgba(14,10,28,.97) 0%,rgba(7,4,16,.97) 100%); border:1px solid rgba(220,200,160,.25); border-right:none;border-radius:8px 0 0 8px; backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); box-shadow:-12px 0 50px rgba(0,0,0,.6),0 0 60px rgba(200,180,120,.07); transition:right .55s cubic-bezier(.2,.7,.3,1), opacity .4s ease; opacity:0;pointer-events:none; } .dv-darshan.on{right:0;opacity:1;pointer-events:auto;} .dv-darshan-hdr{ display:flex;align-items:flex-start;justify-content:space-between; padding:18px 20px 14px 22px; border-bottom:1px solid rgba(220,200,160,.15); flex:0 0 auto; } .dv-darshan-title-wrap{flex:1;min-width:0;} .dv-darshan-eyebrow{ font-family:'IBM Plex Mono',monospace;font-size:7.5px;letter-spacing:3px; color:rgba(220,180,120,.6);text-transform:uppercase;margin-bottom:4px; } .dv-darshan-title{ font-family:'Cinzel',serif;font-size:18px;letter-spacing:1.5px; background:linear-gradient(90deg,#a0c8ff 0%,#fff0cc 50%,#ffb070 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; line-height:1.3; } .dv-darshan-close{ flex:0 0 auto;width:30px;height:30px; background:rgba(40,30,60,.6); border:1px solid rgba(220,200,160,.25);border-radius:50%; color:rgba(245,225,190,.85);font-size:14px; cursor:pointer;display:flex;align-items:center;justify-content:center; margin-left:10px;transition:all .25s ease; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } .dv-darshan-close:hover{background:rgba(80,50,90,.9);border-color:rgba(255,220,160,.6);color:#fff;} .dv-darshan-pills{ display:flex;gap:6px;padding:12px 18px 14px 18px; overflow-x:auto;flex:0 0 auto; border-bottom:1px solid rgba(220,200,160,.1); scrollbar-width:none;-ms-overflow-style:none; } .dv-darshan-pills::-webkit-scrollbar{display:none;} .dv-chap-pill{ flex:0 0 auto;padding:7px 12px 6px 12px; background:rgba(20,15,40,.6); border:1px solid rgba(220,200,160,.18);border-radius:999px; color:rgba(220,200,160,.65); font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:1.8px;text-transform:uppercase; cursor:pointer;white-space:nowrap; transition:all .25s ease; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } .dv-chap-pill:hover{background:rgba(40,30,70,.8);color:rgba(245,225,190,.9);border-color:rgba(255,225,160,.4);} .dv-chap-pill.active{ background:rgba(55,38,90,.85);border-color:rgba(255,220,160,.6); color:rgba(255,245,220,1);box-shadow:0 0 14px rgba(200,180,120,.25); } .dv-darshan-body{ flex:1 1 auto;overflow-y:auto; padding:18px 22px 28px 22px; scrollbar-width:thin; scrollbar-color:rgba(200,180,120,.3) transparent; } .dv-darshan-body::-webkit-scrollbar{width:5px;} .dv-darshan-body::-webkit-scrollbar-track{background:transparent;} .dv-darshan-body::-webkit-scrollbar-thumb{background:rgba(200,180,120,.25);border-radius:3px;} /* Battle item hover glow */ .dv-battle-item:hover{ background:rgba(40,30,60,.85) !important; border-color:rgba(255,210,140,.4) !important; transform:translateX(3px); } /* Mobile */ @media(max-width:780px){ .dv-darshan{ width:calc(100vw - 16px); top:auto;bottom:0;height:65vh;max-height:65vh; right:auto;left:50%; transform:translateX(-50%) translateY(110%); border-radius:8px 8px 0 0;border:1px solid rgba(220,200,160,.25);border-bottom:none; transition:transform .55s cubic-bezier(.2,.7,.3,1),opacity .4s ease; } .dv-darshan.on{transform:translateX(-50%) translateY(0);right:auto;} .dv-darshan-toggle{right:8px;padding:11px 9px 9px 9px;min-width:62px;} .dv-darshan-toggle-glyph{font-size:18px;} .dv-darshan-toggle-lbl{font-size:7.5px;} .dv-battles-strip{bottom:38px;} .dv-battles-strip-inner{padding:0 70px 0 8px;} .dv-bs-btn{font-size:8px;padding:6px 10px 5px 10px;} .dv-hint{font-size:8px;letter-spacing:2px;bottom:16px;} } @media(max-width:420px){ .dv-darshan-toggle-lbl{display:none;} .dv-darshan-toggle{min-width:44px;padding:10px;} } /* ════════════════════════════════════════════════════════════════════ VIDYĀ MAṆḌALA — विद्या मण्डल Palette: deep indigo void + warm gold + cream + saffron accents Pattern: darshan-first floating panel (right side desktop / bottom sheet mobile) ════════════════════════════════════════════════════════════════════ */ #vidya-exp{ background:radial-gradient(ellipse at 50% 40%,#0e0828 0%,#070418 55%,#020108 100%)!important; } #vidya-exp .era-exp-hdr{ background:linear-gradient(180deg,rgba(8,4,18,.88) 0%,rgba(8,4,18,0) 100%); border-bottom:1px solid rgba(220,180,120,.18); } #vidya-exp .era-exp-title{ background:linear-gradient(90deg,#FFD480 0%,#FFE9B0 50%,#FFB76A 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; font-family:'Cinzel',serif;letter-spacing:2px; } /* Bottom hint */ #vidya-exp .vd-hint{ position:absolute;bottom:22px;left:50%;transform:translateX(-50%); font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:3px; color:rgba(220,200,160,.55);text-transform:uppercase; z-index:5;pointer-events:none;text-align:center;width:max-content;max-width:88vw; } /* Bottom legend */ #vidya-exp .vd-legend{ position:absolute;bottom:48px;left:0;right:0;z-index:6;pointer-events:none; display:flex;justify-content:center; } #vidya-exp .vd-legend-inner{ display:flex;gap:14px;flex-wrap:wrap;justify-content:center; padding:8px 14px; background:rgba(8,4,18,.55); border:1px solid rgba(220,180,120,.15); border-radius:999px; backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); max-width:min(94vw,820px); } #vidya-exp .vd-leg-item{ display:inline-flex;align-items:center;gap:5px; font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:1.4px; color:rgba(220,200,160,.72);text-transform:uppercase; white-space:nowrap; } #vidya-exp .vd-leg-dot{ display:inline-block;width:7px;height:7px;border-radius:50%; box-shadow:0 0 6px currentColor; } /* Toggle button — right edge */ #vidya-exp .vd-darshan-toggle{ position:absolute;top:50%;right:14px;transform:translateY(-50%); display:flex;flex-direction:column;align-items:center;gap:6px; padding:14px 10px;min-width:72px; background:linear-gradient(180deg,rgba(40,24,68,.88),rgba(20,12,40,.88)); border:1px solid rgba(220,180,120,.4);border-right:none; border-radius:12px 0 0 12px; color:rgba(255,235,200,.95); cursor:pointer;z-index:8; box-shadow:-4px 0 20px rgba(0,0,0,.45),0 0 24px rgba(180,140,220,.12); transition:all .28s ease; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } #vidya-exp .vd-darshan-toggle:hover{ background:linear-gradient(180deg,rgba(60,38,96,.95),rgba(32,20,60,.95)); border-color:rgba(255,220,160,.7); transform:translateY(-50%) translateX(-3px); box-shadow:-6px 0 28px rgba(180,140,220,.3); } #vidya-exp .vd-darshan-toggle-glyph{ font-size:22px;line-height:1; filter:drop-shadow(0 0 8px rgba(220,180,120,.6)); } #vidya-exp .vd-darshan-toggle-lbl{ font-family:'Cinzel',serif;font-size:8.5px;letter-spacing:1.6px; color:rgba(255,230,200,.95);text-transform:uppercase;text-align:center;line-height:1.3; } /* ── DARSHAN PANEL ── */ .vd-darshan{ position:absolute; top:60px; right:-520px; width:480px; max-width:calc(100vw - 24px); height:calc(100% - 90px); max-height:calc(100% - 90px); z-index:9; display:flex;flex-direction:column; background:linear-gradient(180deg,rgba(14,8,32,.97) 0%,rgba(7,3,18,.98) 100%); border:1px solid rgba(220,180,120,.28); border-right:none;border-radius:10px 0 0 10px; backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); box-shadow:-14px 0 60px rgba(0,0,0,.65),0 0 60px rgba(180,140,220,.07); transition:right .55s cubic-bezier(.2,.7,.3,1),opacity .4s ease; opacity:0;pointer-events:none; } .vd-darshan.on{right:0;opacity:1;pointer-events:auto;} .vd-darshan-hdr{ display:flex;align-items:flex-start;justify-content:space-between; padding:18px 20px 14px 22px; border-bottom:1px solid rgba(220,180,120,.18); flex:0 0 auto; } .vd-darshan-title-wrap{flex:1;min-width:0;} .vd-darshan-eyebrow{ font-family:'IBM Plex Mono',monospace;font-size:7.5px;letter-spacing:3px; color:rgba(220,180,120,.62);text-transform:uppercase;margin-bottom:5px; } .vd-darshan-title{ font-family:'Cinzel',serif;font-size:18px;letter-spacing:1.4px; background:linear-gradient(90deg,#FFD480 0%,#FFE9B0 50%,#FFB76A 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; line-height:1.3; } .vd-darshan-close{ flex:0 0 auto;width:30px;height:30px; background:rgba(40,24,68,.6); border:1px solid rgba(220,180,120,.28);border-radius:50%; color:rgba(245,225,190,.85);font-size:14px; cursor:pointer;display:flex;align-items:center;justify-content:center; margin-left:10px;transition:all .25s ease; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } .vd-darshan-close:hover{background:rgba(80,50,90,.92);border-color:rgba(255,220,160,.65);color:#fff;} /* Search */ .vd-search-wrap{ position:relative;flex:0 0 auto; padding:10px 18px 6px 18px; border-bottom:1px solid rgba(220,180,120,.08); } .vd-search-input{ width:100%;padding:9px 13px 8px 13px; background:rgba(20,12,38,.7); border:1px solid rgba(220,180,120,.22);border-radius:6px; color:rgba(245,230,200,.95); font-family:'Cormorant Garamond',serif;font-size:14px; outline:none;transition:all .2s ease; } .vd-search-input::placeholder{color:rgba(220,200,160,.4);font-style:italic;} .vd-search-input:focus{border-color:rgba(255,220,160,.55);background:rgba(30,18,52,.85);} .vd-search-results{ display:none;position:absolute;top:calc(100% - 4px);left:18px;right:18px; background:rgba(12,6,24,.97); border:1px solid rgba(220,180,120,.3);border-radius:6px; max-height:280px;overflow-y:auto;z-index:50; box-shadow:0 6px 22px rgba(0,0,0,.65); } .vd-search-results.on{display:block;} .vd-sr-empty{padding:14px;text-align:center;font-family:'Cormorant Garamond',serif;font-style:italic;color:rgba(220,200,160,.5);font-size:13px;} .vd-sr-item{ display:flex;align-items:center;gap:10px;width:100%; padding:10px 14px;border:none;background:transparent; border-bottom:1px solid rgba(220,180,120,.06); text-align:left;cursor:pointer;transition:background .15s ease; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } .vd-sr-item:hover{background:rgba(40,24,68,.55);} .vd-sr-item:last-child{border-bottom:none;} .vd-sr-glyph{ flex:0 0 28px;width:28px;text-align:center; font-family:'Noto Sans Devanagari','Cinzel',serif;font-size:18px; filter:drop-shadow(0 0 4px currentColor); } .vd-sr-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;} .vd-sr-name{ font-family:'Cinzel',serif;font-size:12.5px;letter-spacing:.5px; color:rgba(255,235,200,.95); } .vd-sr-sub{ font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:1.2px; color:rgba(200,180,140,.6);text-transform:uppercase; } /* Chapter pills */ .vd-darshan-pills{ display:flex;gap:6px;padding:12px 18px 14px 18px; overflow-x:auto;flex:0 0 auto; border-bottom:1px solid rgba(220,180,120,.1); scrollbar-width:none;-ms-overflow-style:none; } .vd-darshan-pills::-webkit-scrollbar{display:none;} .vd-chap-pill{ flex:0 0 auto;padding:7px 12px 6px 12px; background:rgba(22,14,42,.65); border:1px solid rgba(220,180,120,.2);border-radius:999px; color:rgba(220,200,160,.7); font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:1.6px; text-transform:uppercase; cursor:pointer;white-space:nowrap; transition:all .25s ease; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } .vd-chap-pill:hover{background:rgba(50,32,82,.85);color:rgba(245,225,190,.95);border-color:rgba(255,220,160,.45);} .vd-chap-pill.active{ background:rgba(70,42,112,.92);border-color:rgba(255,220,160,.65); color:rgba(255,245,220,1);box-shadow:0 0 14px rgba(180,140,220,.25); } /* Body */ .vd-darshan-body{ flex:1 1 auto;overflow-y:auto; padding:20px 24px 32px 24px; scrollbar-width:thin;scrollbar-color:rgba(220,180,120,.32) transparent; } .vd-darshan-body::-webkit-scrollbar{width:5px;} .vd-darshan-body::-webkit-scrollbar-track{background:transparent;} .vd-darshan-body::-webkit-scrollbar-thumb{background:rgba(220,180,120,.28);border-radius:3px;} /* Body content typography */ .vd-eyebrow{ font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:3.5px; color:rgba(220,180,120,.7);text-transform:uppercase;margin-bottom:10px; } .vd-lede{ font-family:'Cormorant Garamond',serif;font-size:17px;line-height:1.7; color:rgba(255,235,200,.94);margin:0 0 16px 0;font-style:italic; } .vd-darshan-body p{ font-family:'Cormorant Garamond',serif;font-size:15.5px;line-height:1.78; color:rgba(225,215,190,.92);margin:0 0 14px 0; } .vd-darshan-body p strong{color:rgba(255,225,180,.98);font-weight:600;} .vd-darshan-body p em{color:rgba(255,210,150,.96);font-style:italic;} .vd-h{ font-family:'Cinzel',serif;font-size:13.5px;letter-spacing:2.5px; color:rgba(255,210,150,.96);margin:24px 0 12px 0; text-transform:uppercase; border-bottom:1px solid rgba(220,180,120,.22);padding-bottom:5px; } .vd-foot{ font-size:13px!important;color:rgba(200,180,140,.62)!important; font-style:italic; } .vd-attr{ font-family:'IBM Plex Mono',monospace!important;font-size:8.5px!important; letter-spacing:2px;color:rgba(180,140,80,.58)!important; text-transform:uppercase;font-style:normal!important; margin-top:28px!important;padding-top:16px; border-top:1px solid rgba(220,160,80,.12); } /* Quote pull */ .vd-quote{ margin:18px 0 20px 0;padding:16px 18px; background:linear-gradient(180deg,rgba(40,24,68,.45) 0%,rgba(20,10,40,.4) 100%); border-left:2px solid rgba(255,210,150,.55); border-radius:4px; } .vd-q-pull{padding:18px 20px;} .vd-q-small{padding:12px 14px;margin:10px 0 14px 0;} .vd-q-sa{ font-family:'Noto Sans Devanagari',serif;font-size:15.5px;line-height:1.85; color:rgba(255,225,180,.95);margin-bottom:10px; text-shadow:0 0 14px rgba(255,180,100,.18); } .vd-q-en{ font-family:'Cormorant Garamond',serif;font-size:14.5px;line-height:1.7; color:rgba(245,230,205,.88);font-style:italic;margin-bottom:6px; } .vd-q-src{ font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:1.6px; color:rgba(220,180,120,.7);text-transform:uppercase; } /* Bullets and numbered lists */ .vd-bullet{margin:10px 0 16px 0;padding-left:20px;} .vd-bullet-tight li{margin-bottom:4px!important;} .vd-bullet li{ font-family:'Cormorant Garamond',serif;font-size:14.5px;line-height:1.7; color:rgba(225,215,190,.92);margin-bottom:9px; } .vd-bullet li strong{color:rgba(255,220,160,.96);font-weight:600;} .vd-bullet li em{color:rgba(255,210,150,.92);} .vd-numlist{margin:10px 0 16px 0;padding-left:24px;} .vd-numlist li{ font-family:'Cormorant Garamond',serif;font-size:14.5px;line-height:1.7; color:rgba(225,215,190,.92);margin-bottom:7px; } .vd-numlist li.vd-skip{list-style:none;} .vd-numlist-tight li{margin-bottom:6px!important;font-size:14px!important;} /* List with circled number markers */ .vd-list{display:flex;flex-direction:column;gap:14px;margin:14px 0 18px 0;} .vd-li{ display:flex;gap:14px;align-items:flex-start; padding:13px 14px; background:linear-gradient(180deg,rgba(28,16,52,.45) 0%,rgba(14,8,32,.45) 100%); border:1px solid rgba(220,180,120,.16);border-radius:6px; } .vd-li-num{ flex:0 0 28px;width:28px;height:28px; display:flex;align-items:center;justify-content:center; background:radial-gradient(circle,rgba(255,210,150,.95) 0%,rgba(220,170,90,.7) 100%); border:1px solid rgba(255,225,180,.7);border-radius:50%; font-family:'Cinzel',serif;font-size:13px;font-weight:600;color:#1a0e30; font-family:'Noto Sans Devanagari','Cinzel',serif; } .vd-li > div{ flex:1;font-family:'Cormorant Garamond',serif;font-size:14.5px;line-height:1.65; color:rgba(230,220,200,.93); } .vd-li-sub{ display:block;margin-top:4px;font-size:13px;color:rgba(200,185,160,.78);font-style:italic; } /* Callout */ .vd-callout{ margin:18px 0;padding:14px 16px; background:linear-gradient(180deg,rgba(50,30,90,.45) 0%,rgba(28,16,56,.4) 100%); border:1px solid rgba(220,180,120,.3);border-radius:6px; } .vd-co-title{ font-family:'Cinzel',serif;font-size:11px;letter-spacing:2.5px; color:rgba(255,225,180,.96);text-transform:uppercase;margin-bottom:9px; } .vd-co-list{margin:0;padding-left:18px;} .vd-co-list li{ font-family:'Cormorant Garamond',serif;font-size:14px;line-height:1.65; color:rgba(225,215,190,.92);margin-bottom:5px; } /* Detail page styles (when an orb is selected) */ .vd-detail{display:flex;flex-direction:column;gap:0;} .vd-d-eyebrow{ font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:3px; color:rgba(220,180,120,.72);text-transform:uppercase;margin-bottom:6px; } .vd-d-en{ font-family:'Cormorant Garamond',serif;font-style:italic;font-size:18px; color:rgba(255,225,180,.92);margin-bottom:14px;line-height:1.4; } .vd-d-short{ font-family:'Cormorant Garamond',serif;font-size:16px;line-height:1.72; color:rgba(245,230,210,.95);margin-bottom:18px; padding-bottom:16px;border-bottom:1px solid rgba(220,180,120,.16); } .vd-d-section{margin-bottom:18px;} .vd-d-h{ font-family:'Cinzel',serif;font-size:11px;letter-spacing:2.5px; color:rgba(255,210,150,.92);text-transform:uppercase; margin-bottom:7px; } .vd-d-p{ font-family:'Cormorant Garamond',serif;font-size:14.5px;line-height:1.72; color:rgba(225,215,190,.92); } .vd-d-p strong{color:rgba(255,225,180,.97);font-weight:600;} .vd-d-p em{color:rgba(255,210,150,.94);font-style:italic;} .vd-d-foot{ margin-top:28px;padding-top:14px; border-top:1px solid rgba(220,160,80,.14); font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:2px; color:rgba(180,140,80,.6);text-transform:uppercase; } /* Related vidya buttons */ .vd-rel-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;} .vd-rel-btn{ padding:5px 10px 4px 10px; background:rgba(40,24,68,.6); border:1px solid rgba(220,180,120,.28);border-radius:999px; color:rgba(245,225,190,.92); font-family:'Cormorant Garamond',serif;font-size:12.5px; cursor:pointer;transition:all .2s ease; touch-action:manipulation;-webkit-tap-highlight-color:transparent; } .vd-rel-btn:hover{ background:rgba(60,38,96,.92);border-color:rgba(255,220,160,.6); color:#fff;transform:translateY(-1px); } /* Lineage grid */ .vd-lineage-grid{ display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0 18px 0; } .vd-lin{ padding:12px 14px; background:linear-gradient(180deg,rgba(28,16,52,.5) 0%,rgba(14,8,32,.45) 100%); border:1px solid rgba(220,180,120,.18);border-radius:6px; } .vd-lin-h{ font-family:'Cinzel',serif;font-size:11.5px;letter-spacing:1.6px; color:rgba(255,225,180,.95);margin-bottom:6px; } .vd-lin p{ font-family:'Cormorant Garamond',serif;font-size:13px;line-height:1.55; color:rgba(220,210,190,.88);margin:0; } /* 64 Kalas columns */ .vd-kalas-cols{ display:grid;grid-template-columns:1fr 1fr;gap:6px 24px; margin:14px 0 18px 0; } .vd-kalas{margin:0;padding-left:24px;} .vd-kalas li{ font-family:'Cormorant Garamond',serif;font-size:13.5px;line-height:1.55; color:rgba(225,215,190,.9);margin-bottom:3px; } .vd-kalas li em{color:rgba(255,210,150,.92);font-style:italic;} /* Mobile */ @media(max-width:780px){ .vd-darshan{ width:calc(100vw - 16px); top:auto;bottom:0;height:75vh;max-height:75vh; right:auto;left:50%; transform:translateX(-50%) translateY(110%); border-radius:10px 10px 0 0;border:1px solid rgba(220,180,120,.28);border-bottom:none; transition:transform .55s cubic-bezier(.2,.7,.3,1),opacity .4s ease; } .vd-darshan.on{transform:translateX(-50%) translateY(0);right:auto;} #vidya-exp .vd-darshan-toggle{ top:auto;bottom:78px;right:8px; transform:none;padding:11px 9px 9px 9px;min-width:60px; } #vidya-exp .vd-darshan-toggle:hover{transform:translateX(-2px);} #vidya-exp .vd-darshan-toggle-glyph{font-size:18px;} #vidya-exp .vd-darshan-toggle-lbl{font-size:7.5px;} #vidya-exp .vd-hint{font-size:8px;letter-spacing:2px;bottom:18px;} #vidya-exp .vd-legend{bottom:42px;} #vidya-exp .vd-legend-inner{gap:8px;padding:6px 10px;} #vidya-exp .vd-leg-item{font-size:7.5px;letter-spacing:1px;} .vd-darshan-title{font-size:15.5px!important;} .vd-darshan-body{padding:16px 18px 28px 18px;} .vd-lineage-grid{grid-template-columns:1fr;} .vd-kalas-cols{grid-template-columns:1fr;} } @media(max-width:420px){ #vidya-exp .vd-darshan-toggle-lbl{display:none;} #vidya-exp .vd-darshan-toggle{min-width:44px;padding:10px;} #vidya-exp .vd-legend{display:none;} #vidya-exp .vd-hint{bottom:14px;font-size:7.5px;} } /* ════════════════════════════════════════════════════════════════════════════ VIŚVARŪPA DARŚANA · The Cosmic Form · Bhagavad Gītā 11 Unique `vp` prefix (avoids Virāṭ `vr` collision — the bug fixed) ════════════════════════════════════════════════════════════════════════════ */ #vp-exp{ background: radial-gradient(ellipse at 50% 32%, rgba(180,90,200,.20) 0%, rgba(0,0,0,0) 55%), radial-gradient(ellipse at 50% 70%, rgba(220,140,60,.18) 0%, rgba(0,0,0,0) 60%), linear-gradient(to bottom, #050310 0%, #0c0820 35%, #100614 75%, #050308 100%) !important; } #vp-exp .era-exp-title-wrap{ flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; } #vp-exp .era-exp-eyebrow{ font-family:'Noto Sans Devanagari', serif; font-size:10px; color:rgba(255,200,160,.6); letter-spacing:1px; } #vp-exp .era-exp-title{ font-family:'Cinzel', serif; font-size:10px; letter-spacing:2px; color:rgba(201,168,76,.65); text-align:center; } #vp-exp #vp-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:1; display:block; touch-action:manipulation; -webkit-tap-highlight-color:transparent; } /* ── Top-left action cluster ──────────────────────────────────────────── */ #vp-exp .vp-actions{ position:absolute; top:64px; left:24px; z-index:30; display:flex; flex-direction:column; gap:8px; align-items:flex-start; } #vp-exp .vp-darshan-toggle, #vp-exp .vp-kalo-btn, #vp-exp .vp-rewind-btn{ font-family:'IBM Plex Mono', monospace; font-size:9.5px; letter-spacing:2.2px; text-transform:uppercase; padding:10px 18px; background:rgba(8,5,18,.78); border:1px solid rgba(220,170,255,.32); color:rgba(255,220,160,.88); cursor:pointer; transition:all .35s; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); display:inline-flex; align-items:center; gap:8px; touch-action:manipulation; -webkit-tap-highlight-color:transparent; white-space:nowrap; } #vp-exp .vp-darshan-toggle:hover, #vp-exp .vp-kalo-btn:hover, #vp-exp .vp-rewind-btn:hover{ background:rgba(40,15,50,.85); border-color:rgba(255,200,150,.6); color:rgba(255,240,200,1); box-shadow:0 0 22px rgba(220,140,200,.28); } #vp-exp .vp-darshan-toggle-glyph, #vp-exp .vp-k-glyph{ font-size:14px; letter-spacing:0; } #vp-exp .vp-kalo-btn{ border-color:rgba(255,140,90,.4); color:rgba(255,200,160,.92); background:rgba(30,8,12,.78); } #vp-exp .vp-kalo-btn:hover{ border-color:rgba(255,180,120,.7); background:rgba(50,12,20,.88); box-shadow:0 0 22px rgba(255,140,80,.3); } #vp-exp .vp-rewind-btn{ font-size:14px; padding:8px 14px; letter-spacing:1px; } /* ── Stage strip — 11 numbered dots, top center ─────────────────────── */ #vp-exp #vp-stages{ position:absolute; top:64px; left:50%; transform:translateX(-50%); z-index:28; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; } #vp-exp #vp-stages-inner{ display:flex; gap:5px; pointer-events:auto; flex-wrap:nowrap; max-width:min(80vw, 700px); justify-content:center; } #vp-exp .vp-stage-dot{ width:28px; height:28px; border-radius:50%; background:rgba(20,10,30,.6); border:1px solid rgba(220,170,255,.22); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .35s; font-family:'Cinzel', serif; color:rgba(220,200,250,.6); flex-shrink:0; touch-action:manipulation; -webkit-tap-highlight-color:transparent; } #vp-exp .vp-stage-num{ font-size:9px; letter-spacing:.5px; text-transform:uppercase; } #vp-exp .vp-stage-dot:hover{ border-color:rgba(255,210,150,.55); color:rgba(255,235,200,.95); background:rgba(40,18,50,.7); } #vp-exp .vp-stage-dot.current{ border-color:rgba(255,220,140,.95); background:rgba(120,60,90,.7); color:rgba(255,250,220,1); box-shadow:0 0 14px rgba(255,200,140,.55); transform:scale(1.12); } #vp-exp .vp-stage-dot.done{ border-color:rgba(220,170,200,.4); color:rgba(220,180,200,.6); background:rgba(30,15,40,.6); } #vp-exp #vp-stage-label{ font-family:'IBM Plex Mono', monospace; font-size:8.5px; letter-spacing:3.5px; text-transform:uppercase; color:rgba(220,190,220,.7); margin-top:4px; } /* ── Verse top center ─────────────────────────────────────────────── */ #vp-exp #vp-verse{ position:absolute; top:130px; left:50%; transform:translateX(-50%); z-index:26; width:min(86vw, 640px); text-align:center; pointer-events:none; background:rgba(8,5,18,.72); border:1px solid rgba(255,200,140,.14); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); padding:14px 22px; opacity:0; transition:opacity .9s, transform .9s; } #vp-exp #vp-verse.visible{ opacity:1; transform:translateX(-50%) translateY(0); } #vp-exp .vp-verse-sa{ font-family:'Noto Sans Devanagari', serif; font-size:clamp(14px, 2vw, 17px); color:rgba(255,235,200,.96); line-height:1.6; margin-bottom:6px; text-shadow:0 0 16px rgba(255,180,100,.4); } #vp-exp .vp-verse-iast{ font-family:'Cormorant Garamond', serif; font-style:italic; font-size:clamp(11px, 1.5vw, 13px); color:rgba(220,200,170,.82); margin-bottom:6px; line-height:1.5; } #vp-exp .vp-verse-iast em{font-style:italic;color:inherit;} #vp-exp .vp-verse-tr{ font-family:'Cormorant Garamond', serif; font-size:clamp(12px, 1.6vw, 14.5px); color:rgba(245,230,210,.92); line-height:1.55; margin-bottom:6px; } #vp-exp .vp-verse-src{ font-family:'IBM Plex Mono', monospace; font-size:8px; letter-spacing:2px; color:rgba(255,180,100,.65); text-transform:uppercase; } /* ── Narrative bottom ──────────────────────────────────────────────── */ #vp-exp #vp-narrative{ position:absolute; bottom:96px; left:50%; transform:translateX(-50%) translateY(10px); width:min(86vw, 640px); z-index:25; background:rgba(8,5,18,.72); border:1px solid rgba(220,170,255,.18); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); padding:16px 22px; pointer-events:none; opacity:0; transition:opacity .9s, transform .9s; } #vp-exp #vp-narrative.visible{ opacity:1; transform:translateX(-50%) translateY(0); } #vp-exp .vp-narr-eyebrow{ font-family:'IBM Plex Mono', monospace; font-size:8.5px; letter-spacing:3px; text-transform:uppercase; color:rgba(255,180,120,.75); margin-bottom:10px; } #vp-exp .vp-narr-text{ font-family:'Cormorant Garamond', serif; font-size:clamp(14px, 1.8vw, 16px); color:rgba(245,230,210,.93); line-height:1.65; font-style:italic; text-align:center; } #vp-exp .vp-narr-text em{color:rgba(255,210,150,.96);} #vp-exp .vp-narr-text strong{ color:rgba(255,230,180,1); font-weight:500; font-style:normal; } /* ── Continue button ──────────────────────────────────────────────── */ #vp-exp #vp-advance{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:26; font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:3px; text-transform:uppercase; background:rgba(255,200,140,.18); border:1px solid rgba(255,210,140,.6); color:rgba(255,240,200,.98); padding:12px 28px; cursor:pointer; transition:all .3s; display:inline-flex; align-items:center; gap:14px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); touch-action:manipulation; -webkit-tap-highlight-color:transparent; } #vp-exp #vp-advance:hover{ background:rgba(255,200,140,.32); border-color:rgba(255,230,170,.9); color:rgba(255,250,220,1); box-shadow:0 0 26px rgba(255,180,100,.4); } #vp-exp #vp-advance:active{ transform:translateX(-50%) scale(.97); } #vp-exp .vp-adv-arrow{ font-size:13px; transition:transform .3s; } #vp-exp #vp-advance:hover .vp-adv-arrow{ transform:translateX(4px); } /* ════════════════════════════════════════════════════════════════════ DARSHAN PANEL ════════════════════════════════════════════════════════════════════ */ #vp-exp #vp-darshan{ position:absolute; top:64px; right:24px; bottom:78px; width:min(46vw, 580px); background:rgba(6,4,12,.94); border:1px solid rgba(220,170,255,.22); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); z-index:35; display:flex; flex-direction:column; opacity:0; pointer-events:none; transform:translateX(20px); transition:opacity .4s, transform .4s; box-shadow:0 0 50px rgba(0,0,0,.6); } #vp-exp #vp-darshan.on{ opacity:1; pointer-events:auto; transform:translateX(0); } #vp-exp .vp-darshan-hdr{ display:flex; align-items:flex-start; justify-content:space-between; padding:18px 22px 14px; border-bottom:1px solid rgba(220,170,255,.15); flex-shrink:0; } #vp-exp .vp-darshan-eyebrow{ font-family:'IBM Plex Mono', monospace; font-size:8px; letter-spacing:3px; text-transform:uppercase; color:rgba(220,170,255,.7); margin-bottom:6px; } #vp-exp .vp-darshan-title{ font-family:'Cinzel', serif; font-size:15px; letter-spacing:2.5px; color:rgba(255,230,180,.95); } #vp-exp .vp-darshan-close{ background:none; border:1px solid rgba(220,170,255,.25); color:rgba(220,180,200,.7); font-size:14px; width:32px; height:32px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .25s; touch-action:manipulation; -webkit-tap-highlight-color:transparent; flex-shrink:0; } #vp-exp .vp-darshan-close:hover{ background:rgba(220,80,60,.18); border-color:rgba(255,140,100,.6); color:rgba(255,220,200,1); } #vp-exp .vp-chap-pills{ display:flex; flex-wrap:wrap; gap:5px; padding:12px 22px; border-bottom:1px solid rgba(220,170,255,.1); flex-shrink:0; } #vp-exp .vp-chap-pill{ font-family:'IBM Plex Mono', monospace; font-size:8.5px; letter-spacing:1.6px; text-transform:uppercase; background:none; border:1px solid rgba(220,170,255,.18); color:rgba(200,180,220,.7); padding:6px 10px; cursor:pointer; transition:all .25s; touch-action:manipulation; -webkit-tap-highlight-color:transparent; white-space:nowrap; } #vp-exp .vp-chap-pill:hover{ border-color:rgba(255,200,180,.5); color:rgba(255,235,210,.95); background:rgba(220,170,255,.08); } #vp-exp .vp-chap-pill.active{ background:rgba(220,170,255,.22); border-color:rgba(255,210,180,.7); color:rgba(255,245,225,1); } #vp-exp .vp-darshan-body{ flex:1 1 auto; overflow-y:auto; padding:24px 28px 32px; font-family:'Cormorant Garamond', serif; color:rgba(225,215,235,.92); line-height:1.78; font-size:16px; } #vp-exp .vp-darshan-body::-webkit-scrollbar{width:8px;} #vp-exp .vp-darshan-body::-webkit-scrollbar-track{background:rgba(0,0,0,.3);} #vp-exp .vp-darshan-body::-webkit-scrollbar-thumb{background:rgba(220,170,255,.25);border-radius:4px;} #vp-exp .vp-darshan-body::-webkit-scrollbar-thumb:hover{background:rgba(220,170,255,.4);} #vp-exp .vp-darshan-body h2.vp-darshan-title{ font-family:'Cinzel', serif; font-size:18px; letter-spacing:3px; color:rgba(255,225,170,.98); margin:0 0 18px; padding-bottom:14px; border-bottom:1px solid rgba(220,170,255,.18); text-transform:none; font-weight:500; line-height:1.3; } #vp-exp .vp-darshan-body .vp-eyebrow{ font-family:'IBM Plex Mono', monospace; font-size:8.5px; letter-spacing:3px; text-transform:uppercase; color:rgba(220,170,255,.78); margin-bottom:14px; } #vp-exp .vp-darshan-body p{ margin:0 0 14px; font-size:16px; line-height:1.78; color:rgba(225,215,235,.92); } #vp-exp .vp-darshan-body .vp-lede{ font-size:17px; color:rgba(245,230,200,.95); line-height:1.75; margin-bottom:18px; font-style:italic; } #vp-exp .vp-darshan-body strong{ color:rgba(255,235,190,1); font-weight:500; } #vp-exp .vp-darshan-body em{ color:rgba(255,210,180,.95); font-style:italic; } #vp-exp .vp-darshan-body .vp-h{ font-family:'Cinzel', serif; font-size:13px; letter-spacing:2.8px; color:rgba(255,210,180,.92); margin:24px 0 10px; text-transform:uppercase; font-weight:500; } #vp-exp .vp-darshan-body .vp-foot{ font-family:'IBM Plex Mono', monospace; font-size:8px; letter-spacing:2px; color:rgba(180,160,180,.6); text-transform:uppercase; margin-top:30px; padding-top:18px; border-top:1px solid rgba(220,170,255,.12); } #vp-exp .vp-darshan-body .vp-attr{ color:rgba(220,170,255,.75); font-style:italic; text-transform:none; letter-spacing:.5px; font-size:9px; } #vp-exp .vp-darshan-body .vp-callout{ background:rgba(30,15,50,.55); border:1px solid rgba(220,170,255,.22); border-left:3px solid rgba(255,180,140,.7); padding:16px 20px; margin:18px 0; } #vp-exp .vp-darshan-body .vp-co-title{ font-family:'Cinzel', serif; font-size:11px; letter-spacing:2.5px; color:rgba(255,210,180,.95); text-transform:uppercase; margin-bottom:10px; } #vp-exp .vp-darshan-body .vp-co-list{ list-style:none; padding-left:0; margin:0; } #vp-exp .vp-darshan-body .vp-co-list li{ font-size:14.5px; line-height:1.65; margin-bottom:8px; padding-left:18px; position:relative; } #vp-exp .vp-darshan-body .vp-co-list li::before{ content:'·'; color:rgba(220,170,255,.85); font-weight:bold; position:absolute; left:6px; top:-2px; font-size:18px; } #vp-exp .vp-darshan-body .vp-rules{ list-style:none; padding-left:0; margin:14px 0; display:flex; flex-direction:column; gap:8px; } #vp-exp .vp-darshan-body .vp-rules li{ font-size:14.5px; line-height:1.65; padding:10px 14px 10px 28px; background:rgba(20,10,30,.4); border-left:2px solid rgba(220,170,255,.4); position:relative; } #vp-exp .vp-darshan-body .vp-rules li::before{ content:'◇'; position:absolute; left:8px; top:10px; color:rgba(220,170,255,.7); font-size:10px; } /* ════════════════════════════════════════════════════════════════════ PER-ACT DETAIL VIEW ════════════════════════════════════════════════════════════════════ */ #vp-exp .vp-detail{ --vp-d-clr: rgba(255,210,180,.95); --vp-d-soft: rgba(220,170,255,.18); } #vp-exp .vp-detail .vp-d-num-tag{ font-family:'IBM Plex Mono', monospace; font-size:9px; letter-spacing:3.5px; text-transform:uppercase; color:var(--vp-d-clr); border:1px solid var(--vp-d-clr); padding:4px 10px; display:inline-block; margin-bottom:14px; background:var(--vp-d-soft); } #vp-exp .vp-detail .vp-d-title{ font-family:'Cinzel', serif; font-size:22px; letter-spacing:2px; color:rgba(255,240,200,.98); margin:0 0 18px; font-weight:500; line-height:1.3; text-shadow:0 0 16px var(--vp-d-soft); } #vp-exp .vp-detail .vp-d-mantra{ background:linear-gradient(135deg, rgba(30,15,50,.7) 0%, rgba(10,5,20,.7) 100%); border:1px solid var(--vp-d-clr); border-left:3px solid var(--vp-d-clr); padding:18px 22px; margin:18px 0 24px; } #vp-exp .vp-detail .vp-d-m-eyebrow{ font-family:'IBM Plex Mono', monospace; font-size:8.5px; letter-spacing:3px; text-transform:uppercase; color:var(--vp-d-clr); margin-bottom:12px; opacity:.85; } #vp-exp .vp-detail .vp-d-m-sa{ font-family:'Noto Sans Devanagari', serif; font-size:18px; color:rgba(255,240,200,.98); line-height:1.65; margin-bottom:12px; text-shadow:0 0 14px var(--vp-d-soft); } #vp-exp .vp-detail .vp-d-m-iast{ font-family:'Cormorant Garamond', serif; font-size:14.5px; color:rgba(220,200,220,.85); font-style:italic; line-height:1.6; margin-bottom:10px; } #vp-exp .vp-detail .vp-d-m-iast em{font-style:italic;color:inherit;} #vp-exp .vp-detail .vp-d-m-tr{ font-family:'Cormorant Garamond', serif; font-size:15.5px; color:rgba(245,230,210,.95); line-height:1.65; margin-bottom:10px; } #vp-exp .vp-detail .vp-d-m-src{ font-family:'IBM Plex Mono', monospace; font-size:8.5px; letter-spacing:2px; color:rgba(220,170,255,.7); text-transform:uppercase; } #vp-exp .vp-detail .vp-d-narrative{ font-family:'Cormorant Garamond', serif; font-size:15.5px; color:rgba(235,225,245,.92); line-height:1.7; font-style:italic; margin:20px 0; } #vp-exp .vp-detail .vp-d-narrative strong{color:rgba(255,235,190,1);font-style:normal;font-weight:500;} #vp-exp .vp-detail .vp-d-narrative em{color:rgba(255,210,180,.96);} #vp-exp .vp-detail .vp-d-walk{ display:flex; gap:8px; margin-top:24px; } #vp-exp .vp-detail .vp-d-walk-btn{ flex:1 1 0; background:rgba(20,10,30,.6); border:1px solid rgba(220,170,255,.2); color:rgba(220,200,220,.85); padding:10px 14px; cursor:pointer; display:flex; align-items:center; gap:8px; font-family:'IBM Plex Mono', monospace; transition:all .25s; touch-action:manipulation; -webkit-tap-highlight-color:transparent; text-align:left; min-width:0; } #vp-exp .vp-detail .vp-d-walk-btn:hover{ background:rgba(40,18,50,.7); border-color:rgba(255,200,180,.55); color:rgba(255,235,210,.98); } #vp-exp .vp-detail .vp-d-walk-prev{justify-content:flex-start;} #vp-exp .vp-detail .vp-d-walk-next{justify-content:flex-end;text-align:right;} #vp-exp .vp-detail .vp-d-walk-arr{ font-size:14px; color:var(--vp-d-clr); flex-shrink:0; } #vp-exp .vp-detail .vp-d-walk-lbl{ font-size:9px; letter-spacing:1.3px; text-transform:uppercase; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } #vp-exp .vp-detail .vp-d-foot{ margin-top:22px; padding-top:16px; border-top:1px solid rgba(220,170,255,.1); text-align:center; } #vp-exp .vp-detail .vp-d-foot-attr{ font-family:'Cormorant Garamond', serif; font-style:italic; font-size:11px; color:rgba(220,170,255,.75); letter-spacing:.5px; } /* ════════════════════════════════════════════════════════════════════ MOBILE — no overlaps, no misalignment, clean stacking ════════════════════════════════════════════════════════════════════ */ @media(max-width:680px){ #vp-exp .vp-actions{ top:54px; left:12px; flex-direction:row; flex-wrap:wrap; gap:6px; max-width:calc(100vw - 24px); } #vp-exp .vp-darshan-toggle, #vp-exp .vp-kalo-btn{ font-size:8px; padding:7px 11px; letter-spacing:1.4px; } #vp-exp .vp-rewind-btn{ font-size:13px; padding:7px 11px; } /* Stages pushed BELOW the action buttons */ #vp-exp #vp-stages{ top:108px; width:100%; transform:translateX(-50%); } #vp-exp #vp-stages-inner{ flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; max-width:96vw; padding:0 12px; gap:4px; scrollbar-width:none; -ms-overflow-style:none; justify-content:flex-start; } #vp-exp #vp-stages-inner::-webkit-scrollbar{display:none;} #vp-exp .vp-stage-dot{ width:24px; height:24px; } #vp-exp .vp-stage-num{font-size:8px;} #vp-exp #vp-stage-label{font-size:7.5px;letter-spacing:2.5px;} /* Verse with clearance below stages */ #vp-exp #vp-verse{ top:172px; width:94vw; padding:12px 16px; } #vp-exp .vp-verse-sa{font-size:14px;} #vp-exp .vp-verse-iast{font-size:11px;} #vp-exp .vp-verse-tr{font-size:13px;} #vp-exp .vp-verse-src{font-size:7.5px;letter-spacing:1.5px;} /* Narrative with clearance above Continue */ #vp-exp #vp-narrative{ bottom:88px; width:94vw; padding:14px 16px; } #vp-exp .vp-narr-text{font-size:14px;line-height:1.55;} #vp-exp .vp-narr-eyebrow{font-size:8px;letter-spacing:2.5px;} /* Continue */ #vp-exp #vp-advance{ bottom:22px; padding:10px 22px; font-size:9px; letter-spacing:2.5px; } #vp-exp .vp-adv-arrow{font-size:12px;} /* Darshan = full bottom sheet on mobile */ #vp-exp #vp-darshan{ top:auto; right:0; left:0; bottom:0; width:100%; height:82vh; transform:translateY(100%); border-left:none; border-top:1px solid rgba(220,170,255,.22); } #vp-exp #vp-darshan.on{transform:translateY(0);} #vp-exp .vp-darshan-hdr{padding:14px 16px 10px;} #vp-exp .vp-darshan-title{font-size:13px;letter-spacing:2px;} #vp-exp .vp-darshan-eyebrow{font-size:7.5px;letter-spacing:2px;} #vp-exp .vp-chap-pills{padding:10px 14px;gap:4px;} #vp-exp .vp-chap-pill{font-size:7.5px;padding:5px 8px;letter-spacing:1.2px;} #vp-exp .vp-darshan-body{padding:18px 18px 28px;font-size:15px;} #vp-exp .vp-darshan-body h2.vp-darshan-title{font-size:15px;letter-spacing:2px;} #vp-exp .vp-darshan-body p, #vp-exp .vp-darshan-body .vp-lede{font-size:14.5px;line-height:1.7;} #vp-exp .vp-darshan-body .vp-h{font-size:11.5px;letter-spacing:2px;} #vp-exp .vp-detail .vp-d-title{font-size:17px;letter-spacing:1.5px;} #vp-exp .vp-detail .vp-d-mantra{padding:14px 16px;} #vp-exp .vp-detail .vp-d-m-sa{font-size:16px;} #vp-exp .vp-detail .vp-d-m-iast{font-size:13px;} #vp-exp .vp-detail .vp-d-m-tr{font-size:14px;} #vp-exp .vp-detail .vp-d-narrative{font-size:14px;} #vp-exp .vp-detail .vp-d-walk-lbl{font-size:8.5px;letter-spacing:1px;} } /* very small phones */ @media(max-width:420px){ #vp-exp .vp-actions{flex-direction:column;align-items:flex-start;} #vp-exp #vp-stages{top:130px;} #vp-exp #vp-verse{top:194px;} #vp-exp .vp-darshan-toggle-lbl, #vp-exp .vp-k-lbl{display:none;} } /* ════════════════════════════════════════════════════════════════════════ PIṆḌE BRAHMĀṆḌE — पिण्डे ब्रह्माण्डे The Toroidal Self · Original synthesis by Rahul S. Prefix: tb- | Overlay: #torus-exp ════════════════════════════════════════════════════════════════════════ */ #torus-exp{ background: radial-gradient(ellipse 80% 60% at 50% 38%, #1a1530 0%, #0a0820 40%, #050410 70%, #020108 100%) !important; } #torus-exp .era-exp-hdr{ position:absolute; top:0; left:0; right:0; z-index:10; background:linear-gradient(180deg, rgba(8,5,20,0.85) 0%, rgba(8,5,20,0.4) 70%, transparent 100%); padding:14px 18px 18px; display:flex; align-items:center; justify-content:space-between; pointer-events:none; } #torus-exp .era-exp-hdr > *{ pointer-events:auto; } #torus-exp .era-exp-title{ font-family:'Cinzel', serif; font-weight:600; color:#FFE9B0; letter-spacing:1.4px; font-size:14px; text-transform:uppercase; } /* ─── bottom centred hint ─── */ .tb-hint{ position:absolute; bottom:14px; left:50%; transform:translateX(-50%); z-index:6; font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:rgba(255,230,200,0.55); letter-spacing:1.2px; text-transform:uppercase; pointer-events:none; white-space:nowrap; text-align:center; } /* ─── scale slider (bottom) ─── */ .tb-scale{ position:absolute; bottom:46px; left:50%; transform:translateX(-50%); z-index:8; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; width:min(560px, 90vw); } .tb-scale-lbl-wrap{ display:flex; flex-direction:column; align-items:center; gap:2px; pointer-events:none; } .tb-scale-eyebrow{ font-family:'IBM Plex Mono', monospace; font-size:8px; letter-spacing:2px; color:rgba(255,225,180,0.45); text-transform:uppercase; } .tb-scale-lbl{ font-family:'Cinzel', serif; font-size:13px; letter-spacing:2px; color:rgba(255,235,200,0.92); text-transform:uppercase; } .tb-scale-dots{ display:flex; gap:10px; pointer-events:auto; padding:6px 10px; background:rgba(10,8,20,0.55); border:1px solid rgba(255,225,180,0.12); border-radius:24px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .tb-scale-dot{ background:transparent; border:1px solid rgba(255,225,180,0.20); color:rgba(255,225,180,0.55); width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; cursor:pointer; transition:all 180ms ease; touch-action:manipulation; -webkit-tap-highlight-color:transparent; } .tb-scale-dot:hover{ border-color:rgba(255,225,180,0.55); color:rgba(255,240,210,0.95); background:rgba(255,225,180,0.06); } .tb-scale-dot.active{ border-color:rgba(255,225,180,0.85); color:#FFE9B0; background:rgba(255,225,180,0.14); box-shadow:0 0 14px rgba(255,210,150,0.45), inset 0 0 8px rgba(255,210,150,0.25); } .tb-scale-line{ display:none; } /* ─── action buttons (top-right) ─── */ .tb-actions{ position:absolute; top:62px; right:18px; z-index:8; display:flex; flex-direction:column; gap:6px; align-items:flex-end; } .tb-act-btn{ background:rgba(10,8,20,0.55); border:1px solid rgba(255,225,180,0.18); color:rgba(255,235,200,0.88); font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:1.4px; text-transform:uppercase; padding:8px 12px; border-radius:18px; cursor:pointer; transition:all 200ms ease; white-space:nowrap; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); touch-action:manipulation; -webkit-tap-highlight-color:transparent; } .tb-act-btn:hover{ border-color:rgba(255,225,180,0.55); background:rgba(40,25,15,0.70); color:#FFE9B0; box-shadow:0 0 12px rgba(255,210,150,0.20); } .tb-act-btn.active{ border-color:rgba(255,225,180,0.85); color:#FFE9B0; background:rgba(255,200,140,0.18); box-shadow:0 0 18px rgba(255,210,150,0.40), inset 0 0 8px rgba(255,210,150,0.20); } /* ─── nadi toggles (left side) ─── */ .tb-nadi-toggles{ position:absolute; top:62px; left:18px; z-index:8; display:flex; flex-direction:column; gap:6px; } .tb-nadi-btn{ --c:#FFE9B0; background:rgba(10,8,20,0.55); border:1px solid rgba(255,225,180,0.14); color:rgba(255,235,200,0.55); font-family:'IBM Plex Mono', monospace; padding:6px 12px 6px 8px; border-radius:16px; cursor:pointer; display:flex; align-items:center; gap:8px; transition:all 200ms ease; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); touch-action:manipulation; -webkit-tap-highlight-color:transparent; } .tb-nadi-dot{ width:10px; height:10px; border-radius:50%; background:var(--c); opacity:0.4; flex-shrink:0; box-shadow:0 0 6px var(--c); transition:opacity 200ms ease, box-shadow 200ms ease; } .tb-nadi-lbl{ font-family:'Cinzel', serif; font-size:12px; letter-spacing:1.5px; color:rgba(255,235,200,0.75); text-transform:uppercase; } .tb-nadi-sub{ font-size:8px; letter-spacing:1.5px; color:rgba(255,225,180,0.35); text-transform:uppercase; } .tb-nadi-btn:hover{ border-color:var(--c); background:rgba(20,15,30,0.7); } .tb-nadi-btn.active{ border-color:var(--c); background:rgba(20,15,30,0.78); color:#FFE9B0; box-shadow:0 0 12px rgba(255,210,150,0.18); } .tb-nadi-btn.active .tb-nadi-dot{ opacity:1; box-shadow:0 0 12px var(--c), 0 0 22px var(--c); } .tb-nadi-btn.active .tb-nadi-lbl{ color:#FFE9B0; } /* ─── chakra readout (bottom-left card) ─── */ .tb-cr{ position:absolute; bottom:120px; left:18px; z-index:9; width:min(320px, 85vw); background:rgba(8,5,15,0.85); border:1px solid rgba(255,225,180,0.18); border-radius:10px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); opacity:0; transform:translateX(-30px); pointer-events:none; transition:all 360ms cubic-bezier(.2,.7,.2,1); } .tb-cr.on{ opacity:1; transform:translateX(0); pointer-events:auto; } .tb-cr-hdr{ padding:10px 12px 6px; display:flex; align-items:flex-start; gap:8px; } .tb-cr-row1{ display:flex; align-items:center; gap:8px; width:100%; } .tb-cr-glyph{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Cinzel', serif; font-weight:600; font-size:14px; flex-shrink:0; } .tb-cr-titles{ flex:1; } .tb-cr-sa{ font-family:'Noto Sans Devanagari', serif; font-size:16px; color:rgba(255,240,210,0.92); line-height:1; } .tb-cr-tr{ font-family:'IBM Plex Mono', monospace; font-size:9px; letter-spacing:1.4px; color:rgba(255,230,200,0.75); margin-top:2px; } .tb-cr-x{ background:transparent; border:none; cursor:pointer; color:rgba(255,220,180,0.55); font-size:14px; width:24px; height:24px; display:flex; align-items:center; justify-content:center; border-radius:4px; transition:all 180ms ease; flex-shrink:0; } .tb-cr-x:hover{ background:rgba(255,255,255,0.08); color:#FFE9B0; } .tb-cr-body{ padding:10px 14px 12px; } .tb-cr-row{ display:flex; justify-content:space-between; gap:10px; padding:3px 0; font-size:11px; border-bottom:1px solid rgba(255,220,180,0.06); } .tb-cr-row:last-of-type{ border-bottom:none; } .tb-cr-lbl{ font-family:'IBM Plex Mono', monospace; color:rgba(255,220,180,0.5); letter-spacing:0.8px; text-transform:uppercase; font-size:9.5px; text-align:left; } .tb-cr-val{ font-family:'Cormorant Garamond', serif; color:rgba(255,240,210,0.92); font-size:13.5px; text-align:right; flex:1; } .tb-cr-lived{ margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,220,180,0.10); font-family:'Cormorant Garamond', serif; font-size:13.5px; font-style:italic; color:rgba(255,235,200,0.85); line-height:1.55; } /* ─── darshan toggle button ─── */ .tb-darshan-toggle{ position:absolute; top:64px; left:50%; transform:translateX(-50%); z-index:7; background:rgba(15,10,25,0.78); border:1px solid rgba(255,225,180,0.22); color:rgba(255,235,200,0.92); font-family:'Cinzel', serif; letter-spacing:2px; text-transform:uppercase; font-size:11px; padding:8px 16px; border-radius:24px; cursor:pointer; display:flex; align-items:center; gap:8px; transition:all 200ms ease; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); touch-action:manipulation; -webkit-tap-highlight-color:transparent; } .tb-darshan-toggle:hover{ border-color:rgba(255,225,180,0.55); background:rgba(30,20,40,0.85); color:#FFE9B0; box-shadow:0 0 16px rgba(255,210,150,0.25); } .tb-dt-glyph{ font-size:14px; } /* ─── darshan panel ─── */ .tb-darshan{ position:absolute; top:0; right:0; width:min(520px, 92vw); height:100%; background:linear-gradient(135deg, rgba(12,8,22,0.97) 0%, rgba(20,12,30,0.95) 100%); border-left:1px solid rgba(255,225,180,0.14); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); z-index:30; transform:translateX(100%); transition:transform 480ms cubic-bezier(.2,.7,.2,1); display:flex; flex-direction:column; } .tb-darshan.on{ transform:translateX(0); } .tb-darshan-hdr{ padding:14px 18px 12px; border-bottom:1px solid rgba(255,225,180,0.10); display:flex; align-items:center; justify-content:space-between; gap:10px; } .tb-darshan-title-wrap{ flex:1; min-width:0; } .tb-darshan-eyebrow{ font-family:'IBM Plex Mono', monospace; font-size:8px; letter-spacing:2.5px; color:rgba(255,225,180,0.50); text-transform:uppercase; margin-bottom:3px; } .tb-darshan-title{ font-family:'Cinzel', serif; font-size:14px; letter-spacing:1.4px; color:#FFE9B0; text-transform:uppercase; font-weight:600; } .tb-darshan-close{ background:transparent; border:1px solid rgba(255,225,180,0.18); color:rgba(255,225,180,0.75); width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:14px; transition:all 180ms ease; flex-shrink:0; touch-action:manipulation; } .tb-darshan-close:hover{ border-color:rgba(255,225,180,0.6); color:#FFE9B0; background:rgba(255,225,180,0.08); } .tb-darshan-pills{ display:flex; gap:6px; padding:12px 18px 10px; overflow-x:auto; border-bottom:1px solid rgba(255,225,180,0.08); -webkit-overflow-scrolling:touch; scrollbar-width:thin; } .tb-darshan-pills::-webkit-scrollbar{ height:4px; } .tb-darshan-pills::-webkit-scrollbar-thumb{ background:rgba(255,225,180,0.25); border-radius:3px; } .tb-chap-pill{ background:rgba(20,15,30,0.6); border:1px solid rgba(255,225,180,0.15); color:rgba(255,225,180,0.65); font-family:'IBM Plex Mono', monospace; font-size:9.5px; letter-spacing:1px; text-transform:uppercase; padding:6px 10px; border-radius:14px; cursor:pointer; white-space:nowrap; transition:all 200ms ease; flex-shrink:0; touch-action:manipulation; -webkit-tap-highlight-color:transparent; } .tb-chap-pill:hover{ border-color:rgba(255,225,180,0.45); color:#FFE9B0; } .tb-chap-pill.active{ background:rgba(255,210,150,0.15); border-color:rgba(255,225,180,0.7); color:#FFE9B0; box-shadow:0 0 10px rgba(255,210,150,0.20); } .tb-darshan-body{ flex:1; overflow-y:auto; padding:20px 22px 60px; -webkit-overflow-scrolling:touch; } .tb-darshan-body::-webkit-scrollbar{ width:6px; } .tb-darshan-body::-webkit-scrollbar-thumb{ background:rgba(255,225,180,0.18); border-radius:3px; } .tb-darshan-body::-webkit-scrollbar-track{ background:transparent; } /* ─── content typography inside darshan ─── */ .tb-eyebrow{ font-family:'IBM Plex Mono', monospace; font-size:9px; letter-spacing:2.5px; color:rgba(255,210,150,0.65); text-transform:uppercase; margin-bottom:6px; } .tb-h{ font-family:'Cinzel', serif; font-size:21px; font-weight:600; letter-spacing:1.4px; color:#FFE9B0; margin:0 0 18px; line-height:1.25; } .tb-sub{ font-family:'Cinzel', serif; font-size:13px; letter-spacing:2.4px; color:rgba(255,210,150,0.92); text-transform:uppercase; margin:26px 0 12px; font-weight:500; } .tb-sk{ font-family:'Noto Sans Devanagari', serif; font-size:17px; color:rgba(255,225,180,0.92); background:rgba(255,210,150,0.06); border-left:2px solid rgba(255,210,150,0.45); padding:10px 14px; border-radius:0 6px 6px 0; margin:8px 0 18px; line-height:1.45; } .tb-sk-tr{ display:inline; font-family:'Cormorant Garamond', serif; font-style:italic; font-size:13px; color:rgba(255,225,180,0.78); letter-spacing:0.5px; } .tb-sk-en{ display:inline; font-family:'Cormorant Garamond', serif; font-style:italic; font-size:13.5px; color:rgba(255,240,210,0.85); } .tb-darshan-body p{ font-family:'Cormorant Garamond', serif; font-size:16px; line-height:1.78; color:rgba(230,220,200,0.92); margin:0 0 16px; } .tb-darshan-body p em{ color:rgba(255,225,180,0.95); font-style:italic; } .tb-darshan-body p strong{ color:#FFE9B0; font-weight:500; } .tb-pull{ font-family:'Cormorant Garamond', serif !important; font-style:italic; font-size:17.5px !important; line-height:1.65 !important; color:rgba(255,235,200,0.95) !important; padding:14px 18px; background:rgba(255,210,150,0.07); border-left:3px solid rgba(255,210,150,0.5); border-radius:0 8px 8px 0; margin:18px 0 22px !important; } .tb-list{ font-family:'Cormorant Garamond', serif; font-size:15.5px; line-height:1.75; color:rgba(230,220,200,0.92); padding-left:22px; margin:0 0 18px; } .tb-list li{ margin-bottom:12px; } .tb-source{ font-family:'IBM Plex Mono', monospace !important; font-size:9px !important; letter-spacing:1.5px !important; color:rgba(180,140,80,0.65) !important; text-transform:uppercase !important; line-height:1.7 !important; margin-top:30px !important; padding-top:18px !important; border-top:1px solid rgba(220,160,80,0.12) !important; font-style:normal !important; } /* ─── Breath of Universe grid ─── */ .tb-bou-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin:18px 0 24px; } .tb-bou-cell{ display:flex; flex-direction:column; align-items:center; gap:6px; background:rgba(10,8,22,0.6); border:1px solid rgba(255,225,180,0.10); border-radius:8px; padding:8px; transition:all 200ms ease; } .tb-bou-cell:hover{ border-color:rgba(255,225,180,0.30); background:rgba(20,15,30,0.75); } .tb-bou-canvas{ width:100%; aspect-ratio:1/1; display:block; border-radius:6px; } .tb-bou-cap{ font-family:'IBM Plex Mono', monospace; font-size:8.5px; letter-spacing:1.2px; color:rgba(255,225,180,0.6); text-transform:uppercase; text-align:center; } /* ─── Living Hum · cymatic chamber ─── */ .tb-cym-stage{ display:flex; flex-direction:column; align-items:center; gap:8px; margin:18px 0 14px; } #tb-cym-canvas{ width:min(340px, 85%); aspect-ratio:1/1; display:block; border:1px solid rgba(255,225,180,0.18); border-radius:50%; box-shadow:0 0 26px rgba(255,210,150,0.15), inset 0 0 18px rgba(255,210,150,0.12); background:#0a0815; } .tb-cym-pad{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:14px 0 22px; } .tb-cym-key{ --c:#FFE9B0; background:rgba(10,8,22,0.7); border:1px solid var(--c); color:var(--c); display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 10px 6px; border-radius:10px; cursor:pointer; min-width:62px; transition:all 200ms ease; touch-action:manipulation; -webkit-tap-highlight-color:transparent; filter:saturate(0.75) brightness(0.9); } .tb-cym-key:hover{ filter:saturate(1) brightness(1.1); background:rgba(30,20,40,0.85); } .tb-cym-key.active{ filter:saturate(1.2) brightness(1.2); background:rgba(40,28,55,0.92); box-shadow:0 0 14px var(--c), inset 0 0 10px rgba(255,255,255,0.10); } .tb-cym-bija{ font-family:'Noto Sans Devanagari', serif; font-size:20px; line-height:1; color:inherit; } .tb-cym-lbl{ font-family:'IBM Plex Mono', monospace; font-size:8px; letter-spacing:1px; color:rgba(255,235,200,0.8); text-transform:uppercase; } /* ─── MOBILE — separate stacking lanes so nothing overlaps ─── */ @media (max-width:720px){ /* Header smaller */ #torus-exp .era-exp-title{ font-size:10.5px; letter-spacing:0.8px; } #torus-exp .era-exp-hdr{ padding:10px 12px 14px; } /* Lane 1 (top-centre, under header): Read & Sit button — alone on its row */ .tb-darshan-toggle{ font-size:9.5px; padding:6px 12px; letter-spacing:1.4px; top:50px; } /* Lane 2 (just below): nadi toggles on left, actions on right */ .tb-nadi-toggles{ top:88px; left:8px; gap:3px; } .tb-nadi-btn{ padding:4px 7px 4px 5px; gap:5px; border-radius:12px; } .tb-nadi-dot{ width:8px; height:8px; } .tb-nadi-lbl{ font-size:9.5px; letter-spacing:0.8px; } .tb-nadi-sub{ display:none; } .tb-actions{ top:88px; right:8px; gap:3px; align-items:flex-end; } .tb-act-btn{ font-size:8.5px; padding:5px 8px; letter-spacing:0.8px; border-radius:14px; } /* Lane 3 (bottom): hint, scale slider */ .tb-hint{ font-size:8.5px; bottom:6px; letter-spacing:0.6px; white-space:normal; width:88vw; line-height:1.35; } .tb-scale{ bottom:30px; width:96vw; gap:5px; } .tb-scale-eyebrow{ font-size:7px; letter-spacing:1.5px; } .tb-scale-lbl{ font-size:11px; letter-spacing:1.5px; } .tb-scale-dot{ width:28px; height:28px; font-size:12px; } .tb-scale-dots{ gap:5px; padding:4px 6px; } /* Chakra readout pops up above the scale slider safely. Capped max-height prevents long content from expanding into the top button row on short phones (landscape, small devices). */ .tb-cr{ width:92vw; left:4vw; right:auto; bottom:auto; top:auto; bottom:118px; max-height:52vh; overflow-y:auto; -webkit-overflow-scrolling:touch; } .tb-cr-row{ font-size:10.5px; } .tb-cr-val{ font-size:12.5px; } .tb-cr-lived{ font-size:12.5px; line-height:1.5; } /* Darshan panel is full width on mobile */ .tb-darshan{ width:100%; } .tb-darshan-body{ padding:16px 14px 56px; } .tb-h{ font-size:18px; } /* Subpage grids */ .tb-bou-grid{ grid-template-columns:repeat(2, 1fr); gap:8px; } .tb-bou-cap{ font-size:7.5px; } /* Cymatics chamber */ #tb-cym-canvas{ width:96%; max-width:290px; } .tb-cym-key{ min-width:50px; padding:6px 7px 5px; } .tb-cym-bija{ font-size:17px; } .tb-cym-lbl{ font-size:7.5px; } } @media (max-width:460px){ /* Tighter sizing for small phones */ .tb-darshan-toggle{ font-size:9px; padding:5px 10px; } .tb-act-btn{ font-size:8px; padding:4px 7px; letter-spacing:0.6px; } .tb-nadi-btn{ padding:3px 6px 3px 5px; } .tb-nadi-lbl{ font-size:9px; } .tb-darshan-pills{ padding:10px 14px 8px; gap:5px; } .tb-chap-pill{ font-size:8.5px; padding:5px 8px; } .tb-bou-grid{ grid-template-columns:repeat(2, 1fr); gap:6px; } .tb-cr{ bottom:112px; } #tb-cym-canvas{ max-width:260px; } } /* ════════════════════════════════════════════════════════════════════════ INDRAJĀLA — इन्द्रजाल · The Net of Indra Prefix: ij- | Overlay: #indrajala-exp Original synthesis by Rahul S. ════════════════════════════════════════════════════════════════════════ */ #indrajala-exp{ background: radial-gradient(ellipse 80% 60% at 50% 42%, #14112e 0%, #0a0820 40%, #050410 70%, #020108 100%) !important; } #indrajala-exp .era-exp-hdr{ position:absolute; top:0; left:0; right:0; z-index:10; background:linear-gradient(180deg, rgba(8,5,20,0.85) 0%, rgba(8,5,20,0.4) 70%, transparent 100%); padding:14px 18px 18px; display:flex; align-items:center; justify-content:space-between; pointer-events:none; } #indrajala-exp .era-exp-hdr > *{ pointer-events:auto; } #indrajala-exp .era-exp-title{ font-family:'Cinzel', serif; font-weight:600; color:#FFE9B0; letter-spacing:1.4px; font-size:14px; text-transform:uppercase; } /* ─── search bar (top centre) ─── */ .ij-search{ position:absolute; top:60px; left:50%; transform:translateX(-50%); z-index:9; width:min(440px, 88vw); } .ij-search-icon{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:rgba(255,225,180,0.55); font-size:16px; pointer-events:none; } #ij-search-input{ width:100%; background:rgba(10,8,20,0.78); border:1px solid rgba(255,225,180,0.22); color:#FFE9B0; font-family:'Cormorant Garamond', serif; font-size:14px; letter-spacing:0.4px; padding:10px 14px 10px 38px; border-radius:22px; outline:none; transition:all 200ms ease; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 4px 18px rgba(0,0,0,0.4); } #ij-search-input::placeholder{ color:rgba(255,225,180,0.40); font-style:italic; } #ij-search-input:focus{ border-color:rgba(255,225,180,0.65); box-shadow:0 4px 22px rgba(255,210,150,0.18), 0 0 0 3px rgba(255,210,150,0.10); } .ij-search-list{ position:absolute; top:46px; left:0; right:0; background:rgba(10,8,20,0.95); border:1px solid rgba(255,225,180,0.18); border-radius:10px; max-height:280px; overflow-y:auto; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 8px 24px rgba(0,0,0,0.5); } .ij-search-item{ display:flex; align-items:center; gap:10px; width:100%; background:transparent; border:none; color:rgba(255,235,200,0.90); font-family:'Cormorant Garamond', serif; font-size:14px; padding:9px 14px; cursor:pointer; text-align:left; transition:background 150ms ease; border-bottom:1px solid rgba(255,225,180,0.06); } .ij-search-item:hover{ background:rgba(255,225,180,0.08); color:#FFE9B0; } .ij-search-item:last-of-type{ border-bottom:none; } .ij-si-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; box-shadow:0 0 6px currentColor; } .ij-si-name em{ font-style:italic; color:rgba(255,225,180,0.55); margin-left:4px; font-size:12.5px; } .ij-no-match{ padding:14px; text-align:center; font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:1.5px; color:rgba(255,225,180,0.45); text-transform:uppercase; } /* ─── filters: shared ─── */ .ij-filters{ position:absolute; z-index:7; display:flex; flex-direction:column; gap:4px; padding:8px 10px; background:rgba(10,8,20,0.50); border:1px solid rgba(255,225,180,0.10); border-radius:10px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .ij-f-lbl{ font-family:'IBM Plex Mono', monospace; font-size:8px; letter-spacing:2px; color:rgba(255,225,180,0.42); text-transform:uppercase; margin-bottom:2px; } .ij-cats{ top:122px; left:14px; max-width:175px; } .ij-layers{ top:122px; right:14px; } /* ─── category filter buttons ─── */ .ij-cat-btn{ --c:#FFE9B0; background:transparent; border:1px solid rgba(255,225,180,0.12); color:rgba(255,235,200,0.78); font-family:'IBM Plex Mono', monospace; font-size:9px; letter-spacing:0.8px; text-transform:uppercase; padding:3px 8px; border-radius:11px; cursor:pointer; display:flex; align-items:center; gap:5px; transition:all 180ms ease; text-align:left; white-space:nowrap; touch-action:manipulation; -webkit-tap-highlight-color:transparent; } .ij-cat-btn .ij-f-dot{ width:7px; height:7px; border-radius:50%; background:var(--c); box-shadow:0 0 5px var(--c); flex-shrink:0; } .ij-cat-btn:hover{ border-color:var(--c); color:#FFE9B0; background:rgba(255,225,180,0.04); } .ij-cat-btn.off{ opacity:0.30; color:rgba(255,225,180,0.35); border-color:rgba(255,225,180,0.06); } .ij-cat-btn.off .ij-f-dot{ box-shadow:none; opacity:0.4; } .ij-cat-reset{ background:rgba(255,225,180,0.05); border:1px solid rgba(255,225,180,0.18); color:rgba(255,235,200,0.78); font-size:13px; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; margin-top:4px; align-self:flex-start; transition:all 180ms ease; } .ij-cat-reset:hover{ background:rgba(255,225,180,0.14); color:#FFE9B0; } /* ─── layer filter buttons ─── */ .ij-layer-btn{ background:transparent; border:1px solid rgba(255,225,180,0.12); color:rgba(255,235,200,0.78); font-family:'IBM Plex Mono', monospace; font-size:9px; letter-spacing:0.8px; text-transform:uppercase; padding:3px 8px 3px 4px; border-radius:11px; cursor:pointer; display:flex; align-items:center; gap:6px; transition:all 180ms ease; text-align:left; white-space:nowrap; touch-action:manipulation; -webkit-tap-highlight-color:transparent; } .ij-l-num{ background:rgba(255,225,180,0.18); color:#FFE9B0; font-family:'Cinzel', serif; width:18px; height:18px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0; } .ij-layer-btn:hover{ border-color:rgba(255,225,180,0.55); color:#FFE9B0; } .ij-layer-btn.off{ opacity:0.30; border-color:rgba(255,225,180,0.06); } .ij-layer-btn.off .ij-l-num{ background:rgba(255,225,180,0.06); color:rgba(255,225,180,0.35); } /* ─── hint (bottom centre) ─── */ .ij-hint{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); z-index:6; font-family:'IBM Plex Mono', monospace; font-size:10px; color:rgba(255,230,200,0.50); letter-spacing:1.2px; text-transform:uppercase; pointer-events:none; text-align:center; white-space:nowrap; } /* ─── readout panel ─── */ .ij-r{ position:absolute; top:auto; bottom:50px; left:18px; z-index:9; width:min(360px, 88vw); max-height:65vh; background:rgba(8,5,15,0.92); border:1px solid rgba(255,225,180,0.20); border-radius:12px; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); opacity:0; transform:translateX(-30px); pointer-events:none; transition:all 360ms cubic-bezier(.2,.7,.2,1); overflow-y:auto; -webkit-overflow-scrolling:touch; box-shadow:0 8px 32px rgba(0,0,0,0.5); } .ij-r.on{ opacity:1; transform:translateX(0); pointer-events:auto; } .ij-r::-webkit-scrollbar{ width:5px; } .ij-r::-webkit-scrollbar-thumb{ background:rgba(255,225,180,0.20); border-radius:3px; } .ij-r-hdr{ padding:12px 14px 8px; } .ij-r-row1{ display:flex; align-items:center; gap:10px; } .ij-r-glyph{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Cinzel', serif; font-weight:600; font-size:16px; flex-shrink:0; } .ij-r-titles{ flex:1; min-width:0; } .ij-r-sa{ font-family:'Noto Sans Devanagari', serif; font-size:17px; color:rgba(255,240,210,0.95); line-height:1.1; } .ij-r-tr{ font-family:'Cormorant Garamond', serif; font-size:13.5px; font-style:italic; color:rgba(255,230,200,0.78); margin-top:2px; } .ij-r-en{ color:rgba(255,225,180,0.65); } .ij-r-x{ background:transparent; border:1px solid rgba(255,225,180,0.20); color:rgba(255,220,180,0.65); width:26px; height:26px; border-radius:50%; font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all 180ms ease; } .ij-r-x:hover{ border-color:rgba(255,225,180,0.6); color:#FFE9B0; background:rgba(255,225,180,0.08); } .ij-r-meta{ padding:0 14px 12px; display:flex; flex-wrap:wrap; gap:8px; border-bottom:1px solid rgba(255,225,180,0.10); } .ij-r-mtag{ font-family:'IBM Plex Mono', monospace; font-size:8.5px; letter-spacing:1.4px; text-transform:uppercase; color:rgba(255,225,180,0.55); } .ij-r-desc{ padding:14px 14px 8px; font-family:'Cormorant Garamond', serif; font-size:14px; line-height:1.6; color:rgba(230,220,200,0.92); font-style:italic; } .ij-r-conns{ padding:6px 14px 14px; border-top:1px solid rgba(255,225,180,0.10); margin-top:8px; } .ij-rel-grp{ margin-top:10px; } .ij-rel-lbl{ font-family:'IBM Plex Mono', monospace; font-size:8.5px; letter-spacing:1.6px; text-transform:uppercase; color:rgba(255,210,150,0.65); margin-bottom:5px; } .ij-rel-pills{ display:flex; flex-wrap:wrap; gap:4px; } .ij-conn-pill{ background:rgba(20,15,30,0.75); border:1px solid rgba(255,225,180,0.18); color:rgba(255,235,200,0.88); font-family:'Cormorant Garamond', serif; font-size:12.5px; padding:3px 9px; border-radius:11px; cursor:pointer; transition:all 160ms ease; touch-action:manipulation; -webkit-tap-highlight-color:transparent; } .ij-conn-pill:hover{ background:rgba(255,210,150,0.14); border-color:rgba(255,225,180,0.55); color:#FFE9B0; } /* ─── MOBILE ─── */ @media (max-width:720px){ #indrajala-exp .era-exp-title{ font-size:10.5px; letter-spacing:0.8px; } #indrajala-exp .era-exp-hdr{ padding:10px 12px 14px; } .ij-search{ top:50px; width:94vw; } #ij-search-input{ font-size:12.5px; padding:8px 12px 8px 34px; } .ij-search-icon{ left:12px; font-size:14px; } .ij-cats{ top:100px; left:8px; max-width:140px; padding:6px 7px; gap:3px; } .ij-layers{ top:100px; right:8px; padding:6px 7px; gap:3px; } .ij-f-lbl{ font-size:7px; letter-spacing:1.5px; } .ij-cat-btn{ font-size:8px; padding:2px 6px; letter-spacing:0.5px; } .ij-layer-btn{ font-size:8px; padding:2px 6px 2px 3px; letter-spacing:0.5px; } .ij-l-num{ width:15px; height:15px; font-size:8.5px; } .ij-cat-reset{ width:20px; height:20px; font-size:11px; margin-top:3px; } .ij-hint{ font-size:8.5px; letter-spacing:0.6px; white-space:normal; width:92vw; line-height:1.35; bottom:10px; } .ij-r{ width:94vw; left:3vw; max-height:55vh; bottom:42px; } .ij-r-sa{ font-size:15px; } .ij-r-tr{ font-size:12.5px; } .ij-r-desc{ font-size:13px; } } @media (max-width:460px){ .ij-cats{ max-width:130px; } .ij-cat-btn{ font-size:7.5px; padding:2px 5px; } .ij-cat-btn .ij-f-dot{ width:6px; height:6px; } .ij-layer-btn{ font-size:7.5px; } }