.ndx__kocka {
  position: relative;
  width:10rem;
  height:0;
}
.ndx__kocka .anim-kocka {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width:10rem;
  height:10rem;
  opacity: 0;
  /* Zjemnená bezierova krivka pre menší kmit */
  animation: posunKocky 1s cubic-bezier(0.175, 0.885, 0.32, 1.18) 5.5s forwards;
}
@keyframes posunKocky {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  50% {
    opacity: 0;
    transform: translateY(-8rem);
  }
  100% {
    opacity: 1;
    transform: translateY(-16rem);
  }
}

/* 1. */
model-viewer {
  width:160px;
  height:160px;
  min-height: 120px; /* Nastavte si výšku, akú pre model potrebujete */
  position: relative;
  transform: translate(0px,0px);
}

/* 2. Skrytie AR ruky (zobrazí sa až v AR režime) */
#ar-prompt {
  position: absolute;
  left: 50%;
  bottom: 60px;
  transform: translateX(-50%);
  display: none; /* Skryje ruku z bežného zobrazenia */
}

/* Knižnica model-viewer automaticky pridá triedu "ar-ready", keď je AR aktívne */
model-viewer[ar-status="session-started"] #ar-prompt {
  display: block; /* Ruka sa ukáže až pri skenovaní priestoru */
}

#ar-prompt img {
  animation: shift 2s ease-in-out infinite; /* Animácia pohybu ruky */
}

/* 3. Úprava tlačidla "View in your space" (dáme ho elegantne naspodok) */
#ar-button {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 8px 16px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#ar-button:active {
  background-color: #f8fafc;
}

/* Pomocná animácia pre pohyb ruky zo strany na stranu */
@keyframes shift {
  0% { transform: translateX(-10px); }
  50% { transform: translateX(10px); }
  100% { transform: translateX(-10px); }
}