/* VKIT AutoDM hero animation. All rules are scoped to .vkah so it is safe to drop into any page. */
@font-face{font-family:"VKAH Inter";src:url("../fonts/Inter-Regular.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"VKAH Inter";src:url("../fonts/Inter-SemiBold.woff") format("woff");font-weight:600;font-display:swap}
@font-face{font-family:"VKAH Inter";src:url("../fonts/Inter-Bold.woff") format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"VKAH Inter";src:url("../fonts/Inter-ExtraBold.woff") format("woff");font-weight:800;font-display:swap}

.vkah{--cobalt:#1A3FDB;--cream:#EFE0A1;--yellow:#FFC93D;--phone:#0F1015;--ink:#111318;--ok:#3DDC97;
  position:relative;width:100%;aspect-ratio:800/960;background:transparent;overflow:visible;
  font-family:"VKAH Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#fff;
  -webkit-font-smoothing:antialiased;line-height:1.25;user-select:none}
.vkah.vkah--m{aspect-ratio:440/880}
.vkah.vkah--fill{aspect-ratio:auto;height:100%}
.vkah *{box-sizing:border-box;margin:0;padding:0}
.vkah .vkah-fit{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.vkah .vkah-c{position:relative;flex:none;transform-origin:50% 50%}
.vkah .A{position:absolute;left:0;top:0}
.vkah .emo{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;line-height:1}
.vkah img{display:block}

/* phone */
.vkah .ph{border-radius:56px;background:var(--phone);box-shadow:0 22px 44px rgba(5,14,70,.5),0 0 0 2px rgba(255,255,255,.06);overflow:hidden}
.vkah.vkah--m .ph{box-shadow:0 16px 22px rgba(5,14,70,.45),0 0 0 2px rgba(255,255,255,.06)}
.vkah .ph-head{position:absolute;left:0;right:0;top:0;height:86px;display:flex;align-items:center;gap:14px;padding:22px 24px 0;border-bottom:1px solid rgba(255,255,255,.08);z-index:5;background:var(--phone)}
.vkah .ph-av{width:44px;height:44px;border-radius:50%;flex:none;background:linear-gradient(135deg,#F2CC8F,#E07A5F)}
.vkah .ph-name{font-weight:700;font-size:21px}
.vkah .ph-i{margin-left:auto;width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700}
.vkah .feed{position:absolute;left:18px;right:18px;top:100px;bottom:18px}
.vkah .post{position:relative;border-radius:24px;overflow:hidden;background:#1B1E2C}
.vkah .post img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vkah .post-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.7) 100%)}
.vkah .post-txt{position:absolute;left:22px;right:22px;bottom:20px}
.vkah .post-title{font-weight:800;font-size:31px;line-height:1.06;letter-spacing:-.02em}
.vkah .post-cap{font-size:18px;margin-top:8px;opacity:.95}
.vkah .cm{position:absolute;left:0;right:0;bottom:86px;overflow:hidden}
.vkah .cmt{position:absolute;left:0;right:0;display:flex;align-items:center;gap:12px;padding:6px 4px;height:74px}
.vkah .cmt-av{width:40px;height:40px;border-radius:50%;flex:none}
.vkah .cmt-body{min-width:0;flex:1}
.vkah .cmt-who{font-weight:700;font-size:15px;opacity:.6}
.vkah .cmt-bub{display:inline-block;background:#22242C;border-radius:18px;padding:8px 14px;font-size:19px;margin-top:3px;max-width:100%}
.vkah .cmt-tag{flex:none;font-size:13px;font-weight:700;padding:5px 10px;border-radius:999px;white-space:nowrap}
.vkah .try{position:absolute;left:0;right:0;bottom:0;height:66px;border-radius:33px;border:1.5px solid rgba(255,255,255,.22);display:flex;align-items:center;padding:0 10px 0 22px;font-size:18px;color:rgba(255,255,255,.78)}
.vkah .try-go{margin-left:auto;width:46px;height:46px;border-radius:50%;background:#fff;color:var(--phone);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:22px;flex:none}

/* follower inbox */
.vkah .inbox{position:absolute;left:0;right:0;top:86px;bottom:0;background:var(--phone);padding:22px 20px;z-index:4}
.vkah .inbox-when{text-align:center;font-size:14px;color:rgba(255,255,255,.45);margin-bottom:16px}
.vkah .dmb{background:var(--cobalt);border-radius:24px 24px 24px 8px;padding:18px 20px;font-size:20px;line-height:1.35;max-width:330px;transform-origin:0 0}
.vkah .dmbtn{margin-top:14px;min-height:56px;border-radius:16px;background:#fff;color:var(--cobalt);font-weight:700;font-size:19px;display:flex;align-items:center;justify-content:center;text-align:center;padding:8px 12px}
.vkah .dm-note{font-size:13px;color:rgba(255,255,255,.45);margin-top:10px}
.vkah .reply{margin:20px 0 0 auto;width:max-content;max-width:300px;background:#2A2C35;border-radius:24px 24px 8px 24px;padding:13px 18px;font-size:20px;transform-origin:100% 100%}
.vkah .tap{width:70px;height:70px;border-radius:50%;border:4px solid #fff;opacity:0}
.vkah .sheet{position:absolute;left:0;right:0;bottom:0;background:#fff;color:var(--ink);border-radius:34px 34px 0 0;padding:24px 24px 28px;z-index:6}
.vkah .sheet-grab{width:60px;height:6px;border-radius:3px;background:#DDE1EA;margin:0 auto 20px}
.vkah .sheet-row{display:flex;gap:16px;align-items:center}
.vkah .sheet-img{width:92px;height:92px;border-radius:22px;overflow:hidden;flex:none}
.vkah .sheet-img img{width:100%;height:100%;object-fit:cover}
.vkah .sheet-t{font-weight:800;font-size:26px;letter-spacing:-.01em}
.vkah .sheet-s{font-size:17px;color:#5A6070;margin-top:4px}
.vkah .sheet-h{font-size:14px;color:#8A90A0;margin-top:6px}
.vkah .sheet-btn{margin-top:24px;min-height:64px;border-radius:32px;background:var(--cobalt);color:#fff;font-weight:700;font-size:21px;display:flex;align-items:center;justify-content:center}
.vkah .sheet-note{margin-top:12px;text-align:center;font-size:14px;color:#8A90A0}

/* engine */
.vkah .eng-tile{border-radius:40px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 18px 40px rgba(5,14,70,.4)}
.vkah .eng-tile img{width:70%;height:auto}
.vkah .eng-ring{border:4px solid var(--yellow);opacity:0}
.vkah .kw{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.25);border-radius:999px;padding:9px 16px;font-size:17px;white-space:nowrap}
.vkah .kw b{color:var(--ink);background:var(--yellow);border-radius:8px;padding:1px 8px;font-weight:700}
.vkah .verdict{white-space:nowrap;text-align:center;opacity:0}
.vkah .verdict span{display:inline-block;border-radius:999px;padding:7px 14px;font-weight:700;font-size:15px}
.vkah .counter{font-size:15px;font-weight:700;letter-spacing:.08em;color:rgba(255,255,255,.78);white-space:nowrap}
.vkah .counter b{color:#fff;font-size:22px;letter-spacing:0;margin-left:6px}

/* sent cards */
.vkah .sent{width:300px;background:#fff;color:var(--ink);border-radius:22px;padding:13px 16px;box-shadow:0 18px 40px rgba(5,14,70,.35);display:flex;gap:12px;align-items:center}
.vkah .sent-av{width:42px;height:42px;border-radius:50%;flex:none}
.vkah .sent-t1{font-weight:700;font-size:15px;line-height:1.2}
.vkah .sent-t2{font-size:14px;color:#4A5163;margin-top:2px;line-height:1.25}
.vkah .sent-ok{margin-left:auto;color:#1E9E5A;font-weight:800;font-size:20px;flex:none}
.vkah .spark{width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--yellow);box-shadow:0 0 18px 6px rgba(255,201,61,.65);opacity:0}
.vkah .spark.w{background:#fff;box-shadow:0 0 18px 6px rgba(255,255,255,.6)}
.vkah .foot{font-size:16px;color:rgba(255,255,255,.82);white-space:nowrap}

/* controls */
.vkah .ctl{display:flex;gap:10px}
.vkah .ctl button{all:unset;cursor:pointer;width:48px;height:48px;border-radius:50%;background:rgba(10,16,60,.55);border:1.5px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;color:#fff}
.vkah .ctl button:hover{background:rgba(10,16,60,.8)}
.vkah .ctl button:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.vkah .ctl svg{width:20px;height:20px;fill:#fff}
.vkah.vkah--noctl .ctl{display:none}
