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

html, body {
  overflow: auto;
  /* overflow-x: hidden; */
} 

:root {
  --background: #ffffff;
  --foreground: #171717;
  /* -ms-overflow-width: none;
  -ms-overflow-style: none; */
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  color: var(--foreground);
  background: var(--background);
  font-family: Arial, Helvetica, sans-serif;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}


.fade-in {
  opacity: 100; 
  transform: translateY(20px); 
  animation: fadeIn ease 1s forwards; 
}



@keyframes fadeIn {
  0% {
    opacity: 0; 
    /* transform: translateY(20px);  */
  }
  50% {
    opacity: 50;
    transform: scale(50px);
    transition:  1s ease-in;
  }
  100% {
    opacity: 1;
    transform: scale(75px);
    transform: translateY(0); 
    transition: 1.9s ease-in;
  }
}

.prezoom-in{
  transform-origin: center;
  transform: scale(1);
  transition: ease-in-out;
}
.zoom-in{
  
  transform-origin: center;
  transform: scale(1.5);
  transition: transform 1.5s ease-in-out;
}


.zoom-in-top {
  transform-origin: top left; 
  transform: scale(0.5) translate(0, 15); 
  transition: transform 0.7s ease-in; 
}

.zoom-bottom-right {
  transform: scale(0.3) translate(0%, 0%); 
  transform-origin: bottom right; 
  transition: transform 0.7s ease-in-out;
}


.zoom-in-bottom{
  transform-origin: bottom right;
  transform: scale(1) translate(0, 0); 
}
