/* Heisenberg page 
   Images size 
   1000 x 750 - PC 
   500 x 375 - Mobile 
   Intro size 
   1100 x ost - PC 
   700 x ost - Mobile */

.container--heisenberg{
  margin-inline: var(--margin-normal);
}

.heisenberg__logo-wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--margin-normal);
}

.heisenberg__logo-wrapper-preview{
  display: grid;
  grid-template-columns: 3fr 1fr;
}

.heisenberg__logo{
  max-height: 56vh;
  max-width: 56vh;
  object-fit: contain;
  filter: drop-shadow(0 0 1rem var(--color-blue-hero));
}

.heisenberg__text-wrapper{
  display: flex;
  flex-direction: column;
  gap: var(--padding-normal);
  align-items: center;
}

.heisenberg__text-wrapper h1{
  opacity: 0;
  animation: Reveal 0.4s ease-out forwards;
  animation-delay: 0.2s;
}

.heisenberg__text-wrapper-more{
  /* display: flex;
  flex-direction: column; */
}

.heisenberg__ul{
  /* padding: 0 0 0 var(--ul-normal); */
}

.heisenberg__li{
  /* list-style: disc;
  opacity: 0;
  animation: SlideUp 0.4s ease-out forwards; */
}

.heisenberg__li:nth-child(1) {
  /* animation-delay: 0.4s; */
}

.heisenberg__li:nth-child(2) {
  /* animation-delay: 0.6s; */
}

.heisenberg__li:nth-child(3) {
  /* animation-delay: 0.8s; */
}

.form__submit-button-wrapper--heisenberg{
  opacity: 0;
  animation: Reveal 0.4s ease-out forwards;
  animation-delay: 0.8s;
}

.heisenberg__text-result{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--padding-normal);
}

.heisenberg__text-result > div {
  opacity: 0;
  animation: SlideUp 0.4s ease-out forwards;
}

.heisenberg__text-result > div:nth-child(1) {
  animation-delay: 0.4s;
}

.heisenberg__text-result > div:nth-child(2) {
  animation-delay: 0.6s;
}



.heisenberg__question-wrapper{
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--padding-normal);
}

.heisenberg__question-half{
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--padding-normal);
  align-items: center;
}

.heisenberg__question-left{
  display: flex;
  justify-content: center;
}

.heisenberg__question-right{
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: var(--padding-normal);
}

.heisenberg__image-wrapper{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  gap: var(--padding-normal);
}

.heisenberg__image-button:hover{
  filter: drop-shadow(0 0 1.3rem var(--color-blue));
}

.heisenberg__image-button:disabled {
  cursor: not-allowed;
}

.heisenberg__image{
  max-height: 40vh;
  object-fit: contain;
}

.heisenberg__image-left{
  max-height: 50vh;
}

.loading-message {
  display: none;
}

.loading-message.active {
  display: block;
}

.heisenberg__score_h1{
  display: flex;
  gap: var(--padding-normal);
}

.heisenberg__score-wrapper{
  display: flex;
  gap: var(--padding-minimum);
}

.heisenberg__score{
  color: var(--color-orange);
  font-weight: 500;
  filter: drop-shadow(0 0 1rem var(--color-orange));
}





/* hamster */

.wheel-and-hamster {
  --dur: 1s;
  position: relative;
  width: 12em;
  height: 12em;
  font-size: 1.2em;
}

.wheel,
.hamster,
.hamster div,
.spoke {
  position: absolute;
}

