@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,900&display=swap");

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Plus Jakarta Sans", sans-serif;
}

/* Titulos com uma fonte de destaque propria, em vez de so usar o peso mais
   forte da fonte do corpo -- da mais carater a marca sem mexer no texto
   corrido, que continua em Plus Jakarta Sans para manter a leitura facil. */
h1, h2, h3, .font-display {
  font-family: "Bricolage Grotesque", "Plus Jakarta Sans", sans-serif;
  letter-spacing: -0.01em;
}

/* Atmosfera suave atras do hero -- em tema claro, uma mancha de cor larga e
   desfocada em vez de fundo solido, sem pesar no contraste do texto. */
.hero-atmosphere {
  position: absolute;
  inset: 0;
  z-index: -10;
  overflow: hidden;
  pointer-events: none;
}

.hero-atmosphere span {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}

.hero-atmosphere span:nth-child(1) {
  width: 480px;
  height: 480px;
  top: -160px;
  right: -80px;
  background: rgba(225, 29, 46, 0.16);
}

.hero-atmosphere span:nth-child(2) {
  width: 420px;
  height: 420px;
  bottom: -180px;
  left: -120px;
  background: rgba(251, 191, 36, 0.14);
}

.glassWhite {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.admin-input {
  width: 100%;
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  padding: 0.8rem 1rem;
  color: #0f172a;
  outline: none;
}

.admin-input:focus {
  border-color: rgba(225, 29, 46, 0.7);
  box-shadow: 0 0 0 3px rgba(225, 29, 46, 0.14);
}

.loading-bar {
  animation: loadingSlide 1s ease-in-out infinite;
  transform-origin: left;
}

@keyframes loadingSlide {
  0% {
    transform: translateX(-100%) scaleX(0.35);
  }
  50% {
    transform: translateX(10%) scaleX(0.9);
  }
  100% {
    transform: translateX(120%) scaleX(0.35);
  }
}

/* Premium card hover effects and micro-animations */
.premium-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
}

.premium-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
  border-color: rgba(225, 29, 46, 0.25);
}

.btn-premium {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-premium:hover {
  transform: scale(1.02);
  opacity: 0.95;
}

.btn-premium:active {
  transform: scale(0.98);
}

/* Smooth page load animation */
@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.97) translateY(8px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.animate-fade-in-scale {
  animation: fadeInScale 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}