html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
}

body {
  overflow-x: hidden;
}


/* =========================================================
   HERO BACKGROUND
========================================================= */

#hero {
  background-blend-mode: screen;
  background-color: #eef8ff;
}


/* =========================================================
   MESH ORBS
========================================================= */

#orb1 {
  background:
    radial-gradient(
      circle,
      rgba(162, 200, 255, 0.7) 0%,
      rgba(208, 219, 252, 0.3) 50%,
      transparent 70%
    );

  animation: orbOne 15s ease-in-out infinite;
}


#orb2 {
  background:
    radial-gradient(
      circle,
      rgba(212, 206, 246, 0.6) 0%,
      rgba(245, 230, 248, 0.3) 50%,
      transparent 70%
    );

  animation: orbTwo 13s ease-in-out infinite;
}


#orb3 {
  background:
    radial-gradient(
      circle,
      rgba(148, 219, 254, 0.6) 0%,
      rgba(162, 200, 255, 0.25) 50%,
      transparent 70%
    );

  animation: orbThree 17s ease-in-out infinite;
}


#orb4 {
  background:
    radial-gradient(
      circle,
      rgba(245, 230, 248, 0.5) 0%,
      rgba(212, 206, 246, 0.2) 50%,
      transparent 70%
    );

  animation: orbFour 12s ease-in-out infinite;
}


/* =========================================================
   ORB ANIMATIONS
========================================================= */

@keyframes orbOne {

  0% {
    transform: translate(0, 0);
  }

  33% {
    transform: translate(40px, -30px);
  }

  66% {
    transform: translate(-30px, 25px);
  }

  100% {
    transform: translate(0, 0);
  }

}


@keyframes orbTwo {

  0% {
    transform: translate(0, 0);
  }

  33% {
    transform: translate(-35px, 25px);
  }

  66% {
    transform: translate(25px, -20px);
  }

  100% {
    transform: translate(0, 0);
  }

}


@keyframes orbThree {

  0% {
    transform: translate(0, 0);
  }

  33% {
    transform: translate(30px, -25px);
  }

  66% {
    transform: translate(-20px, 30px);
  }

  100% {
    transform: translate(0, 0);
  }

}


@keyframes orbFour {

  0% {
    transform:
      translate(-50%, -50%)
      scale(1);

    opacity: 0.6;
  }

  33% {
    transform:
      translate(-50%, -50%)
      scale(1.08);

    opacity: 0.8;
  }

  66% {
    transform:
      translate(-50%, -50%)
      scale(0.95);

    opacity: 0.6;
  }

  100% {
    transform:
      translate(-50%, -50%)
      scale(1);

    opacity: 0.6;
  }

}


/* =========================================================
   BUBBLE
========================================================= */

#bubble {
  animation: bubbleFloat 4s ease-in-out infinite;
}


@keyframes bubbleFloat {

  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(5px, -10px);
  }

  100% {
    transform: translate(0, 0);
  }

}


/* =========================================================
   CARDS
========================================================= */

.hero-card {
  position: absolute;

  width: 100%;

  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);

  border: 1px solid rgba(255, 255, 255, 0.4);

  padding: 20px;

  border-radius: 28px;

  box-shadow:
    0 20px 40px rgba(80, 100, 140, 0.12);

  transform-origin: center center;

  transform-style: preserve-3d;

  transition:
    transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
    filter 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}


/* =========================================================
   CARD CONTENT
========================================================= */

.hero-card h3 {
  margin: 0 0 4px;
}

.hero-card p {
  margin-top: 0;
}


/* =========================================================
   CARD IMAGE
========================================================= */

.card-avatar {
  width: 64px;
  height: 64px;

  border-radius: 9999px;

  flex-shrink: 0;

  overflow: hidden;
}


.card-avatar img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* =========================================================
   MOBILE
========================================================= */

@media (min-width: 640px) {

  .hero-card {
    padding: 24px;
  }

  .card-avatar {
    width: 80px;
    height: 80px;
  }

}


@media (min-width: 768px) {

  .hero-card {
    padding: 32px;
  }

  .card-avatar {
    width: 96px;
    height: 96px;
  }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

  #orb1,
  #orb2,
  #orb3,
  #orb4,
  #bubble {
    animation: none !important;
  }

  .hero-card {
    transition: none !important;
  }

}