* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; background: #000; }
body { overflow: hidden; font-family: Arial, Helvetica, sans-serif; }
img { display: block; max-width: none; user-select: none; -webkit-user-drag: none; }

.stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  background-color: #000;
  background-image: url("assets/Back.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}

.hero-text {
  position: absolute;
  left: 50%;
  top: 22.7%;
  width: 42.708vw;
  height: auto;
  transform: translateX(-50%);
  z-index: 3;
}

.hand {
  position: absolute;
  top: 2.2vh;
  right: -4.2vw;
  width: 32.917vw;
  height: auto;
  z-index: 4;
  transform-origin: 75% 7%;
  animation: hand-swing 3.4s ease-in-out infinite;
  will-change: transform;
}

.think-logo {
  position: absolute;
  left: 50%;
  top: 74.25%;
  width: 25.729vw;
  height: auto;
  transform: translateX(-50%);
  z-index: 3;
}

.email-link {
  position: absolute;
  left: 4.15%;
  bottom: 11.1%;
  width: 15.208vw;
  z-index: 6;
}
.email-link img { width: 100%; height: auto; }

.copyright {
  position: absolute;
  left: 50%;
  bottom: 10.3%;
  width: 21.302vw;
  height: auto;
  transform: translateX(-50%);
  z-index: 3;
}

.hub-link {
  position: absolute;
  right: 4.65%;
  bottom: 9.6%;
  width: 12.865vw;
  z-index: 6;
}
.hub-link img { width: 100%; height: auto; }

a { -webkit-tap-highlight-color: transparent; }

@keyframes hand-swing {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, 22px, 0) rotate(-1.3deg); }
}

@media (max-aspect-ratio: 4/3) {
  body { overflow: hidden; }
  .stage {
    min-height: 100svh;
    height: 100svh;
    background-size: cover;
    background-position: center center;
  }
  .hero-text {
    width: min(88vw, 560px);
    top: 38%;
  }
  .hand {
    width: min(54vw, 330px);
    right: -18vw;
    top: -5.5vh;
    animation-duration: 3.1s;
  }
  .think-logo {
    width: min(58vw, 360px);
    top: auto;
    bottom: 16.5vh;
  }
  .email-link {
    width: min(42vw, 210px);
    left: 6vw;
    bottom: calc(4.8vh + env(safe-area-inset-bottom));
  }
  .hub-link {
    width: min(34vw, 170px);
    right: 6vw;
    bottom: calc(4.2vh + env(safe-area-inset-bottom));
  }
  .copyright {
    width: min(52vw, 260px);
    bottom: calc(1.4vh + env(safe-area-inset-bottom));
    opacity: .85;
  }
}

@media (max-width: 480px) {
  .hero-text { width: 91vw; top: 40%; }
  .hand { width: 58vw; right: -22vw; top: 2vh; }
  .think-logo { width: 68vw; bottom: 18vh; }
  .email-link { width: 46vw; left: 5vw; bottom: calc(5.7vh + env(safe-area-inset-bottom)); }
  .hub-link { width: 37vw; right: 5vw; bottom: calc(5.3vh + env(safe-area-inset-bottom)); }
  .copyright { width: 62vw; bottom: calc(2vh + env(safe-area-inset-bottom)); }
  @keyframes hand-swing {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    50% { transform: translate3d(0, 16px, 0) rotate(-1.2deg); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hand { animation: none; }
}