@import url('https://fonts.googleapis.com/css2?family=Fontdiner+Swanky&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
  /* JS will keep this in sync with the actual header height */
  --avns-mg-header-h: 130px;
  /* sensible default */
  --avns-mg-sidebar-w: 400px;
  /* tweak to taste */
  --avns-mg-gap: 0;
  /* set to e.g. 16px if you want gutters */
}

#viewer-root {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 3rem;
  padding-bottom: 4rem;
  padding-left: 1rem;
  padding-right: 1rem;

  .avns-mkgc-card {
    transform: scale(0.9);
    transform-origin: center center;
  }
}

.avns-mg-error {
  padding: 3rem 1rem;
  text-align: center;
}

.avns-mkgc-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.25cqh 0.75cqw;
  background: #fff;
  box-shadow: 0px 4px 34px 0px #0000001a;
  overflow: hidden;
  transform-origin: top center;
  width: 100cqw;
  aspect-ratio: 493 / 654;
}

.avns-mgkc-card__sizer {
  container-type: size;
  aspect-ratio: 493 / 654;
  width: 493px;
  height: auto;
  max-width: 493px;
  max-height: 654px;
  width: min(calc(100vw - 40px), calc((100vh * 493 / 654) - 160px));
}

.avns-mkgc-viewer__animation {
  position: relative;
  perspective: 1000px;
  filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.4));
  display: flex;
  align-items: center;
  justify-content: center;
}

.avns-mkgc-viewer__animation.execute {
  .avns-mkgc-viewer__flap {
    animation: flipOpen 1s ease-out forwards;
    animation-delay: 0.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }

  .avns-mkgc-card {
    animation:
      slideTiltZ 2.5s steps(1) infinite,
      slideTilt 2.5s ease-in-out infinite;
    animation-delay: 1.4s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }

  .avns-mkgc-viewer__watch-again {
    transition-delay: 0s, 5s;
    opacity: 1;
  }
}

.avns-mkgc-viewer__envelope--blue {
  --avns-envelope-light: #2aa3e1;
  --avns-envelope-dark: #2084b7;
}

.avns-mkgc-viewer__envelope--red {
  --avns-envelope-light: #D6374D;
  --avns-envelope-dark: #BF1C33;
}

.avns-mkgc-viewer__envelope--pink {
  --avns-envelope-light: #E96A9C;
  --avns-envelope-dark: #D94A7F;
}

