[data-r] {
  transition: opacity 0.8s var(--ease) var(--d, 0s), transform 0.8s var(--ease) var(--d, 0s), clip-path 0.9s var(--ease) var(--d, 0s),
    -webkit-clip-path 0.9s var(--ease) var(--d, 0s);
}
[data-r='up'] {
  opacity: 0;
  transform: translateY(28px);
}
[data-r='pop'] {
  opacity: 0;
  transform: translateY(34px) scale(0.9) rotate(-2deg);
  transition-timing-function: var(--pop);
}
[data-r='passport'] {
  opacity: 0;
  transform: translateY(70px) rotate(8deg) scale(0.94);
}
[data-r='card'] {
  opacity: 0;
  transform: translateX(calc(var(--dir) * 60px)) rotate(calc(var(--dir) * 5deg));
}
[data-r='stamp'] {
  opacity: 0;
  transform: scale(2.4);
  transition-duration: 0.55s;
  transition-timing-function: var(--pop);
  transition-delay: calc(0.5s + var(--d, 0s));
}
[data-r='wipe'] {
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
}
html[dir='rtl'] [data-r='wipe'] {
  -webkit-clip-path: inset(0 0 0 100%);
  clip-path: inset(0 0 0 100%);
}
[data-r='words'] {
  transition: none;
}
html[dir='rtl'] [data-r='wipe'].in,
[data-r].in {
  opacity: 1;
  transform: none;
  -webkit-clip-path: inset(-40px);
  clip-path: inset(-40px);
}

.w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em) rotate(4deg);
}
[data-r='words'].in .w {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease) calc(var(--i) * 70ms + 0.1s), transform 0.7s var(--pop) calc(var(--i) * 70ms + 0.1s);
}
.w em {
  position: relative;
  display: inline-block;
}
.w em::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: -0.26em;
  height: 0.16em;
  background: radial-gradient(circle, var(--berry) 26%, transparent 30%) 0 0 / 0.32em 0.16em repeat-x;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.9s var(--ease) 0.7s;
}
html[dir='rtl'] .w em::after {
  transform-origin: right center;
}
[data-r='words'].in .w em::after {
  transform: scaleX(1);
}

@keyframes drop-in {
  from {
    transform: translateY(-100%);
  }
}
@keyframes logo-wobble {
  0% {
    transform: scale(0) rotate(-120deg);
  }
  60% {
    transform: scale(1.15) rotate(6deg);
  }
  100% {
    transform: scale(1) rotate(-8deg);
  }
}
@keyframes fade-rise {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
}
@keyframes bob {
  50% {
    translate: 0 -10px;
  }
}
@keyframes drift {
  50% {
    translate: 14px -18px;
  }
}
@keyframes thud {
  0% {
    transform: scale(2) rotate(-20deg);
    opacity: 0;
  }
  70% {
    transform: scale(0.9);
    opacity: 1;
  }
  100% {
    transform: none;
  }
}
@keyframes wag {
  0%,
  100% {
    rotate: 0deg;
  }
  25% {
    rotate: -12deg;
  }
  75% {
    rotate: 12deg;
  }
}

.intro-on .hd-in {
  animation: drop-in 0.8s var(--ease) both;
}
.intro-on .logo-mark {
  animation: logo-wobble 0.9s var(--pop) 0.3s both;
}
.intro-on .logo span {
  animation: fade-rise 0.7s var(--ease) 0.55s both;
}
.intro-on .lk,
.intro-on .hd-tools > * {
  animation: fade-rise 0.6s var(--ease) calc(0.5s + var(--i, 0) * 70ms) both;
}
.float {
  animation: bob 4.5s ease-in-out infinite;
}
.float.f2 {
  animation-delay: -1.5s;
}
.float.f3 {
  animation-delay: -3s;
}
.paw-bg.a {
  animation: drift 9s ease-in-out infinite;
}
.paw-bg.b {
  animation: drift 11s ease-in-out -4s infinite;
}
.logo:hover .logo-mark {
  animation: wag 0.6s ease;
}
.hole.thud {
  animation: thud 0.5s var(--pop);
}
.flash {
  outline: 3px solid var(--primary);
  outline-offset: 4px;
  border-radius: 6px;
}
.is-preview [data-e] {
  cursor: pointer;
}
.is-preview [data-e]:hover {
  outline: 2px dashed var(--primary);
  outline-offset: 3px;
}