/*
 * Marca animada — Moda do Mar.
 * Fonte ÚNICA do CSS da marca animada: componente <mdm-marca> e a marca da tela de carregamento
 * (#mdm-splash, no index.html, que carrega este arquivo antes do Angular; os estilos da tela em si
 * estão em tela-de-carregamento.css). O bloco "geometria" é GERADO por
 * design/logo/gerador/exportar_frontend.py; o resto é escrito à mão.
 *
 * Coreografia (--mxa-dur = 2,4 s; porcentagens de 2,4 s):
 *   0–0,30 s  (0–12,5%)    o brinco entra (desce e aparece)
 *   0–0,90 s  (0–38%)      balanço de pêndulo amortecido, a partir do topo da argola
 *   0,45–0,85 (18,8–35,4%) a pérola acende: halo, reflexo e faíscas
 *   0,80–0,95 (33,3–39,6%) a argola se solta
 *   0,85–1,45 (35,4–60,4%) a concha gira 180° em torno da pérola e vira o símbolo
 *   1,50–2,05 (62,5–85,4%) o símbolo desliza para a esquerda; o nome sai de trás da concha
 *   1,72–2,30 (71,7–95,8%) o subtítulo sai em seguida; 2,1–2,4 s último brilho
 *
 * Desempenho: só `transform` e `opacity` em camadas próprias — o navegador anima no compositor,
 * sem depender da thread principal (essencial na tela de carregamento, enquanto o JS é avaliado).
 * O estado SEM animação é a logo final: `prefers-reduced-motion` e a logo estática caem nele.
 */

.mxa {
  /* geometria:inicio — GERADO por design/logo/gerador/exportar_frontend.py; não edite */
  --mxa-simbolo-razao: 0.8937;
  --mxa-texto-razao: 4.3912;
  --mxa-nome-razao: 7.3015;
  --mxa-perola-fx: 0.5;
  --mxa-perola-fy: 0.9006;
  --mxa-perola-fd: 0.2224;
  --mxa-argola-fy: 0.6596;
  --mxa-brinco-fy: -0.6306;
  --mxa-brinco-escala: 0.86;
  /* geometria:fim */

  --mxa-altura: 40px; /* altura do símbolo; o resto é proporcional */
  --mxa-dur: 2.4s;
  --mxa-solo: 1; /* escala do símbolo sozinho, antes de deslizar (a tela de carregamento usa > 1) */
  --mxa-vao: calc(var(--mxa-altura) * 0.2);
  --mxa-texto-a: calc(var(--mxa-altura) * 0.62);
  --mxa-texto-r: var(--mxa-texto-razao);
  --mxa-l: calc(var(--mxa-altura) * var(--mxa-simbolo-razao)); /* largura do símbolo */
  --mxa-desloc: calc((var(--mxa-vao) + var(--mxa-texto-a) * var(--mxa-texto-r)) / 2);

  /* cores = tokens da marca (deep-sea, pearl-gold, gold-ink) */
  --mxa-cor: #063f42;
  --mxa-perola-cor: #b98248;
  --mxa-luz: 185 130 72;
  --mxa-sub-cor: #96682f;

  display: inline-flex;
  align-items: center;
  gap: var(--mxa-vao);
  color: var(--mxa-cor);
  line-height: 0;
  vertical-align: middle;
}

/* sobre fundo escuro: warm-sand + gold-claro (AA sobre deep-sea) */
.mxa--clara {
  --mxa-cor: #fbf8f3;
  --mxa-perola-cor: #d0a672;
  --mxa-luz: 208 166 114;
  --mxa-sub-cor: #d0a672;
}

.mxa--sem-slogan {
  --mxa-texto-a: calc(var(--mxa-altura) * 0.5);
  --mxa-texto-r: var(--mxa-nome-razao);
}

.mxa--sub-texto {
  --mxa-texto-a: calc(var(--mxa-altura) * 0.46);
  --mxa-texto-r: var(--mxa-nome-razao);
}

/* ── símbolo ── */
.mxa__simbolo {
  position: relative;
  flex: none;
  height: var(--mxa-altura);
  aspect-ratio: var(--mxa-simbolo-razao);
}

.mxa__pivo,
.mxa__entrada,
.mxa__balanco {
  position: absolute;
  inset: 0;
}

.mxa__pivo {
  transform-origin: calc(var(--mxa-perola-fx) * 100%) calc(var(--mxa-perola-fy) * 100%);
}

.mxa__balanco {
  transform-origin: 50% calc(var(--mxa-argola-fy) * 100%);
}

