/* =========================================================
   SOBRE O MARIO BRASIL: 20 anos de história
   ========================================================= */
.sb {
  --night1: #06143d;
  --night2: #0a1f5c;
  --night3: #1d47b8;
  --paper: #fffdf7;
  --ink: #2b2520;
  overflow-x: clip;
}
.sb [hidden] { display: none !important; }
.sb h1, .sb h2, .sb h3 { font-family: var(--mbr-font-display); font-weight: 400; line-height: 1.05; }
.sb-eyebrow {
  display: inline-block; margin: 0 0 10px; font-weight: 900; font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
  color: #ffdf00; background: rgba(255, 255, 255, .12); padding: 6px 12px; border-radius: 999px;
}
.sb-eyebrow--ink { color: var(--mbr-red); background: #ffe9e9; }
.sb-h2 { font-size: clamp(34px, 5vw, 58px); margin: 0 0 10px; }

/* ---------- Tela de título ---------- */
.sb-hero {
  position: relative; overflow: hidden; isolation: isolate; color: #fff; text-align: center;
  padding: 56px 16px 190px; min-height: min(880px, 100vh);
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%) 0 0 / 220px 220px,
    radial-gradient(1px 1px at 62% 42%, #fff 50%, transparent 51%) 0 0 / 160px 160px,
    radial-gradient(2px 2px at 82% 72%, #fffbe0 50%, transparent 51%) 0 0 / 300px 300px,
    linear-gradient(var(--night1), var(--night2) 45%, var(--night3) 82%, #3a6ee0);
}
.sb-hero__sky { position: absolute; inset: 0; z-index: -1; }
.sb-fw {
  position: absolute; left: var(--x); top: var(--y); width: 180px; height: 180px; translate: -50% -50%; border-radius: 50%;
  background: repeating-conic-gradient(var(--c1) 0 5deg, transparent 5deg 18deg, var(--c2) 18deg 22deg, transparent 22deg 36deg);
  -webkit-mask: radial-gradient(circle, transparent 0 18%, #000 19% 47%, transparent 50%);
  mask: radial-gradient(circle, transparent 0 18%, #000 19% 47%, transparent 50%);
  opacity: 0; animation: sbBurst 5.2s var(--d) ease-out infinite;
}
@keyframes sbBurst {
  0% { transform: scale(.1) rotate(0deg); opacity: 0; }
  4% { opacity: 1; }
  28% { transform: scale(1) rotate(12deg); opacity: 1; }
  42%, 100% { transform: scale(1.18) rotate(16deg); opacity: 0; }
}
.sb-hero__in { position: relative; z-index: 2; max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }

.sb-seal {
  width: 230px; height: 230px; margin-bottom: 18px;
  filter: drop-shadow(0 10px 0 rgba(0, 0, 0, .25)) drop-shadow(0 0 40px rgba(255, 223, 0, .35));
  animation: sbFloat 4.5s ease-in-out infinite;
}
.sb-seal svg { width: 100%; height: 100%; overflow: visible; display: block; }
.sb-seal__burst { transform-box: view-box; transform-origin: 120px 120px; animation: sbSpin 60s linear infinite reverse; }
.sb-seal__ring { transform-box: view-box; transform-origin: 120px 120px; animation: sbSpin 26s linear infinite; }
.sb-seal__shine { transform-box: view-box; transform-origin: 120px 120px; animation: sbShine 5s ease-in-out infinite; }
@keyframes sbSpin { to { transform: rotate(360deg); } }
@keyframes sbShine { 0%, 55% { transform: rotate(20deg) translateX(0); } 100% { transform: rotate(20deg) translateX(260px); } }
@keyframes sbFloat { 50% { translate: 0 -8px; } }

.sb-kicker {
  margin: 0 0 14px; font-weight: 900; font-size: 13px; letter-spacing: 2.5px; text-transform: uppercase;
  color: #ffdf00; border: 2px solid rgba(255, 223, 0, .5); padding: 6px 14px; border-radius: 999px;
}
.sb-title {
  margin: 0; font-size: clamp(40px, 7.4vw, 96px); line-height: .98; letter-spacing: .5px;
  text-shadow: 0 5px 0 #000a2e, 3px 0 0 #000a2e, -3px 0 0 #000a2e, 0 -3px 0 #000a2e, 3px 5px 0 #000a2e, -3px 5px 0 #000a2e, 0 14px 30px rgba(0, 0, 0, .45);
}
.sb-title span { display: block; color: #ffdf00; }
.sb-sub {
  display: inline-block; margin: 22px 0 34px; padding: 10px 26px 12px; transform: rotate(-2deg);
  font-family: var(--mbr-font-display); font-size: clamp(22px, 3.4vw, 38px); color: #ffdf00;
  background: var(--br-green); border-radius: 12px; box-shadow: 0 6px 0 #006627, 0 14px 28px rgba(0, 0, 0, .3);
  position: relative;
}
.sb-sub::before, .sb-sub::after { content: ""; position: absolute; top: 12px; width: 26px; height: 100%; background: #007a2e; z-index: -1; }
.sb-sub::before { left: -16px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 40% 50%); }
.sb-sub::after { right: -16px; clip-path: polygon(0 0, 100% 0, 60% 50%, 100% 100%, 0 100%); }
.sb-start {
  display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: #fff;
  font-family: var(--mbr-font-pixel); font-size: clamp(13px, 1.8vw, 18px); letter-spacing: 2px;
  padding: 18px 26px; border: 4px solid #fff; background: rgba(0, 0, 0, .35); box-shadow: 6px 6px 0 rgba(0, 0, 0, .4);
  transition: background .2s, transform .15s;
}
.sb-start:hover, .sb-start:focus-visible { background: var(--mbr-red); transform: translate(-2px, -2px); }
.sb-start__arrow { color: #ffdf00; animation: sbBlink 1s steps(1) infinite; }
@keyframes sbBlink { 50% { opacity: 0; } }
.sb-hint { margin: 18px 0 0; font-size: 15px; font-weight: 700; color: #c9d6ff; }

.sb-hero__castle {
  position: absolute; right: 6%; bottom: 48px; width: 150px; height: 130px; z-index: 1;
  background: #071233;
  clip-path: polygon(0 100%, 0 38%, 10% 38%, 10% 28%, 20% 28%, 20% 38%, 30% 38%, 30% 28%, 40% 28%, 40% 38%, 60% 38%, 60% 28%, 70% 28%, 70% 38%, 80% 38%, 80% 28%, 90% 28%, 90% 38%, 100% 38%, 100% 100%, 62% 100%, 62% 70%, 38% 70%, 38% 100%);
}
.sb-hero__flag {
  position: absolute; right: calc(6% + 70px); bottom: 165px; width: 6px; height: 120px; background: #d9d9e3; z-index: 1;
}
.sb-hero__flag::before { content: ""; position: absolute; left: -5px; top: -14px; width: 16px; height: 16px; border-radius: 50%; background: #ffdf00; }
.sb-hero__flag b {
  position: absolute; left: 6px; top: 4px; padding: 6px 14px 6px 10px; font-family: var(--mbr-font-display); font-weight: 400; font-size: 22px;
  color: #ffdf00; background: var(--br-green); clip-path: polygon(0 0, 100% 0, 86% 50%, 100% 100%, 0 100%);
  transform-origin: left center; animation: sbWave 1.6s ease-in-out infinite;
}
@keyframes sbWave { 50% { transform: skewY(-6deg) scaleX(.92); } }
.sb-hero__ground {
  position: absolute; left: 0; right: 0; bottom: 0; height: 48px; z-index: 2;
  background:
    linear-gradient(#0000 22px, #00000059 22px 24px, #0000 24px) 0 0 / 48px 48px,
    linear-gradient(90deg, #0000 46px, #00000059 46px) 0 0 / 48px 24px,
    linear-gradient(90deg, #0000 22px, #00000059 22px 24px, #0000 24px) 0 24px / 48px 48px,
    #c84c0c;
  box-shadow: inset 0 4px 0 #fca044;
}
@media (max-width: 760px) {
  .sb-hero { padding: 40px 16px 150px; min-height: 0; }
  .sb-seal { width: 170px; height: 170px; }
  .sb-hero__castle { right: -20px; transform: scale(.7); transform-origin: bottom right; }
  .sb-hero__flag { display: none; }
}

/* ---------- Mapa da jornada ---------- */
.sb-map {
  position: relative; padding: 80px 0 90px; text-align: center; color: var(--ink);
  background:
    radial-gradient(circle, rgba(120, 84, 30, .14) 1.5px, transparent 2px) 0 0 / 22px 22px,
    linear-gradient(#f8ecc9, #f1dfae);
}
.sb-map .sb-eyebrow { color: #8a5a00; background: rgba(255, 255, 255, .6); }
.sb-map__lead { margin: 0 0 40px; font-weight: 700; color: #6b5532; }
.sb-path { position: relative; max-width: 1100px; margin: 0 auto; }
.sb-path__line { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 120px; overflow: visible; }
.sb-path__line path { fill: none; stroke: #8a5a00; stroke-width: 5; stroke-dasharray: 2 14; stroke-linecap: round; opacity: .55; vector-effect: non-scaling-stroke; }
.sb-stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; position: relative; }
.sb-stages li:nth-child(1) { margin-top: 44px; } .sb-stages li:nth-child(2) { margin-top: 0; } .sb-stages li:nth-child(3) { margin-top: 44px; }
.sb-stages li:nth-child(4) { margin-top: 0; } .sb-stages li:nth-child(5) { margin-top: 20px; }
.sb-stage {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--ink);
  padding: 0 6px 16px; border-radius: 18px; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.sb-stage:hover, .sb-stage:focus-visible { transform: translateY(-6px); }
.sb-stage__dot {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 6px;
  font-family: var(--mbr-font-pixel); font-size: 13px; color: #fff; background: var(--mbr-red);
  border: 4px solid #fff; box-shadow: 0 5px 0 #7a0009, 0 10px 18px rgba(0, 0, 0, .2);
}
.sb-stage--pipe .sb-stage__dot { background: linear-gradient(90deg, #0a7a1c, #36c447 40%, #18a12a 70%, #0a6a18); box-shadow: 0 5px 0 #053d0d, 0 10px 18px rgba(0, 0, 0, .2); border-radius: 12px; }
.sb-stage--star .sb-stage__dot { background: #ffcc00; color: #3b2a00; box-shadow: 0 5px 0 #b38f00, 0 0 0 8px rgba(255, 204, 0, .25); }
.sb-stage--castle .sb-stage__dot { background: #002776; font-size: 22px; color: #ffdf00; border-radius: 12px; box-shadow: 0 5px 0 #000f33; }
.sb-stage.is-on .sb-stage__dot { outline: 4px dashed #8a5a00; outline-offset: 5px; }
.sb-stage b { font-family: var(--mbr-font-display); font-weight: 400; font-size: 24px; }
.sb-stage span:last-child { font-size: 14.5px; font-weight: 700; line-height: 1.35; color: #5a4626; max-width: 210px; }
.sb-token {
  position: absolute; left: 0; top: 0; width: 54px; height: 64px; pointer-events: none; z-index: 2;
  transition: left .7s cubic-bezier(.4, 0, .2, 1), top .7s cubic-bezier(.4, 0, .2, 1);
}
.sb-token img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .25)); }
.sb-token.is-hop img { animation: sbHop .45s ease; }
@keyframes sbHop { 50% { transform: translateY(-18px); } }
@media (max-width: 860px) {
  .sb-path__line { display: none; }
  .sb-stages { grid-template-columns: 1fr; gap: 10px; text-align: left; padding-left: 8px; }
  .sb-stages::before { content: ""; position: absolute; left: 39px; top: 10px; bottom: 10px; border-left: 5px dotted rgba(138, 90, 0, .45); }
  .sb-stages li:nth-child(n) { margin-top: 0; }
  .sb-stage { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 6px; }
  .sb-stage__dot { width: 56px; height: 56px; margin: 0; font-size: 11px; position: relative; z-index: 1; }
  .sb-stage b { font-size: 22px; }
  .sb-stage span:last-child { flex-basis: 100%; padding-left: 70px; max-width: none; margin-top: -8px; }
  .sb-token { display: none; }
}

/* ---------- A carta ---------- */
.sb-letter-sec {
  position: relative; padding: 90px 16px 110px;
  background:
    radial-gradient(circle at 10% 10%, rgba(255, 223, 0, .18), transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(0, 156, 59, .12), transparent 45%),
    #f1e6d2;
}
.sb-letter-grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 40px; align-items: start; }
.sb-letter {
  position: relative; background: var(--paper); color: var(--ink); padding: 64px 72px 56px; border-radius: 6px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 22px 50px -18px rgba(70, 45, 10, .45);
}
.sb-letter::before, .sb-letter::after {
  content: ""; position: absolute; inset: 0; border-radius: 6px; background: #fbf5e8; z-index: -1;
  box-shadow: 0 10px 30px -14px rgba(70, 45, 10, .35);
}
.sb-letter::before { transform: rotate(-1.6deg) translate(-6px, 8px); }
.sb-letter::after { transform: rotate(1.2deg) translate(8px, 4px); background: #f7efdc; }
.sb-letter > *:first-child { margin-top: 0; }
.sb-stamp {
  position: absolute; right: 30px; top: 28px; width: 104px; padding: 8px; border: 0; cursor: pointer; background: #fff;
  transform: rotate(6deg); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1);
  -webkit-mask: radial-gradient(circle at center, transparent 3.5px, #000 4px) -5px -5px / 10px 10px, linear-gradient(#000 0 0) content-box;
  -webkit-mask-composite: source-over;
  mask: radial-gradient(circle at center, transparent 3.5px, #000 4px) -5px -5px / 10px 10px, linear-gradient(#000 0 0) content-box;
  mask-composite: add;
}
.sb-stamp__in { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px 6px; border: 2px solid var(--mbr-red); background: linear-gradient(#fff8e1, #fff); }
.sb-stamp:hover, .sb-stamp:focus-visible { transform: rotate(-3deg) scale(1.06); }
.sb-stamp.is-wiggle { animation: sbWiggle .5s ease; }
@keyframes sbWiggle { 25% { transform: rotate(14deg); } 60% { transform: rotate(-6deg); } }
.sb-stamp img { width: 68px; height: auto; }
.sb-stamp__in span { font-family: var(--mbr-font-pixel); font-size: 7px; color: var(--mbr-red); letter-spacing: .5px; }
.sb-letter__title { font-size: clamp(30px, 4vw, 44px); margin: 0 120px 30px 0; color: var(--ink); }
.sb-letter__title em { display: block; font-style: normal; color: var(--mbr-red); font-size: .72em; margin-top: 6px; }
.sb-letter__body { font-family: "Lora", Georgia, serif; font-size: 19.5px; line-height: 1.85; }
.sb-letter__body p { margin: 0 0 1.15em; scroll-margin-top: calc(var(--mbr-header-h) + 40px); border-radius: 8px; transition: background-color .6s; }
.sb-letter__body strong {
  font-weight: 600; color: #1f1a15;
  background: linear-gradient(transparent 58%, rgba(255, 214, 0, .55) 58%, rgba(255, 214, 0, .55) 92%, transparent 92%);
}
.sb-drop::first-letter {
  float: left; font-family: var(--mbr-font-display); font-size: 4.3em; line-height: .78; margin: 10px 12px 0 0;
  color: var(--mbr-red); text-shadow: 3px 3px 0 #ffdf00;
}
.sb-tag {
  display: inline-block; vertical-align: 3px; margin-right: 10px; padding: 6px 8px 5px; border-radius: 5px;
  font-family: var(--mbr-font-pixel); font-size: 10px; line-height: 1; color: #fff; background: #002776;
}
.sb-tag--gold { background: #ffcc00; color: #3b2a00; }
.sb-letter__body p.is-flash { animation: sbFlash 1.8s ease; }
@keyframes sbFlash { 0%, 30% { background-color: rgba(255, 223, 0, .45); box-shadow: 0 0 0 10px rgba(255, 223, 0, .45); } 100% { background-color: transparent; box-shadow: 0 0 0 10px transparent; } }
.sb-divider { display: flex; justify-content: center; gap: 18px; margin: 34px 0 30px; }
.sb-divider i { width: 20px; height: 24px; background: url("../img/itens/moeda.webp") center / contain no-repeat; animation: mbr-spin 1.8s linear infinite; }
.sb-divider i:nth-child(2) { animation-delay: -.6s; } .sb-divider i:nth-child(3) { animation-delay: -1.2s; }
.sb-letter__start {
  text-align: center; font-family: var(--mbr-font-display); font-size: clamp(24px, 3vw, 32px); line-height: 1.2; color: var(--mbr-red);
  margin: 1.6em 0 0 !important; padding: 18px 10px; border-top: 3px dashed #eadbbf; border-bottom: 3px dashed #eadbbf;
}
.sb-sign { margin-top: 40px; text-align: right; }
.sb-sign__motto { margin: 0 0 6px; font-family: "Lora", Georgia, serif; font-style: italic; font-size: 19px; color: #5a4a3a; }
.sb-sign__name {
  display: inline-block; font-family: "Caveat", cursive; font-weight: 700; font-size: 52px; line-height: 1.1; color: #002776; text-decoration: none;
  transform: rotate(-3deg); transition: color .2s;
}
.sb-sign__name:hover, .sb-sign__name:focus-visible { color: var(--mbr-red); text-decoration: underline; text-decoration-thickness: 2px; }
.sb-sign__role { margin: 4px 0 0; font-weight: 900; font-size: 13px; letter-spacing: 1.6px; text-transform: uppercase; color: #8a7a66; }
@media (max-width: 760px) {
  .sb-letter { padding: 40px 22px 36px; }
  .sb-stamp { width: 78px; right: 12px; top: 12px; padding: 6px; }
  .sb-stamp img { width: 50px; }
  .sb-letter__title { margin-right: 80px; }
  .sb-letter__body { font-size: 18px; line-height: 1.8; }
  .sb-sign { text-align: left; }
  .sb-sign__name { font-size: 44px; }
}

/* Mastro de progresso (desktop) */
.sb-pole { position: relative; align-self: stretch; }
.sb-pole__sticky {
  --p: 0; position: sticky; top: calc(var(--mbr-header-h) + 40px); height: min(600px, calc(100vh - 160px));
}
.sb-pole__bar { position: absolute; left: 50%; top: 18px; bottom: 40px; width: 8px; transform: translateX(-50%); border-radius: 4px; background: linear-gradient(90deg, #4caf50, #b7f5a0 40%, #2e8b3a); }
.sb-pole__ball { position: absolute; left: 50%; top: 0; width: 26px; height: 26px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #b7f5a0, #1f9d3a 60%, #0d5d22); box-shadow: 0 3px 0 rgba(0, 0, 0, .2); z-index: 1; }
.sb-pole__flag {
  position: absolute; left: calc(50% + 4px); top: 26px; padding: 8px 18px 8px 10px; font-family: var(--mbr-font-display); font-size: 20px; color: #ffdf00;
  background: var(--br-green); clip-path: polygon(0 0, 100% 0, 84% 50%, 100% 100%, 0 100%); transform-origin: left center;
  transition: background .4s, color .4s;
}
.sb-pole__sticky.is-done .sb-pole__flag { background: #ffcc00; color: var(--mbr-red); animation: sbWave 1.2s ease-in-out infinite; }
.sb-pole__base { position: absolute; left: 50%; bottom: 0; width: 44px; height: 40px; transform: translateX(-50%); background: #c84c0c; box-shadow: inset 0 4px 0 #fca044, inset 0 -4px 0 #6b2400; border-radius: 3px; }
.sb-pole__mario {
  position: absolute; left: calc(50% - 46px); width: 50px; height: 60px;
  bottom: calc(40px + (100% - 120px) * var(--p)); transition: bottom .25s linear;
}
.sb-pole__mario img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .2)); }
.sb-pole__pct { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); font-family: var(--mbr-font-pixel); font-size: 10px; color: #6b5532; white-space: nowrap; }
.sb-progress { display: none; }
@media (max-width: 1099px) {
  .sb-letter-grid { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
  .sb-pole { display: none; }
  .sb-progress { display: block; position: fixed; left: 0; right: 0; top: var(--mbr-header-h); height: 6px; z-index: 40; background: rgba(0, 0, 0, .08); opacity: 0; transition: opacity .3s; }
  .sb-progress.is-on { opacity: 1; }
  .sb-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--br-green), var(--br-yellow), var(--mbr-red)); }
}

/* ---------- Obrigado ---------- */
.sb-thanks {
  position: relative; overflow: hidden; isolation: isolate; text-align: center; color: #fff; padding: 100px 0 160px;
  background: radial-gradient(circle at 50% 40%, #0f3fae, var(--night2) 70%);
}
.sb-thanks::before {
  content: ""; position: absolute; left: 50%; top: 45%; width: 1300px; height: 640px; transform: translate(-50%, -50%); z-index: -1;
  background: var(--br-yellow); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); opacity: .08;
}
.sb-thanks__fx { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.sb-thanks__in { position: relative; z-index: 1; }
.sb-thanks__word { margin: 0 0 18px; font-size: clamp(56px, 12vw, 150px); line-height: 1; display: flex; justify-content: center; flex-wrap: wrap; }
.sb-thanks__word span {
  display: inline-block; color: var(--c, #e60012);
  text-shadow: 0 6px 0 #000a2e, 4px 0 0 #fff, -4px 0 0 #fff, 0 -4px 0 #fff, 0 4px 0 #fff, 4px 4px 0 #fff, -4px 4px 0 #fff, 4px -4px 0 #fff, -4px -4px 0 #fff, 0 12px 20px rgba(0, 0, 0, .4);
  animation: sbLetter 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * .12s);
}
.sb-thanks__word span:nth-child(4n + 1) { --c: #e60012; } .sb-thanks__word span:nth-child(4n + 2) { --c: #ffcc00; }
.sb-thanks__word span:nth-child(4n + 3) { --c: #00a651; } .sb-thanks__word span:nth-child(4n + 4) { --c: #1f4fbf; }
@keyframes sbLetter { 0%, 70%, 100% { transform: translateY(0) rotate(0); } 80% { transform: translateY(-16px) rotate(-4deg); } }
.sb-thanks__txt { max-width: 640px; margin: 0 auto 30px; font-size: 19px; font-weight: 700; color: #dce5ff; }
.sb-fire { font-size: 20px; }
.sb-fire[disabled] { opacity: .6; cursor: default; }
.sb-thanks__coin { display: block; margin: 26px auto 0; transform: scale(1.4); }
.sb-thanks__cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.sb-burst {
  position: absolute; width: 200px; height: 200px; translate: -50% -50%; border-radius: 50%;
  background: repeating-conic-gradient(var(--c1) 0 5deg, transparent 5deg 18deg, var(--c2) 18deg 22deg, transparent 22deg 36deg);
  -webkit-mask: radial-gradient(circle, transparent 0 18%, #000 19% 47%, transparent 50%);
  mask: radial-gradient(circle, transparent 0 18%, #000 19% 47%, transparent 50%);
  animation: sbBurstOnce 1.4s ease-out forwards;
}
.sb-burst b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--mbr-font-display); font-size: 26px; color: #fff; text-shadow: 0 2px 0 #000a2e; }
@keyframes sbBurstOnce { 0% { transform: scale(.1); opacity: 1; } 60% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.2); opacity: 0; } }
.sb-burst-num {
  position: absolute; translate: -50% -50%; font-family: var(--mbr-font-display); font-size: 28px; color: #fff; text-shadow: 0 3px 0 #000a2e;
  animation: sbNum 1.4s ease-out forwards;
}
@keyframes sbNum { 0% { opacity: 0; transform: scale(.5); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: translateY(-20px); } }

@media (prefers-reduced-motion: reduce) {
  .sb-fw { display: none; }
  .sb-thanks__word span { animation: none; }
}