.obsah-1 {
  position: relative;
  isolation: isolate;
  height: 16em;
}

.obsah-1::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.09) 48%, transparent 75%);
  transform: translateX(-110%);
  animation: obsah-soft-light 9s ease-in-out infinite 2s;
}

.obsah-1 .manitou {
  top: -30px;
  opacity: 0;
  transform: translate3d(42%, 8px, 0) rotate(0.6deg);
  transform-origin: 55% 85%;
  will-change: transform, opacity;
}

.obsah-1 .animated.go .manitou {
  animation:
    manitou-arrive 1.65s cubic-bezier(.18,.78,.22,1) .12s both,
    manitou-idle 4.8s ease-in-out 1.95s infinite;
}

.hometop {
  opacity: 0;
  transform: translateY(14px);
  animation: hometop-enter .65s cubic-bezier(.2,.7,.25,1) both;
  transition: transform .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.hometop:nth-of-type(3) { animation-delay: .12s; }
.hometop:nth-of-type(4) { animation-delay: .20s; }
.hometop:nth-of-type(5) { animation-delay: .28s; }
.hometop:nth-of-type(6) { animation-delay: .36s; }
.hometop:nth-of-type(7) { animation-delay: .44s; }

.hometop:hover,
.hometop:focus-within {
  transform: translateY(-5px);
  background: rgba(0,0,0,0.16);
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}

@keyframes manitou-arrive {
  0% {
    opacity: 0;
    transform: translate3d(42%, 8px, 0) rotate(0.6deg);
  }
  62% {
    opacity: 1;
    transform: translate3d(-1.8%, -1px, 0) rotate(-0.25deg);
  }
  80% {
    transform: translate3d(.7%, 1px, 0) rotate(0.12deg);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0);
  }
}

@keyframes manitou-idle {
  0%, 100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); }
  50% { opacity: 1; transform: translate3d(0, -3px, 0) rotate(-0.12deg); }
}

@keyframes hometop-enter {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes obsah-soft-light {
  0%, 58% { transform: translateX(-110%); }
  78%, 100% { transform: translateX(110%); }
}

@media (max-width: 700px) {
  .obsah-1 {
    height: 43em;
  }

  .obsah-1 .manitou {
    top: calc(30% - 30px);
    transform: translate3d(22%, 6px, 0);
  }

  .obsah-1 .animated.go .manitou {
    animation:
      manitou-arrive-mobile 1.15s cubic-bezier(.18,.78,.22,1) .08s both,
      manitou-idle 4.8s ease-in-out 1.35s infinite;
  }

  @keyframes manitou-arrive-mobile {
    from { opacity: 0; transform: translate3d(22%, 6px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .obsah-1::before,
  .obsah-1 .animated.go .manitou,
  .hometop {
    animation: none !important;
  }

  .obsah-1 .manitou,
  .hometop {
    opacity: 1;
    transform: none;
  }
}
