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

@layer base {
  html {
    font-size: 20px;
    /* Explicit large base size (1x larger feel) */
  }

  body {
    @apply text-base text-[#004d25] antialiased;
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    /* Apply base text size (now 20px) and primary color globally */
  }
}

@layer utilities {
  @keyframes spin-vertical {
    0% {
      transform: rotateY(0deg);
    }

    100% {
      transform: rotateY(360deg);
    }
  }

  .animate-spin-vertical {
    animation: spin-vertical 1s ease-out;
  }
}

@keyframes float-vertical {

  0%,
  100% {
    transform: translateY(0);
    animation-timing-function: ease-in-out;
  }

  50% {
    transform: translateY(-50vh);
    animation-timing-function: ease-in-out;
  }
}

.animate-float-vertical {
  animation: float-vertical 8s infinite;
}