/* Rangooo "Rang" layer: colour and motion for every page. Soft Indian palette on top of site.css tokens. */
:root{--rg-peacock:#145C63;--rg-peacock2:#2F8A86;--rg-kumkum:#9E3550;--rg-kumkum2:#C8587A;--rg-terra:#8E4A2B;--rg-terra2:#C27A4C;--rg-neel:#34407A;--rg-neel2:#5A68A8;--rg-mehendi:#3F6B3A;--rg-mehendi2:#6E9255;--rg-mari:#9A5B12;--rg-mari2:#C98B2E;--rg-jamun:#5B3270;--rg-jamun2:#8A5A9E;--rg-cream:#FFF4E0;--rg-gold:#F2B657;--rg-jaali:radial-gradient(rgba(255,255,255,.09) 1.2px,transparent 1.4px) 0 0/14px 14px;--rg-pill:linear-gradient(135deg,#B8741A,#9A5410);--rg-ease:cubic-bezier(.2,.7,.2,1)}

/* ---------- page enter ---------- */
html.rang:not(.rang-off) body > main,html.rang:not(.rang-off) body > .wrap > main{animation:rgEnter .7s var(--rg-ease) both}
@keyframes rgEnter{from{opacity:0;transform:translateY(14px)}}

/* ---------- background: warm paper with a faint light, instead of flat grey ---------- */
html.rang body.rg,html.rang.rg-static body{background:radial-gradient(60% 40% at 20% 0%,rgba(242,182,87,.14),transparent 70%),radial-gradient(50% 40% at 100% 20%,rgba(47,138,134,.09),transparent 70%),radial-gradient(60% 50% at 50% 100%,rgba(200,88,122,.07),transparent 70%),var(--rg-bg,#F6F6F2);background-attachment:fixed}
@media (max-width:760px){html.rang body.rg,html.rang.rg-static body{background-attachment:scroll}}

/* ---------- reveals ---------- */
.rg-rv{opacity:0;transform:translateY(26px);transition:opacity .75s var(--rg-ease) var(--rgd,0ms),transform .85s var(--rg-ease) var(--rgd,0ms)}
.rg-rv.rg-on{opacity:1;transform:none}
html.rang-off .rg-rv{opacity:1;transform:none;transition:none}
/* interactive surfaces are never hidden or transformed by the reveal */
.mu-grid .rg-rv,.mu-card,.mu-pad,.mu-key,.mk-board,.dc-app,.cc-stage{opacity:1!important;transform:none!important}

/* ---------- tilt and light on cards ---------- */
.rg-tilt{--rgx:0deg;--rgy:0deg;--rgl:50% 30%;transform-style:preserve-3d;transition:transform .45s var(--rg-ease),box-shadow .45s var(--rg-ease),opacity .75s var(--rg-ease) var(--rgd,0ms);position:relative}
.rg-tilt.rg-on{transform:perspective(900px) rotateY(var(--rgx)) rotateX(var(--rgy))}
.rg-tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(55% 60% at var(--rgl),rgba(255,255,255,.28),transparent 70%);opacity:0;transition:opacity .35s;z-index:3}
@media (hover:hover) and (pointer:fine){
 .rg-tilt.rg-on:hover{transform:perspective(900px) rotateY(var(--rgx)) rotateX(var(--rgy)) translateY(-6px) scale(1.03);box-shadow:0 24px 48px rgba(22,32,44,.22),0 0 0 1px rgba(255,255,255,.5) inset;z-index:2}
 .rg-tilt:hover::after{opacity:1}
}

/* ---------- magnetic buttons ---------- */
.rg-mag{--mx:0px;--my:0px;transition:transform .25s var(--rg-ease),box-shadow .25s!important;will-change:transform}
@media (hover:hover) and (pointer:fine){.rg-mag:hover{transform:translate(var(--mx),var(--my)) scale(1.04)!important}}

/* ---------- colour: primary actions take the Rangooo pill, chips take jewel tints ---------- */
html.rang .rg .btn.pri,html.rang .rg .cta-row > a:first-child,html.rang .rg a.sh-cta,html.rang .rg .sh-cta,html.rang .rg .ot-link,html.rang .rg .ks-cta{background:var(--rg-pill)!important;color:#fff!important;border:0!important;box-shadow:0 10px 24px rgba(154,84,16,.28)!important}
html.rang .rg .cta-row > a:not(:first-child){border-color:rgba(142,74,43,.35)!important;color:var(--rg-terra)!important;background:#fff}
html.rang .rg ul.meta li,html.rang .rg .meta > li,html.rang .rg .chip{background:linear-gradient(135deg,#FFF1DD,#FDE7EC)!important;color:#7A3A2A!important;border:1px solid rgba(194,122,76,.25)!important}
html.rang .rg .crumb a:hover{color:var(--rg-kumkum)}
html.rang .rg h1 em,html.rang .rg h1 i{color:var(--rg-terra2)}
html.rang .rg article.story > section h2{color:var(--rg-kumkum)!important}
html.rang .rg article.story > section{border-bottom:1px dashed rgba(201,139,46,.45)}
html.rang .rg article.story{background:#fff;border-radius:24px;box-shadow:0 12px 36px rgba(22,32,44,.08);border:1px solid rgba(201,139,46,.18)}

/* page numbers get a marigold dot */
html.rang .rg article.story > section h2::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--rg-gold);margin-right:8px;vertical-align:2px;box-shadow:0 0 0 3px rgba(242,182,87,.25)}

/* ---------- story page hero becomes a stage: dark ink, the cover floats ---------- */
html.rang .rg main > .hero{position:relative;isolation:isolate;overflow:hidden;padding:30px 28px;border-radius:28px;color:var(--rg-cream);background:radial-gradient(45% 80% at 90% 10%,rgba(242,182,87,.35),transparent 70%),radial-gradient(40% 70% at 10% 100%,rgba(200,88,122,.28),transparent 70%),var(--rg-jaali),linear-gradient(150deg,#16202C,#10171F 60%,#2A2440);box-shadow:0 26px 60px rgba(16,23,31,.32)}
html.rang .rg main > .hero::before{content:"";position:absolute;right:-120px;top:-140px;width:460px;aspect-ratio:1;border-radius:50%;z-index:-1;background:repeating-conic-gradient(rgba(255,214,150,.22) 0 4deg,transparent 4deg 12deg);-webkit-mask:radial-gradient(circle,transparent 32%,#000 32.5% 37%,transparent 37.5% 52%,#000 52.5% 55%,transparent 55.5%);mask:radial-gradient(circle,transparent 32%,#000 32.5% 37%,transparent 37.5% 52%,#000 52.5% 55%,transparent 55.5%);animation:rgSpin 90s linear infinite}
@keyframes rgSpin{to{transform:rotate(360deg)}}
html.rang .rg main > .hero h1{color:var(--rg-cream)!important;text-shadow:0 6px 24px rgba(0,0,0,.35)}
html.rang .rg main > .hero p,html.rang .rg main > .hero .note{color:#E3DCCD!important}
html.rang .rg main > .hero .cov{border-radius:20px;box-shadow:0 30px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,244,224,.15);transform:perspective(900px) rotateY(-8deg) rotateX(3deg);animation:rgFloat 7s ease-in-out infinite alternate;transition:transform .5s var(--rg-ease)}
html.rang .rg main > .hero:hover .cov{transform:perspective(900px) rotateY(-3deg) rotateX(1deg) translateY(-4px)}
@keyframes rgFloat{from{translate:0 0}to{translate:0 -10px}}
html.rang .rg main > .hero ul.meta li{background:rgba(255,244,224,.1)!important;color:var(--rg-cream)!important;border-color:rgba(255,244,224,.22)!important}
html.rang .rg main > .hero .cta-row > a:not(:first-child){background:rgba(255,244,224,.1)!important;color:var(--rg-cream)!important;border-color:rgba(255,244,224,.3)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@media (max-width:760px){html.rang .rg main > .hero{padding:22px 18px;border-radius:22px}html.rang .rg main > .hero::before{width:300px;right:-110px;top:-120px}}

/* ---------- series hubs (Ramayana, Panchatantra, Diwali): hero stage and posters ---------- */
html.rang .rg .ot-hero{position:relative;isolation:isolate;overflow:hidden;border-radius:28px;color:var(--rg-cream);background:radial-gradient(45% 80% at 85% 20%,rgba(242,182,87,.32),transparent 70%),radial-gradient(40% 70% at 10% 100%,rgba(47,138,134,.25),transparent 70%),var(--rg-jaali),linear-gradient(150deg,#16202C,#10171F 60%,#1E2A3A)!important;box-shadow:0 26px 60px rgba(16,23,31,.32)}
html.rang .rg .ot-hero::before{content:"";position:absolute;right:-100px;top:-120px;width:420px;aspect-ratio:1;border-radius:50%;z-index:-1;background:repeating-conic-gradient(rgba(255,214,150,.22) 0 4deg,transparent 4deg 12deg);-webkit-mask:radial-gradient(circle,transparent 32%,#000 32.5% 37%,transparent 37.5% 52%,#000 52.5% 55%,transparent 55.5%);mask:radial-gradient(circle,transparent 32%,#000 32.5% 37%,transparent 37.5% 52%,#000 52.5% 55%,transparent 55.5%);animation:rgSpin 90s linear infinite}
html.rang .rg .ot-hero h1,html.rang .rg .ot-hero h2{color:var(--rg-cream)!important}
html.rang .rg .ot-hero p{color:#E3DCCD!important}
html.rang .rg .ot-hero .ot-kick,html.rang .rg .ot-hero .ot-eyebrow{color:var(--rg-gold)!important}
html.rang .rg .ot-fan img{box-shadow:0 24px 50px rgba(0,0,0,.5)}
html.rang .rg .ot-sec-h h2{color:var(--rg-ink)}
html.rang .rg .ot-sec-h h2::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--rg-pill);margin-right:10px;vertical-align:1px}
html.rang .rg .ot-poster{box-shadow:0 14px 30px rgba(22,32,44,.18)}

/* ---------- library rails on the home page ---------- */
html.rang .kr-card .kr-t,html.rang .kr-card b{transition:color .2s}
html.rang .kr-card:hover .kr-t,html.rang .kr-card:hover b{color:var(--rg-kumkum)}

/* ---------- static language homes: story grid ---------- */
html.rang.rg-static ul.grid > li > a{border-radius:20px;overflow:hidden;box-shadow:0 10px 26px rgba(22,32,44,.1);transition:box-shadow .35s}
html.rang.rg-static ul.grid > li > a img{transition:transform .6s var(--rg-ease)}
html.rang.rg-static ul.grid > li > a:hover img{transform:scale(1.06)}
html.rang.rg-static main > h1{background:linear-gradient(100deg,var(--rg-ink),var(--rg-terra) 70%,var(--rg-kumkum));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- about and other prose pages ---------- */
html.rang .rg main > h1{position:relative}
html.rang .rg main > h2{color:var(--rg-ink)}
html.rang .rg main > h2::after{content:"";display:block;width:56px;height:4px;border-radius:4px;margin-top:8px;background:var(--rg-pill)}

/* ---------- ambient petals and sparks ---------- */
#rgamb{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
#rgamb i{position:absolute;bottom:-40px;width:var(--sz);height:var(--sz);opacity:0;animation:rgDrift var(--t) linear infinite;animation-delay:var(--w)}
#rgamb .rg-p{border-radius:60% 0 60% 0;background:linear-gradient(135deg,#F6C022,#F28C28);box-shadow:0 2px 6px rgba(242,140,40,.3)}
#rgamb .rg-s{border-radius:50%;width:5px;height:5px;background:#FFD27A;box-shadow:0 0 12px 4px rgba(255,190,90,.55)}
#rgamb .rg-d{border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:linear-gradient(135deg,#C8587A,#9E3550);opacity:.8}
#rgamb.rg-pause i{animation-play-state:paused}
@keyframes rgDrift{0%{opacity:0;transform:translate3d(0,0,0) rotate(0)}8%{opacity:.75}70%{opacity:.5}100%{opacity:0;transform:translate3d(var(--x),-110vh,0) rotate(540deg)}}
html.rang body > header,html.rang body > footer{position:relative;z-index:1}
html.rang body > main.rg-z,html.rang body > .wrap{position:relative;z-index:1}
html.rang body{overflow-x:clip}

/* ---------- night mode on the app keeps its own ink; soften the stage glow ---------- */
html[data-night="1"].rang body.rg{background:#0E141B}

@media (prefers-reduced-motion:reduce){.rg-rv,.rg-tilt,.rg-mag,html.rang .rg main > .hero .cov,html.rang .rg main > .hero::before,html.rang .rg .ot-hero::before{animation:none!important;transition:none!important;transform:none!important;opacity:1!important}#rgamb{display:none}}