/* =========================================================
   Handi Acessoria — Site em construção
   Design: Figma / node 37152:29 (frame 1920×1080)
   ========================================================= */

/* Fonte do design. Coloque o arquivo em fonts/ e ela é usada
   automaticamente; sem ele, o navegador cai no fallback. */
@font-face {
  font-family: "Lenia Sans";
  src: url("fonts/LeniaSans-Bold.woff2") format("woff2"),
       url("fonts/LeniaSans-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-bg: #fafdff;
  --color-text: #081926;
  --color-icon: #4a94cc;

  --font-display: "Lenia Sans", "Archivo", "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  /* Escala ancorada no design de 1920px de largura */
  --icon-width: clamp(56px, 4.1667vw, 80px);
  --title-size: clamp(26px, 2.0833vw, 40px);
  --stack-gap: clamp(16px, 1.25vw, 24px);

  /* Duração de uma passada completa (as duas pernas).
     ~0.62s equivale à cadência real de corrida, ~180 passos/min. */
  --stride: 0.62s;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------------------------------------------------------
   Layout
   --------------------------------------------------------- */

.construction {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--stack-gap);
  padding: 24px;
}

.construction__title {
  margin: 0;
  width: min(441px, 100%);
  font-size: var(--title-size);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em; /* -0.8px em 40px */
  text-align: center;
  text-wrap: balance;
  word-break: break-word;
}

/* ---------------------------------------------------------
   Boneco correndo
   --------------------------------------------------------- */

/* O viewBox tem 8u de folga nas laterais e 6u em cima/embaixo para os
   membros balançarem. A margem negativa cancela essa folga, então a
   caixa de layout volta a ser exatamente 80×92 (o tamanho do Figma). */
.runner {
  /* 1 unidade do viewBox em px. Fica aqui, e não no :root, para que
     mudar --icon-width em qualquer escopo recalcule a escala junto. */
  --unit: calc(var(--icon-width) / 80);

  display: block;
  flex-shrink: 0;
  width: calc(96 * var(--unit));
  height: calc(104 * var(--unit));
  margin: calc(-6 * var(--unit)) calc(-8 * var(--unit));
  overflow: visible;
}

.runner__head {
  fill: var(--color-icon);
}

.runner__torso,
.runner__limb {
  stroke: var(--color-icon);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.runner__torso {
  stroke-width: 17;
}

/* A ponta redonda do membro (r 5.75) fica sempre dentro da ponta
   redonda do tronco (r 8.5), então o membro sai limpo do corpo em
   qualquer ângulo. Mesma coisa no joelho e no cotovelo. */
.runner__limb {
  stroke-width: 11.5;
}

/* ---------------------------------------------------------
   Rig: cada grupo gira em torno da sua articulação
   --------------------------------------------------------- */

.runner__sway,
.runner__bob,
.runner__arm,
.runner__forearm,
.runner__leg,
.runner__shin {
  transform-box: view-box;
}

.runner__sway {
  transform-origin: 42px 62px; /* quadril */
  animation: runner-sway var(--stride) ease-in-out infinite;
}

/* Sobe e desce duas vezes por passada — uma para cada apoio do pé. */
.runner__bob {
  animation: runner-bob calc(var(--stride) / 2) ease-in-out infinite;
  animation-delay: calc(var(--stride) * -0.325); /* pico no voo, não no apoio */
}

.runner__arm {
  transform-origin: 50.5px 35px; /* ombro */
  animation: runner-shoulder var(--stride) ease-in-out infinite;
}

.runner__forearm {
  transform-origin: 50.5px 53px; /* cotovelo */
  animation: runner-elbow var(--stride) ease-in-out infinite;
}

.runner__leg {
  transform-origin: 42px 62px; /* quadril */
  animation: runner-thigh var(--stride) ease-in-out infinite;
}

.runner__shin {
  transform-origin: 42px 81px; /* joelho */
  animation: runner-knee var(--stride) ease-in-out infinite;
}

/* Meia passada de defasagem separa os dois lados. O braço sempre vai
   ao contrário da perna do mesmo lado — é isso que faz parecer corrida
   de verdade, e não um bonequinho pulando. */
.runner__leg--a,
.runner__shin--a,
.runner__arm--b,
.runner__forearm--b {
  animation-delay: 0s;
}

.runner__leg--b,
.runner__shin--b,
.runner__arm--a,
.runner__forearm--a {
  animation-delay: calc(var(--stride) / -2);
}

/* ---------------------------------------------------------
   Ciclo de corrida
   Ângulo positivo = membro vai para trás (a figura olha para a direita).
   --------------------------------------------------------- */

/* Coxa: gira no quadril. */
@keyframes runner-thigh {
  0%   { transform: rotate(-25deg); } /* contato: pé toca o chão à frente */
  18%  { transform: rotate(-4deg); }  /* apoio: peso desce sobre a perna */
  35%  { transform: rotate(22deg); }  /* saída do pé: perna estendida atrás */
  46%  { transform: rotate(20deg); }  /* calcanhar começa a subir */
  58%  { transform: rotate(0deg); }   /* recolhida, no ponto alto do voo */
  72%  { transform: rotate(-22deg); } /* joelho vem à frente */
  85%  { transform: rotate(-35deg); } /* alcance */
  100% { transform: rotate(-25deg); }
}

/* Joelho: positivo = calcanhar sobe atrás.
   Na saída do pé (35%) o joelho fica quase reto — é o empurrão. O
   calcanhar só sobe DEPOIS, enquanto a perna volta para a frente. */
@keyframes runner-knee {
  0%   { transform: rotate(20deg); }
  18%  { transform: rotate(40deg); }  /* amortece o impacto */
  35%  { transform: rotate(15deg); }  /* estendido, empurrando o chão */
  46%  { transform: rotate(95deg); }  /* calcanhar sobe atrás */
  58%  { transform: rotate(125deg); } /* calcanhar junto do glúteo */
  72%  { transform: rotate(100deg); } /* joelho à frente, canela pendurada */
  85%  { transform: rotate(50deg); }  /* abre para o próximo passo */
  100% { transform: rotate(20deg); }
}

/* Ombro. */
@keyframes runner-shoulder {
  0%   { transform: rotate(-42deg); } /* braço à frente */
  30%  { transform: rotate(5deg); }
  50%  { transform: rotate(45deg); }  /* braço atrás */
  80%  { transform: rotate(-15deg); }
  100% { transform: rotate(-42deg); }
}

/* Cotovelo: negativo = antebraço aponta para a frente. Fica perto de
   90° o tempo todo, como o braço de quem corre de verdade; abre um
   pouco atrás para a mão passar do quadril e não sumir no tronco. */
@keyframes runner-elbow {
  0%   { transform: rotate(-100deg); }
  30%  { transform: rotate(-70deg); }
  50%  { transform: rotate(-42deg); }
  80%  { transform: rotate(-90deg); }
  100% { transform: rotate(-100deg); }
}

@keyframes runner-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3.5px);
  }
}

@keyframes runner-sway {
  0%,
  100% {
    transform: rotate(0.8deg);
  }
  50% {
    transform: rotate(-0.8deg);
  }
}

/* Respeita quem pediu menos movimento no sistema. Para a figura numa
   pose de corrida em vez de deixá-la em pé, reta. */
@media (prefers-reduced-motion: reduce) {
  .runner__sway,
  .runner__bob,
  .runner__arm,
  .runner__forearm,
  .runner__leg,
  .runner__shin {
    animation: none;
  }

  .runner__leg--a  { transform: rotate(-25deg); }
  .runner__shin--a { transform: rotate(20deg); }
  .runner__leg--b  { transform: rotate(9deg); }
  .runner__shin--b { transform: rotate(110deg); }
  .runner__arm--b  { transform: rotate(-42deg); }
  .runner__forearm--b { transform: rotate(-100deg); }
  .runner__arm--a  { transform: rotate(45deg); }
  .runner__forearm--a { transform: rotate(-42deg); }
}