/* =====================================================================
   Hero (capa). Uma faixa dourada sólida e inclinada segura a profissional;
   a academia aparece só nas laterais; o nome passa atrás da cabeça dela,
   dividido pela faixa. A arte ocupa sempre a tela inteira: uma composição
   de 1440x820 é escalada para caber (--s) e ancorada no centro da base,
   enquanto o fundo e a faixa se estendem para cobrir o resto.
   Ler hero/README.md antes de mexer em posição.
   ===================================================================== */

.stage { height: 100vh; height: 100svh; min-height: 420px; container-type: size; }
.hero {
  --s: min(calc(100cqw / 1440), calc(100cqh / 820));
  position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--ink);
}
.hero > * { position: absolute; }

.bg { inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 30%; }
.shade { inset: 0; background: rgba(11, 10, 8, 0.28); }
.floor { left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(180deg, rgba(11, 10, 8, 0) 0%, rgba(11, 10, 8, 0.86) 100%); }

.band, .rail { bottom: calc(-20 * var(--s)); height: calc(100% + 40 * var(--s)); transform: skewX(-8deg); transform-origin: 50% calc(100% - 430 * var(--s)); }
.band { left: calc(50% - 210 * var(--s)); width: calc(500 * var(--s)); background: var(--gold); box-shadow: 0 0 calc(80 * var(--s)) rgba(0, 0, 0, 0.55); }
.rail { left: calc(50% - 228 * var(--s)); width: calc(536 * var(--s)); box-sizing: border-box; border-inline: 1px solid rgba(212, 171, 94, 0.55); }

/* Nome: cada palavra fica à mesma distância do centro, e a cabeça dela preenche o vão. */
.title {
  left: 0; width: 100%; bottom: calc(536 * var(--s)); height: calc(86 * var(--s)); margin: 0;
  font-family: var(--display); font-stretch: 125%; font-weight: 900; font-style: italic;
  font-size: calc(100 * var(--s)); line-height: 0.86; text-transform: uppercase; white-space: nowrap;
  filter: drop-shadow(0 calc(8 * var(--s)) calc(20 * var(--s)) rgba(0, 0, 0, 0.45));
}
.title span {
  position: absolute; bottom: 0;
  color: transparent;
  background: linear-gradient(180deg, var(--silver-hi) 0%, var(--silver-mid) 55%, var(--silver-lo) 100%);
  -webkit-background-clip: text; background-clip: text;
  padding-inline: 0.06em;
}
/* As duas palavras foram ajustadas (eixo de largura + tracking) para ter exatamente o mesmo comprimento,
   então a margem até as bordas e a folga até a cabeça dela são iguais dos dois lados.
   Cada span tem DUAS animações na mesma lista (flutuação + entrada): ao editar, manter as duas. */
.title span:first-child { right: calc(50% + 119 * var(--s)); font-stretch: 112%; letter-spacing: -0.04em; animation: float-text 5.5s ease-in-out infinite alternate, in-left 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s backwards; }
.title span:last-child { left: calc(50% + 118 * var(--s)); font-stretch: 125%; letter-spacing: 0.042em; animation: float-text 5.5s ease-in-out -2.75s infinite alternate, in-right 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s backwards; }
/* A flutuação usa as propriedades separadas translate/rotate, então nunca briga com as entradas nem com o hover (transform). */
@keyframes float-text {
  from { translate: 0 calc(-5 * var(--s)); }
  to { translate: 0 calc(5 * var(--s)); }
}
@keyframes in-left { from { opacity: 0; transform: translateX(calc(-70 * var(--s))); } to { opacity: 1; transform: none; } }
@keyframes in-right { from { opacity: 0; transform: translateX(calc(70 * var(--s))); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(calc(24 * var(--s))); } to { opacity: 1; transform: none; } }

/* Profissão: dividida pela faixa, como o nome acima. */
.role {
  left: calc(50% - 672 * var(--s)); width: calc(1346 * var(--s)); bottom: calc(482 * var(--s)); margin: 0;
  display: flex; justify-content: space-between;
  font-family: var(--display); font-stretch: 125%; font-weight: 800; font-style: italic;
  font-size: calc(28 * var(--s)); line-height: 1.2; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-hi);
  animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.5s backwards;
}
.role span { display: flex; align-items: center; gap: calc(18 * var(--s)); white-space: nowrap; }
.role span:first-child { width: calc(442 * var(--s)); }
.role span:last-child { width: calc(338 * var(--s)); }
.role span:first-child::after, .role span:last-child::before { content: ""; flex: 1; height: 1px; background: var(--gold); opacity: 0.7; }

/* Deslocada para a direita para a cabeça dela (com o cabelo) ficar no centro exato, entre as duas palavras. */
.model { left: calc(50% - 235 * var(--s)); bottom: calc(-4 * var(--s)); width: calc(493 * var(--s)); height: auto; max-width: none; }

