/* Instagram live count widget for iframes and OBS. Same widget markup and rules as the
   studio preview on /instagram-realtime/, so what people pick there is what they get. */

/* Only the design tokens the widget uses. No color-scheme on purpose: a transparent iframe
   whose color scheme differs from the page around it gets painted with an opaque backdrop. */
:root {
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --grad: linear-gradient(90deg, #F9CE34 0%, #EE2A7B 48%, #6228D7 100%);
}

html, body { margin: 0; background: transparent; overflow: hidden; }
body { font: 15px/1.5 var(--font); }
main { display: block; }
h1 { margin: 0; }
::-webkit-scrollbar { display: none; }

.vh {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.w {
    --wh: 80px; --ww: 300px; --wn: 14px; --wc: 30px;
    --up: #0B7A45; --down: #B4322A;
    position: relative;
    width: var(--ww);
    height: var(--wh);
    display: flex;
    align-items: center;
    gap: calc(var(--wh) * .14);
    padding: 0 calc(var(--wh) * .12);
    box-sizing: border-box;
    border-radius: 12px;
    font-family: var(--font);
    overflow: hidden;
    color: #24292e;
}
.w[data-size="m"] { --wh: 100px; --ww: 400px; --wn: 17px; --wc: 40px; }
.w[data-size="l"] { --wh: 130px; --ww: 520px; --wn: 21px; --wc: 54px; }

.w[data-theme="light"] { background: #FFFFFF; color: #121214; }
.w[data-theme="dark"] { background: #121214; color: #FFFFFF; --up: #46D08A; --down: #FF7B70; }
.w[data-theme="transparent"] {
    color: #FFFFFF;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 0 14px rgba(0, 0, 0, .35);
    --up: #46D08A; --down: #FF7B70;
}

/* nothing shows until the first answer, so OBS never flashes a placeholder */
.w:not(.is-ready) > * { visibility: hidden; }

.w-avatar {
    flex: none;
    width: calc(var(--wh) * .76);
    height: calc(var(--wh) * .76);
    border-radius: 50%;
    object-fit: cover;
    background: rgba(127, 127, 127, .25);
}
.w[data-avatar="0"] .w-avatar { display: none; }

.w-text { flex: 1; min-width: 0; }
.w-name {
    font-size: var(--wn);
    font-weight: 600;
    line-height: 1.2;
    opacity: .72;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.w[data-name="0"] .w-name { display: none; }

.w-count {
    font-size: var(--wc);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transform-origin: 0 50%;
}

/* digit roller: a 0 to 9 column per digit, moved in % of its own height so a font-size
   change never re-animates */
.dg { position: relative; display: inline-block; height: 1.05em; overflow: hidden; vertical-align: top; }
/* the real digit (transparent) sets the width and is what a selection or a copy gets; the strip moves over it */
.dg-t { color: transparent; }
.dg-col { position: absolute; inset: 0 0 auto; display: block; white-space: pre; line-height: 1.05; text-align: center; transition: transform .6s cubic-bezier(.2, .75, .2, 1); }
/* the digits live in CSS, so the page text (and what crawlers read) is the number, not ten digit columns */
.dg-col::before { content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9"; }
/* two identical animations per direction: switching the name restarts the flash without a reflow */
.fu0 { animation: fu0 1.2s ease-out; } .fu1 { animation: fu1 1.2s ease-out; }
.fd0 { animation: fd0 1.2s ease-out; } .fd1 { animation: fd1 1.2s ease-out; }
@keyframes fu0 { from { color: var(--up); } } @keyframes fu1 { from { color: var(--up); } }
@keyframes fd0 { from { color: var(--down); } } @keyframes fd1 { from { color: var(--down); } }

.w-goal {
    display: none;
    position: relative;
    height: 4px;
    margin-top: 6px;
    border-radius: 999px;
    background: rgba(127, 127, 127, .25);
    overflow: hidden;
}
.w[data-goal="1"] .w-goal { display: block; }
.w-goal span {
    display: block;
    height: 100%;
    background: var(--grad);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .6s ease;
}

/* milestone burst (fx=1): pulse, a light sweep over the goal bar and confetti clipped to the widget */
.w.is-fx .w-count { animation: pulse .5s ease; }
.w.is-fx .w-goal::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
    animation: sweep 1.2s ease;
    transform: translateX(-100%);
}
@keyframes pulse { 50% { transform: scale(1.06); } }
@keyframes sweep { to { transform: translateX(100%); } }
.fx { position: absolute; inset: 0; pointer-events: none; }

/* ---------- two accounts (?u=a&u2=b): two rows and the gap ---------- */

.w.duo {
    --dh: 140px; --dw: 400px; --dn: 15px; --dc: 26px; --dg: 12.5px;
    display: grid;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
    width: var(--dw);
    height: var(--dh);
    padding: calc(var(--dh) * .06) calc(var(--dh) * .1);
    gap: 0;
}
.w.duo[data-size="s"] { --dh: 110px; --dw: 300px; --dn: 12.5px; --dc: 20px; --dg: 11px; }
.w.duo[data-size="l"] { --dh: 180px; --dw: 520px; --dn: 19px; --dc: 34px; --dg: 15px; }
.d-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: calc(var(--dh) * .06); min-width: 0; }
.d-av { width: calc(var(--dh) * .28); height: calc(var(--dh) * .28); border-radius: 50%; object-fit: cover; background: rgba(127, 127, 127, .25); }
.w[data-avatar="0"] .d-av { display: none; }
/* same colours as the comparison page: first account in the text colour, second in pink */
.d-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.d-b .d-dot { background: #EE2A7B; }
.d-name { overflow: hidden; font-size: var(--dn); font-weight: 600; line-height: 1.2; opacity: .78; text-overflow: ellipsis; white-space: nowrap; }
.w[data-name="0"] .d-name { visibility: hidden; }
.d-count { font-size: var(--dc); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.d-gap { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-top: calc(var(--dh) * .04); border-top: 1px solid rgba(127, 127, 127, .3); font-size: var(--dg); line-height: 1.3; }
.d-gap-label { font-weight: 600; opacity: .72; }
.d-gap-num { font-weight: 700; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}