/* v2 release */

.gradient-border {
  border-image-slice: 1;
  border-width: 2px;
  border-image-source: linear-gradient(to right, #0ed1f3ff, #8b5cf6);
}

@keyframes floatXY {
  0% {
    transform: translate(0, 100vh) scale(1);
    opacity: 0.6;
  }
  25% {
    transform: translate(10px, 75vh) scale(1.05);
  }
  50% {
    transform: translate(-10px, 50vh) scale(1.1);
    opacity: 0.8;
  }
  75% {
    transform: translate(10px, 25vh) scale(1.05);
  }
  100% {
    transform: translate(0, -20vh) scale(1.2);
    opacity: 0.2;
  }
}

#bubble1 {
  left: 10%;
  animation: floatXY 25s ease-in-out infinite;
}
#bubble2 {
  left: 60%;
  animation: floatXY 30s ease-in-out infinite;
}

#bubble2 {
  left: 40%;
  animation: floatXY 10s ease-in-out infinite;
}

#bubble3 {
  left: 80%;
  animation: floatXY 15s ease-in-out infinite;
}

#bubble4 {
  left: 50%;
  animation: floatXY 5s ease-in-out infinite;
}

#bubble5 {
  left: 70%;
  animation: floatXY 20s ease-in-out infinite;
}

#bubble6 {
  left: 20%;
  animation: floatXY 35s ease-in-out infinite;
}
#bubble7 {
  left: 40%;
  animation: floatXY 20s ease-in-out infinite;
}

#bubble8 {
  left: 90%;
  animation: floatXY 20s ease-in-out infinite;
}

#bubble9 {
  left: 95%;
  animation: floatXY 20s ease-in-out infinite;
}

#bubble10 {
  left: 350%;
  animation: floatXY 20s ease-in-out infinite;
}

#bubble11 {
  left: 55%;
  animation: floatXY 50s ease-in-out infinite;
}
#bubble12 {
  left: 85%;
  animation: floatXY 40s ease-in-out infinite;
}
#bubble13 {
  left: 15%;
  animation: floatXY 30s ease-in-out infinite;
}
#bubble14 {
  left: 88%;
  animation: floatXY 10s ease-in-out infinite;
}

/* Animate progress bar from 0 to custom width */
.animate-progress {
  width: 0;
  transition: width 2.5s ease-out;
}

img {
  image-rendering: auto; /* default smoothing */
  image-rendering: smooth; /* some browsers */
}

@font-face {
  font-family: "Merriweather Sans";
  src: url("/public/fonts/MerriweatherSans-Regular.woff2") format("woff2"),
    url("/public/fonts/MerriweatherSans-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Merriweather Sans";
  src: url("/public/fonts/MerriweatherSans-Bold.woff2") format("woff2"),
    url("/public/fonts/MerriweatherSans-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

.flip-card {
  perspective: 1200px; /* slightly more depth for smoother 3D */
}

.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); /* smoother ease */
}

.flip-card:hover .flip-inner {
  transform: rotateY(180deg);
}

.flip-front,
.flip-back {
  backface-visibility: hidden;
  position: absolute;
  inset: 0;
  border-radius: 1rem; /* matches Tailwind rounded-2xl */
  overflow: hidden;
}

.flip-back {
  transform: rotateY(180deg);
}

#code-bg {
  position: absolute;
  top: 0;
  left: 10px;
  right: 0;
  bottom: 0;
  font-family: "Fira Code", monospace;
  font-size: 1.2rem; /* increase if you want larger text */
  line-height: 1.8;
  overflow: hidden;
  margin: 0;
  padding: 0;
  white-space: pre; /* allow text to stretch fully to the right */
  z-index: 10;
  display: block;
}
html {
  scroll-behavior: smooth;
}