/* ═══════════════════════════════════════════════════════════════════════════
 *  v436 · ظاهر استوری با دوربین و عکسِ جابه‌جاشونده — شیت «استوری تازه» (#sk436، 365)، ویدیو در بیننده (126)،
 *  دکمهٔ «اندازهٔ اول» و راهنمای دو انگشت روی عکس (359). همان زبان روشن 358/363؛ بی @keyframes تازه (sh109fade/sh109up ِ 125)،
 *  بی :has، بی backdrop-filter تازه؛ انیمیشن فقط transform/opacity.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════ ۱) شیت «استوری تازه» ═══════════════ */
#sk436{
  --ink:#1b1029; --mute:#6B6480; --paper:#FBFAFD; --fill:#F1EEF5; --fill2:#E6E1EE;
  --acc:linear-gradient(135deg,#DB2777 0%,#7C3AED 100%);
  position:fixed; inset:0; z-index:10062; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(27,16,41,.38); font-family:Vazirmatn, system-ui, sans-serif; animation:sh109fade .18s ease;
}
#sk436.out{ opacity:0; transition:opacity .18s }
.sk436-p{
  width:100%; max-width:480px; color:var(--ink); border-radius:28px 28px 0 0; padding:10px 16px calc(18px + env(safe-area-inset-bottom));
  background:radial-gradient(70% 34% at 50% 0, rgba(219,39,119,.08), transparent 72%),
             radial-gradient(60% 32% at 50% 12%, rgba(124,58,237,.08), transparent 72%), var(--paper);
  box-shadow:0 0 0 1px rgba(27,16,41,.06), 0 -8px 28px -12px rgba(27,16,41,.2); animation:sh109up .24s cubic-bezier(.2,.9,.3,1);
}
.sk436-grab{ display:block; width:36px; height:5px; border-radius:99px; background:#DAD5E2; margin:0 auto 16px }
.sk436-t{ margin:0 4px 14px; font-size:20px; font-weight:900; line-height:1.3 }
.sk436-o{
  width:100%; display:flex; align-items:center; gap:14px; min-height:72px; padding:12px; margin-top:8px; border:0; border-radius:20px;
  background:#fff; color:var(--ink); font-family:inherit; text-align:start; cursor:pointer;
  box-shadow:0 0 0 1px rgba(27,16,41,.07), 0 8px 20px -14px rgba(27,16,41,.35); transition:transform .12s, background-color .12s;
}
.sk436-o .i{
  flex:0 0 auto; width:48px; height:48px; display:grid; place-items:center; border-radius:16px; color:#fff; background:var(--acc);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 8px 16px -8px rgba(171,48,178,.8);
}
.sk436-o.gal .i{ color:#6D28D9; background:#F1EBFF; box-shadow:none }
.sk436-o .i svg{ width:24px; height:24px }
.sk436-o .tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px }
.sk436-o b{ font-size:16px; font-weight:900 }
.sk436-o small{ font-size:13px; font-weight:700; color:var(--mute) }
.sk436-o:active{ transform:scale(.98); background:var(--fill) }
.sk436-o:focus-visible{ outline:2.5px solid var(--ink); outline-offset:2px }
@media (hover:hover){ .sk436-o:hover{ background:#F8F6FB } }
@media (min-width:600px){
  #sk436{ align-items:center }
  .sk436-p{ max-width:400px; border-radius:28px; padding-bottom:20px; box-shadow:0 0 0 1px rgba(27,16,41,.05), 0 30px 70px -24px rgba(27,16,41,.35) }
}

/* ═══════════════ ۲) ویدیو در بیننده ═══════════════ */
.sv109-media video{ width:100%; height:100%; object-fit:contain; background:transparent; animation:sv109fade .25s ease }
.sv109-media video.ld436{ opacity:0; animation:none }
@media (min-width:600px){ #sv109 .sv109-media video{ object-fit:cover } }
#sv109 .snd436[hidden]{ display:none }
#sv109 .snd436.off{ background:rgba(0,0,0,.42) }
.arc109-c.vd436::after, .hle109-c.vd436::after{
  content:""; position:absolute; top:6px; inset-inline-start:6px; width:22px; height:22px; border-radius:50%; pointer-events:none;
  background:rgba(0,0,0,.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7.5v9l7.5-4.5z' fill='%23fff'/%3E%3C/svg%3E") center/16px no-repeat;
}
.hle109-c.vd436{ position:relative }
/* آرشیو: گوشهٔ بالا مال تاریخ (.dt) و تیک است ← نشان ویدیو پایین‌سمتِ پایان (.lv پایین‌سمتِ شروع است) */
.arc109-c.vd436::after{ top:auto; bottom:6px; inset-inline-start:auto; inset-inline-end:6px }

/* ═══════════════ ۳) عکسِ جابه‌جاشونده در صفحهٔ پیش از انتشار (#sc426) ═══════════════ */
#sc426 .sc426-img{ transform-origin:50% 50% }
#sc426.pz436 .sc426-img{ will-change:transform }
#sc426.an436 .sc426-img{ transition:transform .25s cubic-bezier(.2,.9,.3,1) }
#sc426.pz436 .sc426-top, #sc426.pz436 .sc426-bot, #sc426.pz436 .sc426-hint{ opacity:0; transition:opacity .15s }
.sc436-rs{
  position:absolute; z-index:4; bottom:calc(92px + env(safe-area-inset-bottom)); inset-inline-start:14px;
  display:flex; align-items:center; gap:6px; height:38px; padding:0 14px 0 10px; padding-inline:10px 14px; border:0; border-radius:99px;
  background:#fff; color:#1b1029; font:800 13px/1 Vazirmatn, system-ui, sans-serif; cursor:pointer;
  box-shadow:0 10px 26px -10px rgba(0,0,0,.6); opacity:0; pointer-events:none; transform:translateY(6px); transition:opacity .18s, transform .18s;
}
.sc436-rs svg{ width:17px; height:17px }
#sc426.tf436 .sc436-rs{ opacity:1; pointer-events:auto; transform:none }
#sc426.pz436 .sc436-rs, #sc426.busy .sc436-rs, #sc426.sub .sc436-rs, #sc426.o430 .sc436-rs, #sc426.drag .sc436-rs{ opacity:0; pointer-events:none }
.sc436-rs:active{ transform:scale(.95) }
.sc436-rs:focus-visible{ outline:2.5px solid #fff; outline-offset:3px }
.sc436-hint{
  position:absolute; z-index:4; left:50%; top:46%; max-width:80%; margin:0; padding:10px 16px; border-radius:99px; pointer-events:none;
  background:rgba(17,10,28,.62); color:#fff; font:800 13.5px/1.5 Vazirmatn, system-ui, sans-serif; text-align:center;
  transform:translate(-50%,-50%); transition:opacity .4s;
}
.sc436-hint.out, #sc426.pz436 .sc436-hint{ opacity:0 }

@media (prefers-reduced-motion:reduce){
  #sk436, .sk436-p, .sv109-media video{ animation:none }
  .sk436-o, .sc436-rs, .sc436-hint, #sc426.an436 .sc426-img{ transition:none }
}