@import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

@theme {
  --color-missao: #FCBE26;
  --color-rosa: #D81B60;
  --color-gold: #D4AF37;
  --font-display: "Playfair Display", serif;
  --font-sans: "Inter", sans-serif;
}

body {
  font-family: var(--font-sans);
  background-color: #050505;
  color: #F8F8F8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.font-display { font-family: var(--font-display); }
.font-sans { font-family: var(--font-sans); }

.text-missao { color: var(--color-missao); }
.bg-missao { background-color: var(--color-missao); }
.border-missao { border-color: var(--color-missao); }

.text-rosa { color: var(--color-rosa); }
.bg-rosa { background-color: var(--color-rosa); }
.border-rosa { border-color: var(--color-rosa); }

.text-gold { color: var(--color-gold); }

h1, h2, h3, .font-display { letter-spacing: -0.01em; }
h1 { letter-spacing: -0.02em; }

.marquee-container { overflow: hidden; white-space: nowrap; display: flex; }
.marquee-content { display: flex; animation: marquee 25s linear infinite; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
html { scroll-behavior: smooth; }

.glass-panel {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.glass-panel:hover {
  border-color: rgba(216, 27, 96, 0.3);
  background: rgba(216, 27, 96, 0.04);
  box-shadow: 0 10px 40px -10px rgba(216, 27, 96, 0.15);
  transform: translateY(-2px);
}

.text-gradient {
  background: linear-gradient(135deg, #FFF 0%, #AAA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.animal-texture {
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 10c2-3 5-1 4 3-1 3-5 5-7 2-1-2 1-4 3-5zm20 30c3-2 6 0 5 4-1 3-6 4-8 1-2-2 0-5 3-5zm40-10c-3-2-6 1-4 5 1 3 5 4 7 1 2-2 0-5-3-6zm-30 40c2 4 7 2 6-2-1-3-5-5-8-1-2 2-1 6 2 3zm50-20c3 2 6 0 5-4-1-3-5-4-7-1-2 2 0 5 2 5z' fill='rgba(255,255,255,0.02)' fill-rule='evenodd'/%3E%3C/svg%3E");
}

@keyframes morph {
  0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}
.organic-blob { animation: morph 8s ease-in-out infinite; }

.img-reveal-wrap { overflow: hidden; position: relative; }
.img-reveal-wrap img { transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1); }
.img-reveal-wrap:hover img { transform: scale(1.08); }

.reveal-up { opacity: 0; transform: translateY(30px); transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal-up.active { opacity: 1; transform: translateY(0); }

.reveal-blur { opacity: 0; transform: scale(0.9); filter: blur(20px); transition: all 1.2s ease-out; }
.reveal-blur.active { opacity: 1; transform: scale(1); filter: blur(0px); }

.reveal-scale { opacity: 0; transform: scale(0.95); transition: all 0.8s ease-out; }
.reveal-scale.active { opacity: 1; transform: scale(1); }

.reveal-rotate { opacity: 0; transform: scale(0.9) rotate(5deg); transition: all 0.8s ease-out; }
.reveal-rotate.active { opacity: 1; transform: scale(1) rotate(0deg); }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.floating { animation: float 4s ease-in-out infinite; }