/* ============================================================
   NeoTech — Tech Premium Effects
   Cursor · Glassmorphism · Tilt · Ripple · Particles
   ============================================================ */

/* ── Header glassmorphism ── */
header, .main-header, nav.navbar {
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  background: rgba(0, 0, 0, 0.80) !important;
  border-bottom: 1px solid rgba(0, 212, 232, 0.12) !important;
  position: sticky !important; top: 0 !important; z-index: 1000 !important;
}
/* Linha de luz animada no topo do header */
header::before, .main-header::before {
  content: '';
  position: absolute; top: 0; left: -100%; width: 60%; height: 1px;
  background: linear-gradient(90deg, transparent, #00d4e8, transparent);
  animation: scanline 4s linear infinite;
}
@keyframes scanline {
  0%   { left: -60%; }
  100% { left: 140%; }
}

/* ── Cards de produto ── */
.product-card, .card-produto, .catalog-card, [class*="product-card"] {
  border: 1px solid rgba(0, 212, 232, 0.10) !important;
  border-radius: 14px !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.2s !important;
  transform-style: preserve-3d;
  will-change: transform;
  position: relative;
  overflow: hidden;
}
/* Brilho radial que segue o mouse */
.product-card::after, .card-produto::after, .catalog-card::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%),
    rgba(0,212,232,0.12) 0%, transparent 65%);
  opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 1;
  border-radius: inherit;
}
.product-card:hover::after, .card-produto:hover::after,
.catalog-card:hover::after { opacity: 1; }

/* Entrada escalonada dos cards */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Botões ── */
button, .btn, .btn-primary, input[type="submit"] {
  position: relative; overflow: hidden;
  transition: box-shadow 0.2s, transform 0.15s !important;
}
button:hover:not(.cat-pill):not(.cart-toggle-btn),
.btn:hover, .btn-primary:hover {
  box-shadow: 0 0 20px rgba(0, 212, 232, 0.40) !important;
  transform: translateY(-1px) !important;
}
/* Ripple */
.ripple {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,0.22);
  transform: scale(0); animation: rippleAnim 0.55s linear;
  pointer-events: none;
}
@keyframes rippleAnim { to { transform: scale(4); opacity: 0; } }

/* ── Scroll suave global ── */
html { scroll-behavior: smooth; }

/* ── Scrollbar tech ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #050d1a; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(#1a5ebf, #00d4e8);
  border-radius: 3px;
}

/* ── Seleção de texto ── */
::selection { background: rgba(0,212,232,0.25); color: #fff; }

/* ============================================================
   Animações universais — Modais, Painéis, Abas
   ============================================================ */

/* Entrada do modal (escala + fade) */
@keyframes ntModalIn {
  from { opacity: 0; transform: scale(0.92) translateY(-10px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);     }
}
/* Saída do modal */
@keyframes ntModalOut {
  from { opacity: 1; transform: scale(1)    translateY(0);    }
  to   { opacity: 0; transform: scale(0.92) translateY(-8px); }
}

/* Entrada lateral (carrinho, drawer) */
@keyframes ntSlideIn {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0);    }
}
@keyframes ntSlideOut {
  from { opacity: 1; transform: translateX(0);    }
  to   { opacity: 0; transform: translateX(100%); }
}

/* Entrada dropdown (de cima para baixo) */
@keyframes ntDropDown {
  from { opacity: 0; transform: translateY(-10px) scaleY(0.95); }
  to   { opacity: 1; transform: translateY(0)      scaleY(1);    }
}

/* Fade simples (abas, tabs) */
@keyframes ntFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* Classes utilitárias aplicadas pelo JS */
.nt-modal-enter    { animation: ntModalIn   0.32s cubic-bezier(0.16,1,0.3,1) both; }
.nt-modal-leave    { animation: ntModalOut  0.22s cubic-bezier(0.4,0,1,1)    both; }
.nt-slide-enter    { animation: ntSlideIn   0.38s cubic-bezier(0.25,0.1,0.25,1) both; }
.nt-slide-leave    { animation: ntSlideOut  0.28s cubic-bezier(0.4,0,1,1)       both; }
.nt-dropdown-enter { animation: ntDropDown  0.22s cubic-bezier(0.16,1,0.3,1) both; }
.nt-fade-enter     { animation: ntFadeIn    0.28s cubic-bezier(0.16,1,0.3,1) both; }

/* Overlay semitransparente animado */
.nt-overlay {
  animation: ntFadeIn 0.25s ease both;
}