.avns-mkgc-viewer__back {
  position: absolute;
  z-index: 0;
  aspect-ratio: 493 / 654;
  width: 100cqw;
  background: var(--avns-envelope-light, #2aa3e1);
}

.avns-mkgc-viewer__front {
  position: absolute;
  z-index: 2;
  aspect-ratio: 493 / 654;
  width: 100cqw;
  background: var(--avns-envelope-dark, #2084b7);
  clip-path: polygon(13% 0%, 40% 50%, 13% 100%, 100% 100%, 100% 0%);
}

.avns-mkgc-viewer__flap {
  position: absolute;
  z-index: 3;
  aspect-ratio: 493 / 654;
  width: 100cqw;
  background: var(--avns-envelope-light, #2aa3e1);
  transform-origin: left center;
  transform-style: preserve-3d;
  clip-path: polygon(15% 0, 50% 50%, 15% 100%, 0% 1000%, 0 0);
}

.avns-mkgc-viewer__watch-again {
  position: absolute;
  z-index: 100;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12cqw;
  height: 12cqw;
  border-radius: 50%;
  border: 0;
  font-family: 'Fontdiner Swanky', serif;
  opacity: 0;
  translate: -1cqw 2cqw;
  scale: 1;
  transition: scale 300ms ease-in-out, opacity 350ms ease-in-out;
  box-shadow: 4px 6px 6px rgba(0, 0, 0, 0.20);

  svg {
    width: 75%;
  }
}

.avns-mkgc-viewer__watch-again:hover {
  scale: 1.1;
}

.avns-mkgc-viewer__sticker {
  --sticker-scale: 1;
  --sticker-translate-x: 0%;
  --sticker-translate-y: -10%;
  position: absolute;
  z-index: 100;
  transform: scale(var(--sticker-scale)) translate(var(--sticker-translate-x), var(--sticker-translate-y));
  transform-origin: center center;
  width: 25cqw;
  height: 25cqw;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  border: 0;
  box-shadow: 4px 6px 6px rgba(0, 0, 0, 0.20);
  transition: transform 350ms ease-in-out, opacity 350ms ease-in-out;
  opacity: 1;
  font-weight: bold;
  font-family: 'Fontdiner Swanky', serif;
  font-size: 4cqw;
}

.avns-mkgc-viewer__sticker:hover {
  --sticker-scale: 1.1;
}

.avns-mkgc-viewer__sticker.execute {
  --sticker-translate-x: 100%;
  opacity: 0;
}

.avns-mkgc-viewer__from-to {
  position: absolute;
  z-index: 3;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: end;
  justify-content: start;
  gap: 2cqh;
  font-family: 'Fontdiner Swanky', serif;
  font-size: 1.75rem;
  font-size: 4cqw;
  padding: 2cqw;
  color: #fff;
  white-space: nowrap;
}

.avns-mkgc-card {
  position: relative;
  z-index: 1;
  transform-style: preserve-3d;
  background: #fff;
}

.avns-mkgc-card__from {
  position: absolute;
  z-index: 1000;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 3cqw 2cqh;
  font-size: 4cqw;
  text-align: right;
  font-family: 'Fontdiner Swanky', serif;
}

.avns-mkgc-card__body {
  position: absolute;
  z-index: 1000;
  top: 2cqh;
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 1cqh;
  padding: inherit;
  text-align: center;
  white-space: nowrap;
}

.avns-mkgc-card__intro {
  font-size: 4cqw;
}

.avns-mkgc-card__to,
.avns-mkgc-card__greeting {
  font-size: 5cqw;
  font-family: 'Fontdiner Swanky', serif;
}

.avns-mkgc-card__greeting {
  white-space: pre;
  font-size: 6.75cqw;
  line-height: 1.35;
}

.avns-mkgc-card canvas {
  position: absolute;
  z-index: 10;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: inherit;
}

.avns-mkgc-card .avns-mkgc-card__background {
  position: absolute;
  z-index: 0;
  inset: 0;
}

.avns-mkgc-card__background.avns-mkgc-card__background--layer-0,
.avns-mkgc-card__background.avns-mkgc-card__background--layer-1,
.avns-mkgc-card__background.avns-mkgc-card__background--layer-2 {
  width: 100%;
}

.avns-mkgc-card .avns-mkgc-card__character {
  position: absolute;
  z-index: 100;
}

.avns-mkgc-card.bg--snow {
  &.char--reindeer .avns-mkgc-card__character {
    bottom: 5%;
    right: 10%;
  }
}

.avns-mkgc-card.bg--lights {
  &.char--reindeer .avns-mkgc-card__character {
    bottom: 5%;
    left: 10%;
  }
}

.avns-mkgc-card--winter.avns-mkgc-card--bg-lights {
  .avns-mkgc-card__body {
    color: #fff;
  }

  .avns-mkgc-card__background--layer-1 {
    opacity: 1;
    animation: lights-crossfade 1.5s ease-in-out infinite alternate;
  }

  .avns-mkgc-card__background--layer-2 {
    opacity: 0;
    animation: lights-crossfade 1.5s ease-in-out infinite alternate-reverse;
  }
}

.avns-mkgc-card--winter.avns-mkgc-card--bg-snow,
.avns-mkgc-card--birthday.avns-mkgc-card--bg-confetti-pink,
.avns-mkgc-card--birthday.avns-mkgc-card--bg-balloons-purple,
.avns-mkgc-card--feeding-tube-awareness-week.avns-mkgc-card--bg-confetti-pink,
.avns-mkgc-card--feeding-tube-awareness-week.avns-mkgc-card--bg-balloons-purple {
  .avns-mkgc-card__to {
    color: #bf1c33;
  }
}

.avns-mkgc-card--winter.avns-mkgc-card--bg-lights {
  .avns-mkgc-card__to {
    color: #2bace2;
  }
}

.avns-mkgc-card--birthday.avns-mkgc-card--bg-confetti-blue,
.avns-mkgc-card--birthday.avns-mkgc-card--bg-balloons-blue,
.avns-mkgc-card--feeding-tube-awareness-week.avns-mkgc-card--bg-confetti-blue,
.avns-mkgc-card--feeding-tube-awareness-week.avns-mkgc-card--bg-balloons-blue {
  .avns-mkgc-card__to {
    color: #086b9d;
  }
}

.avns-mkgc-card--birthday.avns-mkgc-card--bg-balloons-blue,
.avns-mkgc-card--birthday.avns-mkgc-card--bg-balloons-purple,
.avns-mkgc-card--feeding-tube-awareness-week.avns-mkgc-card--bg-balloons-blue,
.avns-mkgc-card--feeding-tube-awareness-week.avns-mkgc-card--bg-balloons-purple {
  .avns-mkgc-card__background--layer-1 {
    transform: perspective(500px) translateY(-1%);
    animation: balloons-bounce 1.25s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
  }

  .avns-mkgc-card__background--layer-2 {
    transform: perspective(500px) translateY(1%);
    animation: balloons-bounce 1.25s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate-reverse;
  }
}

.avns-mkgc-card__character-container {
  position: absolute;

  .avns-mkgc-card__character {
    position: absolute;
    width: 100%;
  }
}

.avns-mkgc-card--char-snowman {
  .avns-mkgc-card__character-container {
    bottom: 7%;
    right: 15%;
    aspect-ratio: 239 / 389;
    width: calc(239 / 493 * 100%);
    height: auto;
  }

  .avns-mkgc-card__character.avns-mkgc-card__character--layer-0 {
    transform-origin: 100% 100%;
    animation: hand-wave 1s ease-in-out infinite alternate;
    will-change: transform;
    left: -6%;
    bottom: 47%;
    aspect-ratio: 61 / 83;
    width: calc(61 / 239 * 100%);
    height: auto;
  }
}

.avns-mkgc-card--char-reindeer {
  .avns-mkgc-card__character-container {
    bottom: 7%;
    right: 15%;
    aspect-ratio: 232 / 389;
    width: calc(232 / 493 * 100%);
    height: auto;
  }

  .avns-mkgc-card__character.avns-mkgc-card__character--layer-0 {
    transform-origin: 50% 44%;
    z-index: 1000;
    animation: nose-glow 2.5s ease-in-out infinite alternate;
    will-change: transform;
  }
}

.avns-mkgc-card--char-gift-blue,
.avns-mkgc-card--char-gift-purple {
  .avns-mkgc-card__character-container {
    bottom: 7%;
    aspect-ratio: 290 / 374;
    width: calc(290 / 493 * 100%);
    height: auto;
  }

  .avns-mkgc-card__character.avns-mkgc-card__character--layer-0 {
    transform-origin: 100% 100%;
    animation: hand-wave 1s ease-in-out infinite alternate;
    will-change: transform;
    left: 0%;
    bottom: 33%;
    aspect-ratio: 103 / 70;
    width: calc(103 / 290 * 100%);
    height: auto;
  }
}

.avns-mkgc-card--char-hat-blue,
.avns-mkgc-card--char-hat-pink {
  --bounce-height: 3%;
  --sway-width: 2%;
  --tilt: 4deg;
  --speed: 1.8s;

  .avns-mkgc-card__character-container {
    bottom: 7%;
    aspect-ratio: 320 / 369;
    width: calc(320 / 493 * 100%);
    height: auto;
  }

  .avns-mkgc-card__character.avns-mkgc-card_character--character {
    animation: hat-bounce-dance var(--speed) ease-in-out infinite;
  }
}

.avns-mkgc-card--char-heart {
  --bounce-height: 3%;
  --sway-width: 2%;
  --tilt: 4deg;
  --speed: 1.8s;
  --scale: 1.075;

  .avns-mkgc-card__character-container {
    bottom: 7%;
    aspect-ratio: 342 / 241;
    width: calc(342 / 470 * 100%);
    height: auto;
  }

  .avns-mkgc-card__character.avns-mkgc-card_character--character {
    animation: hat-bounce-dance var(--speed) ease-in-out infinite;
  }
}

@keyframes flipOpen {
  0% {
    transform: rotateY(0deg);
  }

  100% {
    transform: rotateY(180deg);
    z-index: 0;
  }
}

@keyframes slideTilt {
  0% {
    transform: scale(0.9) translateX(0);
  }
  
  50% {
    transform: scale(0.9) translateX(-100%);
  }

  100% {
    transform: scale(1.1) translateX(0%);
  }
}

@keyframes slideTiltZ {
  0% {
    z-index: 1;
  }

  50% {
    z-index: 4;
  }
  
  100% {
    z-index: 4;
  }
}

@keyframes lights-crossfade {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes balloons-bounce {
  0% {
    transform: perspective(500px) translateY(-1%);
  }

  100% {
    transform: perspective(500px) translateY(1%);
  }
}

@keyframes hand-wave {
  0% {
    transform: rotate(-10deg);
  }

  100% {
    transform: rotate(12deg);
  }
}

@keyframes hat-bounce-dance {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }

  20% {
    transform: translate(var(--sway-width), calc(var(--bounce-height) * -1)) rotate(var(--tilt)) scale(var(--scale, 1));
  }

  50% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }

  70% {
    transform: translate(calc(var(--sway-width) * -1), calc(var(--bounce-height) * -1)) rotate(calc(var(--tilt) * -1)) scale(var(--scale, 1));
  }

  100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
}

@keyframes nose-glow {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(2);
  }

  100% {
    transform: scale(1);
  }
}