/* The Hastko short reel: wide, 1920 x 1080, laid out like the main reel and reusing its parts in
   reel.css (the map, the windows, the captions, the end card). Only its own parts are here.
   Telemyr's parts use palette tokens or tints of them; the Hastko app parts use the apps' own
   --hx-* tokens from reel.css. No literal colours here. */

/* Type: lines of masked words, sized in stage pixels. */
.sr-line { position: relative; width: max-content; isolation: isolate; white-space: nowrap; }
.sr-head { position: absolute; left: 150px; top: 236px; font-size: 100px; line-height: 1.04; letter-spacing: -.05em; }
.sr-head--xl { top: 330px; font-size: 168px; line-height: 1.02; letter-spacing: -.055em; }
.sr-sub { position: absolute; left: 156px; top: 600px; font-size: 44px; line-height: 1.22; letter-spacing: -.02em; color: var(--rl-ink-soft); }
.sr-muted { color: var(--rl-ink-soft); }

/* 1. The card: Hastko's products stamped best seller, then its photography. */
.sr-card { position: absolute; left: 1090px; top: 110px; width: 680px; height: 860px; border-radius: 28px; overflow: hidden; background: var(--color-light-grey); }
.sr-shot { position: absolute; inset: 0; overflow: hidden; background: var(--color-light-grey); }
.sr-shot img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; transform-origin: 50% 40%; }
.sr-shot.is-product img { left: 60px; top: 100px; width: 560px; height: 620px; object-fit: contain; mix-blend-mode: multiply; transform-origin: 50% 50%; }
.hx-chip.sr-badge { position: absolute; right: 26px; top: 26px; height: 64px; padding: 0 26px; gap: 10px; font-size: 30px; letter-spacing: -.015em; transform-origin: 100% 0; visibility: hidden; }
.sr-label { position: absolute; left: 24px; bottom: 24px; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--color-white); display: inline-flex; align-items: center; font-size: 16px; letter-spacing: .02em; white-space: nowrap; }

/* 2. The map's three apps light up lime together as their chapter grows out of them. */
.sr-approw { position: absolute; transform-origin: 50% 50%; }
.sr-approw .rl-app.is-on { background: var(--hx-lime); border-color: var(--hx-lime); }

/* 3. The apps in turn: each window holds an app space scaled 1.4x; steps below. */
.hx-window.sr-win { transform-origin: 50% 50%; }
.sr-space { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: scale(1.4); }
.sr-logo { display: block; height: 22px; width: auto; }
.sr-ats-head { position: absolute; left: 20px; right: 20px; top: 14px; height: 32px; display: flex; align-items: center; justify-content: space-between; }
.sr-chips { display: flex; gap: 8px; }
.sr-chips .hx-chip, .sr-ats-head > .hx-chip { height: 28px; font-size: 14px; padding: 0 12px; }
.sr-ats-title { position: absolute; left: 20px; right: 20px; top: 54px; display: flex; align-items: center; gap: 12px; font-size: 17px; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.sr-ats-title .hx-card-icon { width: 32px; height: 32px; border-radius: 10px; }
.sr-ats-free { margin-left: auto; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--hx-muted); }
.sr-row { position: absolute; left: 12px; right: 12px; height: 60px; display: grid; grid-template-columns: 26px 46px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 0 10px; border-top: 1px solid var(--hx-line); }
.sr-rank { font-size: 13px; color: var(--color-text-grey); }
.sr-name { font-size: 15px; line-height: 1.3; min-width: 0; white-space: nowrap; }
.sr-row .hx-chip { height: 30px; font-size: 15px; padding: 0 12px; }
.hx-card.sr-prod { left: 14px; right: 14px; top: 14px; height: 96px; display: flex; align-items: center; gap: 16px; padding: 0 18px; }
.sr-prod-text { flex: 1; min-width: 0; display: grid; gap: 3px; justify-items: start; }
.sr-prod-name { font-size: 16px; line-height: 1.25; white-space: nowrap; }
.sr-prod-sub { font-size: 13px; color: var(--hx-muted); }
.sr-prod-text .hx-chip { height: 24px; font-size: 12px; padding: 0 10px; }
.sr-prod-side { display: flex; align-items: center; gap: 22px; flex: none; }
.hx-btn.sr-gen { height: 38px; padding: 0 16px; font-size: 15px; gap: 6px; }
.sr-kpi { display: grid; justify-items: end; gap: 1px; }
.sr-kpi i { font-style: normal; font-size: 12px; color: var(--hx-muted); white-space: nowrap; }
.sr-kpi b { font-weight: 400; font-size: 26px; letter-spacing: -.02em; line-height: 1.1; }
.sr-chart-head .hx-card-title { font-size: 18px; }
.sr-chart-head .rl-legend { margin-left: 16px; font-size: 13px; }
.sr-chart-head .rl-legend i { width: 12px; height: 12px; }
.sr-chart-head .rl-legend i.is-dash { width: 18px; height: 0; }
.sr-flag .hx-chip { height: 28px; font-size: 13px; padding: 0 11px; gap: 5px; }
/* A zero-width holder centres a tag or toast on a point; the holder takes the entrance motion. */
.sr-hold { position: absolute; width: 0; display: flex; justify-content: center; visibility: hidden; }
.sr-hold > .rl-po-tag, .sr-hold > .hx-toast { position: relative; left: auto; top: auto; transform: none; flex: none; }
.rl-po-tag.sr-po-tag { font-size: 12px; padding: 4px 9px; border-radius: 7px; }
.hx-toast.sr-toast { height: 40px; padding: 0 18px; font-size: 14px; gap: 8px; }
.hx-card.sr-kpi-card { padding: 0 16px; gap: 3px; }
.sr-kpi-card .hx-kpi-label { font-size: 13px; white-space: nowrap; }
.sr-kpi-card .hx-kpi-value { font-size: 30px; }
.sr-kpi-card .hx-delta { font-size: 13px; }
.hx-chip.sr-ahead { position: absolute; height: 28px; font-size: 13px; padding: 0 11px; visibility: hidden; }
.sr-steps { position: absolute; left: 400px; width: 1120px; top: 930px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; font-size: 22px; letter-spacing: -.01em; }
.sr-step { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 12px; align-items: baseline; color: var(--color-text-grey); white-space: nowrap; }
.sr-step b { grid-column: 1 / -1; position: relative; height: 3px; border-radius: 2px; background: var(--color-rule-grey); overflow: hidden; }
.sr-step b i { position: absolute; inset: 0; background: var(--color-black); transform-origin: 0 50%; transform: scaleX(0); }
.sr-step em { font-style: normal; font-variant-numeric: tabular-nums; }
.sr-step.is-on { color: var(--color-black); }

