/* Desktop hero composition.
   Mobile/tablet keep the stacked world stage. On desktop the dotted world map
   becomes an ambient full-hero background while the realtime counter occupies
   the visual column on the right. */

@media (min-width: 1024px) {
  .stoppin-home-stage .stoppin-hero--live-showcase {
    isolation: isolate;
  }

  .stoppin-home-stage .stoppin-hero--live-showcase .stoppin-hero__world-visual {
    inset: 0 !important;
    z-index: 1;
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit !important;
    pointer-events: none;
    background:
      linear-gradient(90deg, rgb(4 7 12 / 0) 0 38%, rgb(4 7 12 / 0.12) 50%, rgb(4 7 12 / 0.5) 100%),
      linear-gradient(180deg, rgb(4 7 12 / 0) 0 56%, rgb(4 7 12 / 0.18) 72%, rgb(4 7 12 / 0.52) 100%) !important;
  }

  .stoppin-home-stage .stoppin-hero--live-showcase .stoppin-hero__world-visual::before {
    background:
      radial-gradient(ellipse at 78% 48%, rgb(255 105 0 / 0.085), transparent 32%),
      radial-gradient(ellipse at 88% 58%, rgb(68 121 255 / 0.055), transparent 38%),
      linear-gradient(90deg, transparent 0 42%, rgb(4 7 12 / 0.08) 54%, rgb(4 7 12 / 0.34) 100%);
  }

  .stoppin-home-stage .stoppin-hero--live-showcase .stoppin-hero__world-map-shell {
    position: absolute;
    inset: 12% -7% -7% 31% !important;
    z-index: 1;
    display: grid;
    place-items: center;
    opacity: 0.72;
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0%,
      rgb(0 0 0 / 0.28) 14%,
      #000 34%,
      #000 100%
    );
    mask-image: linear-gradient(
      90deg,
      transparent 0%,
      rgb(0 0 0 / 0.28) 14%,
      #000 34%,
      #000 100%
    );
  }

  .stoppin-home-stage .stoppin-hero--live-showcase .stoppin-hero__world-map {
    width: 116% !important;
    height: auto !important;
    min-height: 62%;
    object-fit: contain;
    object-position: center right;
    filter:
      drop-shadow(0 0 8px rgb(255 105 0 / 0.18))
      drop-shadow(0 0 34px rgb(69 123 255 / 0.055));
  }

  .stoppin-home-stage .stoppin-hero--live-showcase .stoppin-live-counter {
    top: 50% !important;
    left: 75% !important;
    z-index: 4;
    width: min(37%, 34rem) !important;
    transform: translate(-50%, -50%) !important;
  }

  .stoppin-home-stage .stoppin-hero--live-showcase .stoppin-hero__content {
    position: relative;
    z-index: 3;
    width: min(52%, 47rem);
    min-height: 51rem;
    padding-bottom: 4rem;
  }
}

@media (min-width: 1280px) {
  .stoppin-home-stage .stoppin-hero--live-showcase .stoppin-live-counter {
    left: 74.5% !important;
    width: min(35%, 36rem) !important;
  }

  .stoppin-home-stage .stoppin-hero--live-showcase .stoppin-hero__world-map-shell {
    inset: 10% -4% -8% 34% !important;
  }
}