/* The intro: the girl fades away, the words stamp down, "presents…" rises in */

#intro {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  background: url('../images/background.jpg') center / cover no-repeat;
}

#intro.stamping::before {
  opacity: 1;
}

#intro.shaking {
  animation: shake 260ms linear;
}


.intro-girl {
  position: absolute;
  bottom: 0;
  left: 50%;
  height: 88%;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom;
  transform: translateX(-50%);
  pointer-events: none;
  transition: opacity 2s ease;
}

.intro-girl.faded {
  opacity: 0;
}


.intro-words {
  position: relative;
}

#stamps {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stamp {
  height: 70px;
  max-width: 100%;
  object-fit: contain;
  margin: 2px 0;
  transform: rotate(var(--tilt)); /* set for each word in intro.js */
  animation: stamp 420ms cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}

.intro-presents {
  opacity: 0;
}

#sentence {
  margin-top: 18%;
  width: 90%;
}
.intro-presents.visible {
  animation: rise-in 900ms ease-out forwards;
}

.intro-hint {
  position: absolute;
  bottom: 430px;
  left: 0;
  width: 100%;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  animation: pulse 2.4s infinite;
  transition: opacity 0.4s;
}

.intro-hint.hidden {
  opacity: 0;
  animation: none;
}


/*shaking intro words */
@keyframes stamp {
  0%   { opacity: 0; transform: scale(3) rotate(var(--tilt)); filter: blur(6px); }
  55%  { opacity: 1; transform: scale(0.9) rotate(var(--tilt)); filter: blur(0); }
  75%  { transform: scale(1.04) rotate(var(--tilt)); }
  100% { opacity: 1; transform: scale(1) rotate(var(--tilt)); }
}

@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  20%      { transform: translate(-7px, 5px); }
  40%      { transform: translate(6px, -5px); }
  60%      { transform: translate(-4px, -3px); }
  80%      { transform: translate(3px, 3px); }
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(12px); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

@media (min-width: 700px) {
  .stamp {
    height: 128px;
  }

  .intro-presents {
    font-size: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #intro.shaking {
    animation: none;
  }
}