/* ═══════════════════════════════════════════════════════════════
   GUZTEC - VIDEO OPTIMIZATION
   Otimizações para carregamento rápido do vídeo hero
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────── */
/* 1. POSTER IMAGE - APARECER INSTANTANEAMENTE */
/* ─────────────────────────────────────────────────────────────── */

.hero-banner-video {
  /* Garantir que o poster apareça imediatamente */
  background-color: #000;
  background-image: url('../images/hero-banner-industrial.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Enquanto o vídeo carrega, mostra o poster */
.hero-banner-video::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/hero-banner-industrial.jpg');
  background-size: cover;
  background-position: center;
  opacity: 1;
  transition: opacity 0.3s ease;
  z-index: 0;
  pointer-events: none;
}

/* Quando o vídeo começar a tocar, esconde o poster suavemente */
.hero-banner-video.playing::before {
  opacity: 0;
}

/* ─────────────────────────────────────────────────────────────── */
/* 2. HARDWARE ACCELERATION - PERFORMANCE */
/* ─────────────────────────────────────────────────────────────── */

.hero-banner-video {
  /* Força hardware acceleration para melhor performance */
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000;
  
  /* Otimizar rendering */
  will-change: transform, opacity;
}

/* ─────────────────────────────────────────────────────────────── */
/* 3. LOADING STATE - SMOOTH TRANSITION */
/* ─────────────────────────────────────────────────────────────── */

.hero-banner-industrial {
  /* Garantir que o container não pisque */
  background: #000;
}

/* Estado inicial do vídeo */
.hero-banner-video {
  opacity: 1;
  transition: opacity 0.5s ease-in;
}

/* Quando o vídeo está pronto para tocar */
.hero-banner-video[data-ready="true"] {
  opacity: 1;
}

/* ─────────────────────────────────────────────────────────────── */
/* 4. FALLBACK IMAGE OTIMIZADO */
/* ─────────────────────────────────────────────────────────────── */

.hero-banner-image {
  /* Imagem de fallback aparece instantaneamente */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -1;
}

/* ─────────────────────────────────────────────────────────────── */
/* 5. MOBILE OPTIMIZATION */
/* ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* No mobile, prioriza ainda mais o poster */
  .hero-banner-video {
    /* Força o poster a aparecer enquanto carrega */
    background-image: url('../images/hero-banner-industrial.jpg');
  }
  
  /* Reduz qualidade no mobile para carregar mais rápido */
  .hero-banner-video {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

/* ─────────────────────────────────────────────────────────────── */
/* 6. PRELOAD SPINNER (OPCIONAL) */
/* ─────────────────────────────────────────────────────────────── */

/* Loading indicator sutil */
.hero-banner-industrial::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 3px solid rgba(218, 165, 32, 0.3);
  border-top-color: #DAA520;
  border-radius: 50%;
  animation: video-spinner 0.8s linear infinite;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Mostra spinner só se demorar mais de 1 segundo */
.hero-banner-industrial.loading::after {
  opacity: 1;
}

@keyframes video-spinner {
  to { transform: rotate(360deg); }
}

/* Remove spinner quando vídeo começar */
.hero-banner-industrial.playing::after {
  opacity: 0;
}

/* ─────────────────────────────────────────────────────────────── */
/* 7. CRITICAL PERFORMANCE */
/* ─────────────────────────────────────────────────────────────── */

/* Prioriza o vídeo hero sobre outros recursos */
.hero-banner-video {
  /* Crítico: carrega primeiro */
  content-visibility: auto;
  contain: layout style paint;
}

/* Remove delays desnecessários */
* {
  -webkit-tap-highlight-color: transparent;
}

/* ═══════════════════════════════════════════════════════════════
   FIM DAS OTIMIZAÇÕES
   ═══════════════════════════════════════════════════════════════ */