/* Mundo: Motoboys do Sertão. Poeira dourada, asfalto noturno, rota tracejada. */
.world--mb {
  --w-bg: #0D0A09;
  --w-ink: #F2EDE4;
  --w-accent: #FDDA3B;
  --w-accent-2: #22E7FF;
  --w-display: "Anton", Impact, sans-serif;
  --w-body: "Poppins", "Avenir Next", sans-serif;
  --thread: #FDDA3B;
  --marker-bg: #0D0A09;
  --dust-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -8 5.6'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
}
.world--mb mark { background: none; color: var(--w-accent); font-weight: 700; }
.world--mb mark.night { color: var(--w-accent-2); }

/* Títulos com textura de terra */
.mb-title, .mb-h2, .mb-crossing__from, .mb-crossing__to, .mb-next__name {
  font-family: var(--w-display); text-transform: uppercase; font-weight: 400; line-height: 1; padding-top: .12em;
  -webkit-mask-image: var(--dust-mask); mask-image: var(--dust-mask);
}
.mb-h2 { font-size: clamp(2.6rem, 7vw, 6rem); margin: 0 0 40px; }
.mb-h3 { font-family: var(--w-body); font-weight: 800; font-size: var(--s-2); margin: 0 0 10px; }

/* Abertura */
.mb-opening .w-opening__background img { filter: saturate(1.05) contrast(1.05); transform: scale(1.04); }
.mb-opening::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(13,10,9,.92) 4%, rgba(13,10,9,.2) 46%, rgba(13,10,9,.35)); }
.mb-dust { z-index: 1 !important; }
.mb-opening__text { position: relative; z-index: 2; }
.mb-title { font-size: clamp(3.4rem, 12.5vw, 12rem); line-height: 1.14; margin: 0; color: #fff; letter-spacing: .005em; }
.mb-credit { font-family: var(--w-display); text-transform: uppercase; font-size: clamp(1rem, 2vw, 1.5rem); letter-spacing: .02em; margin: 0; }
.mb-badge { display: inline-block; font-family: var(--w-display); text-transform: uppercase; color: var(--w-accent); font-size: clamp(1.1rem, 2.2vw, 1.8rem); margin: 12px 0 0; }
.mb-opening.is-stamped .mb-title { animation: stamp 1.1s cubic-bezier(.2, .9, .2, 1) both; }
@keyframes stamp { from { transform: scale(1.12); opacity: 0; filter: blur(6px); } 60% { opacity: 1; filter: blur(0); } to { transform: none; } }

/* Logline */
.mb-logline p { font-weight: 800; }
.mb-logline__follow { font-weight: 400 !important; font-size: var(--s-2) !important; max-width: 40ch !important; margin-top: 28px !important; opacity: .85; }

/* Travessia: do asfalto ao sertão */
.mb-crossing { position: relative; height: 260vh; }
html.reduced-motion .mb-crossing { height: auto; }
.mb-crossing__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
html.reduced-motion .mb-crossing__stage { position: relative; }
.mb-crossing__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mb-crossing__from, .mb-crossing__to { position: absolute; margin: 0; font-size: clamp(3rem, 11vw, 11rem); color: #fff; }
.mb-crossing__from { left: calc(var(--gutter) + var(--rail)); top: 16vh; opacity: var(--from-opacity, 1); color: var(--w-accent-2); }
.mb-crossing__to { right: var(--gutter); bottom: 20vh; opacity: var(--to-opacity, 0); color: var(--w-accent); }
.mb-crossing__note { position: absolute; left: calc(var(--gutter) + var(--rail)); bottom: 7vh; max-width: 44ch; margin: 0; font-size: .95rem; opacity: .9; }

/* Roadbook */
.mb-roadbook { position: relative; }
@media (min-width: 1000px) { .mb-roadbook { padding-right: 120px; } }
.mb-route { position: absolute; right: 0; top: 0; width: 110px; height: 100%; overflow: visible; display: none; }
@media (min-width: 1000px) { .mb-route { display: block; } }
.mb-route__base { fill: none; stroke: color-mix(in srgb, var(--w-accent) 28%, transparent); stroke-width: 3; stroke-dasharray: 12 10; }
.mb-route__live { fill: none; stroke: var(--w-accent); stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(253,218,59,.6)); }
.mb-milestone { position: absolute; right: 0; width: 110px; display: flex; align-items: center; gap: 10px; transform: translateY(-50%); font-size: .78rem; pointer-events: none; }
.mb-milestone i { width: 18px; height: 18px; border-radius: 50%; border: 4px solid var(--w-accent); background: var(--w-bg); flex: none; transition: background .3s, box-shadow .3s; }
.mb-milestone.is-reached i { background: var(--w-accent); box-shadow: 0 0 18px var(--w-accent); }
.mb-frame { aspect-ratio: 2.28 / 1; }
.mb-frame img { transition: transform 1.4s var(--ease); }
.w-chapter:hover .mb-frame img { transform: scale(1.03); }
.mb-chapters { list-style: none; padding: 0; margin: 0; }

/* História real: cópias impressas sobre a terra */
.mb-real { background: #140E0A; }
.mb-real__grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1000px) { .mb-real__grid { grid-template-columns: 1.3fr 1fr; } }
.mb-real__photos img { aspect-ratio: 2.28 / 1; object-fit: cover; width: 100%; }

.w-team small { display: block; font-size: .85rem; opacity: .7; margin-top: 4px; }
.mb-next__name { display: block; font-family: "Bebas Neue", var(--w-display); font-size: clamp(2.4rem, 7vw, 6rem); letter-spacing: .28em; -webkit-mask-image: none; mask-image: none; color: #CEC8B6; }
