/* =========================================================
   CodeChaps — Social Media App Development page
   Page-specific styles (social feed phone + creator analytics hero).
   Shared styles live in codechaps-motion.css
   ========================================================= */
.hero-visual{min-height:540px;align-items:center}
.sm-wrap{position:relative;width:520px;height:520px}
.js .sm-wrap{opacity:0;transform:translateY(40px) scale(.96)}
.js.loaded .sm-wrap{opacity:1;transform:none;transition:opacity 1s var(--ease) .35s,transform 1.2s var(--ease) .35s}
.sm-wrap .float{z-index:4}

/* ---- feed phone ---- */
.feed{position:absolute;left:20px;top:0;width:250px;height:510px;border-radius:40px;background:#05070B;padding:10px;box-shadow:0 50px 90px rgba(0,0,0,.55),inset 0 0 0 1px #263244;animation:floatY 8s ease-in-out infinite;z-index:2}
.feed::before{content:"";position:absolute;top:18px;left:50%;width:70px;height:18px;margin-left:-35px;border-radius:12px;background:#05070B;z-index:3}
.feed-screen{position:relative;width:100%;height:100%;border-radius:31px;overflow:hidden;background:#fff;color:#0F172A;display:flex;flex-direction:column}
.f-head{display:flex;justify-content:space-between;align-items:center;padding:40px 14px 6px}
.f-head b{font-family:var(--display);font-weight:900;font-size:17px;background:linear-gradient(90deg,#7C3AED,#EC4899);-webkit-background-clip:text;background-clip:text;color:transparent}
.f-head span{display:flex;gap:10px;color:#334155}
.f-head .ico{width:16px;height:16px}
.stories{display:flex;gap:9px;padding:6px 12px 10px;border-bottom:1px solid #F1F5F9}
.story{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:8px;color:#475569}
.story .ring{position:relative;width:40px;height:40px;border-radius:50%;padding:2px;background:conic-gradient(#F59E0B,#EC4899,#8B5CF6,#3B82F6,#F59E0B)}
.js.loaded .story .ring{animation:ringSpin 4s linear infinite}
.story .ring.seen{background:#CBD5E1;animation:none}
@keyframes ringSpin{to{filter:hue-rotate(360deg)}}
.story .av{display:block;width:100%;height:100%;border-radius:50%;border:2px solid #fff;background:var(--g)}
.story .live{position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);font-size:6.5px;font-weight:800;color:#fff;background:#EF4444;border:1.5px solid #fff;border-radius:4px;padding:0 3px;letter-spacing:.04em}
.post{flex:1;display:flex;flex-direction:column;min-height:0}
.p-user{display:flex;align-items:center;gap:7px;padding:8px 12px;font-size:10px}
.p-user .av{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#F472B6,#8B5CF6)}
.p-user b{display:block;font-size:10.5px}
.p-user small{font-size:8.5px;color:#64748B}
.p-user .more{margin-left:auto;color:#94A3B8;font-weight:700;letter-spacing:1px}
.p-media{position:relative;height:178px;flex:none;overflow:hidden;background:linear-gradient(160deg,#F97316,#EC4899 45%,#7C3AED)}
.p-media .sun{position:absolute;left:50%;top:44%;width:70px;height:70px;margin:-35px;border-radius:50%;background:radial-gradient(circle,#FEF3C7,#FDE68A 50%,rgba(253,230,138,0) 72%);animation:sunrise 8s ease-in-out infinite}
@keyframes sunrise{0%,100%{transform:translateY(10px)}50%{transform:translateY(-6px)}}
.p-media .mtn{position:absolute;bottom:-10px;width:160px;height:110px;background:#312E81;clip-path:polygon(0 100%,50% 0,100% 100%)}
.p-media .mtn.m1{left:-30px;opacity:.9}
.p-media .mtn.m2{right:-40px;bottom:-20px;background:#1E1B4B}
.p-media .count{position:absolute;right:8px;top:8px;font-size:8px;font-weight:700;color:#fff;background:rgba(15,23,42,.5);border-radius:999px;padding:2px 7px}
.burst{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px;color:#fff;opacity:0;transform:scale(.3)}
.burst svg{width:100%;height:100%;fill:#fff;filter:drop-shadow(0 6px 16px rgba(0,0,0,.35))}
.js.loaded .burst{animation:burst 4.5s ease-out infinite 1.6s}
@keyframes burst{0%{opacity:0;transform:scale(.3)}6%{opacity:1;transform:scale(1.15)}12%{transform:scale(.95)}18%{transform:scale(1)}30%{opacity:1}40%,100%{opacity:0;transform:scale(1)}}
.p-actions{display:flex;align-items:center;gap:12px;padding:8px 12px 2px;color:#0F172A}
.p-actions .ico{width:17px;height:17px}
.p-actions .like{color:#E11D48}
.p-actions .like .ico{fill:#E11D48;stroke:#E11D48}
.js.loaded .p-actions .like .ico{animation:likePop 4.5s ease-out infinite 1.6s}
@keyframes likePop{0%{transform:scale(1)}6%{transform:scale(1.4)}14%,100%{transform:scale(1)}}
.p-actions .save{margin-left:auto}
.p-meta{padding:2px 12px;font-size:9.5px}
.p-meta b{font-variant-numeric:tabular-nums}
.p-cap{padding:2px 12px;font-size:9.5px;color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-cap b{color:#0F172A}
.typing{display:flex;align-items:center;gap:6px;padding:4px 12px;font-size:9px;color:#94A3B8}
.typing i{display:inline-flex;gap:2px}
.typing i span{width:4px;height:4px;border-radius:50%;background:#94A3B8;animation:dotty 1.2s ease-in-out infinite}
.typing i span:nth-child(2){animation-delay:.15s}.typing i span:nth-child(3){animation-delay:.3s}
@keyframes dotty{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-3px);opacity:1}}
.f-tabs{margin-top:auto;display:flex;justify-content:space-around;padding:10px 6px 14px;border-top:1px solid #F1F5F9;background:#fff;color:#94A3B8}
.f-tabs .ico{width:17px;height:17px}
.f-tabs .on{color:#0F172A}
.f-tabs .add{width:28px;height:20px;margin-top:-2px;border-radius:7px;background:linear-gradient(90deg,#7C3AED,#EC4899);color:#fff;display:flex;align-items:center;justify-content:center}
.f-tabs .add .ico{width:13px;height:13px}

/* floating reactions */
.reacts{position:absolute;left:258px;bottom:120px;width:40px;height:260px;pointer-events:none;z-index:3}
.reacts span{position:absolute;bottom:0;left:var(--x);width:22px;height:22px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;opacity:0;box-shadow:0 6px 14px rgba(0,0,0,.25)}
.reacts span svg{width:12px;height:12px;fill:#fff}
.js.loaded .reacts span{animation:floatUp 4s ease-in infinite;animation-delay:var(--d)}
@keyframes floatUp{0%{opacity:0;transform:translateY(0) scale(.6)}10%{opacity:1;transform:translateY(-20px) scale(1)}80%{opacity:.9}100%{opacity:0;transform:translateY(-240px) translateX(12px) scale(.9)}}

/* ---- creator analytics card ---- */
.studio{position:absolute;right:-10px;top:84px;width:232px;border-radius:22px;background:linear-gradient(160deg,#111A2B,#0B111C);border:1px solid #263244;padding:16px;color:#fff;box-shadow:0 30px 60px rgba(0,0,0,.5);animation:floatY 7s ease-in-out infinite reverse;z-index:1}
.st-top{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#94A3B8}
.st-top b{color:#fff;font-size:11.5px}
.st-top .wk{font-size:9px;font-weight:700;color:#C4B5FD;background:rgba(139,92,246,.18);padding:2px 8px;border-radius:999px}
.st-kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.st-kpis div{background:rgba(255,255,255,.05);border:1px solid #1F2A3D;border-radius:12px;padding:8px 10px}
.st-kpis small{display:block;font-size:9px;color:#94A3B8}
.st-kpis b{font-size:16px;font-variant-numeric:tabular-nums}
.st-kpis em{font-style:normal;font-size:8.5px;font-weight:700;color:#4ADE80;margin-left:4px}
.st-chart{position:relative;height:66px}
.st-chart svg{width:100%;height:100%;overflow:visible}
.st-chart .area{fill:url(#stGrad);opacity:0}
.st-chart .ln{fill:none;stroke:#A78BFA;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.js.loaded .st-chart .ln{animation:draw 2s var(--ease) 1.2s forwards}
.js.loaded .st-chart .area{animation:fadeIn 1s ease 2.4s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadeIn{to{opacity:.55}}
.st-axis{display:flex;justify-content:space-between;font-size:8.5px;color:#64748B;margin-top:4px}
.st-top3{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.st-top3>div{display:flex;align-items:center;gap:8px;font-size:9.5px;color:#CBD5E1}
.st-top3 .th{width:26px;height:26px;border-radius:7px;background:var(--g);flex:none}
.st-top3>div>div{min-width:0;white-space:nowrap;font-size:9px;color:#94A3B8}
.st-top3 b{display:block;font-size:10px;color:#fff}
.st-top3 .pc{margin-left:auto;font-weight:700;color:#4ADE80;font-size:9.5px}

.float--1{right:-60px;top:-14px}
.float--2{right:-40px;top:auto;bottom:10px}
.float--3{left:-60px;top:auto;bottom:-34px}
@media (max-width:1240px) and (min-width:961px){.sm-wrap{transform-origin:left center;scale:.9}.float--1{right:-20px}.float--2{right:-10px}.float--3{left:-40px}.studio{right:-44px}}
@media (max-width:960px){.hero-visual{min-height:0}.sm-wrap{width:100%;max-width:520px;height:auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:20px}.feed,.studio{position:relative;left:auto;right:auto;top:auto}.studio{margin-top:60px}.reacts{display:none}}
@media (max-width:560px){.studio{display:none}}
@media (prefers-reduced-motion:reduce){.st-chart .ln{stroke-dashoffset:0}.st-chart .area{opacity:.55}.reacts{display:none}}