/*
 * Tivra — Mascote
 * ───────────────
 * Animações do cristal-T (<tivra-mascot>, assets/mascot.js). Cópia do bloco da app
 * (apps/companion/src/index.css, "Mascote: o cristal-T"): mudar lá, mudar aqui.
 */
tivra-mascot { display: inline-block; }

/* ── Mascote: o cristal-T (src/components/CrystalFace.tsx) ─────────────────────────────────
   Cada faceta tem --dx/--dy (para onde se afasta), --cf-i (ordem) e a origem onde roda. */
.crystal-face {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  line-height: 0;
}
.crystal-face svg { overflow: visible; }
.crystal-face .cf-body { transform-box: view-box; transform-origin: 50% 55%; transition: filter 500ms cubic-bezier(0.32, 0.72, 0, 1); }
.crystal-face .cf-facet { transform-box: view-box; transition: transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.crystal-face .cf-shade { opacity: var(--cf-o); }
.crystal-face .cf-eye { fill: #07070a; transform-box: fill-box; transform-origin: center; transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1); }
/* A cor e a luz são fixas em todos os estados: só as peças se movem. */
.crystal-face .cf-glow { opacity: 0.3; }
.crystal-face .cf-seam-glow { opacity: 0.45; }
.crystal-face .cf-spark { filter: drop-shadow(0 0 2px var(--cf)); }

/* Repouso: flutua, as asas batem devagar, a coroa respira, pisca. */
.cf-idle .cf-body { animation: cf-float 5.5s ease-in-out infinite var(--cf-delay); }
.cf-idle .cf-k-wing { animation: cf-flap 3.4s ease-in-out infinite var(--cf-delay); }
.cf-idle .cf-k-crown { animation: cf-breathe-out 5.5s ease-in-out infinite var(--cf-delay); }
.cf-idle .cf-eye { animation: cf-blink 4.6s infinite var(--cf-delay); }

/* A pensar: a coroa abre-se em leque, o núcleo sobe, a luz percorre a costura, os olhos procuram. */
.cf-thinking .cf-body { animation: cf-float 3s ease-in-out infinite; }
.cf-thinking .cf-k-crown { animation: cf-fan 2.2s cubic-bezier(0.45, 0, 0.2, 1) infinite; }
.cf-thinking .cf-k-core { animation: cf-lift 2.2s cubic-bezier(0.45, 0, 0.2, 1) infinite; }
.cf-thinking .cf-k-wing { animation: cf-tilt 2.2s cubic-bezier(0.45, 0, 0.2, 1) infinite; }
.cf-thinking .cf-k-body { animation: cf-part 2.2s ease-in-out infinite; animation-delay: calc(var(--cf-i) * 80ms); }
.cf-thinking .cf-eyes { animation: cf-look 3.6s ease-in-out infinite; }

/* A trabalhar: o cristal desmonta-se e volta a montar, peça a peça; as asas rodam; a luz acende. */
.cf-working .cf-body { animation: cf-hum 0.8s ease-in-out infinite; }
.cf-working .cf-facet { animation: cf-assemble 1.6s cubic-bezier(0.5, 0, 0.2, 1.4) infinite; animation-delay: calc(var(--cf-i) * 70ms); }
.cf-working .cf-k-wing { animation: cf-swing 0.8s ease-in-out infinite; animation-delay: calc(var(--cf-i) * 120ms); }
.cf-working .cf-eye { transform: scaleY(0.5); }

/* A ouvir: as asas abrem-se como orelhas e pulsam; o núcleo inclina-se para quem fala. */
.cf-listening .cf-body { animation: cf-float 2.4s ease-in-out infinite; }
.cf-listening .cf-k-wing { animation: cf-ears 1.2s ease-in-out infinite; }
.cf-listening .cf-k-core { animation: cf-nod 2.4s ease-in-out infinite; }

/* Suspenso: encolhido, asas caídas, olhos fechados, apagado. */
.cf-sleeping .cf-body { filter: grayscale(0.85) brightness(0.65); animation: cf-float 8s ease-in-out infinite; }
.cf-sleeping .cf-facet { transform: translate(calc(var(--dx) * -1.6px), calc(var(--dy) * -1.6px)); }
.cf-sleeping .cf-k-wing { transform: translate(calc(var(--dx) * -1px), 3px) rotate(calc(var(--dx) * 28deg)); }
.cf-sleeping .cf-eye { transform: scaleY(0.16); }
.cf-sleeping .cf-seam, .cf-sleeping .cf-seam-glow, .cf-sleeping .cf-glow { opacity: 0.15; }

@keyframes cf-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.4px); } }
@keyframes cf-hum { 0%, 100% { transform: scale(1) rotate(0); } 25% { transform: scale(1.03) rotate(-1.5deg); } 75% { transform: scale(1.03) rotate(1.5deg); } }
@keyframes cf-breathe-out { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(calc(var(--dx) * 1.2px), calc(var(--dy) * 1.2px)); } }
@keyframes cf-flap { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(calc(var(--dx) * -10deg)); } }
@keyframes cf-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
@keyframes cf-fan { 0%, 100% { transform: translate(0, 0) rotate(0); } 45%, 60% { transform: translate(calc(var(--dx) * 4px), calc(var(--dy) * 4px)) rotate(calc(var(--dx) * 14deg)); } }
@keyframes cf-lift { 0%, 100% { transform: translateY(0) scale(1); } 45%, 60% { transform: translateY(-3.5px) scale(1.06); } }
@keyframes cf-tilt { 0%, 100% { transform: rotate(0); } 45%, 60% { transform: rotate(calc(var(--dx) * -22deg)) translate(calc(var(--dx) * 1.5px), -1.5px); } }
@keyframes cf-part { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(calc(var(--dx) * 1.6px), calc(var(--dy) * 1.6px)); } }
@keyframes cf-assemble {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  35% { transform: translate(calc(var(--dx) * 7px), calc(var(--dy) * 7px)) rotate(calc(var(--dx) * 18deg)); }
  55% { transform: translate(calc(var(--dx) * 7px), calc(var(--dy) * 7px)) rotate(calc(var(--dx) * -8deg)); }
}
@keyframes cf-swing { 0%, 100% { transform: rotate(calc(var(--dx) * 8deg)); } 50% { transform: rotate(calc(var(--dx) * -34deg)) translate(calc(var(--dx) * 3px), -2px); } }
@keyframes cf-ears { 0%, 100% { transform: rotate(calc(var(--dx) * -18deg)) translate(calc(var(--dx) * 2px), -1px); } 50% { transform: rotate(calc(var(--dx) * -30deg)) translate(calc(var(--dx) * 4px), -2px); } }
@keyframes cf-nod { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-6deg) translateY(-1px); } }
@keyframes cf-look { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-1.6px); } 60% { transform: translate(1.6px, -0.6px); } }

@media (prefers-reduced-motion: reduce) {
  .crystal-face *, .crystal-face svg { animation: none !important; }
}

/* Fora do ecrã (marcado pelo meta.js) as animações pausam: não custam CPU nem memória a quem não as vê. */
tivra-mascot[data-off] *, tivra-mascot[data-off] { animation-play-state: paused !important; }