/* Kompetencje: bento z ilustracjami SVG (template-parts/kompetencje.php). Scope .cap.
   Stan bazowy ilustracji = skomponowana klatka końcowa (bez JS, reduced motion).
   Ruch żyje tylko pod .cap-armed (dodaje c-kompetencje.js) i gra, gdy kafel ma .is-inview. */

/*--------------------------------------------------------------
# Siatka i kafle
--------------------------------------------------------------*/
.cap__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.cap .cap__tile { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.cap__tile--wide { grid-column: span 2; }
.cap__tile:focus-visible { outline: 2px solid var(--t1); outline-offset: 2px; }

.cap__art { position: relative; flex: none; height: 220px; background: var(--bg-elev-2); border-bottom: 1px solid var(--line); }
.cap__body { display: flex; flex-direction: column; flex: 1; padding: var(--sp-5) var(--sp-6) var(--sp-6); }
.cap .cap__title {
	display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
	font-size: 1.25rem; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; margin-bottom: var(--sp-2);
}
.cap__go::after { content: '→'; display: inline-block; color: var(--t3); transition: transform .16s var(--ease), color .16s var(--ease); }
.cap__tile:hover .cap__go::after { color: var(--t1); transform: translateX(2px); }
.cap__tile--wide .cap__body p { max-width: 560px; }

.cap__also { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-5); margin-top: var(--sp-5); font-size: var(--fs-300); color: var(--t3); }

/*--------------------------------------------------------------
# Manifest na atramencie: pasek eksportu i CTA (bez kadru: wizjer ma hero i zamknięcie)
--------------------------------------------------------------*/
.cap .cap__ink {
	position: relative; justify-content: space-between; gap: var(--sp-8);
	padding: var(--sp-7) var(--sp-8) var(--sp-7);
	background: var(--ink); border-color: var(--ink); color: var(--white);
}

/* Pasek eksportu: dochodzi do 100% i zmienia napis na „Gotowe”. Stan bazowy = gotowe. */
.cap__prog {
	position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .6rem var(--sp-4);
	font-size: var(--fs-200); font-weight: 500; line-height: 1.2; color: var(--ink-t2);
}
.cap__prog-lbl { display: grid; }
.cap__prog-lbl > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: .4rem; }
.cap__prog-a { opacity: 0; }
.cap__prog-b { color: var(--white); }
.cap__prog-b svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.cap__prog-val { color: var(--white); font-weight: 600; }
.cap__prog-bar { grid-column: 1 / -1; position: relative; height: 2px; background: var(--ink-line); overflow: hidden; }
.cap__prog-bar i { position: absolute; inset: 0; background: var(--white); transform-origin: 0 50%; }

.cap__ink-body { position: relative; max-width: 600px; }
.cap .cap__ink-title { font-size: var(--fs-h1); font-weight: 600; line-height: 1.04; letter-spacing: -.035em; color: var(--white); margin: 0 0 var(--sp-4); }
.cap .cap__ink p { color: var(--ink-t2); font-size: var(--fs-400); line-height: 1.6; }
.cap__ink-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-6); margin-top: var(--sp-6); }
.cap__tel { display: inline-flex; align-items: center; min-height: var(--tap); font-size: var(--fs-300); font-weight: 500; color: var(--ink-t2); transition: color .16s var(--ease); }
.cap__tel:hover { color: var(--white); }
.cap__tel:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; border-radius: var(--radius-sm); }
.cap .cap__ink .cap__note { margin-top: var(--sp-3); font-size: var(--fs-200); }

