/**
 * Desktop-only subtle interactive motion.
 * html.im-desktop — hover shell + globe / cloud / arm shell
 * html.im-motion  — services-box scroll rise
 * .im-globe-spin   — lander-globe (+25→−75px) while in view
 * .im-arm-pivot    — innovation-arm: −60 until circle fully in, hold 0 down, undo up
 * .im-bulb-glow    — lit while held; dims when scrolling back up above the section
 * .im-mosey-float  — clouds + iconography; unique random mosey keyframes (per load)
 * Lander iconography moseys .lander-globe-iconography-group (art + scrim together)
 */

/* Shrink-wrap to the img box; scrim overlays the same bounds. */
.lander-globe-iconography-group {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  line-height: 0;
  pointer-events: none;
}

.lander-globe-iconography-art {
  position: relative;
  display: block;
  line-height: 0;
}

.lander-globe-iconography-scrim {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* --- Hover: expand the panel ~5% without resizing / shifting text --- */
@media screen and (min-width: 992px) {
  @media (hover: hover) and (pointer: fine) {
    html.im-desktop .services-box-array > .services-box {
      --services-box-fill: #eee;
      background-color: transparent !important;
      isolation: isolate;
    }

    html[data-theme="dark"].im-desktop .services-box-array > .services-box {
      --services-box-fill: var(--nb-bg-panel);
    }

    html.im-desktop .services-box-array > .services-box::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background-color: var(--services-box-fill);
      z-index: -1;
      pointer-events: none;
      transform-origin: center center;
      transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    }

    html.im-desktop .services-box-array > .services-box:hover::before {
      transform: scale(1.05);
    }

    /*
     * Check-circle bullets: nudge text toward the mark ~5px via padding swap
     * (not transform on the <li> — that jitters hover). Check mark scales to 80%.
     */
    html.im-desktop .checkbox-list-item {
      transition: padding 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    }

    html.im-desktop .checkbox-list-item::before {
      transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    }

    html.im-desktop .checkbox-list-item:hover {
      padding-left: 38px; /* 43 − 5 */
      padding-right: 5px;
    }

    html.im-desktop .checkbox-list-item:hover::before {
      transform: translateY(-50%) scale(0.8);
    }

    html.im-desktop .checkbox-list-item.section-1-bullet-2.right-checkbox-list:hover {
      padding-right: 38px;
      padding-left: 5px;
    }

    html.im-desktop
      .checkbox-list-item.section-1-bullet-2.right-checkbox-list:hover::before {
      transform: translateY(-50%) scale(0.8);
    }
  }
}

/* --- Globe / arm / bulb / clouds --- */
@media screen and (min-width: 992px) {
  html.im-desktop .lander-globe.im-globe-spin {
    --im-globe-x: 0px;
    translate: var(--im-globe-x) 0;
    will-change: translate;
  }

  html.im-desktop .innovation-arm.im-arm-pivot {
    --im-arm-deg: -60deg;
    transform-origin: calc(100% - 220px) 55px;
    transform: rotate(var(--im-arm-deg));
    will-change: transform;
  }

  html.im-desktop .innovation-bulb.im-bulb-glow {
    --im-bulb-op: 0.1;
    opacity: var(--im-bulb-op);
    transition: opacity 0.35s ease;
    will-change: opacity;
  }

}

/* --- Scroll rise: middle first, then L+R together; copy follows --- */
@media screen and (min-width: 992px) {
  html.im-motion .services-box-array > .services-box.im-services-box {
    --im-t: 0;
    opacity: calc(0.12 + 0.88 * var(--im-t));
    translate: 0 calc((1 - var(--im-t)) * 96px);
    will-change: opacity, translate;
  }

  html.im-motion .services-box-array > .services-box.im-services-box.im-done {
    will-change: auto;
  }

  html.im-motion .services-box-array > .services-box.im-services-box > .section-subtitle {
    --im-follow: clamp(0, calc((var(--im-t) - 0.18) / 0.82), 1);
    opacity: var(--im-follow);
    translate: 0 calc((1 - var(--im-follow)) * 28px);
  }

  html.im-motion .services-box-array > .services-box.im-services-box > .checkbox-bullets {
    --im-follow: clamp(0, calc((var(--im-t) - 0.32) / 0.68), 1);
    opacity: var(--im-follow);
    translate: 0 calc((1 - var(--im-follow)) * 22px);
  }

  html.im-motion .services-box-array > .services-box.im-services-box > .services-box-iconography,
  html.im-motion .services-box-array > .services-box.im-services-box > .service-box-images {
    opacity: calc(0.2 + 0.8 * var(--im-t));
  }
}

@media (prefers-reduced-motion: reduce) {
  html.im-motion .services-box-array > .services-box.im-services-box,
  html.im-motion .services-box-array > .services-box.im-services-box > .section-subtitle,
  html.im-motion .services-box-array > .services-box.im-services-box > .checkbox-bullets,
  html.im-motion .services-box-array > .services-box.im-services-box > .services-box-iconography,
  html.im-motion .services-box-array > .services-box.im-services-box > .service-box-images {
    opacity: 1 !important;
    translate: none !important;
  }

  html.im-desktop .lander-globe.im-globe-spin {
    translate: none !important;
    will-change: auto;
  }

  html.im-desktop .innovation-arm.im-arm-pivot {
    transform: none !important;
    will-change: auto;
  }

  html.im-desktop .innovation-bulb.im-bulb-glow {
    opacity: 1 !important;
    will-change: auto;
  }

  html.im-desktop .im-mosey-float {
    animation: none !important;
    translate: none !important;
    will-change: auto;
  }
}