.intro-sequence{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;overflow:hidden;background:#10091f;color:#fff7e8;perspective:1200px;isolation:isolate}
.intro-sequence[hidden]{display:none}
.intro-sequence:before,.intro-sequence:after{content:"";position:absolute;inset:-30%;pointer-events:none;z-index:-1}
.intro-sequence:before{background:radial-gradient(ellipse at 50% 42%,#64258b88 0%,transparent 35%),radial-gradient(ellipse at 20% 80%,#007d7890 0%,transparent 37%),radial-gradient(ellipse at 84% 25%,#9b3f2870 0%,transparent 29%);filter:blur(12px);animation:intro-nebula 10s ease-in-out infinite alternate}
.intro-sequence:after{background-image:radial-gradient(2px 2px at 11% 17%,#fff 99%,transparent),radial-gradient(1px 1px at 82% 13%,#ffe98b 99%,transparent),radial-gradient(2px 2px at 73% 79%,#fff 99%,transparent),radial-gradient(1.5px 1.5px at 22% 69%,#b5fff5 99%,transparent),radial-gradient(2px 2px at 91% 47%,#ffb4e0 99%,transparent);opacity:.8;animation:intro-stars 5s ease-in-out infinite alternate}
.intro-header{position:absolute;top:max(18px,env(safe-area-inset-top));left:clamp(18px,5vw,52px);right:clamp(18px,5vw,52px);display:flex;justify-content:space-between;align-items:center;z-index:3}
.intro-brand{font-size:12px;font-weight:1000;letter-spacing:.2em;text-transform:uppercase;color:#dcf8ee;text-shadow:0 0 18px #54f2d2}.intro-brand span{color:#ffd65e}
.intro-skip{color:#f9e6ff;background:#ffffff12;border:1px solid #ffffff38;border-radius:999px;padding:9px 15px;font:inherit;font-size:12px;font-weight:850;cursor:pointer;backdrop-filter:blur(10px)}
.intro-universe{position:relative;width:min(100%,740px);height:min(78vh,760px);min-height:450px;display:grid;place-items:center;transform-style:preserve-3d;--tilt-x:0deg;--tilt-y:0deg}
.intro-orbit{position:absolute;width:min(88vw,620px);aspect-ratio:1;border:1px solid #d7a8ff38;border-radius:50%;transform:rotateX(69deg) rotateZ(-18deg);box-shadow:0 0 42px #ab4fff20,inset 0 0 38px #34e4dd13;animation:intro-orbit 20s linear infinite;pointer-events:none}
.intro-orbit:before,.intro-orbit:after{content:"";position:absolute;border-radius:50%;inset:9%;border:1px dashed #ffe08a42;transform:rotateY(18deg)}.intro-orbit:after{inset:19%;border-color:#62f0e35b;transform:rotateY(-28deg)}.intro-orbit.orbit-two{width:min(72vw,510px);transform:rotateX(64deg) rotateY(27deg) rotateZ(32deg);animation-duration:27s;animation-direction:reverse;border-color:#47e4db40}
.intro-stage{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:clamp(10px,2vh,20px);opacity:0;visibility:hidden;transform:translateY(18px) scale(.97);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.8,.2,1),visibility .7s;transform-style:preserve-3d}.intro-stage.active{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.intro-frame{position:relative;width:clamp(210px,35vh,330px);height:clamp(220px,38vh,350px);padding:9px;border-radius:26px;background:linear-gradient(135deg,#fff3b8,#ff5fae 34%,#812eea 65%,#37ead6);box-shadow:0 0 0 1px #fff9,0 0 24px #ff60d4aa,0 0 90px #8f45ff77,0 28px 70px #0009;transform:rotateX(var(--tilt-y)) rotateY(var(--tilt-x)) translateZ(36px);transform-style:preserve-3d;transition:transform .18s ease-out}
.intro-frame:before{content:"";position:absolute;inset:-14px;border:1px solid #ffe27888;border-radius:34px;transform:translateZ(-18px);box-shadow:0 0 20px #ffdb6e55}
.intro-photo{width:100%;height:100%;display:block;border-radius:19px;object-fit:cover;border:2px solid #24153d;background:#2c163a;animation:intro-photo-drift 7s ease-in-out infinite alternate;transform:translateZ(12px)}.intro-stage.bhavani .intro-photo{object-position:26% center}.intro-stage.sevalal .intro-photo{object-position:center 34%}
.intro-halo{position:absolute;inset:50% auto auto 50%;width:calc(100% + 54px);height:calc(100% + 54px);border:1px solid #ffffff3d;border-radius:33px;transform:translate(-50%,-50%) translateZ(-28px) rotate(8deg);pointer-events:none}
.intro-kicker{font-size:10px;font-weight:1000;letter-spacing:.3em;text-transform:uppercase;color:#a6fff2;text-shadow:0 0 14px #35dfc7}
.intro-title{margin:0;color:#fff8e9;font-size:clamp(30px,6.4vw,57px);line-height:1.04;letter-spacing:-.045em;font-weight:1000;text-shadow:0 3px 0 #732f7d,0 7px 28px #ff59c1b8,0 0 36px #ffc44d82}
.intro-devanagari{font-size:clamp(16px,2.4vw,21px);color:#ffd86b;font-weight:800;text-shadow:0 0 18px #f785c8}.intro-subtitle{margin:0;color:#d6d1e8;font-size:14px;letter-spacing:.07em}
.intro-stage.credit .intro-frame{width:clamp(190px,29vh,260px);height:clamp(190px,29vh,260px);border-radius:50%;padding:8px}.intro-stage.credit .intro-photo{border-radius:50%;object-position:26% center}
.creator-seal{position:absolute;inset:50% auto auto 50%;width:48px;height:48px;transform:translate(-50%,-50%) translateZ(28px);border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#ffca57,#fb56b7 55%,#8048ff);border:3px solid #fff5d8;font-size:21px;font-weight:1000;box-shadow:0 0 32px #ff6dcb}
.intro-progress{position:absolute;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;gap:8px;z-index:3}.intro-progress i{width:7px;height:7px;border-radius:50%;background:#ffffff42;transition:.3s}.intro-progress i.on{width:25px;border-radius:9px;background:#d5fc54;box-shadow:0 0 16px #d5fc54}
.intro-credits{position:absolute;left:12px;bottom:max(14px,env(safe-area-inset-bottom));z-index:4;color:#ffffff9c;font-size:9px}.intro-credits summary{cursor:pointer;list-style:none;border:1px solid #ffffff26;border-radius:999px;padding:6px 9px;background:#120d2488}.intro-credits summary::-webkit-details-marker{display:none}.intro-credits div{position:absolute;bottom:28px;left:0;width:min(300px,80vw);padding:12px;background:#170f2aee;border:1px solid #ffffff35;border-radius:13px;line-height:1.6;backdrop-filter:blur(12px)}.intro-credits a{color:#c7f98c}
.intro-sequence.leaving{opacity:0;visibility:hidden;transition:opacity .8s ease,visibility .8s}
@keyframes intro-nebula{from{transform:translate3d(-2%,1%,0) scale(1)}to{transform:translate3d(3%,-2%,0) scale(1.12)}}@keyframes intro-stars{from{opacity:.4}to{opacity:.95}}@keyframes intro-orbit{to{rotate:360deg}}@keyframes intro-photo-drift{from{transform:translateZ(12px) scale(1)}to{transform:translateZ(12px) scale(1.045)}}
@media(max-height:650px){.intro-universe{height:78vh;min-height:390px}.intro-frame{width:clamp(170px,32vh,250px);height:clamp(180px,34vh,260px)}.intro-stage.credit .intro-frame{width:clamp(155px,25vh,210px);height:clamp(155px,25vh,210px)}}
@media(max-width:450px){.intro-brand{font-size:9px}.intro-universe{min-height:420px}.intro-stage{gap:13px}.intro-frame{width:min(67vw,265px);height:min(39vh,300px)}.intro-title{font-size:clamp(29px,8vw,42px)}}
@media(prefers-reduced-motion:reduce){.intro-sequence:before,.intro-sequence:after,.intro-orbit,.intro-photo{animation:none!important}.intro-stage,.intro-frame,.intro-photo{transition-duration:.01ms!important}}
/* Cartoon boy appears only on Rohith's credit screen; Maa Bhavani remains on her own opening frame. */
.intro-stage.credit .creator-frame{width:clamp(190px,30vh,255px);height:clamp(225px,39vh,300px);border-radius:34px;padding:8px;background:linear-gradient(145deg,#fff1b1,#fa68ad 37%,#743cea 70%,#45e6dc);box-shadow:0 0 24px #ff60d4a0,0 0 72px #8f45ff70,0 24px 55px #0008}
.intro-stage.credit .creator-boy{object-fit:contain;border:0;border-radius:0;background:transparent;animation:creator-boy-bounce 1.25s ease-in-out infinite alternate;filter:drop-shadow(0 8px 18px #ffb84a88);transform-origin:bottom center}
.intro-stage.credit .creator-frame:after{content:"✦";position:absolute;right:-14px;top:12px;color:#d5fc54;font-size:33px;text-shadow:0 0 20px #d5fc54;animation:creator-spark 1.1s ease-in-out infinite alternate}
@keyframes creator-boy-bounce{from{transform:translateZ(12px) translateY(3px) rotate(-1.2deg)}to{transform:translateZ(12px) translateY(-7px) rotate(1.2deg)}}
@keyframes creator-spark{from{transform:scale(.82) rotate(-12deg)}to{transform:scale(1.16) rotate(12deg)}}
@media(max-height:650px){.intro-stage.credit .creator-frame{height:clamp(190px,34vh,245px)}}
@media(prefers-reduced-motion:reduce){.intro-stage.credit .creator-boy,.intro-stage.credit .creator-frame:after{animation:none!important}}
/* Cartoon boy appears only on Rohith's credit screen; Maa Bhavani remains on her own opening frame. */
.intro-stage.credit .creator-frame{width:clamp(190px,30vh,255px);height:clamp(225px,39vh,300px);border-radius:34px;padding:8px;background:linear-gradient(145deg,#fff1b1,#fa68ad 37%,#743cea 70%,#45e6dc);box-shadow:0 0 24px #ff60d4a0,0 0 72px #8f45ff70,0 24px 55px #0008}
.intro-stage.credit .creator-boy{object-fit:contain;border:0;border-radius:0;background:transparent;animation:creator-boy-bounce 1.25s ease-in-out infinite alternate;filter:drop-shadow(0 8px 18px #ffb84a88);transform-origin:bottom center}
.intro-stage.credit .creator-frame:after{content:"✦";position:absolute;right:-14px;top:12px;color:#d5fc54;font-size:33px;text-shadow:0 0 20px #d5fc54;animation:creator-spark 1.1s ease-in-out infinite alternate}
@keyframes creator-boy-bounce{from{transform:translateZ(12px) translateY(3px) rotate(-1.2deg)}to{transform:translateZ(12px) translateY(-7px) rotate(1.2deg)}}
@keyframes creator-spark{from{transform:scale(.82) rotate(-12deg)}to{transform:scale(1.16) rotate(12deg)}}
@media(max-height:650px){.intro-stage.credit .creator-frame{height:clamp(190px,34vh,245px)}}
@media(prefers-reduced-motion:reduce){.intro-stage.credit .creator-boy,.intro-stage.credit .creator-frame:after{animation:none!important}}
.intro-stage.credit .creator-boy{object-fit:cover;border:2px solid #fff0b8;border-radius:24px;background:#d8d8d8}

/* Animated level-unlock card shown after the creator intro. */
.intro-stage.level-gate{gap:clamp(10px,2vh,18px);padding:18px;width:min(100%,720px)}
.gate-path{width:min(88vw,470px);display:flex;align-items:center;justify-content:center;gap:clamp(8px,2vw,18px);padding:10px;transform-style:preserve-3d;animation:gate-path-float 3s ease-in-out infinite alternate}
.gate-node{position:relative;width:clamp(84px,15vh,116px);aspect-ratio:1;border-radius:28px;display:grid;place-items:center;align-content:center;gap:2px;transform:translateZ(24px) rotateX(7deg);box-shadow:0 0 26px #b7ff4c66,0 20px 38px #0007;background:linear-gradient(145deg,#d8ff70,#53e6b3);color:#172034;animation:gate-node-pulse 2.2s ease-in-out infinite alternate}
.gate-node span{font-size:clamp(34px,7vh,52px);font-weight:1000;line-height:1}.gate-node small{font-size:9px;letter-spacing:.18em;font-weight:950}.gate-node.locked{background:linear-gradient(145deg,#58486e,#29223d);color:#eee4ff;box-shadow:0 0 23px #c04dff4a,0 20px 38px #0008;animation-delay:.45s}.gate-node.locked em{position:absolute;right:-8px;top:-10px;font-style:normal;font-size:24px;filter:drop-shadow(0 5px 8px #0009);animation:gate-lock-wiggle 2.8s ease-in-out infinite}
.gate-connector{position:relative;width:clamp(55px,12vw,112px);height:7px;border-radius:99px;background:#ffffff25;box-shadow:0 0 12px #a3ffe045;overflow:visible}.gate-connector:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#c9ff55,#51f2db);transform:scaleX(.52);transform-origin:left;filter:drop-shadow(0 0 9px #83ffde);animation:gate-charge 2.4s ease-in-out infinite alternate}.gate-connector b{position:absolute;right:23%;top:50%;font-size:17px;color:#ffe16a;text-shadow:0 0 15px #ffd853;transform:translateY(-50%);animation:gate-sparkle 1.2s ease-in-out infinite alternate}
.gate-message{position:relative;width:min(91vw,640px);min-height:clamp(100px,17vh,135px);display:grid;place-items:center;padding:14px 18px;border:1px solid #ffffff36;border-radius:24px;background:linear-gradient(135deg,#ffffff18,#ffffff08);box-shadow:0 18px 50px #0005;backdrop-filter:blur(14px);transform:rotateX(4deg) translateZ(12px)}.gate-copy{grid-area:1/1;max-width:100%;opacity:0;transform:translateY(16px) scale(.97);transition:opacity .55s ease,transform .7s cubic-bezier(.2,.8,.2,1);pointer-events:none}.gate-copy.active{opacity:1;transform:translateY(0) scale(1)}.gate-copy>span{display:block;margin-bottom:8px;color:#d5fc54;font-size:11px;font-weight:1000;letter-spacing:.22em}.gate-copy h1{margin:0;color:#fff9f1;font-size:clamp(25px,5.4vw,42px);line-height:1.08;letter-spacing:-.045em;text-shadow:0 4px 24px #0005}.gate-copy.telugu h1{font-size:clamp(22px,4.6vw,34px);line-height:1.25;letter-spacing:0;font-family:"Noto Sans Telugu","Nirmala UI","Gautami",sans-serif}
.gate-voice{border:1px solid #ffffff50;border-radius:999px;background:#ffffff16;color:#fff8e9;padding:10px 18px;font:inherit;font-size:13px;font-weight:900;cursor:pointer;backdrop-filter:blur(9px);box-shadow:0 0 20px #8df7e133;transition:transform .18s ease,background .18s ease}.gate-voice:hover{transform:translateY(-2px) scale(1.03);background:#ffffff28}.gate-footnote{max-width:92vw;color:#e9dafb;font-size:clamp(10px,2vw,12px);font-weight:700;letter-spacing:.02em;text-shadow:0 2px 12px #0008}
@keyframes gate-path-float{from{transform:translateY(2px) rotateX(4deg)}to{transform:translateY(-7px) rotateX(9deg)}}@keyframes gate-node-pulse{from{filter:brightness(.98);scale:1}to{filter:brightness(1.12);scale:1.045}}@keyframes gate-lock-wiggle{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-12deg)}92%{transform:rotate(10deg)}}@keyframes gate-charge{from{transform:scaleX(.22)}to{transform:scaleX(.9)}}@keyframes gate-sparkle{from{opacity:.55;transform:translateY(-50%) scale(.8)}to{opacity:1;transform:translateY(-50%) scale(1.25)}}
@media(max-height:650px){.intro-stage.level-gate{gap:8px}.gate-node{width:clamp(72px,13vh,94px)}.gate-message{min-height:92px;padding:10px 14px}.gate-footnote{font-size:10px}}
@media(max-width:450px){.gate-path{width:92vw}.gate-node{border-radius:22px}.gate-copy h1{font-size:clamp(23px,6.5vw,32px)}.gate-copy.telugu h1{font-size:clamp(20px,5.3vw,27px)}}
@media(prefers-reduced-motion:reduce){.gate-path,.gate-node,.gate-node.locked em,.gate-connector:before,.gate-connector b{animation:none!important}}.intro-actions{display:flex;align-items:center;gap:8px}.intro-sound{color:#f9e6ff;background:#ffffff1b;border:1px solid #d5fc5488;border-radius:999px;padding:9px 14px;font:inherit;font-size:12px;font-weight:900;cursor:pointer;backdrop-filter:blur(10px);box-shadow:0 0 16px #d5fc5422;white-space:nowrap}.intro-sound:hover{background:#ffffff2c}.intro-sound[aria-pressed="true"]{color:#d5fc54;border-color:#d5fc54}
@media(max-width:450px){.intro-actions{gap:5px}.intro-sound,.intro-skip{padding:8px 10px;font-size:10px}}