/* 4. Aurelie's line. The confetti flies over the photo and behind the words, so the line stays clean. */
.reel-scene--quote .sr-card { z-index: 1; }
.reel-scene--quote .sr-quote, .sr-quote-mark, .sr-quote-who { z-index: 3; }
.sr-quote-mark { position: absolute; left: 140px; top: 70px; font-size: 280px; line-height: 1; letter-spacing: -.05em; }
.sr-head.sr-quote { top: 352px; font-size: 176px; line-height: 1.02; letter-spacing: -.055em; }
.sr-quote-who { position: absolute; left: 156px; top: 772px; display: grid; gap: 8px; font-size: 44px; letter-spacing: -.02em; line-height: 1.15; }
.sr-quote-who .sr-muted { font-size: 32px; letter-spacing: -.01em; }
.sr-confetti { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; z-index: 2; pointer-events: none; }

/* 5. The first frame under the end card, for the loop. */
.sr-end-poster { position: absolute; inset: 0; overflow: hidden; background: var(--color-white); visibility: hidden; }

/* ---- The square cut for LinkedIn (1080 x 1080): the same parts, laid out for the frame. The figure
   carries .is-square; everything here only places and sizes. ---- */
.is-square .rl-cv, .is-square .sr-confetti { width: 1080px; height: 1080px; }
/* 1. The headline on top, the card below. */
.is-square .sr-head { left: 66px; top: 70px; font-size: 72px; }
.is-square .sr-head--xl { top: 92px; font-size: 140px; }
.is-square .sr-sub { left: 70px; top: 312px; font-size: 34px; }
.is-square .rl-lockup { left: 70px; top: 414px; gap: 18px; }
.is-square .rl-lockup-hastko { height: 28px; }
.is-square .rl-lockup-x { font-size: 28px; }
.is-square .rl-lockup-telemyr { font-size: 38px; }
.is-square .sr-card { left: 70px; top: 480px; width: 940px; height: 530px; }
.is-square .sr-shot img { object-position: 50% 24%; }
.is-square .sr-shot.is-product img { left: 290px; top: 40px; width: 360px; height: 440px; }
/* 2. The map: two columns of sources, one line each. */
.is-square .rl-src-head { left: 66px; top: 60px; font-size: 76px; }
.is-square .rl-src-body { display: none; }
.sr-srcrow { position: absolute; display: flex; align-items: center; gap: 16px; padding: 0 22px; border: 1px solid var(--color-rule-grey); border-radius: 18px; background: var(--color-white); }
.sr-srcrow .rl-src-name { font-size: 24px; }
.sr-srcrow .rl-src-dot { top: 26px; right: 22px; }
/* The Telemyr mark and the chapter card. */
.is-square .rl-iris-mark { top: 460px; width: 200px; height: 200px; }
.is-square .rl-iris-word { top: 610px; font-size: 48px; }
.is-square .rl-chap-head { left: 64px; right: 64px; top: 60px; }
.is-square .rl-chap-num { left: 68px; top: 320px; }
.is-square .rl-chap-title { left: 56px; top: 370px; font-size: 156px; }
.is-square .rl-chap-line { left: 66px; top: 560px; width: 900px; font-size: 38px; text-wrap: balance; }
/* 3. The apps: the caption above the window, the steps below; the app space scales 1.25 (1000 px window). */
.is-square .sr-space { transform: scale(1.25); }
.is-square .rl-cap { left: 46px; right: 46px; top: 40px; display: block; }
.is-square .rl-cap-title { font-size: 56px; }
.is-square .rl-cap-text { margin-top: 12px; font-size: 25px; text-align: left; max-width: none; }
.is-square .sr-steps { left: 40px; width: 1000px; top: 866px; gap: 20px; font-size: 20px; }
/* 4. The quote on top, the photo below on the right. */
.is-square .sr-quote-mark { left: 58px; top: 0; font-size: 220px; }
.is-square .sr-head.sr-quote { left: 66px; top: 214px; font-size: 124px; }
.is-square .sr-quote-who { left: 70px; top: 520px; font-size: 38px; }
.is-square .sr-quote-who .sr-muted { font-size: 28px; }
.is-square .reel-scene--quote .sr-card { left: 600px; top: 490px; width: 410px; height: 520px; }
/* 5. The end card, centred. */
.is-square .rl-end-lock { top: 420px; gap: 28px; }
.is-square .rl-end-hastko { height: 58px; }
.is-square .rl-end-x { font-size: 46px; }
.is-square .rl-end-telemyr { font-size: 86px; gap: 14px; }
.is-square .rl-end-mark { width: 70px; height: 70px; }
.is-square .rl-end-apps { top: 560px; font-size: 32px; }
.is-square .rl-end-line { top: 614px; font-size: 26px; }