:root{--ink:#1d1a2b;--paper:#fff8e7;--paper2:#fdeec8;--night:#0f1a3a;--red:#d62839;--blue:#1d4ed8;--gold:#f6c453;--green:#2d6a4f;--muted:#5d5670;--ml:'Noto Sans Malayalam','Manjari','Kartika','Malayalam Sangam MN',sans-serif;--disp:'Trebuchet MS','Segoe UI',system-ui,sans-serif;--body:Georgia,'Iowan Old Style',serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:clamp(16px,.85vw + 11px,19px)/1.75 var(--body)}
[lang=ml]{font-family:var(--ml)}a{color:var(--blue)}svg{display:block;max-width:100%}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:9}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.wrap{width:min(1140px,88vw);margin:auto}.narrow{width:min(720px,88vw);margin:auto}
section{padding:clamp(70px,10vw,130px) 0;position:relative}
h2{font:800 clamp(2rem,4.5vw,3.4rem)/1.08 var(--disp);letter-spacing:-.02em;margin:0 0 22px}
h3{font:800 1.25rem/1.2 var(--disp);margin:0 0 8px}
.eyebrow{font:800 .72rem var(--disp);letter-spacing:.24em;text-transform:uppercase;color:var(--red);margin:0 0 12px}
.center{text-align:center}.light{color:#fff}.eyebrow.light{color:var(--gold)}.small{font-size:.85rem}
/* Paper with halftone dots, like old comic print */
.paper{background:radial-gradient(#e9d9b0 1px,transparent 1.4px) 0 0/14px 14px,var(--paper)}
.paper.alt{background:radial-gradient(#f0cf8a 1px,transparent 1.4px) 0 0/14px 14px,var(--paper2)}

/* Hero */
.hero{min-height:100svh;padding:0;display:grid;align-items:end;overflow:hidden;color:#fff;background:var(--night)}
.night{position:absolute;inset:0;width:100%;height:100%}
.hero-text{position:relative;z-index:1;padding:0 0 clamp(40px,8vh,90px)}
.kicker{display:inline-block;font:800 .75rem var(--disp);letter-spacing:.2em;text-transform:uppercase;background:var(--red);color:#fff;padding:6px 12px;transform:rotate(-2deg);box-shadow:4px 4px 0 #000}
h1{margin:16px 0 8px;line-height:.95}
h1 .ml{display:block;font:800 clamp(3.4rem,11vw,8.5rem)/1.05 var(--ml);color:var(--gold);text-shadow:5px 5px 0 #c3202f,10px 10px 0 #0006}
h1 .en{display:block;font:800 clamp(1.4rem,3vw,2.2rem) var(--disp);letter-spacing:.35em;text-transform:uppercase;color:#e8f6ff;margin-top:8px}
.lede{max-width:34ch;font-size:clamp(1.05rem,1.6vw,1.3rem);color:#dbe6ff}
.bubble{position:relative;display:inline-block;background:#fff;color:var(--night);font:800 clamp(1.1rem,2vw,1.5rem) var(--ml);padding:14px 22px;border-radius:24px;border:3px solid #000;box-shadow:5px 5px 0 #000;margin-top:8px}
.bubble:after{content:'';position:absolute;left:34px;bottom:-18px;border:10px solid transparent;border-top:12px solid #000}
.bubble small{display:block;font:italic 400 .8rem var(--body);color:var(--muted)}
.twinkle circle{animation:twinkle 3.5s ease-in-out infinite}.twinkle circle:nth-child(2n){animation-delay:1.2s}.twinkle circle:nth-child(3n){animation-delay:2.1s}
.pulse{animation:pulse 3s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.smoke{animation:smoke 4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.sparks circle{animation:rise 3.5s ease-in infinite;transform-box:fill-box}.sparks circle:nth-child(2){animation-delay:.7s}.sparks circle:nth-child(3){animation-delay:1.4s}.sparks circle:nth-child(4){animation-delay:2.1s}.sparks circle:nth-child(5){animation-delay:2.8s}
.wand{animation:wobble 5s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}

.drop:first-letter{float:left;font:800 4.2rem/.8 var(--disp);color:var(--red);margin:8px 10px 0 0}

/* Comic panels */
.comic{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:40px 0 50px}
.panel{margin:0;background:#fff;border:3px solid #000;box-shadow:6px 6px 0 #000;transform:rotate(var(--r,0deg))}
.p1{--r:-1deg}.p2{--r:.8deg}.p3{--r:-.6deg}.p4{--r:1deg}
.panel svg{border-bottom:3px solid #000;width:100%}
.panel figcaption{padding:10px 12px;font:600 .88rem/1.45 var(--disp)}
.sfx{font:900 34px var(--disp);fill:var(--red);stroke:#000;stroke-width:2;paint-order:stroke}
.sfx-ml{font:800 26px var(--ml);fill:var(--night)}
.burst{animation:pulse 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}

/* Rules */
.rules{background:linear-gradient(160deg,#0f1a3a,#1d2f63);color:#e8eeff}
.rule-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px}
.rule{background:#ffffff0f;border:2px solid #ffffff2a;border-radius:18px;padding:24px}
.rule svg{width:64px;height:64px;margin-bottom:10px}.rule h3{color:var(--gold)}.rule p{margin:0;font-size:.95rem;color:#d3dcf5}

/* Cast */
.cast{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}
.card{background:#fff;border:3px solid #000;border-radius:14px;padding:20px;box-shadow:5px 5px 0 #000;transition:transform .2s}
.card:hover{transform:translate(-2px,-2px) rotate(-.5deg);box-shadow:8px 8px 0 #000}
.card p{margin:0;font-size:.93rem;color:#3b354d}.card h3 span{font:700 1rem var(--ml);color:var(--muted);margin-left:6px}
.tag{display:inline-block;font:800 .62rem var(--disp);letter-spacing:.14em;text-transform:uppercase;background:var(--green);color:#fff;padding:3px 8px;border-radius:4px;margin-bottom:10px}
.tag.blue{background:var(--blue)}.tag.red{background:var(--red)}.tag.gold{background:var(--gold);color:#000}.tag.grey{background:#6b6480}
.hero-card{grid-column:span 2;background:linear-gradient(135deg,#e6f6ff,#fff)}.star{background:linear-gradient(135deg,#ffe3e3,#fff)}

/* Luttappi */
.luttappi{background:linear-gradient(160deg,#9b1c2c,#5b0f1d);color:#ffe9e9}
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,5vw,70px);align-items:center}.split>*{min-width:0}
.spear{max-width:440px;margin:auto}.fly{animation:fly 3.2s ease-in-out infinite}
blockquote{margin:26px 0 0;padding:18px 22px;background:#fff;color:var(--ink);border:3px solid #000;box-shadow:5px 5px 0 #000;border-radius:16px;font:700 1.15rem/1.4 var(--disp)}
blockquote cite{display:block;font:italic 400 .8rem var(--body);color:var(--muted);margin-top:8px}

/* Formula */
.formula{counter-reset:f;list-style:none;padding:0;margin:30px 0}
.formula li{counter-increment:f;position:relative;padding:14px 18px 14px 64px;margin:12px 0;background:#fff;border:3px solid #000;border-radius:12px;box-shadow:4px 4px 0 #000}
.formula li:before{content:counter(f);position:absolute;left:14px;top:50%;translate:0 -50%;width:36px;height:36px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font:900 1.1rem var(--disp)}

/* Timeline */
.beyond{background:linear-gradient(#1d2f63,#0f1a3a);color:#e8eeff}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:40px 0 30px}
.t{border-top:4px solid var(--gold);padding-top:12px}.t b{font:900 1.6rem var(--disp);color:var(--gold)}.t p{margin:6px 0 0;font-size:.92rem;color:#cdd7f5}

.tribute{margin-top:30px;padding:16px 20px;border-left:5px solid var(--red);background:#fff;font-style:italic}
footer{background:#0b1229;color:#a9b3d6;font:.84rem/1.7 var(--disp);padding:44px 0}footer a{color:#ffd76a}footer b{color:#fff}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.panel.reveal{transform:translateY(24px) rotate(var(--r,0deg))}
.reveal.in,.no-js .reveal{opacity:1;transform:rotate(var(--r,0deg))}

@keyframes twinkle{50%{opacity:.25}}
@keyframes pulse{50%{opacity:.6;transform:scale(1.06)}}
@keyframes smoke{50%{transform:translateX(8px) scaleY(1.05)}}
@keyframes rise{0%{transform:translateY(40px);opacity:0}30%{opacity:1}100%{transform:translateY(-60px);opacity:0}}
@keyframes wobble{50%{transform:rotate(6deg)}}
@keyframes fly{50%{transform:translate(10px,-14px) rotate(-2deg)}}

@media(max-width:980px){.comic,.rule-grid,.cast,.timeline{grid-template-columns:1fr 1fr}.split{grid-template-columns:1fr}}
@media(max-width:560px){.comic,.rule-grid,.cast{grid-template-columns:1fr}.hero-card{grid-column:auto}.timeline{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:rotate(var(--r,0deg))}}
.whoosh{font:900 44px var(--disp);fill:#ffd76a;stroke:#000;stroke-width:2.5;paint-order:stroke;letter-spacing:.04em}
.trail circle{animation:twinkle 1.2s ease-in-out infinite}.trail circle:nth-child(2){animation-delay:.3s}.trail circle:nth-child(3){animation-delay:.6s}
.spear{overflow:hidden}
@media(max-width:700px){.night{top:auto;bottom:0;height:60%}.hero{align-items:start}.hero-text{padding-top:84px}.hero:before{content:'';position:absolute;inset:0 0 40% 0;background:linear-gradient(#0f1a3aee 55%,#0f1a3a00);z-index:1}}
.art-link{display:inline-block;margin-top:12px;font:800 .78rem var(--disp);color:var(--blue);text-decoration:none;border-bottom:2px solid currentColor}
.art-link:hover{color:var(--red)}
.cast-note{max-width:60ch;margin:0 auto;color:var(--muted)}
.card{display:flex;flex-direction:column}.card .art{margin-top:auto;padding-top:12px;display:flex;flex-direction:column;gap:4px;align-items:flex-start}.card .art .art-link{margin-top:0}
.card .tag{align-self:flex-start}
.credit{font:.68rem/1.4 var(--disp);color:#7a7290}.credit a{color:inherit}.art.none{font:italic .78rem var(--body);color:#8b84a0}
.card-pic{margin:4px 0 14px;border:2px solid #000;border-radius:8px;overflow:hidden;background:#fff}
.card-pic img{display:block;width:100%;height:auto}
.card-pic figcaption{font:.68rem/1.4 var(--disp);color:#6b6480;padding:6px 8px;border-top:2px solid #000}
.pic-card{grid-column:span 2}
@media(max-width:560px){.pic-card{grid-column:auto}}
.card-pic img{max-height:230px;object-fit:cover;object-position:50% 30%}
.cast{grid-auto-flow:dense}
.card.side{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);column-gap:20px;align-content:start}
.side .card-pic{grid-column:1;grid-row:1/span 4;margin:0;align-self:start}.side>*:not(.card-pic){grid-column:2}
.side .card-pic img{max-height:300px}
@media(max-width:560px){.card.side{display:flex}.side .card-pic{margin:4px 0 14px}}
.side .tag{justify-self:start}

/* ---- Extra animation layer ---- */
.magic-trail{animation:trail 2.6s linear infinite}
.trail-stars path{transform-box:fill-box;transform-origin:center;animation:sparkle 1.8s ease-in-out infinite}.trail-stars path:nth-child(2){animation-delay:.6s}.trail-stars path:nth-child(3){animation-delay:1.2s}
.poof{opacity:0;transform-box:fill-box;transform-origin:center;animation:poof 7s ease-out 2s infinite}
.poof>*{transform-box:fill-box}
.poof-text{font:900 19px var(--disp);fill:var(--red)}
.fireflies{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.fireflies i{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff6a8;box-shadow:0 0 10px 3px #ffe37a99;opacity:0;animation:firefly 9s ease-in-out infinite}
.fireflies i:nth-child(1){left:8%;top:62%;animation-delay:0s}.fireflies i:nth-child(2){left:18%;top:78%;animation-delay:1.2s}.fireflies i:nth-child(3){left:27%;top:55%;animation-delay:2.4s}.fireflies i:nth-child(4){left:36%;top:84%;animation-delay:3.1s}.fireflies i:nth-child(5){left:44%;top:66%;animation-delay:4.4s}.fireflies i:nth-child(6){left:56%;top:80%;animation-delay:.7s}.fireflies i:nth-child(7){left:63%;top:58%;animation-delay:5.2s}.fireflies i:nth-child(8){left:71%;top:74%;animation-delay:2s}.fireflies i:nth-child(9){left:79%;top:62%;animation-delay:6s}.fireflies i:nth-child(10){left:86%;top:82%;animation-delay:3.7s}.fireflies i:nth-child(11){left:92%;top:68%;animation-delay:1.6s}.fireflies i:nth-child(12){left:13%;top:70%;animation-delay:6.8s}.fireflies i:nth-child(13){left:50%;top:90%;animation-delay:7.5s}.fireflies i:nth-child(14){left:67%;top:88%;animation-delay:4.9s}
h1 .ml{animation:pop-in 1s cubic-bezier(.2,1.6,.4,1) .2s both, hover 5s ease-in-out 1.4s infinite}
h1 .en span{display:inline-block;animation:drop .6s cubic-bezier(.2,1.6,.4,1) both}
h1 .en span:nth-child(1){animation-delay:.7s}h1 .en span:nth-child(2){animation-delay:.78s}h1 .en span:nth-child(3){animation-delay:.86s}h1 .en span:nth-child(4){animation-delay:.94s}h1 .en span:nth-child(5){animation-delay:1.02s}h1 .en span:nth-child(6){animation-delay:1.1s}
.kicker{animation:slap .5s cubic-bezier(.2,1.6,.4,1) both}
.bubble{cursor:pointer;animation:bubble-in .7s cubic-bezier(.2,1.6,.4,1) 1.3s both;transition:transform .2s}
.bubble:hover{transform:rotate(-2deg) scale(1.04)}.bubble .tap{font-style:normal;color:var(--red)}
.burst-star{position:fixed;z-index:50;pointer-events:none;width:var(--sz,16px);height:var(--sz,16px);margin:calc(var(--sz,16px)/-2) 0 0 calc(var(--sz,16px)/-2);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);animation:burst .9s ease-out forwards}
.flash{position:fixed;inset:0;z-index:49;pointer-events:none;background:radial-gradient(circle at var(--x,50%) var(--y,50%),#fff8,transparent 60%);animation:flash .6s ease-out forwards}
.cursor-spark{position:fixed;z-index:50;pointer-events:none;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#ffe37a;box-shadow:0 0 8px #ffd25a;animation:spark .7s ease-out forwards}

/* Panels slam in like a page being turned */
.panel.reveal.in{animation:slam .6s cubic-bezier(.2,1.5,.4,1) backwards}
.p2.reveal.in{animation-delay:.12s}.p3.reveal.in{animation-delay:.24s}.p4.reveal.in{animation-delay:.36s}
.panel:hover{transform:rotate(0deg) scale(1.03);transition:transform .2s}

/* Rules icons wobble when seen */
.rule.in svg{animation:wiggle 1s ease-in-out .3s 2}
/* Cards: 3D tilt (set by JS) and a shine sweep */
.card{transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));position:relative;overflow:hidden}
.card:before{content:'';position:absolute;inset:-50%;background:linear-gradient(115deg,transparent 40%,#ffffff99 50%,transparent 60%);transform:translateX(-60%);pointer-events:none}
.card:hover:before{animation:shine 1s ease}
.card.in .tag{animation:stamp .5s cubic-bezier(.2,1.6,.4,1) .2s backwards}
.card.in{transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease,opacity .8s ease}
.card.in:hover{transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate(-2px,-2px)}

/* Luttappi’s spear crosses the sky */
.cross{animation:cross 6s cubic-bezier(.45,0,.55,1) infinite}
.luttappi .whoosh{animation:whoosh 6s ease-in-out infinite}
/* Formula steps and timeline */
.formula li.in:before{animation:pop-in .6s cubic-bezier(.2,1.6,.4,1) both}
.timeline{position:relative}.timeline:before{content:'';position:absolute;left:0;right:0;top:-2px;height:4px;background:linear-gradient(90deg,var(--gold),#ff8a3d);transform:scaleX(0);transform-origin:left;transition:transform 2.2s ease}
.timeline.drawn:before{transform:scaleX(1)}
.t.in b{display:inline-block;animation:pop-in .6s cubic-bezier(.2,1.6,.4,1) both}

@keyframes trail{to{stroke-dashoffset:-36}}
@keyframes sparkle{0%,100%{transform:scale(.4) rotate(0);opacity:.3}50%{transform:scale(1.2) rotate(45deg);opacity:1}}
@keyframes poof{0%,70%{opacity:0;transform:scale(.2)}76%{opacity:1;transform:scale(1.1)}86%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(1.25)}}
@keyframes firefly{0%,100%{opacity:0;transform:translate(0,0)}20%{opacity:.9}50%{opacity:.4;transform:translate(30px,-40px)}80%{opacity:.9;transform:translate(-20px,-70px)}}
@keyframes pop-in{0%{opacity:0;transform:scale(.3) rotate(-8deg)}100%{opacity:1;transform:none}}
@keyframes hover{50%{transform:translateY(-8px)}}
@keyframes drop{0%{opacity:0;transform:translateY(-40px)}100%{opacity:1;transform:none}}
@keyframes slap{0%{opacity:0;transform:scale(1.6) rotate(-8deg)}100%{opacity:1;transform:rotate(-2deg)}}
@keyframes bubble-in{0%{opacity:0;transform:scale(.4) translateY(20px)}100%{opacity:1;transform:none}}
@keyframes burst{0%{opacity:1;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.2) rotate(180deg)}}
@keyframes flash{to{opacity:0}}
@keyframes spark{to{opacity:0;transform:translateY(16px) scale(.2)}}
@keyframes slam{0%{opacity:0;transform:scale(1.4) rotate(calc(var(--r,0deg) * 6))}100%{opacity:1;transform:rotate(var(--r,0deg))}}
@keyframes wiggle{25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
@keyframes shine{to{transform:translateX(60%)}}
@keyframes cross{0%{transform:translate(-70%,30%)}45%,55%{transform:translate(0,0)}100%{transform:translate(80%,-30%)}}
@keyframes whoosh{0%,35%{opacity:0}50%{opacity:1}65%,100%{opacity:0}}
@keyframes stamp{0%{opacity:0;transform:scale(1.6) rotate(-8deg)}100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.poof,.fireflies,.magic-trail,.trail-stars{display:none}.card,.card.in,.card.in:hover{transform:none}.timeline:before{transform:scaleX(1)}}