:root {
  color-scheme: dark;
  --x: 50vw;
  --y: 55vh;
  --pointer-x: 74vw;
  --pointer-y: 26vh;
  --scan-active: 0;
  --pointer-idle: 1;
  --pointer-search: 0;
  --pointer-focus: 0;
  --pointer-active: 0;
  --pointer-pulse: 0;
  --pointer-scale: 1;
  --dx: 0;
  --dy: 0;
  --lean: 0deg;
  --tilt: 0deg;
  --scale: 1;
  --o-center: 1;
  --o-micro-left: 0;
  --o-screen-left-1: 0;
  --o-screen-left-2: 0;
  --o-screen-left-3: 0;
  --o-micro-right: 0;
  --o-screen-right-0: 0;
  --o-screen-right-1: 0;
  --o-screen-right-2: 0;
  --o-screen-right-3: 0;
  --o-micro-up: 0;
  --o-up-1: 0;
  --o-up-2: 0;
  --o-micro-down: 0;
  --o-down-1: 0;
  --o-down-2: 0;
  --o-micro-up-left: 0;
  --o-up-left: 0;
  --o-micro-up-right: 0;
  --o-up-right: 0;
  --o-micro-down-left: 0;
  --o-down-left: 0;
  --o-micro-down-right: 0;
  --o-down-right-medium: 0;
  --o-down-right-strong: 0;
  --o-quarter-blink: 0;
  --o-half-blink: 0;
  --o-full-blink: 0;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #120f0b;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

body {
  cursor: none !important;
}

* {
  cursor: none !important;
}

.stage {
  position: relative;
  width: 100vw;
  height: 100svh;
  min-height: 540px;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(29, 18, 12, 0.03), rgba(9, 7, 6, 0.58)),
    url("../assets/desert-encounter-bg.jpg") center / cover no-repeat,
    #2a1a10;
}

.load-screen {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  gap: 12px;
  align-content: center;
  color: rgba(231, 255, 239, 0.9);
  background:
    radial-gradient(circle at 50% 42%, rgba(144, 255, 205, 0.13), transparent 13rem),
    rgba(9, 7, 6, 0.72);
  backdrop-filter: blur(10px);
  transition:
    opacity 220ms ease,
    visibility 220ms ease;
}

.load-mark {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(146, 255, 209, 0.32);
  box-shadow:
    inset 0 0 18px rgba(127, 255, 201, 0.2),
    0 0 24px rgba(127, 255, 201, 0.26);
  animation: loadPulse 1.4s ease-in-out infinite;
}

