/* Homepage proof grid, world reach lists, and five-milestone showcase. */
.home-proof {
  padding-bottom: 32px;
}

.proof-ledger {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-world {
  padding-top: 0;
  padding-bottom: 88px;
}

.world-map-stage {
  margin-top: 0;
  opacity: 1;
  transform: none;
}

.world-firsts-impact {
  position: relative;
  min-height: clamp(760px, 96svh, 980px);
  color: #f4f1e9;
  background:
    radial-gradient(circle at 50% 48%, rgba(200, 169, 93, .16), transparent 34%),
    linear-gradient(155deg, #071a16, #0b2721 62%, #071a16);
  overflow: hidden;
  isolation: isolate;
}

.world-firsts-impact::before {
  content: "LEADING";
  position: absolute;
  right: -2vw;
  bottom: -5vw;
  color: rgba(244, 241, 233, .022);
  font: 500 clamp(150px, 26vw, 420px)/.72 Georgia, "Times New Roman", serif;
  letter-spacing: -.09em;
  pointer-events: none;
}

.world-firsts-inner {
  position: relative;
  z-index: 3;
  min-height: clamp(760px, 96svh, 980px);
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  pointer-events: none;
}

.world-firsts-kicker {
  margin-bottom: clamp(18px, 3vh, 34px);
  color: #c8a95d;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .32em;
}

.world-firsts-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vw, 42px);
  margin-bottom: clamp(34px, 5vh, 52px);
}

.world-firsts-number {
  display: block;
  color: #e1c77f;
  font: 500 clamp(180px, 22vw, 310px)/.68 Georgia, "Times New Roman", serif;
  letter-spacing: -.1em;
  text-shadow: 0 0 70px rgba(200, 169, 93, .13);
  transform-origin: center;
}

.world-firsts-label {
  color: rgba(244, 241, 233, .86);
  font-size: clamp(15px, 2vw, 28px);
  font-weight: 900;
  line-height: .94;
  letter-spacing: .11em;
  text-align: left;
}

.world-firsts-impact h2 {
  margin-top: 0;
  font-size: clamp(42px, 4.7vw, 62px);
  line-height: .98;
  letter-spacing: -.075em;
}

.world-firsts-impact h2 span {
  color: #e1c77f;
  font-style: italic;
}

.world-firsts-summary {
  margin-top: 22px;
  color: #c8a95d;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .18em;
}

.world-firsts-note {
  max-width: 640px;
  margin-top: 14px;
  color: rgba(244, 241, 233, .43);
  font-size: 9px;
  line-height: 1.9;
  letter-spacing: .08em;
}

.world-firsts-rings,
.world-firsts-rings i {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(72vw, 760px);
  aspect-ratio: 1;
  border: 1px solid rgba(200, 169, 93, .16);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.world-firsts-rings i:nth-child(1) { inset: 12%; width: auto; }
.world-firsts-rings i:nth-child(2) { inset: 25%; width: auto; }
.world-firsts-rings i:nth-child(3) { inset: 38%; width: auto; }

.world-firsts-core {
  position: absolute;
  z-index: 2;
  inset: 50% auto auto 50%;
  width: 120px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 239, 176, .95), rgba(200, 169, 93, .32) 32%, transparent 70%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.2);
  pointer-events: none;
}

