/* meta-feed and story-row: Meta's real UI, client artwork inside.
   Cards are built at iPhone width (390 pt) with Instagram's own metrics and zoomed to fit
   (--mf-z / --st-z from the modules' layout), so the chrome keeps the platform's proportions. */
.mf-row, .st-row{ position:absolute; left:calc(var(--vx) + var(--fl)); right:33px; top:33px; bottom:calc(33px + 40px * var(--ui, 1) + 24px);
  display:flex; justify-content:center; align-items:center; gap:24px; transition:left .7s var(--ease); }
.mf-card, .st-card{ flex:none; width:390px; font:400 14px/18px -apple-system, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing:antialiased; }

/* ---------- feed ---------- */
.mf-card{ zoom:var(--mf-z, .7); background:#fff; color:#000; border-radius:20px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.05), 0 24px 50px -30px rgba(0,0,0,.35); }
.mf-card header{ height:56px; display:flex; align-items:center; gap:10px; padding:0 8px 0 14px; }
.mf-avatar{ width:32px; height:32px; border-radius:50%; flex:none; box-shadow:0 0 0 .5px rgba(0,0,0,.1); }
.mf-avatar > span{ display:grid; place-items:center; width:100%; height:100%; border-radius:50%; background:var(--c-brand-1); color:var(--c-on-brand-1); }
.mf-avatar svg{ width:58%; height:58%; fill:currentColor; } .mf-avatar svg path{ fill:currentColor; }
.mf-who{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.mf-who p{ margin:0; display:flex; align-items:center; gap:4px; }
.mf-who b{ font-weight:600; font-size:14px; line-height:18px; }
.mf-who p svg{ width:12px; height:12px; flex:none; }
.mf-who small{ font-size:12px; line-height:15px; color:#000; }
.mf-more{ width:40px; height:40px; display:grid; place-items:center; } .mf-more svg{ width:20px; }
.mf-media{ aspect-ratio:4 / 5; }
.mf-cta{ height:44px; display:flex; justify-content:space-between; align-items:center; padding:0 14px; background:#0095f6; color:#fff; font-weight:600; font-size:14px; }
.mf-cta svg{ width:14px; height:14px; }
.mf-actions{ height:48px; display:flex; align-items:center; gap:16px; padding:0 14px; }
.mf-actions svg{ width:24px; height:24px; }
.mf-save{ margin-left:auto; display:flex; }
.mf-card > p{ margin:0; padding:0 14px; }
.mf-caption{ min-height:54px; margin:0 14px 15px !important; padding:0 !important; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-wrap:pretty; }   /* up to three lines, as the feed shows before "more" */
.mf-caption b{ font-weight:600; }
.mf-media .ad-top, .mf-media .ad-bottom, .mf-media .ad-row .ad-brand{ display:none; }   /* the header already names the brand */

/* ---------- stories (9:16) ---------- */
.st-card{ zoom:var(--st-z, .66); position:relative; aspect-ratio:9 / 16; border-radius:20px; overflow:hidden; background:#000; color:#fff;
  box-shadow:0 24px 50px -28px rgba(0,0,0,.5); }
.st-art{ position:absolute; inset:0; }
/* the story chrome carries the brand and the button; the artwork's text keeps to the safe zone */
.st-art .ad-top, .st-art .ad-bottom, .st-art .ad-cta, .st-art .ad-swipe{ display:none; }
.st-art .ad-foot, .st-art .ad-items{ bottom:20cqh; }
.st-art .ad-h-list, .st-art .ad-h-top, .st-art .ad-date{ top:18cqh; }
.st-art .ph-label, .mf-media .ph-label{ left:auto; right:3cqmin; bottom:auto; top:3cqmin; }
.st-art .ph-label{ top:18cqh; }
.st-chrome{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.3), transparent 15%, transparent 82%, rgba(0,0,0,.3)); }
.st-bars{ display:flex; gap:4px; padding:8px 8px 0; }
.st-bars i{ flex:1; height:2px; border-radius:1px; background:rgba(255,255,255,.35); }
.st-bars i.done, .st-bars i.now{ background:#fff; }
.st-bars i.now{ background:linear-gradient(90deg, #fff 55%, rgba(255,255,255,.35) 55%); }
.st-card header{ height:52px; display:flex; align-items:center; gap:10px; padding:0 8px 0 12px; }
.st-card header b{ font-weight:600; font-size:14px; }
.st-card header small{ font-size:14px; opacity:.8; }
.st-card .mf-avatar{ box-shadow:none; }
.st-x{ margin-left:auto; width:40px; height:40px; display:grid; place-items:center; } .st-x svg{ width:22px; height:22px; }
.st-card footer{ height:76px; display:flex; align-items:center; gap:14px; padding:0 14px 12px; }
.st-card footer > svg{ width:26px; height:26px; flex:none; }
.st-reply{ flex:1; height:44px; display:flex; align-items:center; padding:0 18px; border:1px solid rgba(255,255,255,.6); border-radius:22px; font-size:14px; }
.st-cta{ margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:4px; }
.st-cta > svg{ width:16px; height:16px; }
.st-cta b{ height:36px; display:inline-flex; align-items:center; gap:6px; padding:0 18px; border-radius:18px; background:#fff; color:#000; font-weight:600; font-size:14px; }
.st-cta b svg{ width:15px; height:15px; }
/* light artwork: no shade, the chrome turns dark (as the platform does) */
.st-card.is-light{ color:#000; }
.st-card.is-light .st-chrome{ background:none; }
.st-card.is-light .st-bars i{ background:rgba(0,0,0,.15); }
.st-card.is-light .st-bars i.done, .st-card.is-light .st-bars i.now{ background:rgba(0,0,0,.75); }
.st-card.is-light .st-bars i.now{ background:linear-gradient(90deg, rgba(0,0,0,.75) 55%, rgba(0,0,0,.15) 55%); }
.st-card.is-light .st-reply{ border-color:rgba(0,0,0,.3); }
.st-card.is-light .st-cta b{ background:#000; color:#fff; }

/* a campaign's feed post and story, side by side at one scale */
.mf-row--pair{ gap:40px; }
.mf-row--pair .mf-card, .mf-row--pair .st-card{ animation:mf-pair-in .6s cubic-bezier(0.32, 0.72, 0, 1) both; }
.mf-row--pair .st-card{ animation-delay:.08s; }
@keyframes mf-pair-in{ from{ opacity:0; translate:0 18px; } }
@media (prefers-reduced-motion: reduce){ .mf-row--pair .mf-card, .mf-row--pair .st-card{ animation:none; } }

/* ad-carousel: one ad large in the centre, the others waiting smaller either side */
.ac{ position:absolute; left:calc(var(--vx) + var(--fl)); right:33px; top:33px; bottom:calc(33px + 40px * var(--ui, 1) + 24px); }
.ac-slot{ position:absolute; left:50%; top:50%; --step:calc(390px * var(--ac-z) * .82);
  translate:calc(-50% + var(--d, 0) * var(--step)) -50%; scale:calc(1 - var(--a, 0) * .3);
  opacity:calc(1 - var(--a, 0) * .55); z-index:var(--zi, 10);
  transition:translate .7s cubic-bezier(0.32, 0.72, 0, 1), scale .7s cubic-bezier(0.32, 0.72, 0, 1), opacity .5s ease; }
.ac-slot:not(.is-on){ filter:saturate(.85); }
.ac .ac-card{ zoom:var(--ac-z); box-shadow:0 30px 60px -36px rgba(0,0,0,.4); }
.ac-flat{ width:100%; height:100%; object-fit:cover; display:block; }
.ac-layers{ position:relative; overflow:hidden; font-family:"Archivo", sans-serif; }
.ac-layers > div{ font-family:"Archivo", sans-serif; }
/* the build: plays on the ad arriving in the centre */
.is-play .L-pat{ animation:L-drift 9s linear both; }
.is-play .L-kid{ animation:L-rise .95s cubic-bezier(0.34, 1.4, 0.64, 1) .25s both; }
.is-play .L-photo{ animation:L-push 8s cubic-bezier(0.2, 0.6, 0.2, 1) both; }
.is-play .L-t{ animation:L-wipe .75s cubic-bezier(0.32, 0.72, 0, 1) calc(.35s + var(--i, 0) * .14s) both; }
.is-play .L-8{ animation:L-land .7s cubic-bezier(0.34, 1.56, 0.64, 1) 1.15s both; }
.is-play .L-logo{ animation:L-fade .8s ease 1s both; }
.is-play .ac-bar{ background:rgba(255,255,255,.35); }
.is-play .ac-bar::after{ content:""; display:block; height:100%; background:#fff; animation:L-bar 7s linear both; }
@keyframes L-drift{ from{ translate:-4% -2%; scale:1.12; } to{ translate:4% 2%; scale:1.12; } }
@keyframes L-rise{ from{ translate:0 38%; scale:.86; opacity:0; } 60%{ opacity:1; } }
@keyframes L-push{ from{ scale:1.16; } to{ scale:1.02; } }
@keyframes L-wipe{ from{ clip-path:inset(0 0 100% 0); translate:0 45%; } to{ clip-path:inset(0 0 -10% 0); translate:0 0; } }
@keyframes L-land{ from{ scale:0; rotate:-25deg; opacity:0; } }
@keyframes L-fade{ from{ opacity:0; translate:0 10px; } }
@keyframes L-bar{ from{ width:0; } to{ width:100%; } }
@media (prefers-reduced-motion: reduce){ .ac-slot{ transition:none; } .is-play *, .is-play *::after{ animation:none !important; } }