.mxa__camada {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.mxa__giro {
  fill: currentColor;
  transform-origin: calc(var(--mxa-perola-fx) * 100%) calc(var(--mxa-perola-fy) * 100%);
}

.mxa__argola {
  fill: none;
  stroke: currentColor;
  opacity: 0; /* só existe no brinco */
}

.mxa__perola circle {
  fill: var(--mxa-perola-cor);
}

/* elementos posicionados sobre a pérola */
.mxa__halo,
.mxa__brilho,
.mxa__faisca {
  position: absolute;
  aspect-ratio: 1;
  translate: -50% -50%;
  pointer-events: none;
}

.mxa__halo {
  left: calc(var(--mxa-perola-fx) * 100%);
  top: calc(var(--mxa-perola-fy) * 100%);
  width: calc(var(--mxa-l) * var(--mxa-perola-fd) * 3.6);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgb(var(--mxa-luz) / 0.85) 0%,
    rgb(var(--mxa-luz) / 0.28) 40%,
    rgb(var(--mxa-luz) / 0) 70%
  );
  opacity: 0;
}

.mxa__brilho {
  left: calc(var(--mxa-perola-fx) * 100%);
  top: calc(var(--mxa-perola-fy) * 100%);
  width: calc(var(--mxa-l) * var(--mxa-perola-fd));
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(
    circle at 35% 30%,
    rgb(255 255 255 / 0.9),
    rgb(255 255 255 / 0.18) 38%,
    rgb(255 255 255 / 0) 64%
  );
  opacity: 0.4;
}

.mxa__reflexo {
  position: absolute;
  inset: -20%;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 0.85) 50%, transparent 65%);
  transform: translateX(-130%);
}

.mxa__faisca {
  width: calc(var(--mxa-l) * var(--mxa-perola-fd) * 0.95);
  background: rgb(var(--mxa-luz));
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  transform: scale(0);
}

.mxa__faisca--1,
.mxa__faisca--3 {
  left: calc(var(--mxa-perola-fx) * 100% + var(--mxa-l) * var(--mxa-perola-fd) * 0.8);
  top: calc(var(--mxa-perola-fy) * 100% - var(--mxa-l) * var(--mxa-perola-fd) * 0.7);
}

.mxa__faisca--2 {
  width: calc(var(--mxa-l) * var(--mxa-perola-fd) * 0.7);
  left: calc(var(--mxa-perola-fx) * 100% - var(--mxa-l) * var(--mxa-perola-fd) * 0.95);
  top: calc(var(--mxa-perola-fy) * 100% - var(--mxa-l) * var(--mxa-perola-fd) * 0.15);
}

/* ── texto ── */
.mxa__texto {
  position: relative;
  flex: none;
  height: var(--mxa-texto-a);
  aspect-ratio: var(--mxa-texto-r);
  overflow: hidden; /* máscara: o texto "sai de trás" da concha */
}

