@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

#root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}
body {
  margin: 0;
}
canvas {
  display: block;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}

.card {
  padding: 2em;
}

.read-the-docs {
  color: #888;
}

.fade-in {
  opacity: 0;
  transition: opacity 0.5s ease-in;
}
.fade-in.appear {
  opacity: 1;
}

.three-animation-placeholder {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.three-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}


bg-gradient-to-r from-blue-800 to-indigo-900

  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 4%;

    --card: 0 0% 100%;
    --card-foreground: 240 10% 4%;

    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 4%;

    --primary: 213 97% 47%;
    --primary-foreground: 0 0% 100%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 213 97% 47%;

    --muted: 240 5% 96%;
    --muted-foreground: 240 4% 46%;

    --accent: 213 97% 97%;
    --accent-foreground: 213 97% 47%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 100%;

    --border: 240 6% 90%;
    --input: 240 6% 90%;
    --ring: 213 97% 47%;

    --radius: 0.75rem;
  }

  .dark {
    --background: 240 10% 4%;
    --foreground: 0 0% 100%;

    --card: 240 10% 4%;
    --card-foreground: 0 0% 100%;

    --popover: 240 10% 4%;
    --popover-foreground: 0 0% 100%;

    --primary: 0 0% 100%;
    --primary-foreground: 240 5.9% 10%;

    --secondary: 240 4% 16%;
    --secondary-foreground: 0 0% 100%;

    --muted: 240 4% 16%;
    --muted-foreground: 240 5% 65%;

    --accent: 213 97% 47%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 100%;

    --border: 240 4% 16%;
    --input: 240 4% 16%;
    --ring: 213 97% 47%;
  }







/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: theme('colors.background');
}

::-webkit-scrollbar-thumb {
  background: theme('colors.muted.DEFAULT');
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: theme('colors.muted.foreground');
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Improved Focus Styles */
:focus {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Text selection */
::selection {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

/* Link hover transition */
a {
  transition: color 0.2s ease, opacity 0.2s ease;
}

.will-change-transform {
  will-change: transform;
}

.perspective-1000 {
  perspective: 1000px;
}

.preserve-3d {
  transform-style: preserve-3d;
}

.backface-hidden {
  backface-visibility: hidden;
}

/* Utility for animated underline */
.animated-underline {
  position: relative;
}

.animated-underline::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: -2px;
  left: 0;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s ease-out;
}

.animated-underline:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* Custom mouse interaction styles */
.hover-lift {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hover-lift:hover {
  transform: translateY(-5px);
}

/* Wrapper for 3D scenes */
.three-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

/* Contato e forms */
 .animate-fade-in {
      opacity: 1;
      animation: fadeIn 0.5s ease-in-out;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .animate-scale-up {
      animation: scaleUp 0.5s ease-in-out;
    }

    @keyframes scaleUp {
      from {
        transform: scale(0.9);
        opacity: 0;
      }
      to {
        transform: scale(1);
        opacity: 1;
      }
    }

    .animate-fade-in {
      opacity: 1;
      animation: fadeIn 0.5s ease-in-out;
    }

    .animate-fade-in-delayed {
      opacity: 1;
      animation: fadeIn 0.5s ease-in-out 0.3s;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

   
    .animate-fade-in-up {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.7s ease-out, transform 0.7s ease-out;
    }
    .animate-fade-in-up.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .animate-fade-in-down {
      opacity: 0;
      transform: translateY(-20px);
      transition: opacity 0.7s ease-out, transform 0.7s ease-out;
    }
    .animate-fade-in-down.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .animate-fade-in-left {
      opacity: 0;
      transform: translateX(-20px);
      transition: opacity 0.7s ease-out, transform 0.7s ease-out;
    }
    .animate-fade-in-left.visible {
      opacity: 1;
      transform: translateX(0);
    }

    .animate-fade-in-right {
      opacity: 0;
      transform: translateX(20px);
      transition: opacity 0.7s ease-out, transform 0.7s ease-out;
    }
    .animate-fade-in-right.visible {
      opacity: 1;
      transform: translateX(0);
    }

    .animate-scale {
      opacity: 0;
      transform: scale(0.95);
      transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }
    .animate-scale.visible {
      opacity: 1;
      transform: scale(1);
    }

    .animate-blur-in {
      opacity: 0;
      filter: blur(8px);
      transition: opacity 0.7s ease-out, filter 0.7s ease-out;
    }
    .animate-blur-in.visible {
      opacity: 1;
      filter: blur(0px);
    }

    .animate-fade-in {
      opacity: 1;
      animation: fadeIn 0.5s ease-in-out forwards;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .hover-lift:hover {
      transform: translateY(-5px);
    }

    .animate-fade-in {
      opacity: 1;
      animation: fadeIn 0.5s ease-in-out forwards;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }


    .animate-fade-in {
      opacity: 1;
      animation: fadeIn 0.5s ease-in-out forwards;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .hover-lift:hover {
      transform: translateY(-5px);
    }

    .animated-underline {
      position: relative;
    }

    .animated-underline::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -2px;
      width: 0;
      height: 2px;
      background-color: white;
      transition: width 0.3s ease-in-out;
    }

    .animated-underline:hover::after {
      width: 100%;
    }

    .animate-scale-up {
      animation: scaleUp 0.3s ease-in-out forwards;
    }

    @keyframes scaleUp {
      from {
        transform: scale(0.9);
        opacity: 0;
      }
      to {
        transform: scale(1);
        opacity: 1;
      }
    }