.wheel,
.spoke {
  border-radius: 50%;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.wheel {
  background: radial-gradient(100% 100% at center,hsla(0,0%,60%,0) 47.8%,hsl(0,0%,60%) 48%);
  z-index: 2;
}

.hamster {
  animation: hamster var(--dur) ease-in-out infinite;
  top: 50%;
  left: calc(50% - 3.5em);
  width: 7em;
  height: 3.75em;
  transform: rotate(4deg) translate(-0.8em,1.85em);
  transform-origin: 50% 0;
  z-index: 1;
}

.hamster__head {
  animation: hamsterHead var(--dur) ease-in-out infinite;
  background: hsl(30,90%,55%);
  border-radius: 70% 30% 0 100% / 40% 25% 25% 60%;
  box-shadow: 0 -0.25em 0 hsl(30,90%,80%) inset,
		0.75em -1.55em 0 hsl(30,90%,90%) inset;
  top: 0;
  left: -2em;
  width: 2.75em;
  height: 2.5em;
  transform-origin: 100% 50%;
}

.hamster__ear {
  animation: hamsterEar var(--dur) ease-in-out infinite;
  background: hsl(0,90%,85%);
  border-radius: 50%;
  box-shadow: -0.25em 0 hsl(30,90%,55%) inset;
  top: -0.25em;
  right: -0.25em;
  width: 0.75em;
  height: 0.75em;
  transform-origin: 50% 75%;
}

.hamster__eye {
  animation: hamsterEye var(--dur) linear infinite;
  background-color: hsl(0,0%,0%);
  border-radius: 50%;
  top: 0.375em;
  left: 1.25em;
  width: 0.5em;
  height: 0.5em;
}

.hamster__nose {
  background: hsl(0,90%,75%);
  border-radius: 35% 65% 85% 15% / 70% 50% 50% 30%;
  top: 0.75em;
  left: 0;
  width: 0.2em;
  height: 0.25em;
}

.hamster__body {
  animation: hamsterBody var(--dur) ease-in-out infinite;
  background: hsl(30,90%,90%);
  border-radius: 50% 30% 50% 30% / 15% 60% 40% 40%;
  box-shadow: 0.1em 0.75em 0 hsl(30,90%,55%) inset,
		0.15em -0.5em 0 hsl(30,90%,80%) inset;
  top: 0.25em;
  left: 2em;
  width: 4.5em;
  height: 3em;
  transform-origin: 17% 50%;
  transform-style: preserve-3d;
}

.hamster__limb--fr,
.hamster__limb--fl {
  clip-path: polygon(0 0,100% 0,70% 80%,60% 100%,0% 100%,40% 80%);
  top: 2em;
  left: 0.5em;
  width: 1em;
  height: 1.5em;
  transform-origin: 50% 0;
}

.hamster__limb--fr {
  animation: hamsterFRLimb var(--dur) linear infinite;
  background: linear-gradient(hsl(30,90%,80%) 80%,hsl(0,90%,75%) 80%);
  transform: rotate(15deg) translateZ(-1px);
}

.hamster__limb--fl {
  animation: hamsterFLLimb var(--dur) linear infinite;
  background: linear-gradient(hsl(30,90%,90%) 80%,hsl(0,90%,85%) 80%);
  transform: rotate(15deg);
}

.hamster__limb--br,
.hamster__limb--bl {
  border-radius: 0.75em 0.75em 0 0;
  clip-path: polygon(0 0,100% 0,100% 30%,70% 90%,70% 100%,30% 100%,40% 90%,0% 30%);
  top: 1em;
  left: 2.8em;
  width: 1.5em;
  height: 2.5em;
  transform-origin: 50% 30%;
}

.hamster__limb--br {
  animation: hamsterBRLimb var(--dur) linear infinite;
  background: linear-gradient(hsl(30,90%,80%) 90%,hsl(0,90%,75%) 90%);
  transform: rotate(-25deg) translateZ(-1px);
}

.hamster__limb--bl {
  animation: hamsterBLLimb var(--dur) linear infinite;
  background: linear-gradient(hsl(30,90%,90%) 90%,hsl(0,90%,85%) 90%);
  transform: rotate(-25deg);
}

.hamster__tail {
  animation: hamsterTail var(--dur) linear infinite;
  background: hsl(0,90%,85%);
  border-radius: 0.25em 50% 50% 0.25em;
  box-shadow: 0 -0.2em 0 hsl(0,90%,75%) inset;
  top: 1.5em;
  right: -0.5em;
  width: 1em;
  height: 0.5em;
  transform: rotate(30deg) translateZ(-1px);
  transform-origin: 0.25em 0.25em;
}

.spoke {
  animation: spoke var(--dur) linear infinite;
  background: radial-gradient(100% 100% at center,hsl(0,0%,60%) 4.8%,hsla(0,0%,60%,0) 5%),
		linear-gradient(hsla(0,0%,55%,0) 46.9%,hsl(0,0%,65%) 47% 52.9%,hsla(0,0%,65%,0) 53%) 50% 50% / 99% 99% no-repeat;
}

@keyframes hamster {
  from, to {
    transform: rotate(4deg) translate(-0.8em,1.85em);
  }

  50% {
    transform: rotate(0) translate(-0.8em,1.85em);
  }
}

@keyframes hamsterHead {
  from, 25%, 50%, 75%, to {
    transform: rotate(0);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(8deg);
  }
}

@keyframes hamsterEye {
  from, 90%, to {
    transform: scaleY(1);
  }

  95% {
    transform: scaleY(0);
  }
}

@keyframes hamsterEar {
  from, 25%, 50%, 75%, to {
    transform: rotate(0);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(12deg);
  }
}

@keyframes hamsterBody {
  from, 25%, 50%, 75%, to {
    transform: rotate(0);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(-2deg);
  }
}

@keyframes hamsterFRLimb {
  from, 25%, 50%, 75%, to {
    transform: rotate(50deg) translateZ(-1px);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(-30deg) translateZ(-1px);
  }
}

@keyframes hamsterFLLimb {
  from, 25%, 50%, 75%, to {
    transform: rotate(-30deg);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(50deg);
  }
}

@keyframes hamsterBRLimb {
  from, 25%, 50%, 75%, to {
    transform: rotate(-60deg) translateZ(-1px);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(20deg) translateZ(-1px);
  }
}

@keyframes hamsterBLLimb {
  from, 25%, 50%, 75%, to {
    transform: rotate(20deg);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(-60deg);
  }
}

@keyframes hamsterTail {
  from, 25%, 50%, 75%, to {
    transform: rotate(30deg) translateZ(-1px);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(10deg) translateZ(-1px);
  }
}

@keyframes spoke {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(-1turn);
  }
}





