.logo-morph {
  --logo-morph-duration: 620ms;
  --logo-morph-ease: cubic-bezier(.22, .8, .2, 1);
  perspective: 760px;
}

.logo-morph__frame {
  position: relative;
  display: grid;
  align-items: center;
  justify-items: center;
  transform-style: preserve-3d;
}

.logo-morph__face {
  grid-area: 1 / 1;
  backface-visibility: hidden;
  transition:
    opacity var(--logo-morph-duration) var(--logo-morph-ease),
    filter var(--logo-morph-duration) var(--logo-morph-ease),
    transform var(--logo-morph-duration) var(--logo-morph-ease);
  transform-origin: center;
  will-change: opacity, filter, transform;
}

.logo-morph__face--lineup {
  display: block;
  width: 100%;
  height: auto;
  opacity: 1;
}

.logo-morph__face--daniel {
  display: block;
  width: 103.874%;
  height: auto;
  justify-self: center;
  max-width: none;
  opacity: 0;
}

.logo-morph.is-daniel .logo-morph__face--lineup { opacity: 0; }
.logo-morph.is-daniel .logo-morph__face--daniel { opacity: 1; }

.logo-morph[data-logo-effect="fade"] .logo-morph__face--daniel { transform: scale(.9); }
.logo-morph[data-logo-effect="fade"].is-daniel .logo-morph__face--lineup { transform: scale(1.08); }
.logo-morph[data-logo-effect="fade"].is-daniel .logo-morph__face--daniel { transform: scale(1); }

.logo-morph[data-logo-effect="flip-x"] .logo-morph__face--daniel { transform: rotateX(-88deg); }
.logo-morph[data-logo-effect="flip-x"].is-daniel .logo-morph__face--lineup { transform: rotateX(88deg); }
.logo-morph[data-logo-effect="flip-x"].is-daniel .logo-morph__face--daniel { transform: rotateX(0); }

.logo-morph[data-logo-effect="flip-y"] .logo-morph__face--daniel { transform: rotateY(-88deg); }
.logo-morph[data-logo-effect="flip-y"].is-daniel .logo-morph__face--lineup { transform: rotateY(88deg); }
.logo-morph[data-logo-effect="flip-y"].is-daniel .logo-morph__face--daniel { transform: rotateY(0); }

.logo-morph[data-logo-effect="slide"] .logo-morph__face--daniel { transform: translateY(72%) skewX(-8deg); }
.logo-morph[data-logo-effect="slide"].is-daniel .logo-morph__face--lineup { transform: translateY(-72%) skewX(8deg); }
.logo-morph[data-logo-effect="slide"].is-daniel .logo-morph__face--daniel { transform: translateY(0) skewX(0); }

.logo-morph[data-logo-effect="glitch"] .logo-morph__face--daniel {
  filter: blur(6px);
  transform: translate(-7%, 0) skewX(14deg) scaleX(.82);
}
.logo-morph[data-logo-effect="glitch"].is-daniel .logo-morph__face--lineup {
  filter: blur(6px);
  transform: translate(7%, 0) skewX(-14deg) scaleX(1.12);
}
.logo-morph[data-logo-effect="glitch"].is-daniel .logo-morph__face--daniel {
  filter: blur(0);
  transform: translate(0) skewX(0) scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .logo-morph__face {
    filter: none !important;
    transform: none !important;
    transition-property: opacity !important;
  }
}

@media print {
  .logo-morph__face--lineup { opacity: 1 !important; }
  .logo-morph__face--daniel { display: none; }
}