/**
 * GSAP Animations Support CSS
 * Estados iniciais e estilos para animações GSAP
 */

/* ===============================================
   Estados Iniciais para Animações de Scroll
   IMPORTANTE: Ocultar elementos até JavaScript carregar
   Previne flash de conteúdo
   =============================================== */

/* Ocultar elementos ATÉ JavaScript estar pronto */
/* Elementos ficam invisíveis enquanto página carrega */
html.gsap-loading .hero .hero-title,
html.gsap-loading .hero .hero-subtitle,
html.gsap-loading .hero-title,
html.gsap-loading .hero-subtitle,
html.gsap-loading .article-card,
html.gsap-loading .gsap-fade-in,
html.gsap-loading .section-header,
html.gsap-loading .category-list,
html.gsap-loading .article-content,
html.gsap-loading .article-header,
html.gsap-loading .gsap-slide-up,
html.gsap-loading .gsap-scale,
html.gsap-loading .category-badge {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Fallback: Se JS não carregar em 3s, remover gsap-loading e mostrar tudo */
@keyframes remove-loading-class {
  to {
    /* Hack CSS para remover classe visualmente */
    opacity: 1 !important;
    visibility: visible !important;
  }
}

html.gsap-loading {
  animation: remove-loading-class 0.1s ease 3s forwards;
}

/* ===============================================
   Card Hover Effects
   =============================================== */

.article-card {
  transition: transform 0.3s ease;
  will-change: transform;
}

.article-card:hover {
  transform: translateY(-8px);
}

.article-card-image {
  transition: transform 0.5s ease;
  will-change: transform;
}

.article-card:hover .article-card-image {
  transform: scale(1.05);
}

/* Category Badge Hover */
.category-badge {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  will-change: transform, box-shadow;
}

.category-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.category-badge:hover::before {
  left: 100%;
}

.category-badge:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* ===============================================
   Page Transition Overlay
   =============================================== */

.page-transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-primary, #FF714B);
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-transition-overlay.active {
  visibility: visible;
  pointer-events: auto;
}

.page-transition-logo {
  width: 300px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-transition-logo img {
  width: 100%;
  height: auto;
  max-width: 300px;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.3)) 
          drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

/* Responsivo */
@media (max-width: 768px) {
  .page-transition-logo {
    width: 220px;
  }
  
  .page-transition-logo img {
    max-width: 220px;
  }
}

/* ===============================================
   Section Headers
   =============================================== */

/* Estados iniciais removidos - animações aplicadas via JS */

/* ===============================================
   Button Animations
   =============================================== */

.btn {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.btn:hover::after {
  width: 300px;
  height: 300px;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 113, 75, 0.4);
}

/* ===============================================
   Loading States
   =============================================== */

.gsap-loading .gsap-fade-in,
.gsap-loading .gsap-slide-up,
.gsap-loading .gsap-slide-left,
.gsap-loading .gsap-slide-right,
.gsap-loading .gsap-scale {
  opacity: 0 !important;
}

/* ===============================================
   Performance Optimizations
   =============================================== */

.gsap-animated {
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Remove animações em dispositivos com preferência por movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  .gsap-fade-in,
  .gsap-slide-up,
  .gsap-slide-left,
  .gsap-slide-right,
  .gsap-scale,
  .hero-title,
  .hero-subtitle,
  .section-header,
  .section-title,
  .section-subtitle {
    opacity: 1 !important;
    transform: none !important;
  }
  
  .article-card:hover,
  .category-badge:hover,
  .btn:hover {
    transform: none !important;
  }
}