/* Yalnız hero hissəsinin görünüşünü dəyişir. */
.hero .hero-identity {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto auto;
  gap: 0;

  width: var(--sk-viewport-width, 100%);
  max-width: none;
  margin-left: var(--sk-edge-offset, 0px);
  margin-right: 0;
  padding: 0;

  overflow: hidden;
  background: var(--paper, #dad6c5);
}

/* Köhnə tünd örtüyü silir. */
.hero .hero-identity::after {
  content: none;
}

/* Başlığın şrifti saxlanılır, rəngi tünd olur. */
.hero .hero-identity #hero-name {
  grid-area: 1 / 1;
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0;
  padding: clamp(28px, 5vw, 72px) 16px 8px;
  color: var(--ink, #191917);
  text-shadow: none;
}

/* Əllərin yerləşdiyi şəffaf səhnə. */
.hero .hero-identity .sk-hands-stage {
  grid-area: 2 / 1;
  position: relative;
  width: 100%;
  height: clamp(180px, 30vw, 460px);
  min-width: 0;
  perspective: 1200px;
  perspective-origin: 50% 50%;
  pointer-events: none;
}

.hero .sk-hands-stage .sk-hand {
  position: absolute;
  top: 0;
  left: -5%;
  display: block;
  width: 110%;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;

  object-fit: contain;
  object-position: center;
  background: transparent;
  mix-blend-mode: normal;
  filter: none;
  backface-visibility: hidden;
}

/* Eyni PNG-nin sol və sağ hissələrini ayırır. */
.hero .sk-hand-human {
  clip-path: inset(0 50% 0 0);
  transform-origin: 0% 50%;
}

.hero .sk-hand-robot {
  clip-path: inset(0 0 0 50%);
  transform-origin: 100% 50%;
}

/* Hərəkətə həssaslıq ayarı aktiv deyilsə animasiya işləyir. */
@media (prefers-reduced-motion: no-preference) {
  .hero .sk-hand-human {
    animation: sk-human-motion 8s ease-in-out infinite;
  }

  .hero .sk-hand-robot {
    animation: sk-robot-motion 9s ease-in-out infinite;
    animation-delay: -3s;
  }
}

@keyframes sk-human-motion {
  0%, 100% {
    transform:
      translate3d(-1%, 3px, 0)
      rotateY(-3deg)
      rotateZ(-0.5deg);
  }

  50% {
    transform:
      translate3d(-0.3%, -5px, 12px)
      rotateY(3deg)
      rotateZ(0.4deg);
  }
}

@keyframes sk-robot-motion {
  0%, 100% {
    transform:
      translate3d(1%, -3px, 0)
      rotateY(3deg)
      rotateZ(0.5deg);
  }

  50% {
    transform:
      translate3d(0.3%, 5px, 16px)
      rotateY(-3deg)
      rotateZ(-0.4deg);
  }
}

/* Mövcud mətn və keçid əllərin altında qalır. */
.hero .hero-identity .hero-copy {
  grid-area: 3 / 1;
  align-self: center;
  justify-self: center;
  width: calc(100% - 40px);
  margin: 0;
  padding: 10px 0 24px;
}

.hero .hero-copy .hero-tagline {
  color: var(--ink, #191917);
  text-shadow: none;
}

.hero .hero-copy .hero-cta {
  color: var(--ink, #191917);
  border-color: currentColor;
  background: transparent;
}

.hero .hero-copy .hero-cta:hover {
  color: var(--paper, #dad6c5);
  background: var(--ink, #191917);
}

.hero .hero-copy .hero-cta:focus-visible {
  outline-color: var(--ink, #191917);
}

/* Animasiyanı dayandırmaq üçün düymə. */
.hero .hero-identity .sk-motion-toggle {
  grid-area: 4 / 1;
  justify-self: center;
  min-height: 44px;
  margin: 0 0 16px;
  padding: 8px 14px;
  border: 1px solid var(--line, #aaa695);
  background: transparent;
  color: var(--ink, #191917);
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.12em;
  cursor: pointer;
}

.hero .sk-motion-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.hero .hero-identity.sk-motion-paused .sk-hand,
.hero .hero-identity.sk-motion-offscreen .sk-hand {
  animation-play-state: paused;
}

@media (max-width: 600px) {
  .hero .hero-identity #hero-name {
    padding: 28px 16px 8px;
  }

  .hero .hero-identity .sk-hands-stage {
    height: clamp(150px, 42vw, 240px);
    perspective: 800px;
  }

  .hero .hero-identity .hero-copy {
    padding: 8px 0 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero .sk-hands-stage .sk-hand {
    animation: none;
    transform: none;
  }

  .hero .hero-identity .sk-motion-toggle {
    display: none;
  }
}
/* Əlləri böyüdür, biləklərin uclarını ekranın xaricinə çıxarır. */
.hero .hero-identity .sk-hands-stage {
  height: auto;
  aspect-ratio: 1024 / 566;
  overflow: hidden;
}

.hero .sk-hands-stage .sk-hand {
  left: -10%;
  top: -10%;
  width: 120%;
  height: 120%;
  max-width: none;
  object-fit: contain;
  object-position: center;
}
/* Ad: nümunədəki kimi qırmızı və daha böyük. */
.hero .hero-identity #hero-name {
  color: #c82825;
  font-size: clamp(48px, 12vw, 230px);
  line-height: 1;
  letter-spacing: -0.025em;
  text-align: center;
  padding: clamp(28px, 3vw, 56px) 16px 8px;
}

/* Əllərin ölçüsünü dəyişmədən bütün səhnəni yuxarı çəkir. */
.hero .hero-identity .sk-hands-stage {
  margin-top: -15vw;
}
/* Əlaqə bölməsinin başlığında hərfləri bir az aralayır. */
#contact-heading,
#contact-heading .outline-text {
  letter-spacing: 0.015em;
}