.world-milestone-signals {
  position: absolute;
  z-index: 4;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.milestone-signal {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 260px;
  transform: translate(-50%, -50%) translate(var(--x), var(--y));
  pointer-events: auto;
}

.milestone-signal button {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: #f4f1e9;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

.milestone-signal button > i {
  width: 10px;
  aspect-ratio: 1;
  border: 1px solid #fff5ca;
  border-radius: 50%;
  background: #e1c77f;
  box-shadow: 0 0 10px #e1c77f, 0 0 28px rgba(225, 199, 127, .72);
}

.milestone-signal button span {
  display: grid;
  min-width: 0;
}

.milestone-signal button b {
  color: rgba(244, 241, 233, .76);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .08em;
}

.milestone-signal button small {
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  color: #e1c77f;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
  opacity: 0;
  transition: max-height .25s ease, margin-top .25s ease, opacity .25s ease;
}

.milestone-signal button:hover,
.milestone-signal button:focus-visible,
.milestone-signal.is-active button {
  border-color: rgba(225, 199, 127, .25);
  background: rgba(7, 26, 22, .78);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .22);
  outline: none;
}

.milestone-signal button:hover b,
.milestone-signal button:focus-visible b,
.milestone-signal.is-active button b { color: #fff9e5; }

.milestone-signal button:hover small,
.milestone-signal button:focus-visible small,
.milestone-signal.is-active button small {
  max-height: 18px;
  margin-top: 4px;
  opacity: 1;
}

.motion-enabled .world-firsts-impact[data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

.motion-enabled .world-firsts-number,
.motion-enabled .world-firsts-label,
.motion-enabled .world-firsts-impact h2,
.motion-enabled .world-firsts-kicker,
.motion-enabled .world-firsts-summary,
.motion-enabled .world-firsts-note {
  opacity: 0;
}

.motion-enabled .world-firsts-number { transform: scale(.38); filter: blur(12px); }
.motion-enabled .world-firsts-label { transform: translateX(-20px); }
.motion-enabled .world-firsts-impact h2,
.motion-enabled .world-firsts-kicker,
.motion-enabled .world-firsts-summary,
.motion-enabled .world-firsts-note { transform: translateY(22px); }

.motion-enabled .world-firsts-impact.is-visible .world-firsts-number {
  animation: world-firsts-hit .95s 2.18s cubic-bezier(.16, 1.18, .34, 1) both;
}

.motion-enabled .world-firsts-impact.is-visible .world-firsts-label,
.motion-enabled .world-firsts-impact.is-visible h2,
.motion-enabled .world-firsts-impact.is-visible .world-firsts-kicker,
.motion-enabled .world-firsts-impact.is-visible .world-firsts-summary,
.motion-enabled .world-firsts-impact.is-visible .world-firsts-note {
  opacity: 1;
  transform: none;
  transition: opacity .65s cubic-bezier(.22, 1, .36, 1), transform .65s cubic-bezier(.22, 1, .36, 1);
}

.motion-enabled .world-firsts-impact.is-visible .world-firsts-kicker { transition-delay: .08s; }
.motion-enabled .world-firsts-impact.is-visible .world-firsts-label { transition-delay: 2.5s; }
.motion-enabled .world-firsts-impact.is-visible h2 { transition-delay: 2.66s; }
.motion-enabled .world-firsts-impact.is-visible .world-firsts-summary { transition-delay: 2.84s; }
.motion-enabled .world-firsts-impact.is-visible .world-firsts-note { transition-delay: 2.98s; }

.motion-enabled .world-firsts-impact:not(.is-visible) .world-firsts-rings {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.28);
}

.motion-enabled .world-firsts-impact.is-visible .world-firsts-rings {
  animation: world-firsts-ring 1.25s .08s cubic-bezier(.22, 1, .36, 1) both;
}

.motion-enabled .world-firsts-impact:not(.is-visible) .milestone-signal button {
  opacity: 0;
  transform: scale(.28);
}

.motion-enabled .world-firsts-impact.is-visible .milestone-signal button {
  animation:
    milestone-signal-arrive .48s var(--delay) cubic-bezier(.22, 1, .36, 1) both,
    milestone-signal-converge 1.7s 1.42s cubic-bezier(.65, 0, .2, 1) forwards;
}

.motion-enabled .world-firsts-impact.is-visible .world-firsts-core {
  animation: world-firsts-core-flash 1.15s 2.08s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes world-firsts-hit {
  0% { opacity: 0; filter: blur(12px); transform: scale(.38); }
  68% { opacity: 1; filter: blur(0); transform: scale(1.06); }
  100% { opacity: 1; filter: blur(0); transform: scale(1); }
}

@keyframes world-firsts-ring {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.28); }
  55% { opacity: .9; }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes milestone-signal-arrive {
  0% { opacity: 0; transform: scale(.28); filter: blur(8px); }
  72% { opacity: 1; transform: scale(1.18); filter: blur(0); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

@keyframes milestone-signal-converge {
  0%, 18% { opacity: 1; transform: translate(0, 0) scale(1); filter: brightness(1); }
  50% { opacity: 1; transform: translate(var(--tx), var(--ty)) scale(1.3); filter: brightness(1.8); }
  62% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(.08); filter: brightness(2.4); }
  72% { opacity: 0; transform: translate(0, 0) scale(.2); filter: brightness(1); }
  100% { opacity: 1; transform: translate(0, 0) scale(1); filter: brightness(1); }
}

@keyframes world-firsts-core-flash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.15); }
  38% { opacity: 1; transform: translate(-50%, -50%) scale(2.4); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(4.8); }
}

