/* =========================================
   Mogi Plastic - Estilos customizados
   Tailwind via CDN cobre 95%, este arquivo
   adiciona animações, fontes e helpers.
========================================= */

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Manrope', system-ui, sans-serif;
  color: #111111;
  background-color: #ffffff;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Archivo', system-ui, sans-serif;
  letter-spacing: -0.02em;
}

.font-display { font-family: 'Archivo', system-ui, sans-serif; }
.font-body    { font-family: 'Manrope', system-ui, sans-serif; }

/* =========================================
   Grain overlay (textura industrial sutil)
========================================= */
.grain-overlay {
  position: relative;
}
.grain-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  opacity: 0.06;
  mix-blend-mode: overlay;
}

/* =========================================
   Animações
========================================= */
@keyframes fadeUp {
  0%   { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}
@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}

.animate-fade-up {
  opacity: 0;
  animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.animate-fade-in {
  opacity: 0;
  animation: fadeIn 1s ease-out forwards;
}
.animate-pulse-dot {
  animation: pulseDot 2s ease-in-out infinite;
}
.animate-ping {
  animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* =========================================
   Reveal on scroll
========================================= */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================
   Custom scrollbar (visual industrial)
========================================= */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #F5F5F5;
}
::-webkit-scrollbar-thumb {
  background: #0047B3;
}
::-webkit-scrollbar-thumb:hover {
  background: #003A94;
}

/* =========================================
   Selection
========================================= */
::selection {
  background-color: #0047B3;
  color: #ffffff;
}

/* =========================================
   Utilitários extras
========================================= */
.text-balance { text-wrap: balance; }

/* Grid pattern reutilizável */
.bg-grid-white {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 80px 80px;
}
.bg-grid-blue {
  background-image:
    linear-gradient(to right, rgba(0,71,179,0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,71,179,0.08) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* Filtro de produtos */
.product-card.is-hidden {
  display: none;
}

/* WhatsApp float reveal on hover */
.wpp-float-label {
  max-width: 0;
  overflow: hidden;
  transition: max-width 0.5s ease, padding 0.5s ease;
  white-space: nowrap;
  padding-left: 0;
  padding-right: 0;
}
.wpp-float:hover .wpp-float-label {
  max-width: 200px;
  padding-right: 1.25rem;
}