/**
 * Jane Flores — movimento.
 *
 * REGRA: o movimento aqui é de acolhimento, nunca de pressão.
 * Nada pisca, nada pulsa, nada conta o tempo. O blueprint proíbe urgência
 * artificial (§2.4), e animação chamativa numa loja de coroas é exatamente
 * isso vestido de design.
 *
 * O que existe:
 *   entrada  elementos sobem alguns pixels e aparecem, em sequência
 *   estado   hover, foco e pressionado, curtos e discretos
 *
 * Toda entrada depende da classe `.jf-anima`, aplicada pelo JS. Sem
 * JavaScript, nada fica invisível — ver movimento.js.
 */

/* ---------- Entrada ---------- */

/*
 * O estado inicial só é aplicado depois que o JS marca o documento. Se o
 * script não rodar, `html` não ganha a classe e o conteúdo é exibido normal —
 * um catálogo invisível por falha de script seria um desastre silencioso.
 */
.jf-js .jf-anima {
	opacity: 0;
	transform: translateY(var(--jf-rise));
	transition:
		opacity var(--jf-duration-slow) var(--jf-ease),
		transform var(--jf-duration-slow) var(--jf-ease);
	transition-delay: var(--jf-anima-delay, 0ms);
}

.jf-js .jf-anima.jf-anima--visivel {
	opacity: 1;
	transform: none;
}

/*
 * Escalonamento: cada irmão entra um pouco depois do anterior. O índice vem do
 * JS como variável CSS, então a coreografia é declarativa e o mesmo padrão
 * serve para cards, seções e itens de lista.
 */
.jf-js .jf-anima[style*="--jf-anima-index"] {
	transition-delay: calc(var(--jf-anima-index, 0) * var(--jf-stagger));
}

/* ---------- Estados ---------- */

.jf-eleva {
	transition:
		transform var(--jf-transition),
		box-shadow var(--jf-transition),
		border-color var(--jf-transition);
}

@media (hover: hover) {
	.jf-eleva:hover {
		transform: translateY(-3px);
		box-shadow: var(--jf-shadow-md);
	}
}

/* O toque precisa devolver resposta imediata: sem hover, o "apertei" vem daqui. */
.jf-eleva:active {
	transform: translateY(0);
	transition-duration: 60ms;
}

/* Imagem de card: aproximação muito leve, contida pelo overflow do card. */
.jf-zoom {
	overflow: hidden;
}

.jf-zoom img {
	transition: transform var(--jf-duration-slow) var(--jf-ease);
}

@media (hover: hover) {
	.jf-zoom:hover img {
		transform: scale(1.04);
	}
}

/* Botões: afundam de leve ao serem pressionados. */
.button:active,
button:active {
	transform: translateY(1px);
}

/*
 * `prefers-reduced-motion` já zera as durações nos tokens. Aqui as
 * transformações são desligadas de vez: duração zero num `translateY` ainda
 * move o elemento, só que de uma vez.
 */
@media (prefers-reduced-motion: reduce) {
	.jf-js .jf-anima {
		opacity: 1;
		transform: none;
	}

	.jf-eleva:hover,
	.jf-eleva:active,
	.jf-zoom:hover img,
	.button:active,
	button:active {
		transform: none;
	}
}

/* ---------- Transição entre páginas ----------
 * Navegar do catálogo para o produto deixa de ser um piscar branco.
 *
 * Progressivo por natureza: navegadores sem a API simplesmente navegam como
 * sempre. Não há polyfill nem fallback a manter — é uma camada que existe
 * onde existe.
 *
 * A duração é a mesma do resto da coreografia. Fade puro, sem deslize: a
 * página inteira escorregando é movimento demais para quem está resolvendo
 * uma tarefa sob pressa (§2.6).
 */
@view-transition {
	navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: var(--jf-duration);
	animation-timing-function: var(--jf-ease-soft);
}

@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}
}