/* =====================================================================
   Como funciona: as ilustrações dos 4 passos.
   Os desenhos (assets/img/passos/passo-1..4.svg) saem de ferramentas/desenhar-passos.py e vêm só com formas e
   classes; a cor é dos tokens do tema e o movimento é daqui.
   Cada cena é um laço curto que explica o passo (7 a 8,5 s). Fica parada até o gvsx.js pôr .is-playing: no desktop,
   o passo ativo com o palco na tela; no celular, a ilustração na tela. Ao entrar, recomeça do início.
   Com movimento reduzido, ou sem JavaScript, a cena fica parada num quadro do passo já feito (--freeze).
   Só transform e opacity animam; os checks se desenham pelo stroke-dashoffset (traço curto, custo baixo).
   ===================================================================== */

.gvsx-sketch { display: block; width: 100%; height: 100%; overflow: visible; }

/* traço de caneta */
.gvsx-sketch .a-k, .gvsx-sketch .a-k2, .gvsx-sketch .a-ak, .gvsx-sketch .a-hl, .gvsx-sketch .a-bar, .gvsx-sketch .a-chk { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.gvsx-sketch .a-k { stroke: var(--gvsx-text-2); stroke-width: 2.2; }
.gvsx-sketch .a-k2 { stroke: var(--gvsx-text-3); stroke-width: 2; }
.gvsx-sketch .a-fino { stroke-width: 1.5; }
.gvsx-sketch .a-ak { stroke: var(--gvsx-accent); stroke-width: 2.6; }
.gvsx-sketch .a-hl { stroke: var(--gvsx-text); stroke-width: 2.2; opacity: 0; }
/* linhas de texto: só a ideia de texto, sem letra */
.gvsx-sketch .a-bar { stroke: var(--gvsx-text-3); stroke-width: 6; opacity: 0.55; }
.gvsx-sketch .a-bar--tinta { stroke: var(--gvsx-text-2); opacity: 0.8; }
.gvsx-sketch .a-bar--fina { stroke-width: 4.5; }
.gvsx-sketch .a-bar--grossa { stroke-width: 9; }
.gvsx-sketch .a-bar--on { stroke: var(--gvsx-accent-ink); opacity: 0.75; }
.gvsx-sketch .a-chk { stroke: var(--gvsx-accent-ink); stroke-width: 3; stroke-dasharray: 1; }
.gvsx-sketch .a-hatch { stroke: var(--gvsx-accent-ink); stroke-width: 3.5; opacity: 0.18; }

/* superfícies */
.gvsx-sketch .a-f0 { fill: var(--gvsx-surface); }
.gvsx-sketch .a-f1 { fill: var(--gvsx-surface-2); }
.gvsx-sketch .a-f2 { fill: var(--gvsx-surface-3); }
.gvsx-sketch .a-af { fill: var(--gvsx-accent); }

.gvsx-sketch .a-mono { font-family: var(--gvsx-font-mono); font-size: 17px; font-weight: 500; fill: var(--gvsx-text); }
.gvsx-sketch .a-btn { font-family: var(--gvsx-font-display); font-size: 17px; font-weight: 700; fill: var(--gvsx-accent-text); }
.gvsx-sketch .a-btn--on { fill: var(--gvsx-accent-ink); }
.gvsx-sketch .a-cur__body { fill: var(--gvsx-text); stroke: var(--gvsx-surface); stroke-width: 1.6; stroke-linejoin: round; }

/* ---- o relógio: todas as peças de uma cena andam juntas, no mesmo laço ----
   Nota: o Chromium não aplica var() no animation-timing-function de um keyframe, então as curvas escritas nos
   keyframes abaixo ficam sem efeito e as peças andam em velocidade constante entre as pausas. É esse o ritmo aprovado
   pelo dono (24/09); escrever as curvas por extenso muda o movimento e só entra com o aval dele. */
.gvsx-sketch .an { animation-duration: var(--t); animation-iteration-count: infinite; animation-timing-function: linear; animation-fill-mode: both; animation-delay: var(--delay, 0s); animation-play-state: var(--play, paused); }
.gvsx-sketch.is-playing { --play: running; }
html:not(.gvsx-js) .gvsx-sketch { --delay: var(--freeze); }
@media (prefers-reduced-motion: reduce) {
	.gvsx-sketch, .gvsx-sketch.is-playing { --play: paused; --delay: var(--freeze); }
	/* o base.css encurta toda animação para 0,01 ms nesse modo; aqui o laço precisa da duração certa para o quadro
	   parado (--freeze) ser o do passo pronto, e não o fim do laço */
	.gvsx-sketch .an { animation-duration: var(--t) !important; animation-iteration-count: infinite !important; }
	.gvsx-sketch .a-s3-hatch { animation-duration: 0.8s !important; }
	.gvsx-sketch .a-s3-spin { animation-duration: 0.9s !important; }
}

/* o cursor aperta a partir da ponta; o que surge ou pulsa cresce do próprio centro */
.gvsx-sketch .a-press { transform-box: fill-box; transform-origin: 0 0; }
.gvsx-sketch .a-rip { transform-box: fill-box; transform-origin: center; opacity: 0; }

/* ---------------------------------------------------------------------
   1. Escolha a versão e o plano (7 s): o cursor passa pelo primeiro e pelo terceiro card, que sobem quando ele chega;
   no do meio, clica no botão: o card fica verde e ganha o check.
   --------------------------------------------------------------------- */
.gvsx-sketch--1 { --t: 7s; --freeze: -5.3s; }
.gvsx-sketch .a-s1-cur { animation-name: a-s1-cur; }
.gvsx-sketch .a-s1-press { animation-name: a-s1-press; }
.gvsx-sketch .a-s1-rip { animation-name: a-s1-rip; }
.gvsx-sketch .a-s1-card--1 { animation-name: a-s1-lift1; }
.gvsx-sketch .a-s1-card--2 { animation-name: a-s1-lift2; }
.gvsx-sketch .a-s1-card--3 { animation-name: a-s1-lift3; }
.gvsx-sketch .a-s1-sh--1, .gvsx-sketch .a-s1-hl--1 { animation-name: a-s1-on1; }
.gvsx-sketch .a-s1-sh--2, .gvsx-sketch .a-s1-hl--2 { animation-name: a-s1-on2; }
.gvsx-sketch .a-s1-sh--3, .gvsx-sketch .a-s1-hl--3 { animation-name: a-s1-on3; }
.gvsx-sketch .a-s1-sel { animation-name: a-s1-sel; }
.gvsx-sketch .a-s1-badge { animation-name: a-s1-badge; transform-box: fill-box; transform-origin: center; }
.gvsx-sketch .a-s1-chk { animation-name: a-s1-chk; }

@keyframes a-s1-cur {
	0% { transform: translate(430px, 372px); opacity: 0; }
	5% { transform: translate(430px, 372px); opacity: 1; animation-timing-function: var(--gvsx-ease-in-out); }
	16% { transform: translate(116px, 196px); }
	26% { transform: translate(116px, 196px); animation-timing-function: var(--gvsx-ease-in-out); }
	37% { transform: translate(402px, 206px); }
	47% { transform: translate(402px, 206px); animation-timing-function: var(--gvsx-ease-in-out); }
	58% { transform: translate(246px, 258px); }
	67% { transform: translate(246px, 258px); animation-timing-function: var(--gvsx-ease-in-out); }
	77% { transform: translate(330px, 344px); opacity: 1; }
	90% { transform: translate(330px, 344px); opacity: 1; }
	96%, 100% { transform: translate(330px, 344px); opacity: 0; }
}
@keyframes a-s1-press {
	0%, 59% { transform: scale(1); }
	60.5% { transform: scale(0.82); animation-timing-function: var(--gvsx-ease-out); }
	63.5%, 100% { transform: scale(1); }
}
@keyframes a-s1-rip {
	0%, 60% { opacity: 0; transform: scale(0.45); }
	60.5% { opacity: 0.9; transform: scale(0.45); animation-timing-function: var(--gvsx-ease-out); }
	72%, 100% { opacity: 0; transform: scale(1.6); }
}
@keyframes a-s1-lift1 {
	0%, 13% { transform: translateY(0); animation-timing-function: var(--gvsx-ease-out); }
	18%, 27% { transform: translateY(-9px); animation-timing-function: var(--gvsx-ease-out); }
	32%, 100% { transform: translateY(0); }
}
@keyframes a-s1-lift3 {
	0%, 34% { transform: translateY(0); animation-timing-function: var(--gvsx-ease-out); }
	39%, 48% { transform: translateY(-9px); animation-timing-function: var(--gvsx-ease-out); }
	53%, 100% { transform: translateY(0); }
}
@keyframes a-s1-lift2 {
	0%, 54% { transform: translateY(0); animation-timing-function: var(--gvsx-ease-out); }
	59%, 90% { transform: translateY(-9px); animation-timing-function: var(--gvsx-ease-out); }
	95%, 100% { transform: translateY(0); }
}
@keyframes a-s1-on1 {
	0%, 13% { opacity: 0; animation-timing-function: var(--gvsx-ease-out); }
	18%, 27% { opacity: 0.9; animation-timing-function: var(--gvsx-ease-out); }
	32%, 100% { opacity: 0; }
}
@keyframes a-s1-on3 {
	0%, 34% { opacity: 0; animation-timing-function: var(--gvsx-ease-out); }
	39%, 48% { opacity: 0.9; animation-timing-function: var(--gvsx-ease-out); }
	53%, 100% { opacity: 0; }
}
@keyframes a-s1-on2 {
	0%, 54% { opacity: 0; animation-timing-function: var(--gvsx-ease-out); }
	59%, 90% { opacity: 0.9; animation-timing-function: var(--gvsx-ease-out); }
	95%, 100% { opacity: 0; }
}
@keyframes a-s1-sel {
	0%, 60.5% { opacity: 0; animation-timing-function: var(--gvsx-ease-out); }
	63%, 90% { opacity: 1; animation-timing-function: var(--gvsx-ease-out); }
	95%, 100% { opacity: 0; }
}
@keyframes a-s1-badge {
	0%, 60.5% { opacity: 0; transform: scale(0.5); animation-timing-function: var(--gvsx-ease-out); }
	65%, 90% { opacity: 1; transform: scale(1); animation-timing-function: var(--gvsx-ease-out); }
	95%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes a-s1-chk {
	0%, 62% { stroke-dashoffset: 1; animation-timing-function: var(--gvsx-ease-out); }
	68%, 100% { stroke-dashoffset: 0; }
}

/* ---------------------------------------------------------------------
   2. Receba o serial por e-mail (7 s): o envelope fechado pula com o aviso de mensagem nova, a aba vira, a carta sobe
   e o serial se escreve caractere por caractere; o campo fica verde. No fim a carta volta, a aba fecha, e o laço
   emenda no começo (o envelope fechado também é o quadro de quem ainda não chegou na cena).
   --------------------------------------------------------------------- */
.gvsx-sketch--2 { --t: 7s; --freeze: -5.3s; }
.gvsx-sketch .a-s2-env { animation-name: a-s2-env; transform-box: fill-box; transform-origin: 50% 100%; }
.gvsx-sketch .a-s2-dot { animation-name: a-s2-dot; transform-box: fill-box; transform-origin: center; }
.gvsx-sketch .a-s2-flap-c { animation-name: a-s2-flap-c; transform-origin: 250px 188px; }
.gvsx-sketch .a-s2-flap-o { animation-name: a-s2-flap-o; transform-origin: 250px 190px; }
.gvsx-sketch .a-s2-letter { animation-name: a-s2-letter; }
.gvsx-sketch .a-s2-cover { animation-name: a-s2-type; transform-box: fill-box; transform-origin: 100% 50%; }
.gvsx-sketch .a-s2-box { animation-name: a-s2-box; }

@keyframes a-s2-env {
	0%, 2% { transform: translate(0, 0) rotate(0deg); animation-timing-function: var(--gvsx-ease-out); }
	5% { transform: translate(0, -12px) rotate(-5deg); animation-timing-function: var(--gvsx-ease-in-out); }
	9% { transform: translate(0, 0) rotate(1.5deg); animation-timing-function: var(--gvsx-ease-out); }
	12%, 100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes a-s2-dot {
	0%, 5% { opacity: 0; transform: scale(0.4); animation-timing-function: var(--gvsx-ease-out); }
	9%, 18% { opacity: 1; transform: scale(1); animation-timing-function: var(--gvsx-ease-out); }
	22%, 100% { opacity: 0; transform: scale(0.8); }
}
@keyframes a-s2-flap-c {
	0%, 19% { transform: scaleY(1); animation-timing-function: var(--gvsx-ease-in-out); }
	25%, 88% { transform: scaleY(0); animation-timing-function: var(--gvsx-ease-out); }
	94%, 100% { transform: scaleY(1); }
}
@keyframes a-s2-flap-o {
	0%, 25% { transform: scaleY(0); animation-timing-function: var(--gvsx-ease-out); }
	31%, 83% { transform: scaleY(1); animation-timing-function: var(--gvsx-ease-in-out); }
	88%, 100% { transform: scaleY(0); }
}
@keyframes a-s2-letter {
	0%, 27% { opacity: 0; transform: translateY(0); }
	28% { opacity: 1; transform: translateY(0); animation-timing-function: var(--gvsx-ease-out); }
	44%, 80% { opacity: 1; transform: translateY(-122px); animation-timing-function: var(--gvsx-ease-in-out); }
	86% { opacity: 1; transform: translateY(0); }
	87%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes a-s2-type {
	0%, 46% { transform: scaleX(1); animation-timing-function: steps(11, end); }
	62%, 88% { transform: scaleX(0); }
	89%, 100% { transform: scaleX(1); }
}
@keyframes a-s2-box {
	0%, 62% { opacity: 0; animation-timing-function: var(--gvsx-ease-out); }
	67%, 79% { opacity: 1; animation-timing-function: var(--gvsx-ease-out); }
	83%, 100% { opacity: 0; }
}

/* ---------------------------------------------------------------------
   3. Rode o instalador (7 s): a janela abre no monitor, a barra verde enche aos trancos, como num instalador de
   verdade (a barra é progresso: sem curva), e o giro vira um check.
   --------------------------------------------------------------------- */
.gvsx-sketch--3 { --t: 7s; --freeze: -5.9s; }
.gvsx-sketch .a-s3-win { animation-name: a-s3-win; transform-box: fill-box; transform-origin: center; }
.gvsx-sketch .a-s3-fill { animation-name: a-s3-fill; }
.gvsx-sketch .a-s3-hatch { animation-name: a-s3-hatch; animation-duration: 0.8s; }
.gvsx-sketch .a-s3-spinw { animation-name: a-s3-spinw; }
.gvsx-sketch .a-s3-spin { animation-name: a-s3-spin; animation-duration: 0.9s; transform-box: fill-box; transform-origin: center; fill: none; stroke: var(--gvsx-accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0.62 0.38; }
.gvsx-sketch .a-s3-done { animation-name: a-s3-done; transform-box: fill-box; transform-origin: center; }
.gvsx-sketch .a-s3-chk { animation-name: a-s3-chk; }

@keyframes a-s3-win {
	0%, 5% { opacity: 0; transform: scale(0.92); animation-timing-function: var(--gvsx-ease-out); }
	14%, 90% { opacity: 1; transform: scale(1); animation-timing-function: var(--gvsx-ease-out); }
	96%, 100% { opacity: 0; transform: scale(0.97); }
}
@keyframes a-s3-fill {
	0%, 17% { transform: translateX(-158px); }
	40%, 46% { transform: translateX(-96px); }
	64% { transform: translateX(-34px); }
	69% { transform: translateX(-26px); }
	76%, 100% { transform: translateX(0); }
}
@keyframes a-s3-hatch {
	from { transform: translateX(0); }
	to { transform: translateX(12px); }
}
@keyframes a-s3-spinw {
	0%, 14% { opacity: 0; }
	17%, 75% { opacity: 1; }
	78%, 100% { opacity: 0; }
}
@keyframes a-s3-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
@keyframes a-s3-done {
	0%, 76% { opacity: 0; transform: scale(0.5); animation-timing-function: var(--gvsx-ease-out); }
	81%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes a-s3-chk {
	0%, 77% { stroke-dashoffset: 1; animation-timing-function: var(--gvsx-ease-out); }
	84%, 100% { stroke-dashoffset: 0; }
}

/* ---------------------------------------------------------------------
   4. Abra pelo Mod Manager (8,5 s): o cursor clica nos quatro mods, um por um (cada um ganha o check), e depois em
   Launch, que fica verde.
   --------------------------------------------------------------------- */
.gvsx-sketch--4 { --t: 8.5s; --freeze: -6.3s; }
.gvsx-sketch .a-s4-cur { animation-name: a-s4-cur; }
.gvsx-sketch .a-s4-press { animation-name: a-s4-press; }
.gvsx-sketch .a-s4-on--1 { animation-name: a-s4-on1; }
.gvsx-sketch .a-s4-on--2 { animation-name: a-s4-on2; }
.gvsx-sketch .a-s4-on--3 { animation-name: a-s4-on3; }
.gvsx-sketch .a-s4-on--4 { animation-name: a-s4-on4; }
.gvsx-sketch .a-s4-chk--1 { animation-name: a-s4-chk1; }
.gvsx-sketch .a-s4-chk--2 { animation-name: a-s4-chk2; }
.gvsx-sketch .a-s4-chk--3 { animation-name: a-s4-chk3; }
.gvsx-sketch .a-s4-chk--4 { animation-name: a-s4-chk4; }
.gvsx-sketch .a-s4-btn { animation-name: a-s4-btn; transform-box: fill-box; transform-origin: center; }
.gvsx-sketch .a-s4-go { animation-name: a-s4-go; }
.gvsx-sketch .a-s4-rip { animation-name: a-s4-rip; }

@keyframes a-s4-cur {
	0% { transform: translate(476px, 388px); opacity: 0; }
	3% { transform: translate(476px, 388px); opacity: 1; animation-timing-function: var(--gvsx-ease-in-out); }
	10% { transform: translate(168px, 148px); }
	13% { transform: translate(168px, 148px); animation-timing-function: var(--gvsx-ease-in-out); }
	20% { transform: translate(366px, 148px); }
	23% { transform: translate(366px, 148px); animation-timing-function: var(--gvsx-ease-in-out); }
	30% { transform: translate(168px, 250px); }
	33% { transform: translate(168px, 250px); animation-timing-function: var(--gvsx-ease-in-out); }
	40% { transform: translate(366px, 250px); }
	43% { transform: translate(366px, 250px); animation-timing-function: var(--gvsx-ease-in-out); }
	52% { transform: translate(386px, 330px); }
	64% { transform: translate(386px, 330px); animation-timing-function: var(--gvsx-ease-in-out); }
	73% { transform: translate(438px, 376px); opacity: 1; }
	90% { transform: translate(438px, 376px); opacity: 1; }
	96%, 100% { transform: translate(438px, 376px); opacity: 0; }
}
@keyframes a-s4-press {
	0%, 10.5% { transform: scale(1); }
	11.8% { transform: scale(0.82); animation-timing-function: var(--gvsx-ease-out); }
	13.5%, 20.5% { transform: scale(1); }
	21.8% { transform: scale(0.82); animation-timing-function: var(--gvsx-ease-out); }
	23.5%, 30.5% { transform: scale(1); }
	31.8% { transform: scale(0.82); animation-timing-function: var(--gvsx-ease-out); }
	33.5%, 40.5% { transform: scale(1); }
	41.8% { transform: scale(0.82); animation-timing-function: var(--gvsx-ease-out); }
	43.5%, 53.5% { transform: scale(1); }
	54.8% { transform: scale(0.82); animation-timing-function: var(--gvsx-ease-out); }
	56.5%, 100% { transform: scale(1); }
}
@keyframes a-s4-on1 {
	0%, 11.8% { opacity: 0; animation-timing-function: var(--gvsx-ease-out); }
	14%, 90% { opacity: 1; animation-timing-function: var(--gvsx-ease-out); }
	95%, 100% { opacity: 0; }
}
@keyframes a-s4-on2 {
	0%, 21.8% { opacity: 0; animation-timing-function: var(--gvsx-ease-out); }
	24%, 90% { opacity: 1; animation-timing-function: var(--gvsx-ease-out); }
	95%, 100% { opacity: 0; }
}
@keyframes a-s4-on3 {
	0%, 31.8% { opacity: 0; animation-timing-function: var(--gvsx-ease-out); }
	34%, 90% { opacity: 1; animation-timing-function: var(--gvsx-ease-out); }
	95%, 100% { opacity: 0; }
}
@keyframes a-s4-on4 {
	0%, 41.8% { opacity: 0; animation-timing-function: var(--gvsx-ease-out); }
	44%, 90% { opacity: 1; animation-timing-function: var(--gvsx-ease-out); }
	95%, 100% { opacity: 0; }
}
@keyframes a-s4-chk1 { 0%, 12% { stroke-dashoffset: 1; animation-timing-function: var(--gvsx-ease-out); } 17%, 100% { stroke-dashoffset: 0; } }
@keyframes a-s4-chk2 { 0%, 22% { stroke-dashoffset: 1; animation-timing-function: var(--gvsx-ease-out); } 27%, 100% { stroke-dashoffset: 0; } }
@keyframes a-s4-chk3 { 0%, 32% { stroke-dashoffset: 1; animation-timing-function: var(--gvsx-ease-out); } 37%, 100% { stroke-dashoffset: 0; } }
@keyframes a-s4-chk4 { 0%, 42% { stroke-dashoffset: 1; animation-timing-function: var(--gvsx-ease-out); } 47%, 100% { stroke-dashoffset: 0; } }
@keyframes a-s4-btn {
	0%, 54% { transform: scale(1); }
	55.2% { transform: scale(0.95); animation-timing-function: var(--gvsx-ease-out); }
	58%, 100% { transform: scale(1); }
}
@keyframes a-s4-go {
	0%, 54.8% { opacity: 0; animation-timing-function: var(--gvsx-ease-out); }
	57%, 90% { opacity: 1; animation-timing-function: var(--gvsx-ease-out); }
	95%, 100% { opacity: 0; }
}
@keyframes a-s4-rip {
	0%, 55% { opacity: 0; transform: scale(1); }
	55.5% { opacity: 0.9; transform: scale(1); animation-timing-function: var(--gvsx-ease-out); }
	68%, 100% { opacity: 0; transform: scale(1.18); }
}