/* Màn Tô chữ, phần giai đoạn 3 (mặt sau thẻ chữ hoa). Làn TÔ CHỮ HOA sở hữu file này.
   Thẻ .trace-card lật 3D quanh trục dọc: nửa đầu (.is-flip-out) quay tới 90 độ và đứng yên ở đó (fill forwards) trong lúc
   trace.js thay ô tô sang nét chữ hoa, nửa sau (.is-flip-in) quay từ -90 độ về 0. Lớp .is-flip giữ trên thẻ suốt mặt chữ hoa.
   Hạn chót của hoạt hình do trace.js đặt qua effects.js settle(); giảm chuyển động thì không quay, thẻ đổi mặt ngay. */
@keyframes trace-flip-out { from { transform: perspective(900px) rotateY(0); } to { transform: perspective(900px) rotateY(90deg); } }
@keyframes trace-flip-in { from { transform: perspective(900px) rotateY(-90deg); } to { transform: perspective(900px) rotateY(0); } }
.trace-card.is-flip-out { animation: trace-flip-out 360ms ease-in forwards; }
.trace-card.is-flip-in { animation: trace-flip-in 360ms ease-out both; }
.trace-card.is-flip-out, .trace-card.is-flip-in { pointer-events: none; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .trace-card.is-flip-out, .trace-card.is-flip-in { animation: none; } }

/* Mặt chữ hoa: viền tím nhạt quanh thẻ và nhãn nhỏ góc trên phải để bé (và bố mẹ) biết đây là mặt sau */
.trace-card.is-flip { box-shadow: var(--shadow-card), 0 0 0 3px var(--violet-100); }
.trace-card .face-label { position: absolute; top: 6px; right: 12px; z-index: 1; padding: 0.125rem 0.625rem; border-radius: 999px; background: var(--violet-100); color: var(--violet-600); font-family: var(--font-display); font-weight: 800; font-size: 0.8125rem; line-height: 1.4; pointer-events: none; animation: trace-label-in 300ms ease-out both; }
@keyframes trace-label-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }