/* After the phone on scoute.net (closed.html): four screens of what the cabinet does — scouting, promo, the money, the
team — and the door again. Each comes in once as it enters the screen (features.js: .in as its words come, .art-in
as its picture does — on a phone that is further down — its parts rise, numbers count up, a chart draws) and its
loops run only while it is seen (.on). Every motion is under html.motion,
so with «reduce motion» (or no script) everything simply stands there. Transform and opacity only, on the compositor.
The data is invented and marked «иллюстрация»; only what is on sale already (prices.html) is shown. */
.feat { position: relative; content-visibility: auto; contain-intrinsic-size: auto 900px; max-width: 1200px; margin: 0 auto; padding: clamp(84px, 14vh, 160px) var(--gutter) 0;
display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 5vw, 84px); align-items: center; }
.feat.flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.feat.flip .feat-copy { order: 2; }
.feat-fine { order: 3; grid-column: 1 / -1; justify-self: end; margin-top: -10px; color: var(--muted); font-size: 12px; letter-spacing: .04em; }
/* ---- the words ---- */
.feat-kicker { display: flex; align-items: center; gap: 12px; color: var(--acid); font: 600 13px/1 var(--body); letter-spacing: .18em;
text-transform: uppercase; }
.feat-kicker span { padding: 7px 10px; border-radius: 999px; color: var(--ink); font: 700 13px/1 var(--display); letter-spacing: .06em;
background: rgb(255 255 255 / .07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); }
.feat h2, .finale h2 { color: var(--ink); text-transform: uppercase; letter-spacing: -.005em; text-wrap: balance; }
.feat h2 { margin-top: 18px; font: 700 clamp(36px, 4.6vw, 66px)/.95 var(--display); }
.feat h2 em, .finale h2 em { font-style: normal; color: var(--acid); text-shadow: 0 0 50px rgb(215 255 46 / .25); }
.feat.violet-head h2 em { color: #9a82ff; text-shadow: 0 0 50px rgb(122 92 255 / .4); }
.feat-sub { margin-top: 18px; max-width: 31em; color: var(--soft); font: 500 clamp(16px, 1.35vw, 19px)/1.5 var(--body); }
.feat-points { list-style: none; margin-top: 22px; padding: 0; display: grid; gap: 11px; }
.feat-points li { display: flex; gap: 12px; align-items: baseline; color: var(--soft); font-size: 15.5px; line-height: 1.4; }
.feat-points li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--acid);
box-shadow: 0 0 12px rgb(215 255 46 / .7); transform: translateY(-2px); }
.feat-points b { color: var(--ink); font-weight: 650; }
/* ---- the cards: maydm's glass, squared off ---- */
.fx-card { position: relative; isolation: isolate; border-radius: 20px;
background: radial-gradient(120% 120% at 0% 0%, rgb(255 255 255 / .07), transparent 46%),
linear-gradient(180deg, rgb(255 255 255 / .035), transparent 60%), rgb(16 13 27 / .92); /* no backdrop blur: on an iPhone it lags */
box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), inset 0 0 0 1px rgb(255 255 255 / .08), 0 24px 48px -24px rgb(0 0 0 / .85); }
.feat-art { position: relative; }
.av { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; font: 700 14px/1 var(--body); font-style: normal;
color: #cbbfff; background: rgb(122 92 255 / .22); }
.av.v { color: var(--acid); background: rgb(215 255 46 / .12); }
/* ==== 01 scouting: the cabinet's list, a chart, the contacts found ==== */
.win { overflow: hidden; }
.win-bar { display: flex; align-items: center; gap: 7px; padding: 12px 14px; border-bottom: 1px solid rgb(255 255 255 / .06); }
.win-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgb(255 255 255 / .14); }
.win-bar span { margin-left: 10px; padding: 5px 12px; border-radius: 999px; background: rgb(255 255 255 / .05); color: var(--muted); font: 500 12px/1 var(--body); }
.win-tabs { display: flex; gap: 4px; padding: 12px 14px 0; color: var(--muted); font: 600 12.5px/1 var(--body); white-space: nowrap; overflow: hidden; }
.win-tabs > * { padding: 8px 12px; border-radius: 999px; }
.win-tabs b { color: var(--ink); font-weight: 650; background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); }
.win-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 14px; }
.win-stats p { display: grid; gap: 5px; padding: 12px; border-radius: 14px; background: rgb(255 255 255 / .04); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06); }
.win-stats b { color: var(--ink); font: 700 26px/1 var(--display); font-variant-numeric: tabular-nums; }
.win-stats p:first-child b { color: var(--acid); }
.win-stats small { color: var(--muted); font-size: 11.5px; line-height: 1.2; }
.rows { list-style: none; margin: 0; padding: 0 14px 16px; display: grid; gap: 6px; }
.rows li { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1.3fr) minmax(0, 1fr) auto 54px; align-items: center; gap: 10px;
padding: 9px 10px; border-radius: 12px; background: rgb(255 255 255 / .03); font-size: 13px; }
.rows li:first-child { background: linear-gradient(90deg, rgb(215 255 46 / .1), rgb(255 255 255 / .03) 62%); box-shadow: inset 0 0 0 1px rgb(215 255 46 / .22); }
.rows li:first-child::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
box-shadow: inset 0 0 0 1px rgb(215 255 46 / .55), 0 0 28px -6px rgb(215 255 46 / .45); }
.rows .nm { display: grid; min-width: 0; color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rows .nm small { color: var(--muted); font-size: 11.5px; font-weight: 500; }
.rows .ls { color: var(--soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rows .gr { padding: 4px 8px; border-radius: 999px; color: #7dffb0; background: rgb(125 255 176 / .1); font-weight: 700; font-variant-numeric: tabular-nums; }
.rows .sc { height: 5px; border-radius: 5px; background: rgb(255 255 255 / .08); overflow: hidden; }
.rows .sc i { display: block; width: calc(var(--w) * 100%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--violet), #a892ff);
transform-origin: 0 50%; }
.pop { position: absolute; padding: 14px 16px; border-radius: 18px; }
.pop.chart { right: -22px; bottom: -40px; width: min(270px, 58%); }
.f-scout .feat-art { margin-bottom: 40px; } /* room for the two cards hanging below the window */
.pop.chart p { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pop.chart small { color: var(--muted); font-size: 11.5px; }
.pop.chart b { color: var(--acid); font: 700 24px/1 var(--display); }
.pop.chart svg { display: block; width: 100%; height: 72px; margin-top: 8px; overflow: visible; }
.pop.chart .line { fill: none; stroke: var(--acid); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 330;
}
.pop.chart .area { fill: url(#fx-area); }
.pop.chart .tip { fill: var(--acid); }
.pop.mail { left: -24px; bottom: -64px; display: flex; align-items: center; gap: 12px; }
.pop.mail .tick { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #0b0a10; background: var(--acid);
box-shadow: 0 0 24px rgb(215 255 46 / .5); font: 800 15px/1 var(--body); }
.pop.mail span:last-child { display: grid; gap: 3px; color: var(--ink); font: 650 13.5px/1.2 var(--body); }
.pop.mail small { color: var(--muted); font-weight: 500; font-size: 11.5px; }
/* ==== 02 promo: the song's words, and three real edits Scoute made (features.js plays them only while seen) ==== */
.f-promo .feat-art { display: grid; gap: 22px; justify-items: center; }
.lyric { width: min(430px, 100%); padding: 14px 18px 16px; border-radius: 18px; }
.lyric small { color: var(--muted); font: 600 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.lyric p { margin-top: 10px; display: grid; gap: 3px; color: var(--ink); font: 500 16px/1.45 var(--body); }
.lyric .ln { display: block; white-space: nowrap; }
.mini-phones { display: flex; justify-content: center; align-items: flex-end; gap: clamp(10px, 2vw, 24px); }
.mini { margin: 0; display: grid; gap: 12px; justify-items: center; }
.mini .scr { position: relative; width: clamp(96px, 12.5vw, 168px); aspect-ratio: 9 / 19.5; border-radius: clamp(16px, 2vw, 24px); overflow: hidden;
isolation: isolate; background: #0d0b14; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16), 0 0 0 5px #15131d, 0 0 0 6px rgb(255 255 255 / .12),
0 30px 60px -24px rgb(0 0 0 / .9), 0 0 60px -20px rgb(122 92 255 / .5); }
.mini:nth-child(2) .scr { width: clamp(110px, 14.5vw, 196px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16), 0 0 0 5px #15131d,
0 0 0 6px rgb(255 255 255 / .12), 0 30px 60px -24px rgb(0 0 0 / .9), 0 0 70px -16px rgb(215 255 46 / .4); }
.mini figcaption { display: grid; gap: 4px; justify-items: center; color: var(--ink); font: 650 13px/1 var(--body); }
.mini figcaption small { color: var(--muted); font-weight: 500; font-size: 11.5px; }
.mini .scr video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* ==== 03 the money: the reports come in, the quarters grow, each artist's share ==== */
.files { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 14px; }
.file { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; border-radius: 12px; color: var(--soft); font: 600 12.5px/1 var(--body);
background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }
.file i { padding: 5px 6px; border-radius: 6px; color: #0b0a10; background: var(--acid); font: 800 9.5px/1 var(--body); font-style: normal; letter-spacing: .04em; }
.file:nth-child(2) i { background: #9a82ff; }
.file:nth-child(3) i { background: #ff7aa8; }
.ledger { padding: 20px; }
.ledger .total { display: grid; gap: 6px; }
.ledger .total small { color: var(--muted); font-size: 12.5px; }
.ledger .total b { color: var(--ink); font: 700 clamp(30px, 3.6vw, 44px)/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.ledger .total b span { color: var(--acid); }
.bars { margin-top: 18px; height: 128px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: end; }
.bars span { display: grid; gap: 8px; justify-items: center; align-content: end; height: 100%; }
.bars i { display: block; width: 100%; height: calc(var(--h) * 100px); border-radius: 10px 10px 4px 4px; transform-origin: 50% 100%;
background: linear-gradient(180deg, rgb(154 130 255 / .9), rgb(122 92 255 / .35)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .3); }
.bars span:last-child i { background: linear-gradient(180deg, var(--acid), rgb(215 255 46 / .35)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 0 30px -6px rgb(215 255 46 / .5); }
.bars small { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.shares { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 6px; }
.shares li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px;
background: rgb(255 255 255 / .03); color: var(--ink); font: 600 13px/1.25 var(--body); }
.shares li span { display: grid; min-width: 0; }
.shares li small { color: var(--muted); font-weight: 500; font-size: 11.5px; }
.shares li b { font-variant-numeric: tabular-nums; }
.pop.link { right: -18px; bottom: -30px; display: flex; align-items: center; gap: 10px; font: 650 13px/1.2 var(--body); color: var(--ink); }
.pop.link i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgb(122 92 255 / .3); color: #cbbfff; font-style: normal; }
.pop.link small { display: block; color: var(--muted); font-weight: 500; font-size: 11.5px; }
/* ==== 04 the team: the board a deal crosses, today's tasks, the bot's morning message ==== */
.board { padding: 14px; --g: 8px; }
.board .lanes { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); }
.lane-h { height: 14px; padding: 2px 3px 0; color: var(--muted); font: 650 10px/1 var(--body); letter-spacing: .1em; text-transform: uppercase;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lane { display: grid; gap: 8px; align-content: start; min-height: 168px; padding: 6px; border-radius: 12px; background: rgb(255 255 255 / .025); }
.lane .slot { height: 54px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07); background: rgb(255 255 255 / .015); }
.deal-c { display: grid; gap: 4px; padding: 9px; border-radius: 10px; background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07);
font: 500 11px/1.25 var(--body); color: var(--muted); min-width: 0; }
.deal-c b { color: var(--ink); font-weight: 650; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deal-c.late { box-shadow: inset 0 0 0 1px rgb(255 140 90 / .45); }
.deal-c.late small { color: #ffa47a; }
.mover { position: absolute; left: 6px; top: 28px; width: calc((100% - 3 * var(--g)) / 4 - 12px); height: 54px; z-index: 2;
background: rgb(122 92 255 / .3); box-shadow: inset 0 0 0 1px rgb(154 130 255 / .6), 0 16px 30px -12px rgb(0 0 0 / .8); }
.mover small { color: #cbbfff; }
.team-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px; margin-top: 12px; }
.todo { padding: 14px 16px; }
.todo-h, .tg-head b { color: var(--ink); font: 650 13px/1 var(--body); }
.todo ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.todo li { display: flex; align-items: center; gap: 10px; color: var(--soft); font: 500 12.5px/1.3 var(--body); }
.todo li i { position: relative; flex: none; width: 18px; height: 18px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .3); }
.todo li i::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--acid); opacity: 0; }
.todo li i::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #0b0a10; border-width: 0 2px 2px 0;
transform: rotate(45deg); opacity: 0; }
.todo li span { position: relative; }
.todo li span::after { content: ""; position: absolute; left: 0; right: 0; top: 52%; height: 1px; background: var(--muted); transform: scaleX(0); transform-origin: 0 50%; }
.tg { display: grid; gap: 10px; align-content: start; padding: 14px; }
.tg-head { display: flex; align-items: center; gap: 10px; }
.tg-head span { display: grid; gap: 3px; }
.tg-head small { color: var(--muted); font: 500 11px/1 var(--body); }
.tg-head time { margin-left: auto; color: var(--muted); font: 500 11px/1 var(--body); }
.tg-av { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--acid); font-style: normal;
background: linear-gradient(140deg, #7a5cff, #3b2a99); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); }
.tg-av svg { width: 14px; height: 14px; }
.tg-msg { display: grid; gap: 8px; min-width: 0; padding: 10px 12px; border-radius: 4px 14px 14px 14px; background: rgb(255 255 255 / .06); }
.tg-msg p { color: var(--soft); font: 500 12.5px/1.4 var(--body); }
.tg-msg .tg-btn { justify-self: start; padding: 7px 12px; border-radius: 9px; color: #cbbfff; background: rgb(122 92 255 / .25); font: 650 12px/1 var(--body); }
/* ==== the film: Scoute Passport, played on a press (features.js) ==== */
.watch { max-width: 1100px; margin: 0 auto; padding: clamp(84px, 14vh, 150px) var(--gutter) 0; display: grid; gap: 28px; justify-items: center;
text-align: center; }
.watch-head { display: grid; justify-items: center; }
.watch h2 { margin-top: 18px; color: var(--ink); font: 700 clamp(36px, 4.6vw, 66px)/.95 var(--display); text-transform: uppercase; letter-spacing: -.005em;
text-wrap: balance; }
.watch h2 em { font-style: normal; color: var(--acid); text-shadow: 0 0 50px rgb(215 255 46 / .25); }
.watch .feat-sub { margin-left: auto; margin-right: auto; }
.watch-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #000;
box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1), 0 30px 70px -30px rgb(0 0 0 / .9), 0 0 80px -30px rgb(122 92 255 / .5); }
.watch-video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.watch-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 18px; border: 0; cursor: pointer;
color: var(--ink); font: 650 19px/1.1 var(--body); text-align: left;
background: radial-gradient(70% 70% at 50% 50%, rgb(6 5 9 / .05), rgb(6 5 9 / .5)); -webkit-tap-highlight-color: transparent; }
.watch-play[hidden] { display: none; }
.watch-icon { position: relative; width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; color: #0b0a10; background: var(--acid);
box-shadow: 0 16px 40px -10px rgb(215 255 46 / .6); transition: transform .2s var(--ease); }
.watch-icon::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; box-shadow: 0 0 0 2px rgb(215 255 46 / .5); opacity: 0; }
.watch-icon svg { width: 28px; height: 28px; margin-left: 4px; }
.watch-play > span:last-child { display: grid; gap: 5px; text-shadow: 0 2px 12px rgb(0 0 0 / .6); }
.watch-play small { color: var(--soft); font-weight: 500; font-size: 13px; }
@media (hover: hover) and (pointer: fine) { .watch-play:hover .watch-icon { transform: scale(1.06); } }
.watch-play:focus-visible .watch-icon { outline: 3px solid var(--ink); outline-offset: 5px; }
.motion .watch.on .watch-icon::after { animation: ring 2.4s ease-out infinite; }
@keyframes ring { 0% { opacity: .8; transform: scale(.9); } 70%, 100% { opacity: 0; transform: scale(1.35); } }
.motion .watch-head > *, .motion .watch-frame { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .8s var(--ease), transform 1s var(--ease); }
.motion .watch-head > :nth-child(2) { transition-delay: .08s; }
.motion .watch-head > :nth-child(3) { transition-delay: .16s; }
.motion .watch-frame { transition-delay: .3s; }
.motion .watch.in .watch-head > *, .motion .watch.in .watch-frame { opacity: 1; transform: none; }
@media (max-width: 720px) {
.watch-frame { aspect-ratio: 9 / 16; width: min(100%, calc(76svh * 9 / 16)); border-radius: 26px; }
.watch-play { flex-direction: column; text-align: center; gap: 14px; }
.watch-play > span:last-child { justify-items: center; }
}
/* ==== the door again ==== */
.finale { max-width: 920px; margin: 0 auto; padding: clamp(96px, 16vh, 170px) var(--gutter) clamp(56px, 9vh, 100px); display: grid; justify-items: center;
gap: 18px; text-align: center; }
.finale h2 { font: 700 clamp(46px, 7.4vw, 104px)/.9 var(--display); }
.finale .feat-sub { margin-top: 0; }
.finale-door { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; }
.btn-glass { color: var(--ink); background: rgb(255 255 255 / .06); box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), inset 0 0 0 1px rgb(255 255 255 / .12); }
@media (hover: hover) and (pointer: fine) { .btn-glass:hover { background: rgb(255 255 255 / .1); } }
.finale .ask { margin-top: 2px; }
/* ==== the motion ==== */
.motion .feat-copy > *, .motion .finale > * { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .8s var(--ease), transform 1s var(--ease); }
.motion .feat-copy > :nth-child(2), .motion .finale > :nth-child(2) { transition-delay: .08s; }
.motion .feat-copy > :nth-child(3), .motion .finale > :nth-child(3) { transition-delay: .16s; }
.motion .feat-copy > :nth-child(4), .motion .finale > :nth-child(4) { transition-delay: .24s; }
.motion .in .feat-copy > *, .motion .finale.in > * { opacity: 1; transform: none; }
.motion .feat-art > *, .motion .feat-fine { opacity: 0; transform: translate3d(0, 36px, 0) scale(.98);
transition: opacity .9s var(--ease) .15s, transform 1.1s var(--ease) .15s; }
.motion .feat-art > :nth-child(2) { transition-delay: .5s; }
.motion .feat-art > :nth-child(3) { transition-delay: .8s; }
.motion .art-in .feat-art > *, .motion .art-in .feat-fine { opacity: 1; transform: none; }
/* the loops wait while their screen is away */
.feat:not(.on) *, .feat:not(.on) *::after { animation-play-state: paused !important; }
/* 01 */
.motion .f-scout .rows li { opacity: 0; transform: translate3d(36px, 0, 0); transition: opacity .6s var(--ease), transform .8s var(--ease);
transition-delay: calc(.45s + var(--i) * .12s); }
.motion .f-scout.art-in .rows li { opacity: 1; transform: none; }
.motion .f-scout .rows .sc i { transform: scaleX(0); transition: transform 1.2s var(--ease) calc(.8s + var(--i) * .12s); }
.motion .f-scout.art-in .rows .sc i { transform: none; }
.motion .f-scout .rows .gr { opacity: 0; transform: scale(.6); transition: opacity .4s ease, transform .6s cubic-bezier(.3, 1.6, .5, 1);
transition-delay: calc(1.1s + var(--i) * .12s); }
.motion .f-scout.art-in .rows .gr { opacity: 1; transform: none; }
.motion .f-scout .chart .line { stroke-dashoffset: 330; transition: stroke-dashoffset 1.8s cubic-bezier(.45, 0, .2, 1) 1.1s; }
.motion .f-scout.art-in .chart .line { stroke-dashoffset: 0; }
.motion .f-scout .chart .area, .motion .f-scout .chart .tip { opacity: 0; transition: opacity .9s ease 2.4s; }
.motion .f-scout.art-in .chart .area, .motion .f-scout.art-in .chart .tip { opacity: 1; }
.motion .f-scout.on .rows li:first-child::after { animation: newrow 3.4s ease-in-out 2.6s infinite; }
.motion .f-scout.on .chart .tip { animation: ping 2.2s ease-out 3s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes newrow { 50% { opacity: 1; } }
@keyframes ping { 0% { transform: scale(1); } 40% { transform: scale(1.8); opacity: .5; } 70%, 100% { transform: scale(1); opacity: 1; } }
/* 02 */
.motion .f-promo .lyric .ln { clip-path: inset(0 100% 0 0); }
.motion .f-promo.art-in .lyric .ln { animation: type .9s steps(24, end) calc(.7s + var(--i) * .85s) forwards; }
@keyframes type { to { clip-path: inset(0 0 0 0); } }
.motion .f-promo .mini { opacity: 0; transform: translate3d(0, 48px, 0) rotateX(14deg); transition: opacity .9s var(--ease), transform 1.1s var(--ease);
transition-delay: calc(2.6s + var(--i) * .16s); }
.motion .f-promo.art-in .mini { opacity: 1; transform: none; }
/* 03 */
.motion .f-money.on .file { animation: drop 4.8s var(--ease) infinite; animation-delay: calc(1.4s + var(--i) * 1.6s); }
@keyframes drop { 0% { opacity: 1; transform: none; } 30% { opacity: 1; transform: translate3d(0, -6px, 0); }
48% { opacity: 0; transform: translate3d(0, 46px, 0) scale(.7); } 49% { opacity: 0; transform: translate3d(0, -20px, 0); }
70%, 100% { opacity: 1; transform: none; } }
.motion .f-money .bars i { transform: scaleY(0); transition: transform 1.2s cubic-bezier(.2, .9, .25, 1); transition-delay: calc(1s + var(--i) * .15s); }
.motion .f-money.art-in .bars i { transform: none; }
.motion .f-money .shares li { opacity: 0; transform: translate3d(-24px, 0, 0); transition: opacity .6s var(--ease), transform .8s var(--ease);
transition-delay: calc(1.7s + var(--i) * .14s); }
.motion .f-money.art-in .shares li { opacity: 1; transform: none; }
/* 04 */
.motion .f-team.on .mover { animation: travel 10s var(--ease) 1.2s infinite; }
@keyframes travel {
0%, 12% { opacity: 1; transform: none; }
18% { transform: translate3d(calc(50% + 10px), -8px, 0) rotate(-3deg) scale(1.05); }
23%, 37% { transform: translate3d(calc(100% + 12px + var(--g)), 0, 0); }
43% { transform: translate3d(calc(150% + 22px + var(--g)), -8px, 0) rotate(-3deg) scale(1.05); }
48%, 62% { transform: translate3d(calc(200% + 24px + 2 * var(--g)), 0, 0); }
68% { transform: translate3d(calc(250% + 34px + 2 * var(--g)), -8px, 0) rotate(-3deg) scale(1.05); }
73%, 88% { opacity: 1; transform: translate3d(calc(300% + 36px + 3 * var(--g)), 0, 0); }
94% { opacity: 0; transform: translate3d(calc(300% + 36px + 3 * var(--g)), 0, 0); }
95% { opacity: 0; transform: none; }
100% { opacity: 1; transform: none; } }
.motion .f-team.on .todo li i::before, .motion .f-team.on .todo li i::after { animation: tick 7.5s ease infinite; animation-delay: calc(1.6s + var(--i) * 1.2s); }
.motion .f-team.on .todo li span { animation: done 7.5s ease infinite; animation-delay: calc(1.6s + var(--i) * 1.2s); }
.motion .f-team.on .todo li span::after { animation: strike 7.5s ease infinite; animation-delay: calc(1.6s + var(--i) * 1.2s); }
@keyframes tick { 0%, 8% { opacity: 0; } 12%, 84% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes done { 0%, 10% { opacity: 1; } 14%, 84% { opacity: .55; } 90%, 100% { opacity: 1; } }
@keyframes strike { 0%, 10% { transform: scaleX(0); } 16%, 84% { transform: scaleX(1); } 90%, 100% { transform: scaleX(0); } }
/* ==== narrower screens ==== */
@media (max-width: 960px) {
.feat, .feat.flip { grid-template-columns: minmax(0, 1fr); }
.feat.flip .feat-copy { order: 0; }
.pop.chart { right: 8px; bottom: -36px; }
.pop.mail { left: 8px; bottom: -30px; }
.f-scout .feat-art { margin-bottom: 40px; }
.pop.link { right: 6px; bottom: -28px; }
.f-money .feat-art { margin-bottom: 30px; }
}
@media (max-width: 560px) {
.rows li { grid-template-columns: 30px minmax(0, 1fr) auto 40px; gap: 8px; }
.rows .ls { display: none; }
.av { width: 30px; height: 30px; font-size: 13px; }
.win-tabs > :nth-child(n+4) { display: none; }
.win-stats b { font-size: 22px; }
.pop.chart { position: relative; right: auto; bottom: auto; width: 82%; margin: -22px 0 0 auto; } /* under the list, not over it */
.f-scout .feat-art { margin-bottom: 0; }
.pop.mail { display: none; }
.mini-phones { gap: 8px; }
.mini .scr { width: 27vw; }
.mini:nth-child(2) .scr { width: 31vw; }
.mini figcaption { font-size: 11.5px; }
.lyric p { font-size: 15px; }
.board { --g: 6px; padding: 10px; }
.lane { padding: 4px; min-height: 150px; }
.mover { left: 4px; top: 26px; width: calc((100% - 3 * var(--g)) / 4 - 8px); }
.deal-c { padding: 7px; }
.deal-c b { font-size: 11px; }
.team-row { grid-template-columns: minmax(0, 1fr); }
.feat-points li { font-size: 15px; }
/* the board's card on a phone: the same steps, its lane's padding 4px each side */
.motion .f-team.on .mover { animation-name: travel-sm; }
}
@keyframes travel-sm {
0%, 12% { opacity: 1; transform: none; }
18% { transform: translate3d(calc(50% + 7px), -8px, 0) rotate(-3deg) scale(1.05); }
23%, 37% { transform: translate3d(calc(100% + 8px + var(--g)), 0, 0); }
43% { transform: translate3d(calc(150% + 15px + var(--g)), -8px, 0) rotate(-3deg) scale(1.05); }
48%, 62% { transform: translate3d(calc(200% + 16px + 2 * var(--g)), 0, 0); }
68% { transform: translate3d(calc(250% + 23px + 2 * var(--g)), -8px, 0) rotate(-3deg) scale(1.05); }
73%, 88% { opacity: 1; transform: translate3d(calc(300% + 24px + 3 * var(--g)), 0, 0); }
94% { opacity: 0; transform: translate3d(calc(300% + 24px + 3 * var(--g)), 0, 0); }
95% { opacity: 0; transform: none; }
100% { opacity: 1; transform: none; } }