/* Flutuação: os pesos sobem, descem e balançam um pouco. A rotação base fica em transform (--r). */
.weight { max-width: none; height: auto; transform: var(--r); animation: float-weight 9s ease-in-out infinite alternate; will-change: translate, rotate; }
.w-plate { left: calc(50% - 434 * var(--s)); bottom: calc(188 * var(--s)); width: calc(180 * var(--s)); --r: rotate(-18deg); }
.w-kettle { left: calc(50% + 330 * var(--s)); bottom: calc(270 * var(--s)); width: calc(140 * var(--s)); --r: rotate(14deg); animation-duration: 11s; animation-delay: -3s; }
.w-side { left: calc(50% + 576 * var(--s)); bottom: calc(164 * var(--s)); width: calc(170 * var(--s)); --r: rotate(18deg); animation-duration: 8s; animation-delay: -5s; animation-direction: alternate-reverse; }
.w-persp { left: calc(50% - 804 * var(--s)); bottom: calc(-64 * var(--s)); width: calc(300 * var(--s)); --r: scaleX(-1) rotate(-8deg); animation-duration: 12s; animation-delay: -2s; animation-direction: alternate-reverse; }
@keyframes float-weight {
  from { translate: calc(-5 * var(--s)) calc(-12 * var(--s)); rotate: -3deg; }
  to { translate: calc(5 * var(--s)) calc(12 * var(--s)); rotate: 3deg; }
}

/* Botão: a arte (cta.webp) já traz o texto "Agende sua avaliação". */
.cta {
  left: calc(50% + 262 * var(--s)); bottom: calc(50 * var(--s)); width: calc(416 * var(--s));
  display: block; line-height: 0;
  filter: drop-shadow(0 calc(10 * var(--s)) calc(22 * var(--s)) rgba(0, 0, 0, 0.55));
  transition: transform 0.2s ease, filter 0.2s ease;
  animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.65s backwards;
}
.cta img { width: 100%; height: auto; display: block; }
.cta:hover { transform: translateY(-3px); filter: drop-shadow(0 calc(14 * var(--s)) calc(26 * var(--s)) rgba(0, 0, 0, 0.6)) brightness(1.08); }

/* Fica depois de todas as regras acima de propósito: com a mesma especificidade, a última vence. */
@media (prefers-reduced-motion: reduce) {
  .weight, .title span:first-child, .title span:last-child, .role, .cta { animation: none; }
  .cta { transition: none; }
  .cta:hover { transform: none; }
}

/* Celular: o nome empilha em duas linhas acima da cabeça dela; composição de 390x660. */
@container (max-width: 760px) {
  .hero { --s: min(calc(100cqw / 390), calc(100cqh / 660)); }
  .bg { object-position: 28% 30%; }
  .floor { height: 34%; z-index: 1; background: linear-gradient(180deg, rgba(11, 10, 8, 0) 0%, rgba(11, 10, 8, 0.94) 70%); }
  .band, .rail { transform: skewX(-6deg); transform-origin: 50% calc(100% - 350 * var(--s)); }
  .band { left: calc(50% - 121 * var(--s)); width: calc(242 * var(--s)); }
  .rail { left: calc(50% - 131 * var(--s)); width: calc(262 * var(--s)); }
  .title { bottom: calc(432 * var(--s)); height: auto; display: flex; flex-direction: column; align-items: center; font-size: calc(62 * var(--s)); line-height: 0.92; }
  .title span { position: static; }
  .model { left: calc(50% - 140 * var(--s)); bottom: calc(-26 * var(--s)); width: calc(295 * var(--s)); }
  .role { z-index: 2; left: calc(50% - 179 * var(--s)); width: calc(358 * var(--s)); bottom: calc(100 * var(--s)); gap: 0.5em; font-size: calc(15 * var(--s)); letter-spacing: 0.26em; }
  .role span:first-child, .role span:last-child { width: auto; flex: 1; gap: calc(12 * var(--s)); }
  .role span:first-child { flex-direction: row-reverse; }
  .role span:last-child { flex-direction: row-reverse; }
  .w-plate { left: calc(50% - 229 * var(--s)); bottom: calc(210 * var(--s)); width: calc(112 * var(--s)); }
  .w-kettle { left: calc(50% + 123 * var(--s)); bottom: calc(276 * var(--s)); width: calc(84 * var(--s)); }
  .w-side { left: calc(50% + 105 * var(--s)); bottom: calc(150 * var(--s)); width: calc(110 * var(--s)); }
  .w-persp { display: none; }
  .cta { z-index: 2; left: calc(50% - 179 * var(--s)); width: calc(358 * var(--s)); bottom: calc(20 * var(--s)); }
}