/* Camada de movimento "pro" (compartilhada). Cores vêm de cada marca:
   --mp-a / --mp-b / --mp-c  degradê de destaque
   --mp-fundo / --mp-tinta   pré-carregador
   --mp-cur                  cor do cursor */
:root {
  --mp-a: #d7ac65;
  --mp-b: #f2d59b;
  --mp-c: #e8b5c4;
  --mp-fundo: #100f15;
  --mp-tinta: #f5f0e8;
  --mp-cur: #d7ac65;
  --mp-ease: cubic-bezier(0.19, 1, 0.22, 1);
}

/* rolagem com inércia: o JS cuida do suave, então o nativo fica direto */
html.mp-suave { scroll-behavior: auto !important; }

/* ---------- pré-carregador ---------- */
.mp-pre {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background: var(--mp-fundo);
  color: var(--mp-tinta);
  clip-path: inset(0 0 0 0);
  transition: clip-path 1s var(--mp-ease);
  /* se o JS falhar, some sozinho */
  animation: mp-pre-falha 0.01s 4s forwards;
}
.mp-pre--sai { clip-path: inset(0 0 100% 0); animation: none; }
.mp-pre__centro { display: grid; justify-items: center; gap: 22px; }
.mp-pre__logo { width: clamp(64px, 8vw, 96px); height: auto; opacity: 0; animation: mp-pre-logo 0.9s 0.1s var(--mp-ease) forwards; }
.mp-pre__barra { display: block; width: clamp(120px, 14vw, 180px); height: 2px; background: color-mix(in srgb, var(--mp-tinta) 14%, transparent); overflow: hidden; border-radius: 2px; }
.mp-pre__barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--mp-a), var(--mp-b), var(--mp-c)); transform: scaleX(0); transform-origin: left; }
.mp-pre__num {
  position: absolute;
  left: max(24px, env(safe-area-inset-left, 0px));
  bottom: 22px;
  font: 500 clamp(3.2rem, 9vw, 7.5rem)/0.9 var(--mp-num, inherit);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  opacity: 0.92;
}
.mp-pre__nome { position: absolute; right: max(24px, env(safe-area-inset-right, 0px)); bottom: 30px; font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.6; }
@keyframes mp-pre-logo { from { opacity: 0; transform: translateY(14px) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes mp-pre-falha { to { visibility: hidden; opacity: 0; } }

/* ---------- títulos palavra a palavra ---------- */
.mp-p, .mp-split .mp-p {
  display: inline-block !important;
  overflow: hidden;
  vertical-align: top;
  /* folga para itálicos e letras com descendente não serem cortados */
  padding: 0.08em 0.1em 0.16em;
  margin: -0.08em -0.1em -0.16em;
}
.mp-p__i, .mp-split .mp-p__i {
  display: inline-block !important;
  transform: translate3d(0, 112%, 0) rotate(4deg);
  transform-origin: 0 100%;
  transition: transform 1.15s var(--mp-ease);
  transition-delay: calc(var(--i, 0) * 55ms + 80ms);
}
.mp-split.mp-in .mp-p__i { transform: none; }
.mp-split.mp-fim .mp-p { overflow: visible; }
/* antes do pré-carregador terminar, nada entra */
html:not(.mp-pronto) .mp-split .mp-p__i { transform: translate3d(0, 112%, 0) rotate(4deg) !important; }

/* ---------- imagens reveladas por máscara ---------- */
.mp-img { clip-path: inset(18% 8% 18% 8% round 28px); transition: clip-path 1.4s var(--mp-ease); }
.mp-img > img, .mp-img > picture > img { scale: 1.18; transition: scale 1.8s var(--mp-ease), transform 0.6s ease; }
.mp-img.mp-in { clip-path: inset(0 0 0 0 round 0px); }
.mp-img.mp-in > img, .mp-img.mp-in > picture > img { scale: 1; }

/* ---------- traço desenhado pela rolagem ---------- */
.mp-traco-alvo { position: relative; isolation: isolate; }
.mp-traco {
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: -0.12em;
  width: 112%;
  height: 0.5em;
  z-index: -1;
  overflow: visible;
  pointer-events: none;
}
.mp-traco path {
  fill: none;
  stroke: var(--mp-traco, var(--mp-a));
  stroke-width: var(--mp-traco-larg, 7px);
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--mp-t, 0));
  opacity: var(--mp-traco-op, 0.85);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--mp-traco, var(--mp-a)) 55%, transparent));
}
.mp-traco--cheio { --mp-t: 1; }