.load-text {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.stage.is-ready .load-screen {
  opacity: 0;
  visibility: hidden;
}

.sky,
.sunwash,
.ground,
.vignette,
.heat,
.dust-field,
.pointer-light,
.scanner-orb {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sky {
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(255, 225, 178, 0.08), transparent 45%),
    radial-gradient(circle at 72% 27%, rgba(255, 218, 143, 0.16), transparent 18rem);
  mix-blend-mode: soft-light;
}

.sunwash {
  z-index: 1;
  background:
    linear-gradient(92deg, rgba(255, 242, 186, 0.2), transparent 38%),
    linear-gradient(180deg, transparent 48%, rgba(98, 61, 33, 0.54));
}

.ground {
  z-index: 2;
  top: auto;
  height: 34vh;
  min-height: 190px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(245, 181, 93, 0.2), transparent 55%),
    linear-gradient(180deg, rgba(116, 73, 39, 0.18), #1c130d 68%);
  transform: translateY(1px);
}

.ground::before,
.ground::after {
  content: "";
  position: absolute;
  left: -8vw;
  width: 116vw;
  height: 42%;
  border-radius: 50%;
  background: rgba(37, 24, 16, 0.3);
  filter: blur(18px);
}

.ground::before {
  top: -12%;
  transform: rotate(-2deg);
}

.ground::after {
  top: 10%;
  transform: rotate(1.2deg);
  opacity: 0.48;
}

.vignette {
  z-index: 10;
  background:
    radial-gradient(circle at 50% 42%, transparent 38%, rgba(0, 0, 0, 0.5) 100%),
    linear-gradient(180deg, rgba(10, 8, 6, 0.05), rgba(7, 5, 4, 0.48));
}

.encounter {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
}

.pointer-light {
  z-index: 0;
  background: radial-gradient(
    circle at var(--pointer-x) var(--pointer-y),
    rgba(186, 255, 224, calc(0.18 + var(--scan-active) * 0.25)),
    rgba(230, 139, 69, calc(0.06 + var(--scan-active) * 0.08)) 8rem,
    transparent 19rem
  );
  mix-blend-mode: screen;
  opacity: 0.9;
}

.tracker-plane {
  position: fixed;
  inset: 0;
  z-index: 25;
  cursor: none !important;
  background: transparent;
  touch-action: none;
}

.scanner-orb {
  position: fixed;
  z-index: 30;
  left: 0;
  top: 0;
  width: clamp(123px, 12.3vw, 197px);
  height: clamp(90px, 9vw, 144px);
  transform:
    translate3d(var(--pointer-x), var(--pointer-y), 0)
    translate(-50%, -50%)
    translateY(-6px)
    scale(var(--pointer-scale))
    rotate(calc(var(--scan-active) * -2deg));
  filter:
    drop-shadow(0 0 calc(7px + var(--scan-active) * 10px) rgba(145, 255, 205, 0.72))
    drop-shadow(0 0 calc(16px + var(--scan-active) * 18px) rgba(255, 214, 130, 0.22));
  opacity: calc(0.94 + var(--scan-active) * 0.06);
  transition:
    opacity 140ms ease,
    filter 140ms ease,
    transform 140ms ease;
  will-change: transform;
}

.pointer-state {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  will-change: opacity, transform;
  transition:
    opacity 84ms linear,
    transform 120ms ease;
}

.pointer-idle {
  opacity: var(--pointer-idle);
}

.pointer-search {
  opacity: var(--pointer-search);
}

.pointer-focus {
  opacity: var(--pointer-focus);
}

.pointer-active {
  opacity: var(--pointer-active);
  transform: translateY(2px);
}

.pointer-pulse {
  opacity: var(--pointer-pulse);
  transform: scale(calc(0.98 + var(--pointer-pulse) * 0.08));
}

.alien-wrap {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: clamp(330px, 46vw, 680px);
  aspect-ratio: 1;
  transform:
    translate(-50%, -48%)
    translate3d(calc(var(--dx) * 1px), calc(var(--dy) * 1px), 0)
    scale(var(--scale));
  transform-origin: 50% 72%;
  opacity: 0;
  transition: opacity 180ms ease;
  will-change: transform;
}

.stage.is-ready .alien-wrap {
  opacity: 1;
}

.alien-body {
  position: absolute;
  inset: 0;
  transform:
    rotate(var(--lean))
    skewX(calc(var(--lean) * 0.12));
  transform-origin: 50% 76%;
  animation: breathe 3.8s ease-in-out infinite;
  will-change: transform, filter;
}

.alien-stack,
.alien-state,
.alien-accessible {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.alien-stack {
  filter:
    drop-shadow(0 24px 28px rgba(0, 0, 0, 0.42))
    drop-shadow(calc(var(--dx) * -0.08px) 8px 18px rgba(31, 17, 9, 0.34))
    saturate(0.96)
    contrast(1.05);
}

.alien-state,
.alien-accessible {
  object-fit: contain;
  object-position: center center;
  user-select: none;
}

.alien-state {
  opacity: 0;
  transition: opacity 90ms linear;
  will-change: opacity;
}

.alien-accessible {
  opacity: 0;
  pointer-events: none;
}

.state-center { opacity: var(--o-center); }
.state-micro-left { opacity: var(--o-micro-left); }
.state-screen-left-1 { opacity: var(--o-screen-left-1); }
.state-screen-left-2 { opacity: var(--o-screen-left-2); }
.state-screen-left-3 { opacity: var(--o-screen-left-3); }
.state-micro-right { opacity: var(--o-micro-right); }
.state-screen-right-0 { opacity: var(--o-screen-right-0); }
.state-screen-right-1 { opacity: var(--o-screen-right-1); }
.state-screen-right-2 { opacity: var(--o-screen-right-2); }
.state-screen-right-3 { opacity: var(--o-screen-right-3); }
.state-micro-up { opacity: var(--o-micro-up); }
.state-up-1 { opacity: var(--o-up-1); }
.state-up-2 { opacity: var(--o-up-2); }
.state-micro-down { opacity: var(--o-micro-down); }
.state-down-1 { opacity: var(--o-down-1); }
.state-down-2 { opacity: var(--o-down-2); }
.state-micro-up-left { opacity: var(--o-micro-up-left); }
.state-up-left { opacity: var(--o-up-left); }
.state-micro-up-right { opacity: var(--o-micro-up-right); }
.state-up-right { opacity: var(--o-up-right); }
.state-micro-down-left { opacity: var(--o-micro-down-left); }
.state-down-left { opacity: var(--o-down-left); }
.state-micro-down-right { opacity: var(--o-micro-down-right); }
.state-down-right-medium { opacity: var(--o-down-right-medium); }
.state-down-right-strong { opacity: var(--o-down-right-strong); }
.state-quarter-blink { opacity: var(--o-quarter-blink); }
.state-half-blink { opacity: var(--o-half-blink); }
.state-full-blink { opacity: var(--o-full-blink); }

.alien-state:not(.state-center) {
  mix-blend-mode: normal;
}

.alien-shadow {
  position: absolute;
  left: 50%;
  bottom: 3%;
  width: 72%;
  height: 10%;
  border-radius: 50%;
  background: rgba(20, 12, 7, 0.62);
  filter: blur(14px);
  transform:
    translateX(-50%)
    translateX(calc(var(--dx) * -0.18px))
    scaleX(1.12);
  opacity: 0.78;
}

.skin-sheen {
  position: absolute;
  inset: 6% 9% 2%;
  border-radius: 46% 46% 22% 22%;
  background: linear-gradient(
    105deg,
    transparent 4%,
    rgba(235, 255, 190, 0.16) 28%,
    transparent 42%,
    rgba(255, 180, 129, 0.08) 63%,
    transparent 82%
  );
  transform: translateX(calc(var(--dx) * 0.08px)) rotate(var(--tilt));
  mix-blend-mode: overlay;
  opacity: 0.48;
  mask-image: url("../assets/alien-portrait-cutout.png");
  -webkit-mask-image: url("../assets/alien-portrait-cutout.png");
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center bottom;
  -webkit-mask-position: center bottom;
}

.heat {
  z-index: 3;
  opacity: 0.18;
  mix-blend-mode: screen;
  filter: blur(14px);
}

.heat-a {
  background: repeating-linear-gradient(
    96deg,
    transparent 0 22px,
    rgba(255, 239, 182, 0.16) 24px 26px,
    transparent 28px 56px
  );
  animation: drift 10s linear infinite;
}

.heat-b {
  background: repeating-linear-gradient(
    84deg,
    transparent 0 34px,
    rgba(145, 221, 175, 0.11) 38px 39px,
    transparent 44px 86px
  );
  animation: drift 14s linear infinite reverse;
}

.dust-field {
  z-index: 4;
  overflow: hidden;
}

.dust-field i {
  position: absolute;
  width: 18vw;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(246, 211, 150, 0.32), transparent);
  filter: blur(3px);
  animation: dust 9s linear infinite;
  opacity: 0.34;
}

.dust-field i:nth-child(1) { left: -18vw; top: 18%; animation-delay: -1s; }
.dust-field i:nth-child(2) { left: -30vw; top: 28%; animation-delay: -5s; animation-duration: 13s; }
.dust-field i:nth-child(3) { left: -12vw; top: 46%; animation-delay: -3s; animation-duration: 11s; }
.dust-field i:nth-child(4) { left: -24vw; top: 60%; animation-delay: -7s; animation-duration: 15s; }
.dust-field i:nth-child(5) { left: -20vw; top: 72%; animation-delay: -2s; animation-duration: 12s; }
.dust-field i:nth-child(6) { left: -16vw; top: 82%; animation-delay: -4s; animation-duration: 16s; }
.dust-field i:nth-child(7) { left: -28vw; top: 36%; animation-delay: -8s; animation-duration: 14s; }
.dust-field i:nth-child(8) { left: -10vw; top: 66%; animation-delay: -6s; animation-duration: 10s; }

@keyframes breathe {
  0%,
  100% {
    transform: rotate(var(--lean)) skewX(calc(var(--lean) * 0.12)) scaleY(1) scaleX(1);
    filter: brightness(1);
  }

  50% {
    transform: rotate(var(--lean)) skewX(calc(var(--lean) * 0.12)) scaleY(1.014) scaleX(0.992);
    filter: brightness(1.035);
  }
}

@keyframes drift {
  from {
    transform: translateX(-8vw) translateY(0);
  }

  to {
    transform: translateX(8vw) translateY(-2vh);
  }
}

@keyframes dust {
  from {
    transform: translateX(0) translateY(0) scaleX(0.7);
  }

  to {
    transform: translateX(140vw) translateY(-2vh) scaleX(1.35);
  }
}

@keyframes loadPulse {
  0%,
  100% {
    transform: scale(0.92);
    opacity: 0.58;
  }

  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

@media (max-width: 760px) {
  .stage {
    min-height: 100svh;
  }

  .alien-wrap {
    width: clamp(300px, 86vw, 480px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .alien-body,
  .heat,
  .dust-field i {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}