/* animation */

.heisenberg__screen {
  opacity: 0;
}

.heisenberg__screen.animation-reveal {
  animation: Reveal 0.4s ease-out forwards;
}

.heisenberg__screen.animation-slide {
  animation: SlideUp 0.4s ease-out forwards;
}

.heisenberg__screen.animation-hide {
  animation: Hide 0.2s ease-in forwards;
}

.form__submit-button:disabled {
  cursor: not-allowed;
}

@keyframes Hide {
    0% {
        opacity: 1;
        filter: brightness(1) blur(0);
    }

    100% {
        opacity: 0;
        filter: brightness(1) blur(0);
    }
}





/* adaptive */

@media (orientation: portrait) and (max-width: 1200px) {

  .heisenberg__logo-wrapper{
    display: flex;
    flex-direction: column;
  }

  .heisenberg__logo-wrapper picture {
    order: 1;
  }

  .heisenberg__text-wrapper{
    order: 2;
  }
  
  .heisenberg__logo{
    max-height: 30vh;
    max-width: 30vh;
  }

  .heisenberg__image-wrapper{
    grid-template-columns: repeat(2, 1fr);
  }

  .heisenberg__question-half{
    display: flex;
    flex-direction: column;
  }

  .heisenberg__image-left{
    max-height: 30vh;
  }

  .heisenberg__image-right{
    max-height: 20vh;
  }

}

@media (orientation: landscape) and (max-width: 1200px) {

  .heisenberg__logo{
    max-height: 63vh;
    max-width: 63vh;
  }

}