/* ---------- hero que vira cartão ao rolar ---------- */
.mp-heroi-cartao {
  scale: calc(1 - var(--mp-h, 0) * 0.08);
  border-radius: calc(var(--mp-h, 0) * 36px);
  transform-origin: 50% 0;
  overflow: hidden;
  will-change: transform;
}
.mp-heroi-texto {
  translate: 0 calc(var(--mp-h, 0) * -110px);
}

/* ---------- barra de progresso ---------- */
.mp-prog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  height: 2px;
  background: linear-gradient(90deg, var(--mp-a), var(--mp-b), var(--mp-c));
  transform: scaleX(var(--mp-prog, 0));
  transform-origin: left;
  pointer-events: none;
}

/* ---------- cursor próprio ---------- */
html.mp-com-cursor, html.mp-com-cursor * { cursor: none !important; }
html.mp-com-cursor input, html.mp-com-cursor textarea, html.mp-com-cursor select { cursor: auto !important; }
.mp-cur { position: fixed; inset: 0 auto auto 0; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity 0.3s; }
.mp-cur--on { opacity: 1; }
.mp-cur--campo { opacity: 0; }
.mp-cur__ponto, .mp-cur__anel { position: fixed; top: 0; left: 0; will-change: transform; }
.mp-cur__ponto::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--mp-cur);
  transition: transform 0.3s var(--mp-ease);
}
.mp-cur__anel::before {
  content: "";
  position: absolute;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border: 1px solid color-mix(in srgb, var(--mp-cur) 65%, transparent);
  border-radius: 50%;
  transition: transform 0.45s var(--mp-ease), background-color 0.3s, border-color 0.3s;
}
.mp-cur--link .mp-cur__anel::before { transform: scale(1.55); background: color-mix(in srgb, var(--mp-cur) 14%, transparent); border-color: transparent; }
.mp-cur--link .mp-cur__ponto::before { transform: scale(0); }
.mp-cur--rotulo .mp-cur__anel::before { transform: scale(3.1); background: var(--mp-cur-fundo, radial-gradient(circle at 35% 30%, #fbe9c4, #f2d59b 55%, #d7ac65)); border-color: transparent; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.6); }
.mp-cur--rotulo .mp-cur__ponto::before { transform: scale(0); }
.mp-cur--aperta .mp-cur__anel::before { transform: scale(0.8); }
.mp-cur--rotulo.mp-cur--aperta .mp-cur__anel::before { transform: scale(2.7); }
.mp-cur__txt {
  position: absolute;
  transform: translate(-50%, -50%) scale(0.6);
  font: 700 0.68rem/1 var(--mp-cur-fonte, inherit);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--mp-cur-txt, #100f15);
  opacity: 0;
  transition: opacity 0.25s, transform 0.45s var(--mp-ease);
}
.mp-cur--rotulo .mp-cur__txt { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ---------- botões magnéticos ---------- */
.mp-ima { transition: translate 0.5s var(--mp-ease); }

/* ---------- reduzir movimento: tudo pronto e parado ---------- */
@media (prefers-reduced-motion: reduce) {
  .mp-pre { display: none; }
  .mp-p__i, html:not(.mp-pronto) .mp-split .mp-p__i { transform: none !important; transition: none; }
  .mp-img, .mp-img > img { clip-path: none; scale: none; transition: none; }
  .mp-heroi-cartao, .mp-heroi-texto { scale: none; translate: none; border-radius: 0; }
}

html.mp-sem-pre .mp-pre { display: none; }