/*--------------------------------------------------------------
# Ilustracje: obrys 1,5 px, kolor tylko z tokenów
--------------------------------------------------------------*/
.cap-svg { display: block; width: 100%; height: 100%; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cap-k1 { stroke: var(--t1); }
.cap-k2 { stroke: var(--line-strong); }
.cap-k3 { stroke: var(--t3); }
.cap-kl { stroke: var(--line); }
.cap-kw { stroke: var(--bg); }
.cap-f0 { fill: var(--bg); }
.cap-f2 { fill: var(--bg-elev-2); }
.cap-f3 { fill: var(--bg-3); }
.cap-fl { fill: var(--line-strong); }
.cap-fi { fill: var(--t1); }
.cap-fr { fill: var(--rec); }
.cap-svg text { font-family: var(--font); font-size: 8px; font-weight: 500; fill: var(--t3); stroke: none; font-variant-numeric: tabular-nums; }
.cap-svg .cap-tx1 { fill: var(--t1); }
.cap-svg .cap-txw { fill: var(--bg); }
.cap-svg .cap-t-xs { font-size: 7px; }
.cap-svg .cap-t-s { font-size: 10px; }
.cap-svg .cap-t-b { font-weight: 600; }
.cap-svg .cap-t-p { font-size: 10.5px; font-weight: 450; }

/* Klatka końcowa: to, czego nie widać na stopklatce. */
.cap-f-sc2, .cap-f-sc3, .cap-m-flash, .cap-m-rip, .cap-w-rip, .cap-ai-rip, .cap-ai-wait { opacity: 0; }
/* AI: klatka końcowa to podpowiedź zatwierdzona przez zespół: ciągła ramka, bez kursora tekstowego. */
.cap-ai-dash, .cap-ai-bar { opacity: 0; }
.cap-f-ph { transform: translateX(234px); }
/* Meta: klatka końcowa to budżet przeniesiony na wersję B (udział w torze: A 14%, B 78%, C 8%). */
.cap-m-b0 { transform: translateX(-101.5px); }
.cap-m-b1 { transform: translateX(-26px); }
.cap-m-b2 { transform: translateX(-108.5px); }
/* Dymek wiadomości rośnie od ogonka. */
.cap-m-q { transform-box: fill-box; transform-origin: 25% 100%; }
.cap-f-wave, .cap-m-rip, .cap-w-rip, .cap-ai-ok, .cap-ai-rip, .cap-ai-t3, .cap-s-h { transform-box: fill-box; transform-origin: center; }
/* AI: skreślenie i pasek nauki rosną od lewej, zasłona dopisku zwęża się w prawo (tekst wpisuje się od lewej). */
.cap-ai-del, .cap-ai-lrn { transform-box: fill-box; transform-origin: 0 50%; }
.cap-ai-typ { transform: scaleX(0); transform-box: fill-box; transform-origin: 100% 50%; }

/*--------------------------------------------------------------
# Tablet i telefon
--------------------------------------------------------------*/
@media (max-width: 900px) {
	.cap__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* Strony i manifest obok siebie, żeby nie zostawała dziura w siatce. */
	.cap__tile--wide.cap__ink { grid-column: auto; }
	.cap .cap__ink { padding: var(--sp-6); }
}
@media (max-width: 600px) {
	.cap__grid { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
	.cap__tile--wide { grid-column: auto; }
	.cap__art { height: 184px; }
	.cap__body { padding: 1.25rem 1.25rem 1.5rem; }
	.cap .cap__title { font-size: 1.125rem; }
	.cap .cap__ink { gap: var(--sp-7); padding: var(--sp-6) var(--sp-5) 2.25rem; }
	.cap .cap__ink-title { font-size: 2.25rem; }
	.cap__ink-cta .btn { flex: 1 1 100%; }
	.cap__tel { justify-content: center; flex: 1 1 100%; }
	.cap__also { gap: 0 var(--sp-4); }
	.cap__also > span { flex: 1 1 100%; margin-top: var(--sp-2); }
}

/* Boki kafla AI (karty od x = -128 do 488) stoją tylko w kadrze, który mieści je w całości
   z zapasem 12 jednostek z każdej strony: 640 jednostek viewBox przy wysokości 220. Kadr skaluje
   ilustrację wysokością, więc warunkiem jest proporcja kadru, a nie szerokość ekranu: jeden próg
   działa na telefonie, tablecie (siatka 2 kolumn) i wąskim desktopie (kafel na 2 z 3 kolumn).
   Poniżej zostałyby skrawki kart. Kontener size wymaga stałej wysokości .cap__art. */
.cap-ai-art { container-type: size; }
@container (max-aspect-ratio: 640 / 220) { .cap-ai .cap-ai-side { display: none; } }
@supports not (container-type: size) { .cap-ai .cap-ai-side { display: none; } }

/*--------------------------------------------------------------
# Ruch (tylko bez reduced motion i po uzbrojeniu przez JS)
--------------------------------------------------------------*/
@media (prefers-reduced-motion: no-preference) {
	/* 1. Montaż: głowica jedzie po osi, kadr zmienia sceny, fala oddycha. */
	.cap-armed .cap-f-ph { animation: cap-f-ph 9s linear infinite both; }
	.cap-armed .cap-f-sc1 { animation: cap-f-sc1 9s linear infinite both; }
	.cap-armed .cap-f-sc2 { animation: cap-f-sc2 9s linear infinite both; }
	.cap-armed .cap-f-sc3 { animation: cap-f-sc3 9s linear infinite both; }
	.cap-armed .cap-f-pan { animation: cap-f-pan 9s linear infinite both; }
	.cap-armed .cap-f-wave { animation: cap-wave 1.2s ease-in-out infinite alternate both; }
	.cap-armed .cap-f-wave1 { animation-duration: .9s; animation-delay: -.4s; }
	.cap-armed .cap-f-wave2 { animation-duration: 1.5s; animation-delay: -.8s; }
	.cap-armed .cap-f-rec { animation: rec-blink 1.6s steps(1, end) infinite; }
	.cap-armed .cap-roll { animation: cap-roll 10s steps(10) infinite; }

	/* 2. Meta Ads: kursor klika reklamę wersji B, przychodzą wiadomości, budżet przechodzi na B. */
	.cap-armed .cap-m-cur { animation: cap-m-cur 7s var(--ease) infinite both; }
	.cap-armed .cap-m-rip { animation: cap-m-rip 7s ease-out infinite both; }
	.cap-armed .cap-m-flash { animation: cap-m-flash 7s linear infinite both; }
	.cap-armed .cap-m-q1 { animation: cap-m-q1 7s var(--ease-out) infinite both; }
	.cap-armed .cap-m-q2 { animation: cap-m-q2 7s var(--ease-out) infinite both; }
	.cap-armed .cap-m-q3 { animation: cap-m-q3 7s var(--ease-out) infinite both; }
	.cap-armed .cap-m-b0 { animation: cap-m-b0 7s var(--ease) infinite both; }
	.cap-armed .cap-m-b1 { animation: cap-m-b1 7s var(--ease) infinite both; }
	.cap-armed .cap-m-b2 { animation: cap-m-b2 7s var(--ease) infinite both; }
	.cap-armed .cap-m-win { animation: cap-m-win 7s linear infinite both; }
	/* Pierwsze wejście w kadr zaczyna się tuż przed kliknięciem, przy równym podziale budżetu.
	   Ta sama faza dla wszystkich animacji 7 s, więc zostają zgrane także po pauzie. */
	.cap-armed .cap-m-cur, .cap-armed .cap-m-rip, .cap-armed .cap-m-flash, .cap-armed .cap-m-q,
	.cap-armed .cap-m-b0, .cap-armed .cap-m-b1, .cap-armed .cap-m-b2, .cap-armed .cap-m-win { animation-delay: -1.6s; }

	/* 3. Social: feed przewija się z przystankami, reakcje wypływają. */
	.cap-armed .cap-s-feed { animation: cap-s-feed 6s var(--ease) infinite both; }
	.cap-armed .cap-s-b { animation: cap-s-b 6s var(--ease-out) infinite both; }
	.cap-armed .cap-s-b2 { animation-delay: .7s; }
	.cap-armed .cap-s-b3 { animation-delay: 1.4s; }
	.cap-armed .cap-s-h { animation: cap-s-h 3s ease-out infinite both; }
	.cap-armed .cap-s-h2 { animation-delay: -1s; }
	.cap-armed .cap-s-h3 { animation-delay: -2s; }
	.cap-armed .cap-s-h4 { animation-delay: -.5s; }

	/* 4. AI: w dokumencie stoi podpowiedź, zespół skreśla, dopisuje po swojemu i zatwierdza.
	   Na bokach nowe narzędzie przechodzi test, pasek nauki rośnie. */
	.cap-armed .cap-ai-hand { animation: cap-ai-hand 9s var(--ease) infinite both; }
	.cap-armed .cap-ai-clk { animation: cap-ai-clk 9s var(--ease) infinite both; }
	.cap-armed .cap-ai-del { animation: cap-ai-del 9s var(--ease) infinite both; }
	.cap-armed .cap-ai-typ { animation: cap-ai-typ 9s linear infinite both; }
	.cap-armed .cap-ai-bar { animation: cap-ai-bar 9s linear infinite both; }
	.cap-armed .cap-ai-own, .cap-armed .cap-ai-solid { animation: cap-ai-on 9s linear infinite both; }
	.cap-armed .cap-ai-dash { animation: cap-ai-off 9s linear infinite both; }
	.cap-armed .cap-ai-ok { animation: cap-ai-ok 9s var(--ease-out) infinite both; }
	.cap-armed .cap-ai-rip { animation: cap-ai-rip 9s ease-out infinite both; }
	.cap-armed .cap-ai-wait { animation: cap-ai-wait 9s linear infinite both; }
	.cap-armed .cap-ai-spin { animation: cap-ai-spin 1.2s linear infinite; }
	.cap-armed .cap-ai-t3 { animation: cap-ai-t3 9s var(--ease-out) infinite both; }
	.cap-armed .cap-ai-lrn { animation: cap-ai-lrn 9s var(--ease) infinite both; }
	/* Pierwsze wejście w kadr: podpowiedź już stoi, kursor zespołu jedzie do niej.
	   Ta sama faza dla wszystkich animacji 9 s, więc zostają zgrane także po pauzie. */
	.cap-armed .cap-ai-hand, .cap-armed .cap-ai-clk, .cap-armed .cap-ai-del, .cap-armed .cap-ai-typ, .cap-armed .cap-ai-bar,
	.cap-armed .cap-ai-own, .cap-armed .cap-ai-solid, .cap-armed .cap-ai-dash, .cap-armed .cap-ai-ok, .cap-armed .cap-ai-rip, .cap-armed .cap-ai-wait, .cap-armed .cap-ai-t3,
	.cap-armed .cap-ai-lrn { animation-delay: -.9s; }

	/* 5. Strony: bloki układu wskakują, klik w CTA, przychodzi zapytanie. */
	/* Start z przesunięciem fazy: pierwsze bloki stoją od razu, okno przeglądarki nie jest puste. */
	.cap-armed .cap-w-b { animation: cap-w-b 8s var(--ease-out) infinite both; animation-delay: calc(var(--i, 0) * 180ms - .7s); }
	.cap-armed .cap-w-cur { animation: cap-w-cur 8s var(--ease) -.7s infinite both; }
	.cap-armed .cap-w-rip { animation: cap-w-rip 8s ease-out -.7s infinite both; }
	.cap-armed .cap-w-toast { animation: cap-w-toast 8s var(--ease-out) -.7s infinite both; }

	/* 6. Manifest: eksport dochodzi do 100% i zmienia napis na „Gotowe". */
	.cap-armed .cap__prog-bar i { animation: cap-pg-bar 8s var(--ease) infinite both; }
	.cap-armed .cap__prog-a { animation: cap-pg-a 8s linear infinite both; }
	.cap-armed .cap__prog-b, .cap-armed .cap__prog-val { animation: cap-pg-b 8s linear infinite both; }

	/* Poza kadrem wszystko stoi. */
	.cap-armed .cap__tile:not(.is-inview),
	.cap-armed .cap__tile:not(.is-inview) * { animation-play-state: paused; }
}

@keyframes cap-roll { to { transform: translateY(-100px); } }
@keyframes cap-wave { from { transform: scaleY(1); } to { transform: scaleY(.45); } }

@keyframes cap-f-ph { from { transform: translateX(150px); } to { transform: translateX(var(--cap-run, 330px)); } }
@keyframes cap-f-sc1 { 0%, 30% { opacity: 1; } 34%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes cap-f-sc2 { 0%, 30% { opacity: 0; } 34%, 63% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes cap-f-sc3 { 0%, 63% { opacity: 0; } 67%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cap-f-pan { 0% { transform: translateX(0); } 34% { transform: translateX(-18px); } 35% { transform: translateX(3px); } 100% { transform: translateX(0); } }

@keyframes cap-m-cur {
	0% { transform: translate(64px, 44px); opacity: 0; }
	8% { opacity: 1; }
	24% { transform: translate(0, 0); }
	27% { transform: scale(.85); }
	30%, 84% { transform: none; opacity: 1; }
	92%, 100% { transform: translate(64px, 44px); opacity: 0; }
}
@keyframes cap-m-rip { 0%, 26% { opacity: 0; transform: scale(.3); } 27% { opacity: .9; transform: scale(.3); } 42%, 100% { opacity: 0; transform: scale(1.7); } }
@keyframes cap-m-flash { 0%, 26% { opacity: 0; } 28% { opacity: .1; } 36%, 100% { opacity: 0; } }
/* Oś 7 s: kursor klika „Wyślij wiadomość" w reklamie B (27%), przy wersji B wyskakują po kolei
   trzy wiadomości (30 do 44%), potem budżet przechodzi na B: jej pasek rośnie i czernieje, A i C
   maleją (44 do 60%). Stop do 90%, na końcu pętli wiadomości gasną, a podział wraca do równego
   (-79 = jedna trzecia toru). Tylko transform i opacity. */
@keyframes cap-m-q1 { 0%, 30% { opacity: 0; transform: scale(.4); } 34%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes cap-m-q2 { 0%, 35% { opacity: 0; transform: scale(.4); } 39%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes cap-m-q3 { 0%, 40% { opacity: 0; transform: scale(.4); } 44%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes cap-m-b0 { 0%, 44% { transform: translateX(-79px); } 60%, 90% { transform: translateX(-101.5px); } 97%, 100% { transform: translateX(-79px); } }
@keyframes cap-m-b1 { 0%, 44% { transform: translateX(-79px); } 60%, 90% { transform: translateX(-26px); } 97%, 100% { transform: translateX(-79px); } }
@keyframes cap-m-b2 { 0%, 44% { transform: translateX(-79px); } 60%, 90% { transform: translateX(-108.5px); } 97%, 100% { transform: translateX(-79px); } }
@keyframes cap-m-win { 0%, 46% { opacity: 0; } 58%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } }

@keyframes cap-s-feed { 0%, 30% { transform: translateY(0); } 42%, 72% { transform: translateY(-102px); } 84%, 100% { transform: translateY(-204px); } }
@keyframes cap-s-b { 0% { opacity: 0; transform: translateX(10px); } 10%, 82% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: none; } }
@keyframes cap-s-h {
	0% { opacity: 0; transform: translateY(18px) scale(.6); }
	20% { opacity: 1; transform: translateY(0) scale(1); }
	70% { opacity: 1; }
	100% { opacity: 0; transform: translateY(-26px) scale(.9); }
}

/* Oś 9 s: kursor zespołu jedzie do zdania i skreśla „o świcie” (16 do 24%), zespół wpisuje
   „o zachodzie.” (27 do 45%), kursor tekstowy mruga raz i gaśnie, gdy kursor zespołu dochodzi do
   przycisku (58,5%), klik w zatwierdzenie (61%): tekst przechodzi na czarny, przerywana ramka
   przenika w ciągłą, na bokach narzędzie przechodzi test, a pasek nauki dochodzi do końca
   (62 do 68%). Stop do 89%, kursor zespołu schodzi pod podpowiedź, a stany cofają się krzyżowo
   (92 do 97%): ciągła ramka w przerywaną, czarny tekst w szary, skreślenie do zera, dopisek pod
   zasłonę, na bokach test i pasek nauki na start. Prostokąt podpowiedzi i kursor zespołu stoją
   przez całą pętlę, więc dokument nigdy nie jest pusty. Cofanie ma jedno tempo: przenikania
   liniowo, skreślenie, zasłona i pasek ease-in-out. */
/* Kursor zespołu jedzie do przycisku pod wierszem i dopiero przy nim w górę, a po zatwierdzeniu
   schodzi pod podpowiedź i stamtąd wraca do zdania, żeby strzałka i etykieta nie zasłaniały
   zdania ani kursora tekstowego. Klik ściska samą strzałkę, etykieta stoi. */
@keyframes cap-ai-hand {
	0%, 3% { transform: translate(0, 40px); }
	16% { transform: translate(-93px, 33px); }
	48% { transform: translate(-93px, 33px); animation-timing-function: ease-in; }
	54% { transform: translate(3px, 40px); animation-timing-function: ease-out; }
	58%, 89% { transform: none; }
	95%, 100% { transform: translate(0, 40px); }
}
@keyframes cap-ai-clk { 0%, 16% { transform: none; } 18% { transform: scale(.85); } 20%, 59% { transform: none; } 61% { transform: scale(.85); } 63%, 100% { transform: none; } }
@keyframes cap-ai-del { 0%, 18% { transform: scaleX(0); } 24%, 92% { transform: none; animation-timing-function: ease-in-out; } 97%, 100% { transform: scaleX(0); } }
@keyframes cap-ai-typ { 0%, 27% { transform: scaleX(1); animation-timing-function: steps(12, end); } 45%, 92% { transform: scaleX(0); animation-timing-function: ease-in-out; } 97%, 100% { transform: scaleX(1); } }
/* Kursor tekstowy: stały podczas pisania, jedno mrugnięcie w bezruchu (51 do 55%), gaśnie przed klikiem. */
@keyframes cap-ai-bar {
	0%, 24% { opacity: 0; transform: translateX(-66px); }
	25% { opacity: 1; transform: translateX(-66px); }
	27% { opacity: 1; transform: translateX(-66px); animation-timing-function: steps(12, end); }
	45% { opacity: 1; transform: none; animation-timing-function: steps(1, end); }
	51% { opacity: 0; animation-timing-function: steps(1, end); }
	55% { opacity: 1; animation-timing-function: steps(1, end); }
	58.5%, 100% { opacity: 0; transform: none; }
}
/* Zatwierdzenie: czarny tekst i ciągła ramka wchodzą, przerywana ramka schodzi (przenikanie).
   Na końcu pętli to samo w drugą stronę. */
@keyframes cap-ai-on { 0%, 62% { opacity: 0; } 68%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes cap-ai-off { 0%, 62% { opacity: 1; } 68%, 92% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes cap-ai-ok { 0%, 61% { opacity: 0; transform: scale(.6); } 64%, 92% { opacity: 1; transform: none; animation-timing-function: linear; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes cap-ai-rip { 0%, 61% { opacity: 0; transform: scale(.3); } 62% { opacity: .9; transform: scale(.3); } 76%, 100% { opacity: 0; transform: scale(1.7); } }
@keyframes cap-ai-wait { 0%, 64% { opacity: 1; } 67%, 92% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes cap-ai-spin { to { transform: rotate(360deg); } }
@keyframes cap-ai-t3 { 0%, 64% { opacity: 0; transform: scale(.6); } 68%, 92% { opacity: 1; transform: none; animation-timing-function: linear; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes cap-ai-lrn { 0%, 8% { transform: scaleX(.3); } 68%, 92% { transform: none; animation-timing-function: ease-in-out; } 97%, 100% { transform: scaleX(.3); } }

@keyframes cap-w-b { 0% { opacity: 0; transform: translateY(8px); } 8%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes cap-w-cur {
	0%, 22% { transform: translate(120px, 30px); opacity: 0; }
	28% { opacity: 1; }
	40% { transform: translate(0, 0); }
	43% { transform: scale(.85); }
	46%, 88% { transform: none; opacity: 1; }
	95%, 100% { transform: translate(120px, 30px); opacity: 0; }
}
@keyframes cap-w-rip { 0%, 42% { opacity: 0; transform: scale(.3); } 43% { opacity: .9; transform: scale(.3); } 58%, 100% { opacity: 0; transform: scale(1.7); } }
@keyframes cap-w-toast { 0%, 48% { opacity: 0; transform: translateY(12px); } 56%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }

@keyframes cap-pg-bar { 0%, 4% { transform: scaleX(0); opacity: 1; } 42%, 90% { transform: scaleX(1); opacity: 1; } 96% { transform: scaleX(1); opacity: 0; } 100% { transform: scaleX(0); opacity: 0; } }
@keyframes cap-pg-a { 0%, 42% { opacity: 1; } 45%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes cap-pg-b { 0%, 43% { opacity: 0; } 47%, 90% { opacity: 1; } 95%, 100% { opacity: 0; } }