@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --fade-in-heart-animation-delay: 0.3s;
  --fade-in-heart-animation-speed: 0.9s;

  --vha-text-slide-right-animation-delay: 0.2s;
  --vha-text-slide-right-animation-speed: 1.0s;
  --vha-text-slide-right-letter-slide-speed: calc(
    var(--vha-text-slide-right-animation-speed) / 7
  );
  --vha-text-slide-right-letter-slide-delay: calc(
    var(--vha-text-slide-right-animation-speed) * 0.05 / 1.2
  );
}

@keyframes grow {
  0% {
    scale: 0;
  }
  100% {
    scale: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Animates the wifi heart */
.fade-in-heart > path {
  scale: 0;
  opacity: 0;
  transform-origin: center bottom;
}

.fade-in-heart > path:nth-child(1) {
  animation:
    grow calc(0.4 / 1.52 * var(--fade-in-heart-animation-speed))
    cubic-bezier(0.25, 0.94, 0.8, 1) var(--fade-in-heart-animation-delay)
    forwards,
    fadeIn calc(0.3 / 1.52 * var(--fade-in-heart-animation-speed)) linear
    var(--fade-in-heart-animation-delay) forwards;
}
.fade-in-heart > path:nth-child(2) {
  animation:
    grow calc(0.7 / 1.52 * var(--fade-in-heart-animation-speed))
    cubic-bezier(0.45, 0, 0.08, 1) var(--fade-in-heart-animation-delay)
    forwards,
    fadeIn calc(0.2 / 1.52 * var(--fade-in-heart-animation-speed)) linear
    calc(
      var(--fade-in-heart-animation-delay)
        + 0.2 / 1.52 * var(--fade-in-heart-animation-speed)
    ) forwards;
}
.fade-in-heart > path:nth-child(3) {
  animation:
    grow calc(1.0 / 1.52 * var(--fade-in-heart-animation-speed))
    cubic-bezier(0.4, 0, 0.28, 1) var(--fade-in-heart-animation-delay) forwards,
    fadeIn calc(0.2 / 1.52 * var(--fade-in-heart-animation-speed)) linear
    calc(
      var(--fade-in-heart-animation-delay)
        + 0.4 / 1.52 * var(--fade-in-heart-animation-speed)
    ) forwards;
}
.fade-in-heart > path:nth-child(4) {
  animation:
    grow calc(1.3 / 1.52 * var(--fade-in-heart-animation-speed))
    cubic-bezier(0.83, 0.56, 0.2, 1) var(--fade-in-heart-animation-delay)
    forwards,
    fadeIn calc(0.14 / 1.52 * var(--fade-in-heart-animation-speed)) linear
    calc(
      var(--fade-in-heart-animation-delay)
        + 0.64 / 1.52 * var(--fade-in-heart-animation-speed)
    ) forwards;
}
.fade-in-heart > path:nth-child(5) {
  animation:
    grow calc(1.45 / 1.52 * var(--fade-in-heart-animation-speed))
    cubic-bezier(0.79, 0.4, 0.13, 1) var(--fade-in-heart-animation-delay)
    forwards,
    fadeIn calc(0.14 / 1.52 * var(--fade-in-heart-animation-speed)) linear
    calc(
      var(--fade-in-heart-animation-delay)
        + 0.78 / 1.52 * var(--fade-in-heart-animation-speed)
    ) forwards;
}
.fade-in-heart > path:nth-child(6), .fade-in-heart > path:nth-child(7) {
  animation:
    grow calc(1.5 / 1.52 * var(--fade-in-heart-animation-speed))
    cubic-bezier(0.89, 0.34, 0.21, 1) var(--fade-in-heart-animation-delay)
    forwards,
    fadeIn calc(0.13 / 1.52 * var(--fade-in-heart-animation-speed)) linear
    calc(
      var(--fade-in-heart-animation-delay)
        + 0.92 / 1.52 * var(--fade-in-heart-animation-speed)
    ) forwards;
}
.fade-in-heart > path:nth-child(8), .fade-in-heart > path:nth-child(9) {
  animation:
    grow calc(1.52 / 1.52 * var(--fade-in-heart-animation-speed))
    cubic-bezier(1, 0.82, 0.54, 1) var(--fade-in-heart-animation-delay)
    forwards,
    fadeIn calc(0.12 / 1.52 * var(--fade-in-heart-animation-speed)) linear
    calc(
      var(--fade-in-heart-animation-delay)
        + 1.05 / 1.52 * var(--fade-in-heart-animation-speed)
    ) forwards;
}

.vha-text-slide-right > path {
  opacity: 0;
  transform-origin: left center;
  transform: translateX(-12px);
}

@keyframes slideRight {
  0% {
    opacity: 0;
    transform: translateX(-12px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.vha-text-slide-right > path:nth-child(1) {
  animation: slideRight calc(var(--vha-text-slide-right-letter-slide-speed))
    ease-in
    calc(
      var(--fade-in-heart-animation-delay)
        + (1 - 1) * var(--vha-text-slide-right-letter-slide-delay)
    ) forwards;
}
.vha-text-slide-right > path:nth-child(2) {
  animation: slideRight calc(var(--vha-text-slide-right-letter-slide-speed))
    ease-in
    calc(
      var(--fade-in-heart-animation-delay)
        + (2 - 1) * var(--vha-text-slide-right-letter-slide-delay)
    ) forwards;
}
.vha-text-slide-right > path:nth-child(3) {
  animation: slideRight calc(var(--vha-text-slide-right-letter-slide-speed))
    ease-in
    calc(
      var(--fade-in-heart-animation-delay)
        + (3 - 1) * var(--vha-text-slide-right-letter-slide-delay)
    ) forwards;
}
.vha-text-slide-right > path:nth-child(4) {
  animation: slideRight calc(var(--vha-text-slide-right-letter-slide-speed))
    ease-in
    calc(
      var(--fade-in-heart-animation-delay)
        + (4 - 1) * var(--vha-text-slide-right-letter-slide-delay)
    ) forwards;
}
.vha-text-slide-right > path:nth-child(5) {
  animation: slideRight calc(var(--vha-text-slide-right-letter-slide-speed))
    ease-in
    calc(
      var(--fade-in-heart-animation-delay)
        + (5 - 1) * var(--vha-text-slide-right-letter-slide-delay)
    ) forwards;
}
.vha-text-slide-right > path:nth-child(6) {
  animation: slideRight calc(var(--vha-text-slide-right-letter-slide-speed))
    ease-in
    calc(
      var(--fade-in-heart-animation-delay)
        + (6 - 1) * var(--vha-text-slide-right-letter-slide-delay)
    ) forwards;
}
.vha-text-slide-right > path:nth-child(7) {
  animation: slideRight calc(var(--vha-text-slide-right-letter-slide-speed))
    ease-in
    calc(
      var(--fade-in-heart-animation-delay)
        + (7 - 1) * var(--vha-text-slide-right-letter-slide-delay)
    ) forwards;
}
.vha-text-slide-right > path:nth-child(8) {
  animation: slideRight calc(var(--vha-text-slide-right-letter-slide-speed))
    ease-in
    calc(
      var(--fade-in-heart-animation-delay)
        + (8 - 1) * var(--vha-text-slide-right-letter-slide-delay)
    ) forwards;
}
.vha-text-slide-right > path:nth-child(9) {
  animation: slideRight calc(var(--vha-text-slide-right-letter-slide-speed))
    ease-in
    calc(
      var(--fade-in-heart-animation-delay)
        + (9 - 1) * var(--vha-text-slide-right-letter-slide-delay)
    ) forwards;
}
.vha-text-slide-right > path:nth-child(10) {
  animation: slideRight calc(var(--vha-text-slide-right-letter-slide-speed))
    ease-in
    calc(
      var(--fade-in-heart-animation-delay)
        + (10 - 1) * var(--vha-text-slide-right-letter-slide-delay)
    ) forwards;
}
.vha-text-slide-right > path:nth-child(11) {
  animation: slideRight calc(var(--vha-text-slide-right-letter-slide-speed))
    ease-in
    calc(
      var(--fade-in-heart-animation-delay)
        + (11 - 1) * var(--vha-text-slide-right-letter-slide-delay)
    ) forwards;
}
.vha-text-slide-right > path:nth-child(12) {
  animation: slideRight calc(var(--vha-text-slide-right-letter-slide-speed))
    ease-in
    calc(
      var(--fade-in-heart-animation-delay)
        + (12 - 1) * var(--vha-text-slide-right-letter-slide-delay)
    ) forwards;
}
.vha-text-slide-right > path:nth-child(13) {
  animation: slideRight calc(var(--vha-text-slide-right-letter-slide-speed))
    ease-in
    calc(
      var(--fade-in-heart-animation-delay)
        + (13 - 1) * var(--vha-text-slide-right-letter-slide-delay)
    ) forwards;
}
.vha-text-slide-right > path:nth-child(14) {
  animation: slideRight calc(var(--vha-text-slide-right-letter-slide-speed))
    ease-in
    calc(
      var(--fade-in-heart-animation-delay)
        + (14 - 1) * var(--vha-text-slide-right-letter-slide-delay)
    ) forwards;
}
.vha-text-slide-right > path:nth-child(15) {
  animation: slideRight calc(var(--vha-text-slide-right-letter-slide-speed))
    ease-in
    calc(
      var(--fade-in-heart-animation-delay)
        + (15 - 1) * var(--vha-text-slide-right-letter-slide-delay)
    ) forwards;
}
.vha-text-slide-right > path:nth-child(16) {
  animation: slideRight calc(var(--vha-text-slide-right-letter-slide-speed))
    ease-in
    calc(
      var(--fade-in-heart-animation-delay)
        + (16 - 1) * var(--vha-text-slide-right-letter-slide-delay)
    ) forwards;
}
.vha-text-slide-right > path:nth-child(17) {
  animation: slideRight calc(var(--vha-text-slide-right-letter-slide-speed))
    ease-in
    calc(
      var(--fade-in-heart-animation-delay)
        + (17 - 1) * var(--vha-text-slide-right-letter-slide-delay)
    ) forwards;
}
.vha-text-slide-right > path:nth-child(18) {
  animation: slideRight calc(var(--vha-text-slide-right-letter-slide-speed))
    ease-in
    calc(
      var(--fade-in-heart-animation-delay)
        + (18 - 1) * var(--vha-text-slide-right-letter-slide-delay)
    ) forwards;
}
.vha-text-slide-right > path:nth-child(19) {
  animation: slideRight calc(var(--vha-text-slide-right-letter-slide-speed))
    ease-in
    calc(
      var(--fade-in-heart-animation-delay)
        + (19 - 1) * var(--vha-text-slide-right-letter-slide-delay)
    ) forwards;
}
.vha-text-slide-right > path:nth-child(20) {
  animation: slideRight calc(var(--vha-text-slide-right-letter-slide-speed))
    ease-in
    calc(
      var(--fade-in-heart-animation-delay)
        + (20 - 1) * var(--vha-text-slide-right-letter-slide-delay)
    ) forwards;
}
.vha-text-slide-right > path:nth-child(21) {
  animation: slideRight calc(var(--vha-text-slide-right-letter-slide-speed))
    ease-in
    calc(
      var(--fade-in-heart-animation-delay)
        + (21 - 1) * var(--vha-text-slide-right-letter-slide-delay)
    ) forwards;
}
.vha-text-slide-right > path:nth-child(22) {
  animation: slideRight calc(var(--vha-text-slide-right-letter-slide-speed))
    ease-in
    calc(
      var(--fade-in-heart-animation-delay)
        + (22 - 1) * var(--vha-text-slide-right-letter-slide-delay)
    ) forwards;
}

iframe#youtube_demo_iframe {
  max-width: 100%;
  height: calc(390 / 640 * (100vw - 12px));
  max-height: 390px;
}

@media (hover: hover) and (pointer: fine) {
  .hover-desktop\:bg-indigo-50:hover {
    background-color: #eef2ff;
  }
  .hover-desktop\:ring-indigo-50:hover {
    box-shadow: 0 0 0 2px #eef2ff;
  }
  .hover-desktop\:text-indigo-900:hover {
    color: #1e3a8a;
  }
}

@media (hover: none), (pointer: coarse) {
  .show-on-mobile {
    display: block !important;
  }
}