.world-ranking button {
  grid-template-columns: 32px minmax(0, 1fr) auto;
  grid-template-rows: 20px 1px;
  align-content: center;
  column-gap: 10px;
  row-gap: 7px;
}

.world-ranking button span {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  color: rgba(244, 241, 233, .5);
  font-size: 12px;
}

.world-ranking button b {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .11em;
}

.world-ranking button strong {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  color: rgba(244, 241, 233, .88);
  font-size: 20px;
}

.world-ranking button i {
  grid-column: 2;
  grid-row: 2;
  margin-top: 0;
}

.world-all-countries summary {
  font-size: 10px;
}

.world-country-ledger button {
  column-gap: 12px;
  min-height: 38px;
  color: rgba(244, 241, 233, .72);
  font-size: 10px;
}

.world-country-ledger button strong {
  color: rgba(244, 241, 233, .88);
  font-size: 16px;
}

@media (max-width: 1040px) {
  .proof-ledger {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .home-proof { padding-bottom: 24px; }
  .home-world { padding-bottom: 64px; }
  .world-map-stage { margin-top: 0; }

  .world-ranking button {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    grid-template-rows: 20px 1px;
    align-content: center;
    column-gap: 8px;
    row-gap: 6px;
    min-height: 50px;
    padding: 0 2px;
  }

  .world-ranking button span {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    color: rgba(244, 241, 233, .5);
    font-size: 12px;
  }

  .world-ranking button b {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .11em;
  }

  .world-ranking button strong {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
    color: rgba(244, 241, 233, .88);
    font-size: 23px;
  }

  .world-ranking button i {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
  }

  .world-country-ledger {
    gap: 0 14px;
  }

  .world-country-ledger button {
    font-size: 10px;
    letter-spacing: .04em;
  }

  .world-country-ledger button strong {
    font-size: 16px;
  }

  .world-firsts-impact,
  .world-firsts-inner { min-height: 880px; }

  .world-firsts-rings { width: 138vw; }
  .world-firsts-lockup { gap: 8px; margin-bottom: 22px; }
  .world-firsts-number { font-size: clamp(138px, 41vw, 160px); }
  .world-firsts-label { max-width: 132px; font-size: 11px; line-height: 1.05; letter-spacing: .06em; }
  .world-firsts-kicker { margin-bottom: 14px; font-size: 7px; }
  .world-firsts-impact h2 { margin-top: 0; font-size: clamp(31px, 9vw, 36px); line-height: 1.06; }
  .world-firsts-summary { margin-top: 16px; font-size: 6.5px; letter-spacing: .12em; }
  .world-firsts-note { max-width: 290px; margin-top: 11px; font-size: 6.5px; line-height: 1.7; }

  .milestone-signal { width: 172px; }
  .milestone-signal button { grid-template-columns: 10px minmax(0, 1fr); gap: 7px; min-height: 48px; padding: 7px 8px; }
  .milestone-signal button > i { width: 8px; }
  .milestone-signal button b { font-size: 12px; line-height: 1.18; letter-spacing: .04em; }
  .milestone-signal button small { font-size: 8px; letter-spacing: .03em; }

  .signal-01 { --x: -100px !important; --y: -255px !important; --tx: 100px !important; --ty: 255px !important; }
  .signal-02 { --x: 100px !important; --y: -205px !important; --tx: -100px !important; --ty: 205px !important; }
  .signal-03 { --x: -100px !important; --y: -82px !important; --tx: 100px !important; --ty: 82px !important; }
  .signal-04 { --x: -98px !important; --y: 220px !important; --tx: 98px !important; --ty: -220px !important; }
  .signal-05 { --x: 100px !important; --y: 258px !important; --tx: -100px !important; --ty: -258px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .world-firsts-number,
  .world-firsts-label,
  .world-firsts-impact h2,
  .world-firsts-kicker,
  .world-firsts-summary,
  .world-firsts-note,
  .world-firsts-rings,
  .milestone-signal button {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  .world-firsts-rings { transform: translate(-50%, -50%) !important; }
  .world-firsts-core { display: none; }
}
