/* ============================================================
   SHIRO TECNOLOGIA — main.css
   Estilos customizados (complementa Tailwind)
============================================================ */

/* ----- Variáveis ----- */
:root {
  --color-primary:   #40B3DD;
  --color-darkblue:  #0F172A;
  --color-petroleum: #163954;
  --color-neon:      #00FF88;
  --color-white:     #FAFBFB;
  --color-black:     #151516;
}

/* ----- Reset e tipografia ----- */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html { scroll-padding-top: 100px; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  text-rendering: optimizeLegibility;
}

/* ----- Headings com tracking otimizado ----- */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* ============================================================
   SCROLLBAR PERSONALIZADA
============================================================ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0F172A; }
::-webkit-scrollbar-thumb {
  background: #40B3DD;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover { background: #00FF88; }

/* Firefox */
html { scrollbar-width: thin; scrollbar-color: #40B3DD #0F172A; }

/* ============================================================
   SELEÇÃO DE TEXTO
============================================================ */
::selection { background: #00FF88; color: #0F172A; }
::-moz-selection { background: #00FF88; color: #0F172A; }

/* ============================================================
   ANIMAÇÕES CUSTOMIZADAS
============================================================ */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.animate-float { animation: float 3s ease-in-out infinite; }

@keyframes pulse-neon {
  0%, 100% { box-shadow: 0 0 20px rgba(0, 255, 136, 0.4); }
  50% { box-shadow: 0 0 40px rgba(0, 255, 136, 0.8); }
}
.animate-pulse-neon { animation: pulse-neon 2s ease-in-out infinite; }

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up { animation: fade-in-up 0.6s ease-out forwards; }

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.animate-spin-slow { animation: spin-slow 8s linear infinite; }

/* ============================================================
   GRADIENTES E BACKGROUNDS
============================================================ */
.bg-gradient-shiro {
  background: linear-gradient(135deg, #0F172A 0%, #163954 50%, #40B3DD 100%);
}

.bg-gradient-neon {
  background: linear-gradient(135deg, #00FF88 0%, #40B3DD 100%);
}

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

/* ============================================================
   CARDS E COMPONENTES
============================================================ */
.card-glow {
  position: relative;
  transition: all 0.3s ease;
}
.card-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, transparent, #40B3DD, transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.card-glow:hover::before { opacity: 1; }

/* ============================================================
   BOTÕES CUSTOMIZADOS
============================================================ */
.btn-shimmer {
  position: relative;
  overflow: hidden;
}
.btn-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s ease;
}
.btn-shimmer:hover::after { left: 100%; }

/* ============================================================
   FORMULÁRIO — feedback visual
============================================================ */
input:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown) {
  border-color: rgba(239, 68, 68, 0.5);
}

input:valid:not(:placeholder-shown),
textarea:valid:not(:placeholder-shown) {
  border-color: rgba(0, 255, 136, 0.4);
}

select:invalid {
  color: #94a3b8;
}

/* ============================================================
   IMAGENS — comportamento padrão
============================================================ */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

img[loading="lazy"] {
  background: linear-gradient(110deg, #163954 8%, #1e4d6b 18%, #163954 33%);
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
}

img[loading="lazy"].loaded {
  animation: none;
  background: none;
}

@keyframes shimmer {
  to { background-position-x: -200%; }
}

/* ============================================================
   DROPDOWN DESKTOP — animação suave
============================================================ */
.group:hover > div[class*="invisible"] {
  transform: translateY(0);
}

div[class*="invisible"] {
  transform: translateY(-10px);
}

/* ============================================================
   DETAILS / SUMMARY — Mobile menu
============================================================ */
details summary { user-select: none; }
details summary::-webkit-details-marker { display: none; }
details[open] summary span { transform: rotate(45deg); }
details summary span { transition: transform 0.2s ease; display: inline-block; }

/* ============================================================
   FOCUS VISIBLE — acessibilidade
============================================================ */
*:focus-visible {
  outline: 2px solid #00FF88;
  outline-offset: 2px;
  border-radius: 4px;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid #00FF88;
  outline-offset: 2px;
}

/* ============================================================
   PRINT STYLES
============================================================ */
@media print {
  header, footer, .no-print { display: none !important; }
  body { color: #000; background: #fff; }
  a { text-decoration: underline; }
  img { max-width: 100% !important; }
}

/* ============================================================
   REDUCED MOTION — respeita preferência do usuário
============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   RESPONSIVO — ajustes finos
============================================================ */
@media (max-width: 640px) {
  h1 { font-size: clamp(1.75rem, 8vw, 2.5rem); }
  h2 { font-size: clamp(1.5rem, 6vw, 2rem); }
}

/* Container limit em telas ultra-wide */
@media (min-width: 1920px) {
  .max-w-7xl { max-width: 1400px; }
}

/* ============================================================
   LOADER (caso precise)
============================================================ */
.loader {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(64, 179, 221, 0.2);
  border-top-color: #00FF88;
  border-radius: 50%;
  animation: spin-slow 0.8s linear infinite;
}

/* ============================================================
   UTILITÁRIOS EXTRAS
============================================================ */
.glass {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.glass-light {
  background: rgba(250, 251, 251, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.text-shadow-lg {
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.shadow-neon {
  box-shadow: 0 0 30px rgba(0, 255, 136, 0.3);
}

.shadow-primary {
  box-shadow: 0 0 30px rgba(64, 179, 221, 0.3);
}