:root {
  --heroAnimLeft: fastZoomLeft 0.8s ease-in-out infinite;
  --heroAnimRight: fastZoomRight 0.8s ease-in-out infinite;
}

.hero {
  background-image: url("../img/neko.gif"); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.1s ease-out;
}

.hero::before {
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hero-text {
    position: absolute;
    font-weight: 800;
    line-height: 1;
    opacity: 0.9;
    font-size: 10rem;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 90vw;
    pointer-events: none;
}

.hero-text-left {
    animation: var(--heroAnimLeft);
    transform-origin: bottom left;
    bottom: 5%;
    left: 5%;
}

.hero-text-right {
    animation: var(--heroAnimRight);
    transform-origin: top right;
    top: 8%;
    right: 5%;
    text-align: right;
}

body.menu-open {
  --heroAnimLeft: none;
  --heroAnimRight: none;
}

@media (max-width: 1000px) or (max-height: 700px) {
  .hero-text {
    font-size: 8rem;
  }
}

@media (max-width: 500px) or (max-height: 500px) {
  .hero-text {
    font-size: 6rem;
  }
}

@keyframes fastZoomRight {
  0%, 100% { transform: scale(0.3); }
  50% { transform: scale(0.9); }
}

@keyframes fastZoomLeft {
  0%, 100% { transform: scale(0.9); }
  50% { transform: scale(0.3); }
}