/* ============================================================
   MABECOS · Enhancements
   Camada de polish em cima do sistema. Sem libs, sem JS-only.
   ============================================================ */

/* Scroll progress · barra vermelha fina no topo */
.mb-scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  background: var(--mb-red);
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 200;
  pointer-events: none;
  transition: transform 80ms linear;
}

/* Focus ring institucional */
*:focus-visible {
  outline: 3px solid var(--mb-red);
  outline-offset: 3px;
  transition: outline-offset 120ms ease;
}
button:focus-visible, a:focus-visible {
  outline-offset: 4px;
}

/* ============================================================
   TICKER · gradient fade nas extremidades
   ============================================================ */
.ticker {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    black 48px,
    black calc(100% - 48px),
    transparent 100%
  );
          mask-image: linear-gradient(
    to right,
    transparent 0,
    black 48px,
    black calc(100% - 48px),
    transparent 100%
  );
}

/* ============================================================
   MAGNETIC BUTTONS · base
   ============================================================ */
[data-magnetic] {
  transition: transform 360ms cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

/* ============================================================
   HOVER-AWARE FILL · usado nos contact cards
   - O fill desliza para fora pelo mesmo lado por onde entrou
   ============================================================ */
[data-hover-aware] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
[data-hover-aware] > * { position: relative; z-index: 2; }
[data-hover-aware]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--mb-red);
  z-index: 1;
  transition: transform 380ms cubic-bezier(.22, 1, .36, 1);
}
/* Estado inicial (mouseleave): sai pelo lado oposto */
[data-hover-aware][data-from="top"]::before    { transform: translateY(-101%); }
[data-hover-aware][data-from="bottom"]::before { transform: translateY(101%); }
[data-hover-aware][data-from="left"]::before   { transform: translateX(-101%); }
[data-hover-aware][data-from="right"]::before  { transform: translateX(101%); }
[data-hover-aware]:not([data-from])::before     { transform: translateY(101%); }
/* Estado hover: fill chega à posição neutra */
[data-hover-aware]:hover::before {
  transform: translate3d(0, 0, 0) !important;
}

/* ============================================================
   TEXT MASK REVEAL · words com slide vertical
   ============================================================ */
[data-text-reveal] { overflow: hidden; }
.mb-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: 1.15;
}
.mb-word__inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 720ms cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--i) * 35ms);
}
[data-text-reveal].is-revealed .mb-word__inner {
  transform: translateY(0);
}

/* ============================================================
   STICKY CHAPTER SCALE · chapter numbers
   ============================================================ */
[data-chapter-num] {
  transform-origin: left center;
  transition: transform 120ms linear, opacity 120ms linear;
  will-change: transform, opacity;
}

/* ============================================================
   CALENDAR SPOTLIGHT · sobrepõe-se à linha
   ============================================================ */
[data-spotlight] {
  position: relative;
  isolation: isolate;
}
[data-spotlight]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 50%),
    rgba(224, 4, 16, 0.10),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
  z-index: 0;
}
[data-spotlight]:hover::after { opacity: 1; }
[data-spotlight] > * { position: relative; z-index: 1; }

/* ============================================================
   CURTAIN REVEAL · usado no hero da apoiar
   ============================================================ */
[data-curtain] {
  transform: translateY(110%);
  opacity: 0;
  transition:
    transform 900ms cubic-bezier(.22, 1, .36, 1),
    opacity 600ms ease 100ms;
  will-change: transform, opacity;
}
[data-curtain].is-open {
  transform: translateY(0);
  opacity: 1;
}

/* ============================================================
   SUBMIT BUTTON · loading shimmer
   ============================================================ */
.step-nav__next.is-loading {
  pointer-events: none;
  background: var(--mb-blue-deep);
  position: relative;
  overflow: hidden;
}
.step-nav__next.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 70%
  );
  animation: mb-shimmer 1.1s linear infinite;
}
@keyframes mb-shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* ============================================================
   SUCCESS · checkmark a desenhar-se
   ============================================================ */
.success__mark {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--mb-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
}
.success__mark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--mb-red);
  transform: translateY(101%);
  animation: mb-mark-bg 600ms cubic-bezier(.22, 1, .36, 1) 200ms forwards;
}
.success__mark svg {
  position: relative;
  z-index: 2;
  width: 38px;
  height: 38px;
  stroke: var(--mb-white);
  stroke-width: 4;
  stroke-linecap: square;
  stroke-linejoin: miter;
  fill: none;
}
.success__mark svg path {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: mb-mark-draw 540ms cubic-bezier(.22, 1, .36, 1) 700ms forwards;
}
@keyframes mb-mark-bg {
  to { transform: translateY(0); }
}
@keyframes mb-mark-draw {
  to { stroke-dashoffset: 0; }
}

/* ============================================================
   ERROR · estado mais elegante
   ============================================================ */
.field.has-error {
  animation: mb-shake 320ms cubic-bezier(.36, .07, .19, .97);
}
@keyframes mb-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

/* ============================================================
   Reduced motion · respeitar
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .mb-scroll-progress,
  [data-magnetic],
  [data-parallax],
  [data-hover-aware]::before,
  .mb-word__inner,
  [data-curtain] {
    transition: none !important;
    transform: none !important;
    animation: none !important;
  }
  [data-text-reveal] .mb-word__inner { transform: none; }
  [data-curtain] { opacity: 1; }
}