/* Admission Sky — owner's bird-led signup and log-in flows (preview v2). * * Ported from the owner's two standalone previews (signup-flow-preview-v2.html * and Admission_Sky___Log_In_Flow__preview_.html). Every rule from those sheets * is re-scoped under #ah-sky-flow so the design cannot leak into the rest of the * app; the flow itself lives in sky-onboarding.js and talks to the real account * API through window.AdmissionSkyBridge. * * Zero raster media: the bird is inline SVG, the colour fields are CSS. */ @property --t{syntax:'';inherits:true;initial-value:#E6F0FF} @property --p{syntax:'';inherits:true;initial-value:#2F6BFF} @property --q{syntax:'';inherits:true;initial-value:#FF9F1C} #ah-sky-flow{--t:#E6F0FF;--p:#2F6BFF;--q:#FF9F1C;--ink:#0B1B3A;--mut:#5B6B8C;--ln:rgba(11,27,58,.1);--ok:#16B364;--er:#F04438;transition:--t .8s,--p .8s,--q .8s;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)} @media (prefers-color-scheme:dark){#ah-sky-flow:not([data-theme="light"]){--ink:#0B1B3A}} #ah-sky-flow{--ink:#0B1B3A} #ah-sky-flow{background:var(--t);height:100%;scroll-padding-top:env(safe-area-inset-top,0px)} #ah-sky-flow *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;letter-spacing:0} #ah-sky-flow{margin:0;height:100%;background:var(--t);color:var(--ink);font-family:'Hind Siliguri','Kohinoor Bengali','Bangla Sangam MN','Noto Sans Bengali',system-ui,sans-serif;overflow:hidden;overscroll-behavior:none;-webkit-text-size-adjust:100%} #ah-sky-flow button, #ah-sky-flow input{font-family:inherit;color:inherit} #ah-sky-flow .app{position:relative;height:100%;display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(180deg,var(--t) 0%,#F8FAFF 100%)} #ah-sky-flow .app:before, #ah-sky-flow .app:after{content:"";position:absolute;border-radius:50%;pointer-events:none;filter:blur(70px);transition:background .8s} #ah-sky-flow .app:before{width:380px;height:380px;right:-150px;top:-110px;background:var(--p);opacity:.22} #ah-sky-flow .app:after{width:340px;height:340px;left:-150px;bottom:-120px;background:var(--q);opacity:.2} #ah-sky-flow .back{position:absolute;left:16px;top:12px;z-index:5;width:42px;height:42px;border-radius:15px;border:0;background:rgba(255,255,255,.92);box-shadow:0 10px 18px -10px rgba(11,27,58,.5);display:grid;place-items:center;transition:opacity .3s,scale .2s} #ah-sky-flow .back svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round} #ah-sky-flow .back:active{scale:.9} #ah-sky-flow .back.hide{opacity:0;pointer-events:none} #ah-sky-flow .petwrap{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;padding:14px 20px 0} #ah-sky-flow .bird{width:clamp(112px,calc(var(--vh,100svh)*.215),180px);aspect-ratio:1;position:relative} #ah-sky-flow .bsvg{width:100%;height:100%;overflow:visible;display:block} #ah-sky-flow .bird .shd{transform-box:fill-box;transform-origin:center;transition:scale .3s} #ah-sky-flow .body{transform-box:fill-box;transform-origin:50% 100%;animation:breathe 3.2s ease-in-out infinite;transition:rotate .35s cubic-bezier(.3,1.4,.5,1)} @keyframes breathe{50%{transform:scale(1.025,.972)}} #ah-sky-flow .bird[data-m="listen"] .body{rotate:9deg} #ah-sky-flow .bird[data-m="think"] .body{rotate:-8deg} #ah-sky-flow .eyel, #ah-sky-flow .eyer{transform-box:fill-box;transform-origin:center;animation:blk 4.2s infinite;scale:var(--eye,1);transition:scale .2s} @keyframes blk{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}} #ah-sky-flow .pup{transform:translate(var(--lx,0px),var(--ly,0px));transition:transform .25s cubic-bezier(.2,.9,.2,1)} #ah-sky-flow .brow{transform-box:fill-box;transform-origin:center;transition:transform .3s cubic-bezier(.3,1.5,.5,1)} #ah-sky-flow .bird[data-m="wow"] .brow, #ah-sky-flow .bird[data-m="listen"] .brow{transform:translateY(-6px)} #ah-sky-flow .bird[data-m="think"] .brw1{transform:translateY(3px) rotate(8deg)} #ah-sky-flow .bird[data-m="think"] .brw2{transform:translateY(-6px) rotate(-6deg)} #ah-sky-flow .bird[data-m="sad"] .brw1{transform:rotate(-14deg)} #ah-sky-flow .bird[data-m="sad"] .brw2{transform:rotate(14deg)} #ah-sky-flow .eyesH{display:none} #ah-sky-flow .bird[data-m="happy"] .eyesN, #ah-sky-flow .bird[data-m="cheer"] .eyesN{display:none} #ah-sky-flow .bird[data-m="happy"] .eyesH, #ah-sky-flow .bird[data-m="cheer"] .eyesH{display:block} #ah-sky-flow .bird[data-m="cover"] .eyesN{opacity:.0} #ah-sky-flow .bird[data-m="wow"] .eyel, #ah-sky-flow .bird[data-m="wow"] .eyer{animation:none;scale:1.2} #ah-sky-flow .wl, #ah-sky-flow .wr{transform-box:fill-box;transition:transform .35s cubic-bezier(.3,1.4,.5,1)} #ah-sky-flow .wl{transform-origin:85% 12%;animation:fl 4.4s ease-in-out infinite} #ah-sky-flow .wr{transform-origin:15% 12%;animation:fr 4.4s ease-in-out infinite} @keyframes fl{0%,72%,100%{rotate:0deg}80%{rotate:-24deg}88%{rotate:5deg}} @keyframes fr{0%,72%,100%{rotate:0deg}80%{rotate:24deg}88%{rotate:-5deg}} #ah-sky-flow .bird[data-m="cover"] .wl{animation:none;transform:translate(46px,-34px) rotate(-26deg) scale(1.1)} #ah-sky-flow .bird[data-m="cover"] .wr{animation:none;transform:translate(-46px,-34px) rotate(26deg) scale(1.1)} #ah-sky-flow .bird[data-m="cheer"] .wl{animation:none;rotate:-78deg} #ah-sky-flow .bird[data-m="cheer"] .wr{animation:none;rotate:78deg} #ah-sky-flow .bird[data-m="sad"] .wl{animation:none;rotate:16deg} #ah-sky-flow .bird[data-m="sad"] .wr{animation:none;rotate:-16deg} #ah-sky-flow .tail{transform-box:fill-box;transform-origin:50% 0;animation:tl 3s ease-in-out infinite} @keyframes tl{50%{rotate:9deg}} #ah-sky-flow .tuft{transform-box:fill-box;transform-origin:50% 100%;animation:tf 2.6s ease-in-out infinite} @keyframes tf{50%{rotate:-8deg}} #ah-sky-flow .tas{transform-box:fill-box;transform-origin:50% 0;animation:sway 2.4s ease-in-out infinite} @keyframes sway{50%{rotate:14deg}} #ah-sky-flow .jaw{transform-box:fill-box;transform-origin:50% 0} #ah-sky-flow .tng{opacity:0} #ah-sky-flow .bird.talk .jaw{animation:yap .2s ease-in-out infinite alternate} @keyframes yap{to{transform:scaleY(2)}} #ah-sky-flow .bird[data-m="happy"] .jaw, #ah-sky-flow .bird[data-m="cheer"] .jaw{transform:scaleY(2.4);animation:none} #ah-sky-flow .bird[data-m="happy"] .tng, #ah-sky-flow .bird[data-m="cheer"] .tng{opacity:1} #ah-sky-flow .chk{transition:r .3s,opacity .3s;opacity:.55} #ah-sky-flow .bird[data-m="happy"] .chk, #ah-sky-flow .bird[data-m="cheer"] .chk{opacity:.9;animation:glow 1s ease-in-out infinite alternate} @keyframes glow{to{scale:1.15}} #ah-sky-flow .feet{transform-box:fill-box;transform-origin:50% 0;transition:scale .3s} #ah-sky-flow .pr{opacity:0;scale:.2;transform-box:fill-box;transform-origin:50% 100%;transition:opacity .35s,scale .5s cubic-bezier(.3,1.7,.5,1)} #ah-sky-flow .bird[data-p="cal"] .cal, #ah-sky-flow .bird[data-p="bok"] .bok, #ah-sky-flow .bird[data-p="mal"] .mal, #ah-sky-flow .bird[data-p="lck"] .lck, #ah-sky-flow .bird[data-p="lns"] .lns, #ah-sky-flow .bird[data-p="ear"] .ear{opacity:1;scale:1} #ah-sky-flow .bird[data-p="mal"] .mal{animation:bobp 1.8s ease-in-out infinite} #ah-sky-flow .bird[data-p="ear"] .ear path{animation:wave 1.2s ease-in-out infinite} #ah-sky-flow .bird[data-p="ear"] .ear path:nth-child(2){animation-delay:.25s} @keyframes bobp{50%{translate:0 -6px}} @keyframes wave{50%{opacity:.25}} #ah-sky-flow .bird.peck{animation:peck .22s ease-out} @keyframes peck{40%{transform:translateY(7px) rotate(2deg)}} #ah-sky-flow .bird.hop{animation:hop .6s cubic-bezier(.3,1.4,.5,1)} @keyframes hop{35%{transform:translateY(-28px) scaleY(1.05)}} #ah-sky-flow .bird.shake{animation:shk .45s} @keyframes shk{20%{transform:translateX(-12px)}40%{transform:translateX(12px)}60%{transform:translateX(-7px)}80%{transform:translateX(5px)}} #ah-sky-flow .bird.nod .body{animation:nod .7s ease-in-out} @keyframes nod{25%{transform:translateY(8px) scaleY(.94)}55%{transform:translateY(0)}75%{transform:translateY(6px) scaleY(.96)}} #ah-sky-flow .bird.clap .wl{animation:cl .45s ease-in-out 3} #ah-sky-flow .bird.clap .wr{animation:cr .45s ease-in-out 3} @keyframes cl{50%{rotate:38deg;translate:16px 0}} @keyframes cr{50%{rotate:-38deg;translate:-16px 0}} #ah-sky-flow .bird.flyin{animation:flyin 1.2s cubic-bezier(.3,.7,.3,1)} @keyframes flyin{0%{transform:translate(-130%,-70%) rotate(-20deg) scale(.7);opacity:0}18%{opacity:1}55%{transform:translate(18%,-38%) rotate(10deg) scale(1.06)}80%{transform:translate(0,-9%) rotate(-3deg)}100%{transform:none}} #ah-sky-flow .bird.flyinr{animation:flyinr 1.2s cubic-bezier(.3,.7,.3,1)} @keyframes flyinr{0%{transform:translate(130%,-70%) rotate(20deg) scale(.7);opacity:0}18%{opacity:1}55%{transform:translate(-18%,-38%) rotate(-10deg) scale(1.06)}80%{transform:translate(0,-9%) rotate(3deg)}100%{transform:none}} #ah-sky-flow .bird.hov{animation:hov 2.2s ease-in-out} @keyframes hov{0%{transform:none}22%{transform:translateY(-42px) rotate(-3deg)}50%{transform:translateY(-34px) translateX(14px) rotate(4deg)}78%{transform:translateY(-40px) translateX(-6px) rotate(-3deg)}92%{transform:translateY(2px) scaleY(.94)}100%{transform:none}} #ah-sky-flow .bird.loop{animation:loop 1.7s cubic-bezier(.5,0,.4,1)} @keyframes loop{0%{transform:none}30%{transform:translate(70px,-60px) rotate(120deg)}55%{transform:translate(0,-100px) rotate(240deg)}80%{transform:translate(-70px,-40px) rotate(330deg)}100%{transform:rotate(360deg)}} #ah-sky-flow .bird.flying .wl{animation:wgL .12s ease-in-out infinite alternate} #ah-sky-flow .bird.flying .wr{animation:wgR .12s ease-in-out infinite alternate} @keyframes wgL{from{rotate:34deg}to{rotate:-60deg}} @keyframes wgR{from{rotate:-34deg}to{rotate:60deg}} #ah-sky-flow .bird.flying .feet{scale:1 .35} #ah-sky-flow .bird.flying .shd{scale:.5} #ah-sky-flow .bubble{position:relative;margin-top:4px;background:rgba(255,255,255,.96);border-radius:22px;padding:13px 20px;font-size:17.5px;font-weight:600;line-height:1.45;text-align:center;box-shadow:0 16px 28px -16px rgba(11,27,58,.5);max-width:340px;min-height:52px;display:grid;place-items:center} #ah-sky-flow .bubble:before{content:"";position:absolute;top:-8px;left:50%;margin-left:-9px;width:18px;height:18px;background:rgba(255,255,255,.96);border-radius:4px;rotate:45deg} #ah-sky-flow .stage{position:relative;flex:1;min-height:0;margin-top:12px} #ah-sky-flow .scr{position:absolute;inset:0;padding:8px 22px 14px;overflow-y:auto;opacity:0;pointer-events:none;transform:translateX(60px) scale(.98);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.9,.2,1);scrollbar-width:none} #ah-sky-flow .scr::-webkit-scrollbar{display:none} #ah-sky-flow .scr.on{opacity:1;pointer-events:auto;transform:none} #ah-sky-flow .scr.l{transform:translateX(-50px) scale(.98)} #ah-sky-flow .scr>*{max-width:400px;margin-left:auto;margin-right:auto} #ah-sky-flow .fl{position:relative;display:block;height:66px;border-radius:22px;background:linear-gradient(180deg,#fff,#FAFCFF);box-shadow:0 14px 28px -18px rgba(11,27,58,.45),inset 0 0 0 1.5px var(--ln);transition:box-shadow .3s,translate .3s} #ah-sky-flow .fl:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2.5px;background:linear-gradient(120deg,var(--p),var(--q));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask-composite:exclude;opacity:0;transition:opacity .3s;pointer-events:none} #ah-sky-flow .fl:focus-within{translate:0 -2px;box-shadow:0 20px 34px -16px var(--p)} #ah-sky-flow .fl:focus-within:before{opacity:1} #ah-sky-flow .fl>svg.ic{position:absolute;left:18px;top:50%;margin-top:-11px;width:22px;height:22px;stroke:#8795B3;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s} #ah-sky-flow .fl:focus-within>svg.ic{stroke:var(--p)} #ah-sky-flow .fl input{position:absolute;inset:0;width:100%;height:100%;padding:24px 52px 6px 54px;border:0;outline:0;background:transparent;font-size:19px;font-weight:600;border-radius:inherit} #ah-sky-flow .fl .lb{position:absolute;left:54px;top:50%;translate:0 -50%;font-size:17.5px;color:#8795B3;font-weight:500;pointer-events:none;transition:all .25s cubic-bezier(.2,.9,.2,1);transform-origin:left} #ah-sky-flow .fl input:focus+.lb, #ah-sky-flow .fl input:not(:placeholder-shown)+.lb{top:17px;font-size:12.5px;color:var(--p);font-weight:700} #ah-sky-flow .fl .cl{position:absolute;right:12px;top:50%;margin-top:-14px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(11,27,58,.08);display:none;place-items:center} #ah-sky-flow .fl input:focus:not(:placeholder-shown)~.cl{display:grid} #ah-sky-flow .fl .cl svg{width:14px;height:14px;stroke:var(--mut);stroke-width:3;stroke-linecap:round;fill:none} #ah-sky-flow .fl.good:after{content:"✓";position:absolute;right:14px;top:50%;margin-top:-12px;width:24px;height:24px;border-radius:50%;background:var(--ok);color:#fff;font-size:14px;font-weight:800;line-height:24px;text-align:center;animation:pop .4s cubic-bezier(.3,1.7,.5,1)} #ah-sky-flow .fl.good input:focus~.cl{display:none} @keyframes pop{from{scale:0}} #ah-sky-flow .fl.bad{box-shadow:0 14px 28px -18px rgba(240,68,56,.55),inset 0 0 0 2px var(--er)} #ah-sky-flow .fl .eye{position:absolute;right:10px;top:50%;margin-top:-18px;width:36px;height:36px;border:0;background:none;display:grid;place-items:center;z-index:2} #ah-sky-flow .fl .eye svg{stroke:var(--mut)} #ah-sky-flow .fl.pwf input{padding-right:54px} #ah-sky-flow .hint{margin:12px 6px 0;font-size:13.5px;color:var(--mut);text-align:center;min-height:20px} #ah-sky-flow .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;justify-content:center} #ah-sky-flow .chip{border:0;background:rgba(255,255,255,.95);padding:11px 18px;border-radius:17px;font-size:15px;font-weight:700;box-shadow:0 10px 18px -12px rgba(11,27,58,.55),inset 0 0 0 1.5px var(--ln);transition:all .3s cubic-bezier(.2,.9,.2,1)} #ah-sky-flow .chip:active{scale:.93} #ah-sky-flow .chip.sel{background:linear-gradient(120deg,var(--p),var(--p));background:linear-gradient(120deg,var(--p),color-mix(in srgb,var(--p) 65%,var(--q)));color:#fff;box-shadow:0 14px 22px -10px var(--p);scale:1.05} #ah-sky-flow .lbl{margin:2px 6px 4px;font-size:14.5px;color:var(--mut);font-weight:600;text-align:center} #ah-sky-flow .wheel{position:relative;display:grid;grid-template-columns:1fr 1.7fr 1.2fr;gap:6px;background:#fff;border-radius:26px;padding:0 10px;box-shadow:0 18px 32px -20px rgba(11,27,58,.5),inset 0 0 0 1.5px var(--ln);overflow:hidden} #ah-sky-flow .wheel:before, #ah-sky-flow .wheel:after{content:"";position:absolute;left:0;right:0;height:78px;z-index:2;pointer-events:none} #ah-sky-flow .wheel:before{top:0;background:linear-gradient(#fff,rgba(255,255,255,0))} #ah-sky-flow .wheel:after{bottom:0;background:linear-gradient(rgba(255,255,255,0),#fff)} #ah-sky-flow .hl{position:absolute;left:8px;right:8px;top:88px;height:44px;border-radius:15px;background:linear-gradient(120deg,var(--p),var(--q));opacity:.16;pointer-events:none} #ah-sky-flow .col{height:220px;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;position:relative;z-index:1} #ah-sky-flow .col::-webkit-scrollbar{display:none} #ah-sky-flow .pad{height:88px} #ah-sky-flow .it{height:44px;display:grid;place-items:center;scroll-snap-align:center;font-size:19px;font-weight:500;color:#8795B3;transition:all .2s} #ah-sky-flow .it.sel{color:var(--ink);font-weight:700;font-size:22px;scale:1.05} #ah-sky-flow .age{margin:14px auto 0;display:table;padding:8px 18px;border-radius:15px;background:#fff;font-size:14.5px;font-weight:700;color:var(--p);box-shadow:0 10px 16px -12px rgba(11,27,58,.55)} #ah-sky-flow .sug{margin-top:8px;background:#fff;border-radius:20px;box-shadow:0 18px 30px -16px rgba(11,27,58,.55);overflow:hidden;display:none} #ah-sky-flow .sug.show{display:block} #ah-sky-flow .sug button{display:block;width:100%;text-align:left;border:0;background:none;padding:13px 18px;font-size:15.5px;font-weight:500;border-bottom:1px solid var(--ln)} #ah-sky-flow .sug button:last-child{border:0} #ah-sky-flow .sug button:active{background:#F2F5FF} #ah-sky-flow .sug b{color:var(--p)} #ah-sky-flow .sp{height:14px} #ah-sky-flow .skip{margin:14px auto 0;display:table;border:0;background:none;color:var(--p);font-weight:700;font-size:14.5px;text-decoration:underline;text-underline-offset:4px} #ah-sky-flow .meter{display:flex;gap:6px;margin:12px 8px 0} #ah-sky-flow .meter i{flex:1;height:5px;border-radius:3px;background:rgba(11,27,58,.1);transition:background .3s} #ah-sky-flow .meter.s1 i:nth-child(-n+1){background:var(--er)} #ah-sky-flow .meter.s2 i:nth-child(-n+2){background:#F59E0B} #ah-sky-flow .meter.s3 i:nth-child(-n+3){background:#84CC16} #ah-sky-flow .meter.s4 i{background:var(--ok)} #ah-sky-flow .mc{display:flex;align-items:center;gap:14px;width:100%;padding:16px;border:0;border-radius:24px;background:#fff;text-align:left;margin-bottom:14px;box-shadow:0 16px 28px -20px rgba(11,27,58,.55),inset 0 0 0 1.5px var(--ln);transition:all .35s cubic-bezier(.2,.9,.2,1)} #ah-sky-flow .mc .ic{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;flex:none;background:linear-gradient(135deg,var(--p),var(--q))} #ah-sky-flow .mc .ic svg{width:27px;height:27px;stroke:#fff;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round} #ah-sky-flow .mc b{display:block;font-size:17.5px} #ah-sky-flow .mc small{font-size:13px;color:var(--mut)} #ah-sky-flow .mc .rd{margin-left:auto;width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--ln);flex:none;transition:all .25s} #ah-sky-flow .mc.sel{box-shadow:0 20px 32px -16px var(--p),inset 0 0 0 2.5px var(--p);scale:1.02} #ah-sky-flow .mc.sel .rd{box-shadow:none;background:var(--p);color:#fff;font-size:13px;font-weight:800;line-height:1;display:grid;place-items:center} .mc.sel .rd:after{content:"✓"} #ah-sky-flow .otp{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:2px} #ah-sky-flow .od{position:relative;height:72px;border-radius:22px;background:linear-gradient(180deg,#fff,#F7FAFF);box-shadow:0 14px 24px -16px rgba(11,27,58,.5),inset 0 0 0 1.5px var(--ln);transition:all .3s cubic-bezier(.2,.9,.2,1)} #ah-sky-flow .od input{position:absolute;inset:0;width:100%;height:100%;min-width:0;text-align:center;font-size:30px;font-weight:700;border:0;outline:0;background:transparent;caret-color:var(--p);border-radius:inherit} #ah-sky-flow .od:focus-within{translate:0 -5px;scale:1.06;box-shadow:0 22px 30px -14px var(--p),inset 0 0 0 2.5px var(--p)} #ah-sky-flow .od.f{background:linear-gradient(135deg,var(--p),var(--p));background:linear-gradient(135deg,var(--p),color-mix(in srgb,var(--p) 62%,var(--q)))} #ah-sky-flow .od.f input{color:#fff} #ah-sky-flow .od.f{box-shadow:0 18px 26px -14px var(--p);animation:dpop .35s cubic-bezier(.3,1.7,.5,1)} @keyframes dpop{from{scale:.86}} #ah-sky-flow .otp.hint1 .od:first-child{animation:blinkh 1.2s ease-in-out infinite} @keyframes blinkh{50%{box-shadow:0 18px 26px -12px var(--p),inset 0 0 0 2.5px var(--p)}} #ah-sky-flow .otp.bad .od{background:#FFF1F0;box-shadow:inset 0 0 0 2px var(--er);animation:shk2 .45s} #ah-sky-flow .otp.bad .od input{color:var(--er)} #ah-sky-flow .otp.ok .od{background:linear-gradient(135deg,#16B364,#10D28A);box-shadow:0 16px 24px -12px #16B364;animation:okp .55s calc(var(--k)*.07s) both} #ah-sky-flow .otp.ok .od input{color:#fff} @keyframes shk2{20%{translate:-8px 0}40%{translate:8px 0}60%{translate:-5px 0}80%{translate:4px 0}} @keyframes okp{40%{scale:1.14;translate:0 -8px}} #ah-sky-flow .tmr{height:5px;border-radius:3px;background:rgba(11,27,58,.1);margin:20px 6px 0;overflow:hidden} #ah-sky-flow .tmr u{display:block;height:100%;width:100%;border-radius:3px;background:linear-gradient(90deg,var(--p),var(--q));transform-origin:left} #ah-sky-flow .rs{margin:12px auto 0;display:table;font-size:14.5px;color:var(--mut);text-align:center} #ah-sky-flow .rs button{border:0;background:none;color:var(--p);font-weight:700;font-size:14.5px;text-decoration:underline;text-underline-offset:4px;padding:0} #ah-sky-flow .rs button:disabled{color:#9AA7C2;text-decoration:none} #ah-sky-flow .note{margin:10px auto 0;display:table;font-size:12.5px;color:#8795B3} #ah-sky-flow .dn{text-align:center;padding-top:6px} #ah-sky-flow .dn h2{margin:0;font-size:28px} #ah-sky-flow .dn p{margin:8px 0 0;color:var(--mut);font-size:16px} #ah-sky-flow .ld{margin:22px auto 0;width:160px;height:5px;border-radius:3px;background:rgba(11,27,58,.1);overflow:hidden} #ah-sky-flow .ld u{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,var(--p),var(--q));animation:ldf 2.6s linear forwards} @keyframes ldf{to{width:100%}} #ah-sky-flow .dash{display:none;text-align:center} #ah-sky-flow .dash.show{display:block;animation:pin .6s cubic-bezier(.2,.9,.2,1)} @keyframes pin{from{opacity:0;translate:0 20px}} #ah-sky-flow .dc{background:#fff;border-radius:24px;padding:18px;margin-top:12px;text-align:left;box-shadow:0 16px 28px -20px rgba(11,27,58,.5)} #ah-sky-flow .dc b{display:block;font-size:17px} #ah-sky-flow .dc small{color:var(--mut)} #ah-sky-flow .replay{margin-top:16px;border:0;background:none;color:var(--p);font-weight:700;font-size:15px;text-decoration:underline;text-underline-offset:4px} #ah-sky-flow .foot{position:relative;z-index:3;padding:8px 22px 16px} #ah-sky-flow .cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:400px;margin:0 auto;height:58px;border:0;border-radius:20px;font-size:18px;font-weight:700;color:#fff;white-space:nowrap;background:linear-gradient(120deg,var(--p),var(--p));background:linear-gradient(120deg,var(--p),color-mix(in srgb,var(--p) 55%,var(--q)));box-shadow:0 18px 30px -12px var(--p),inset 0 1px 0 rgba(255,255,255,.45);transition:opacity .3s,scale .2s,translate .3s,filter .3s;position:relative;overflow:hidden} #ah-sky-flow .cta svg{stroke:#fff;flex:none} #ah-sky-flow .cta:active{scale:.98} #ah-sky-flow .cta:disabled{opacity:.45;filter:saturate(.5);box-shadow:none} #ah-sky-flow .cta.ready:not(:disabled){animation:rdy 2.4s ease-in-out infinite} @keyframes rdy{50%{box-shadow:0 22px 38px -8px var(--p),inset 0 1px 0 rgba(255,255,255,.45);scale:1.015}} #ah-sky-flow .cta.busy:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:bs 1s linear infinite} @keyframes bs{from{translate:-100%}to{translate:100%}} #ah-sky-flow .cta.hide{translate:0 90px;opacity:0;pointer-events:none} #ah-sky-flow .cf{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:9} #ah-sky-flow .cf i{position:absolute;top:-20px;width:10px;height:14px;border-radius:3px;animation:fall var(--d) cubic-bezier(.3,.6,.4,1) forwards} @keyframes fall{to{translate:var(--x) 110vh;rotate:var(--r)}} @media (max-height:640px){#ah-sky-flow .bubble{font-size:15px;padding:8px 14px;min-height:40px} #ah-sky-flow .fl{height:58px} #ah-sky-flow .cta{height:52px} #ah-sky-flow .od{height:60px}} /* ---- log-in-only rules ---- */ #ah-sky-flow .or{display:flex;align-items:center;gap:12px;margin:16px 4px 14px;color:var(--mut);font-size:13.5px;font-weight:600} #ah-sky-flow .or:before, #ah-sky-flow .or:after{content:"";flex:1;height:1px;background:var(--ln)} #ah-sky-flow .sbtn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:54px;margin-bottom:10px;border:0;border-radius:18px;background:linear-gradient(180deg,#fff,#FAFCFF);font-size:16px;font-weight:700;box-shadow:0 12px 22px -16px rgba(11,27,58,.5),inset 0 0 0 1.5px var(--ln);transition:scale .2s} #ah-sky-flow .sbtn:active{scale:.97} #ah-sky-flow .sbtn svg{width:22px;height:22px;flex:none} #ah-sky-flow .sbtn.pk svg{stroke:var(--p);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} #ah-sky-flow .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} #ah-sky-flow .tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;height:80px;border:0;border-radius:20px;background:linear-gradient(180deg,#fff,#FAFCFF);font-size:12.5px;font-weight:700;box-shadow:0 12px 22px -16px rgba(11,27,58,.5),inset 0 0 0 1.5px var(--ln);transition:scale .2s} #ah-sky-flow .tile:active{scale:.95} #ah-sky-flow .tile svg{width:26px;height:26px} #ah-sky-flow .tile.pk svg{stroke:var(--p);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} #ah-sky-flow #s0 .chips{margin-top:12px} #ah-sky-flow #s0 .hint{margin-top:8px;min-height:18px} #ah-sky-flow .cta.in0{margin-top:12px} #ah-sky-flow .lnk{display:table;margin:16px auto 0;border:0;background:none;color:var(--p);font-weight:700;font-size:14.5px;text-decoration:underline;text-underline-offset:4px;padding:6px} /* ========================================================================= Integration layer — how the owner's design sits inside the live account page. The previews assumed they owned /; here the account page owns those, so the host reproduces the preview's viewport contract. ========================================================================= */ #ah-sky-flow[hidden]{display:none!important} #ah-sky-flow{ position:relative; display:block; width:100%; min-height:100dvh; /* The preview's own --vh is set by the flow script from visualViewport. */ height:var(--vh,100dvh); background:var(--t); color:var(--ink); overflow:hidden; isolation:isolate; } /* Owner (2026-10-13): "উপরে নিচে ফাঁকা বা কালার মিশিয়ে দিও" — blend the empty strips at the top and bottom with the palette instead of leaving flat gaps. The two fades ride the live palette variables, so they recolour with the screen exactly like the rest of the design. */ #ah-sky-flow:before,#ah-sky-flow:after{ content:"";position:absolute;left:0;right:0;z-index:0;pointer-events:none; transition:background .8s; } #ah-sky-flow:before{ top:0;height:calc(env(safe-area-inset-top,0px) + 96px); background:linear-gradient(180deg,var(--t) 0%,color-mix(in srgb,var(--t) 55%,transparent) 58%,transparent 100%); } #ah-sky-flow:after{ bottom:0;height:calc(env(safe-area-inset-bottom,0px) + 104px); background:linear-gradient(0deg,var(--t) 0%,color-mix(in srgb,var(--t) 50%,transparent) 55%,transparent 100%); } /* The page's own chrome (head/body) steps aside while the flow is on screen. */ .ah-account-page[data-sky-flow="on"] .ah-account-head, .ah-account-page[data-sky-flow="on"] .ah-account-body{display:none} /* The shell must not reserve a viewport of its own: the flow is mounted as a sibling of it, so min-height:100dvh here pushed #ah-sky-flow to top:100dvh -- a full screen below the fold, which is why the live page looked blank. !important is required: the responsive rule at account-access.css:440 re-asserts min-height:100dvh at equal specificity and loads later. */ .ah-account-page[data-sky-flow="on"] .ah-account-shell, .ah-account-page[data-sky-flow="on"] .ah-account-shell[data-visual-contract="code-native-page-system-v1"]{ width:100%;max-width:none;min-height:0!important;height:auto;max-height:none; border:0;border-radius:0;background:var(--t,transparent);box-shadow:none; } .ah-account-page[data-sky-flow="on"]{background:var(--ah-sky-blend,#E6F0FF)} .ah-account-page[data-sky-flow="on"] .ah-account-close{display:none} /* Desktop: the design is a phone surface. Keep it centred at a phone width and let the surrounding page carry the blended colour, so a laptop does not show a stretched bird. */ @media(min-width:760px){ .ah-account-page[data-sky-flow="on"] .ah-account-shell{width:min(100%,460px);margin:0 auto} #ah-sky-flow{height:var(--vh,100dvh)} } /* Six-box code entry: the real backend takes one 6-digit code, so the boxes are a single logical field. Only the digits are accepted (Bengali digits too). */ #ah-sky-flow .otp .od input{-moz-appearance:textfield} #ah-sky-flow .otp .od input::-webkit-outer-spin-button, #ah-sky-flow .otp .od input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} /* Truthful status line for the live backend (sending / wrong code / expired). */ #ah-sky-flow .hint.err{color:var(--er)} #ah-sky-flow .hint.ok{color:var(--ok)} /* Firebase-link fallback panel. Hidden until the Worker reports that every OTP provider is spent and a link was sent instead of a code. */ #ah-sky-flow .lk{display:none;text-align:center;margin-top:6px} #ah-sky-flow .lk.on{display:block} #ah-sky-flow .lki{position:relative;width:76px;height:76px;margin:4px auto 14px;display:grid;place-items:center;border-radius:24px;background:linear-gradient(135deg,#EAF3FF,#DCE9FF);color:var(--p)} #ah-sky-flow .lki svg{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} #ah-sky-flow .lki i{position:absolute;right:2px;bottom:2px;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:#16B364;color:#fff} #ah-sky-flow .lki i svg{width:15px;height:15px;stroke-width:2.6} #ah-sky-flow .lk b{display:block;font-size:17px;color:var(--ink);margin-bottom:6px} #ah-sky-flow .lk p{font-size:14px;color:var(--mut);line-height:1.6;margin:0 auto 16px;max-width:300px} #ah-sky-flow .lk .lnk{margin:0 auto} #ah-sky-flow .lk.ok .lki{background:linear-gradient(135deg,#16B364,#10D28A);color:#fff} #ah-sky-flow .cta[aria-busy="true"]{opacity:.7;pointer-events:none} /* The preview's own replay/dashboard cards are demo-only; hide them live. */ #ah-sky-flow .dash{display:none!important} @media(prefers-reduced-motion:reduce){ #ah-sky-flow *,#ah-sky-flow *:before,#ah-sky-flow *:after{ animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important; } } /* ---- keyboard up: compact, tidy layout (owner 2026-10-17) ---- With the keyboard open the bird shrinks to the top-left next to a one-line bubble, so the field being typed in, its hint/suggestions and the Next button all fit above the keyboard. Closing the keyboard restores the big centred bird (the glide is done in JS with FLIP). Driven by [data-kb] on #sky-app, set by sky-onboarding.js while a field is focused. */ #ah-sky-flow #sky-app[data-kb="1"]:not([data-kbroomy="1"]) .petwrap{flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;padding:8px 16px 0 66px} #ah-sky-flow #sky-app[data-kb="1"]:not([data-kbroomy="1"]) .bird{width:62px;flex:none} #ah-sky-flow #sky-app[data-kb="1"]:not([data-kbroomy="1"]) .bubble{margin:0;flex:1;min-width:0;min-height:0;max-width:none;display:block;text-align:left;font-size:14.5px;line-height:1.4;padding:9px 14px;border-radius:18px} #ah-sky-flow #sky-app[data-kb="1"]:not([data-kbroomy="1"]) .bubble:before{top:50%;left:-7px;margin:-7px 0 0;width:14px;height:14px} #ah-sky-flow #sky-app[data-kb="1"] .stage{flex:1 1 auto;margin-top:4px;-webkit-mask-image:linear-gradient(#000 calc(100% - 16px),transparent);mask-image:linear-gradient(#000 calc(100% - 16px),transparent)} #ah-sky-flow #sky-app[data-kb="1"] .scr{padding-top:6px;padding-bottom:18px} #ah-sky-flow #sky-app[data-kb="1"] .foot{padding:8px 20px 12px} #ah-sky-flow #sky-app[data-kb="1"] .cta{height:52px} /* Keyboard up (owner 2026-10-18): the flow is exactly the visible area (--vh = visualViewport) and the Next button sits just above the keyboard. The old "+140px taller page" trick is gone - it left a big empty band under the button. The strip iOS leaves behind its bar is covered by a paint-only shadow of the live palette colour below the page (a box-shadow takes no layout space and never scrolls, and the flow still never touches html/body). */ .ah-account-page.ah-account-page[data-sky-flow="on"][data-sky-kb="1"]{box-shadow:0 240px 0 0 var(--ah-sky-blend,#E6F0FF)} /* Roomy keyboard mode: there is enough room, so the big bird stays and fills the space a little smaller instead of shrinking to the corner (sky-onboarding.js sets data-kbroomy after measuring). */ #ah-sky-flow #sky-app[data-kb="1"][data-kbroomy="1"] .petwrap{padding-top:8px} #ah-sky-flow #sky-app[data-kb="1"][data-kbroomy="1"] .bird{width:var(--kbbird,clamp(112px,calc(var(--vh,100svh)*.215),180px))} /* Keyboard up (owner 2026-10-18): the provider buttons step aside while typing. */ #ah-sky-flow #sky-app[data-kb="1"] .scr .or,#ah-sky-flow #sky-app[data-kb="1"] .scr .tiles{display:none} #ah-sky-flow #sky-app[data-kb="1"][data-kbroomy="1"] .bubble{font-size:16px;padding:10px 18px;min-height:0}