/* ======================================== */
/* BMSistemas Landing Page - Custom Styles  */
/* ======================================== */

/* --- Scroll Suave Global --- */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Focus Estilo Acessivel --- */
:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 3px;
  border-radius: 8px;
}

/* --- Scrollbar Custom (webkit) --- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #F8FAFC; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #2563EB, #1D4ED8);
  border-radius: 10px;
  border: 2px solid #F8FAFC;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #1D4ED8, #1E40AF); }

/* --- Selection --- */
::selection { background: rgba(37, 99, 235, 0.2); color: #0F172A; }

/* ======================================== */
/* TEXT GRADIENTS                           */
/* ======================================== */
.text-gradient-blue {
  background-image: linear-gradient(135deg, #2563EB 0%, #3B82F6 50%, #60A5FA 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  position: relative;
}

.text-gradient-blue-light {
  background-image: linear-gradient(135deg, #60A5FA 0%, #93C5FD 50%, #BFDBFE 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ======================================== */
/* ANIMACAO FADE UP COM INTERSECTION OBSERVER */
/* ======================================== */
.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--delay, 0ms);
  will-change: transform, opacity;
}

.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ======================================== */
/* BOTAO BRILHO / SHINE EFFECT              */
/* ======================================== */
.btn-shine {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn-shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 100%
  );
  transform: translateX(-150%) skewX(-20deg);
  transition: transform 0.8s ease;
  pointer-events: none;
  z-index: 1;
}

.btn-shine:hover::after,
.btn-shine:focus-visible::after {
  animation: shine-sweep 1.8s ease-out forwards;
}

@keyframes shine-sweep {
  0%   { transform: translateX(-150%) skewX(-20deg); }
  100% { transform: translateX(250%) skewX(-20deg); }
}

/* ======================================== */
/* REDUCED MOTION - ACESSIBILIDADE          */
/* ======================================== */
@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;
  }

  .fade-up {
    opacity: 1 !important;
    transform: none !important;
  }

  .animate-float,
  .animate-floatDelay,
  .animate-pulseSoft {
    animation: none !important;
  }
}

/* ======================================== */
/* RESPONSIVE TWEAKS                        */
/* ======================================== */
@media (max-width: 640px) {
  /* Melhorar touch em mobile */
  a, button { -webkit-tap-highlight-color: transparent; }

  /* Ajustar tamanho do logo em mobile */
  .text-gradient-blue {
    background-image: linear-gradient(135deg, #2563EB 0%, #60A5FA 100%);
  }
}

/* ======================================== */
/* UTILITARIOS EXTRA DE PERFORMANCE         */
/* ======================================== */
img, svg {
  -webkit-user-drag: none;
  user-drag: none;
}

/* Previne layout shifts em imagens (caso adicionadas futuramente) */
img { display: block; max-width: 100%; height: auto; }

/* Glassmorphism suave para detalhes */
.glass-soft {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ======================================== */
/* EFEITO GLOW AZUL SUAVE EM MOCKUPS        */
/* ======================================== */
.glow-bg-blue {
  position: relative;
}

.glow-bg-blue::before {
  content: '';
  position: absolute;
  inset: -40px;
  background: radial-gradient(
    ellipse at center,
    rgba(37, 99, 235, 0.25) 0%,
    rgba(37, 99, 235, 0.08) 40%,
    transparent 70%
  );
  filter: blur(40px);
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

/* Counter animation number styling */
.counter {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ======================================== */
/* HERO MOCKUP REAL IMAGE (CROP + ZOOM)     */
/* Recorta apenas a area Notebook + Celular */
/* do banner completo fornecido.            */
/* ======================================== */
.hero-mockup-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #ffffff;
  isolation: isolate;
  padding: 0.5rem;
}

.hero-mockup-img {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
}

/* ======================================== */
/* BOTAO FLUTUANTE DE WHATSAPP              */
/* ======================================== */
.whatsapp-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 32px -8px rgba(37, 211, 102, 0.55), 0 6px 20px -6px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
  text-decoration: none;
}

.whatsapp-float:hover {
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 20px 50px -12px rgba(37, 211, 102, 0.65), 0 10px 30px -10px rgba(0, 0, 0, 0.2);
}

.whatsapp-float:focus-visible {
  outline: 3px solid #25D366;
  outline-offset: 4px;
}

.whatsapp-float-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.45);
  z-index: -1;
  animation: wa-pulse 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes wa-pulse {
  0% {
    transform: scale(1);
    opacity: 0.75;
  }
  70% {
    transform: scale(1.8);
    opacity: 0;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

.whatsapp-float-tooltip {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  background: #0F172A;
  color: #ffffff;
  padding: 10px 16px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  pointer-events: none;
  box-shadow: 0 10px 30px -12px rgba(15, 23, 42, 0.4);
}

.whatsapp-float-tooltip::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: #0F172A;
}

.whatsapp-float:hover .whatsapp-float-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(-2px);
}

@media (max-width: 640px) {
  .whatsapp-float {
    width: 58px;
    height: 58px;
    bottom: 20px;
    right: 20px;
  }

  .whatsapp-float-tooltip {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-float-pulse {
    animation: none;
    display: none;
  }

  .whatsapp-float {
    transition: none;
  }
}