.globe-layer {
  z-index: 48;
  overflow: visible;
}

.globe-mask {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50%;
  cursor: grab;
  mask-image: url("../assets/globe_mask.webp");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("../assets/globe_mask.webp");
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  filter: saturate(0.94) contrast(1.02);
  pointer-events: auto;
  touch-action: none;
  user-select: none;
}

.globe-mask.is-grabbing {
  cursor: grabbing;
}

.is-globe-grabbing,
.is-globe-grabbing * {
  cursor: grabbing;
}

.globe-mask::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 245, 203, 0.24), transparent 17%),
    radial-gradient(circle at 55% 62%, transparent 0 54%, rgba(35, 12, 8, 0.36) 100%),
    linear-gradient(90deg, rgba(28, 7, 4, 0.18), transparent 28%, transparent 64%, rgba(22, 5, 3, 0.28));
  mix-blend-mode: multiply;
}

.globe-map-track {
  display: flex;
  width: 200%;
  height: 100%;
  transform: translate3d(var(--globe-shift, 0%), 0, 0);
  will-change: transform;
}

.globe-map-track img {
  width: 50%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.12) saturate(1.16) contrast(1.08) brightness(1.06);
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.globe-details {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  opacity: 1;
  filter: drop-shadow(0 12px 16px rgba(28, 6, 2, 0.28));
}

.eye {
  --character-x: 0px;
  --character-y: 0px;
  --look-x: 0px;
  --look-y: 0px;
  --iris-x: 0px;
  --iris-y: 0px;
  --mask-dx: 0px;
  --mask-dy: 0px;
  --mask-scale: 1;
  --mask-aspect: 1;
  --iris-scale: 3.3;
  --eye-size: 0.889cqw;
  --eye-box-scale: 1.6;
  --eye-box-size: calc(var(--eye-size) * var(--eye-box-scale));
  --mask-height: calc(var(--eye-size) * var(--mask-scale));
  --mask-width: calc(var(--mask-height) * var(--mask-aspect));
  --mask-left: calc((var(--eye-box-size) - var(--mask-width)) / 2);
  --mask-top: calc((var(--eye-box-size) - var(--mask-height)) / 2);
  z-index: 46;
  width: var(--eye-box-size);
  height: var(--eye-box-size);
  pointer-events: none;
  opacity: 0.92;
  transform: translate(
    calc(-50% + var(--mask-dx) + var(--character-x)),
    calc(-50% + var(--mask-dy) + var(--character-y))
  );
  mix-blend-mode: normal;
}

.eye img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--eye-size) * var(--iris-scale));
  height: auto;
  max-width: none;
  transform: translate(
    calc(-50% + var(--iris-x) + var(--look-x)),
    calc(-50% + var(--iris-y) + var(--look-y))
  );
  transition: transform 110ms var(--ease-soft);
  will-change: transform;
}

.eye-astronaut {
  --mask-dx: -5.7672cqw;
  --mask-dy: 3.6936cqw;
  --iris-x: 0.2592cqw;
  --iris-y: 0.0648cqw;
  --mask-scale: 0.65;
  --iris-scale: 4.7;
  --mask-aspect: 2.3181818;
  mask-image: url("../assets/eye_astronaut_mask.png");
  mask-size: var(--mask-width) var(--mask-height);
  mask-position: var(--mask-left) var(--mask-top);
  mask-repeat: no-repeat;
  mask-mode: alpha;
  mask-origin: border-box;
  mask-clip: border-box;
  -webkit-mask-image: url("../assets/eye_astronaut_mask.png");
  -webkit-mask-size: var(--mask-width) var(--mask-height);
  -webkit-mask-position: var(--mask-left) var(--mask-top);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-origin: border-box;
  -webkit-mask-clip: border-box;
}

.eye-sage {
  --mask-dx: 6.48cqw;
  --mask-dy: 1.1016cqw;
  --iris-x: 0.4536cqw;
  --iris-y: 0cqw;
  --mask-scale: 1.2;
  --iris-scale: 4.65;
  --eye-size: 0.748cqw;
  --mask-aspect: 1.0571429;
  mask-image: url("../assets/eye_sage_mask.png");
  mask-size: var(--mask-width) var(--mask-height);
  mask-position: var(--mask-left) var(--mask-top);
  mask-repeat: no-repeat;
  mask-mode: alpha;
  mask-origin: border-box;
  mask-clip: border-box;
  -webkit-mask-image: url("../assets/eye_sage_mask.png");
  -webkit-mask-size: var(--mask-width) var(--mask-height);
  -webkit-mask-position: var(--mask-left) var(--mask-top);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-origin: border-box;
  -webkit-mask-clip: border-box;
}

.eye.is-rolling img {
  animation: eye-roll 720ms var(--ease-move);
}

@keyframes eye-roll {
  0% {
    transform: translate(
      calc(-50% + var(--iris-x) + var(--look-x)),
      calc(-50% + var(--iris-y) + var(--look-y))
    );
  }

  28% {
    transform: translate(
      calc(-50% + var(--iris-x) + 0px),
      calc(-50% + var(--iris-y) - 8px)
    );
  }

  62% {
    transform: translate(
      calc(-50% + var(--iris-x) + 5px),
      calc(-50% + var(--iris-y) - 2px)
    );
  }

  100% {
    transform: translate(
      calc(-50% + var(--iris-x) + var(--look-x)),
      calc(-50% + var(--iris-y) + var(--look-y))
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .globe-map-track,
  .eye img {
    transition: none;
    animation: none;
  }
}