.mxa__nome,
.mxa__slogan {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.mxa__nome {
  fill: currentColor;
}

.mxa__slogan {
  fill: var(--mxa-sub-cor);
}

.mxa--sub-texto .mxa__texto {
  height: auto;
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  align-items: center; /* subtítulo centralizado sob o nome, como o slogan */
  gap: calc(var(--mxa-altura) * 0.08);
}

.mxa--sub-texto .mxa__nome {
  position: relative;
  height: var(--mxa-texto-a);
  width: auto;
  aspect-ratio: var(--mxa-nome-razao);
}

.mxa__sub {
  font: 700 calc(var(--mxa-altura) * 0.2) / 1 var(--font-sans, 'Nunito Sans', system-ui, sans-serif);
  letter-spacing: 0.3em;
  margin-inline-end: -0.3em; /* o espaçamento após a última letra não desloca a centralização */
  text-transform: uppercase;
  color: var(--mxa-sub-cor);
}

.mxa-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── animação ── */
.mxa--anima .mxa__simbolo { animation: mxa-desliza var(--mxa-dur) both; }
.mxa--anima .mxa__pivo { animation: mxa-pivo var(--mxa-dur) both; }
.mxa--anima .mxa__entrada { animation: mxa-entrada var(--mxa-dur) both; }
.mxa--anima .mxa__balanco { animation: mxa-balanco var(--mxa-dur) both; }
.mxa--anima .mxa__giro { animation: mxa-giro var(--mxa-dur) both; }
.mxa--anima .mxa__argola { animation: mxa-argola var(--mxa-dur) both; }
.mxa--anima .mxa__halo { animation: mxa-halo var(--mxa-dur) both; }
.mxa--anima .mxa__brilho { animation: mxa-brilho var(--mxa-dur) both; }
.mxa--anima .mxa__reflexo { animation: mxa-reflexo var(--mxa-dur) both; }
.mxa--anima .mxa__faisca--1 { animation: mxa-faisca-1 var(--mxa-dur) both; }
.mxa--anima .mxa__faisca--2 { animation: mxa-faisca-2 var(--mxa-dur) both; }
.mxa--anima .mxa__faisca--3 { animation: mxa-faisca-3 var(--mxa-dur) both; }
.mxa--anima .mxa__nome { animation: mxa-revela-nome var(--mxa-dur) both; }
.mxa--anima .mxa__slogan,
.mxa--anima .mxa__sub { animation: mxa-revela-sub var(--mxa-dur) both; }

/* tela de carregamento: depois da intro, a pérola "respira" enquanto o app carrega */
.mxa--carregando .mxa__halo {
  animation:
    mxa-halo var(--mxa-dur) both,
    mxa-respira 1.8s var(--mxa-dur) ease-in-out infinite;
}

/* fica na primeira pose até ficar visível (o componente libera via IntersectionObserver) */
.mxa--pausada,
.mxa--pausada * {
  animation-play-state: paused !important;
}

@keyframes mxa-entrada {
  0% { opacity: 0; transform: translateY(-14%); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  12.5%, 100% { opacity: 1; transform: none; }
}

@keyframes mxa-balanco {
  0% { transform: rotate(12deg); animation-timing-function: ease-in-out; }
  9% { transform: rotate(-8deg); animation-timing-function: ease-in-out; }
  18% { transform: rotate(5deg); animation-timing-function: ease-in-out; }
  26% { transform: rotate(-2.6deg); animation-timing-function: ease-in-out; }
  33% { transform: rotate(1deg); animation-timing-function: ease-in-out; }
  38%, 100% { transform: none; }
}

@keyframes mxa-pivo {
  0%, 35.4% {
    transform: translateY(calc(var(--mxa-brinco-fy) * 100%)) scale(var(--mxa-brinco-escala));
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  60.4%, 100% { transform: none; }
}

@keyframes mxa-giro {
  0%, 35.4% { transform: rotate(180deg); animation-timing-function: cubic-bezier(0.6, 0, 0.25, 1.08); }
  60.4%, 100% { transform: rotate(0deg); }
}

@keyframes mxa-argola {
  0%, 33.3% { opacity: 1; transform: none; animation-timing-function: ease-in; }
  39.6%, 100% { opacity: 0; transform: translateY(-8%); }
}

@keyframes mxa-halo {
  0%, 18.75% { opacity: 0; transform: scale(0.3); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  35.4% { opacity: 1; transform: scale(1); }
  60.4% { opacity: 0.55; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

@keyframes mxa-respira {
  0%, 100% { opacity: 0.2; transform: scale(0.9); }
  50% { opacity: 0.75; transform: scale(1.1); }
}

@keyframes mxa-brilho {
  0%, 18.75% { opacity: 0.25; }
  35.4% { opacity: 1; }
  85%, 100% { opacity: 0.4; }
}

@keyframes mxa-reflexo {
  0%, 20.8% { transform: translateX(-130%); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  35.4%, 100% { transform: translateX(130%); }
}

@keyframes mxa-faisca-1 {
  0%, 22.9% { transform: scale(0) rotate(0deg); }
  30% { transform: scale(1) rotate(25deg); }
  37.5%, 100% { transform: scale(0) rotate(45deg); }
}

@keyframes mxa-faisca-2 {
  0%, 27% { transform: scale(0) rotate(0deg); }
  33% { transform: scale(0.75) rotate(-20deg); }
  40%, 100% { transform: scale(0) rotate(-35deg); }
}

@keyframes mxa-faisca-3 {
  0%, 88% { transform: scale(0) rotate(0deg); }
  94% { transform: scale(0.85) rotate(25deg); }
  100% { transform: scale(0) rotate(45deg); }
}

@keyframes mxa-desliza {
  0%, 62.5% {
    transform: translateX(var(--mxa-desloc)) scale(var(--mxa-solo));
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  85.4%, 100% { transform: none; }
}

@keyframes mxa-revela-nome {
  0%, 66.7% { transform: translateX(-105%); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  89.6%, 100% { transform: none; }
}

@keyframes mxa-revela-sub {
  0%, 71.7% { transform: translateX(-105%); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  95.8%, 100% { transform: none; }
}

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