/**
 * Theme Name:     Galzer
 * Author:         Marcos Tolentino
 * Template:       hello-elementor
 * Text Domain:    galzer
 * Description:    Tema filho para o site da Galzer, desenvolvido por Marcos Tolentino.
 * Theme URI:      https://galzer.com.br
 * Author URI:     https://galzer.com.br
 * Version:        1.6
 * Tags:           Galzer
 * Requires at least: 5.9
 */

/* =============================================
   1 - RESET E CONFIGURAÇÕES GERAIS
   ============================================= */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Configurações para Lenis Scroll Suave */
html.lenis {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

/* =============================================
   2 - BG HERO ANIMADO
   ============================================= */
@property --g1-1-x-position {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 20%;
}

@property --g1-1-y-position {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 80%;
}

@property --g1-2-x-position {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 80%;
}

@property --g1-2-y-position {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 20%;
}

.bg-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      50% 50% at var(--g1-1-x-position) var(--g1-1-y-position),
      rgba(199, 34, 40, 0.6) 0%,
      transparent 100%
    ),
    radial-gradient(
      25% 25% at var(--g1-2-x-position) var(--g1-2-y-position),
      rgba(199, 34, 40, 0.3) 0%,
      transparent 100%
    ),
    #000000; /*BG COR*/
  animation: g-anim 20s ease-in-out infinite;
}

@keyframes g-anim {
  0%, 100% {
    --g1-1-x-position: 20%;
    --g1-1-y-position: 80%;
    --g1-2-x-position: 80%;
    --g1-2-y-position: 20%;
  }
  25% {
    --g1-1-x-position: 15%;
    --g1-1-y-position: 15%;
    --g1-2-x-position: 85%;
    --g1-2-y-position: 80%;
  }
  50% {
    --g1-1-x-position: 80%;
    --g1-1-y-position: 15%;
    --g1-2-x-position: 15%;
    --g1-2-y-position: 85%;
  }
  75% {
    --g1-1-x-position: 50%;
    --g1-1-y-position: 90%;
    --g1-2-x-position: 60%;
    --g1-2-y-position: 10%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bg-hero {
    animation: none;
  }
}

/* =============================================
   3 - ANIMAÇÕES DE ENTRADA OTIMIZADAS
   ============================================= */
.esquerda {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(0px) translateX(-200px) scale(1) rotate(0deg);
  transition: all 1.2s ease;
}

.direita {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(0px) translateX(200px) scale(1) rotate(-0deg);
  transition: all 1.2s ease;
}

.cima {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(200px) translateX(0px) scale(1) rotate(0deg);
  transition: all 1.2s ease;
}

.baixo {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(-200px) translateX(0px) scale(1) rotate(0deg);
  transition: all 1.2s ease;
}

.zoom-in {
  opacity: 0;
  filter: blur(18px);
  transform: translateY(0px) translateX(0px) scale(0) rotate(0deg);
  transition: all 1.2s ease;
}

.zoom-out {
  opacity: 0;
  filter: blur(18px);
  transform: translateY(0px) translateX(0px) scale(2) rotate(0deg);
  transition: all 1.2s ease;
}

/* EXIBIR O CONTEÚDO */
.exibir {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0px) translateX(0px) scale(1) rotate(0deg);
  transition: all 1.2s ease;
}

/* EXIBIR ELEMENTOS NO EDITOR (Elementor) */
.elementor-editor-active .esquerda,
.elementor-editor-active .direita,
.elementor-editor-active .cima,
.elementor-editor-active .baixo,
.elementor-editor-active .zoom-in,
.elementor-editor-active .zoom-out {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0px) translateX(0px) scale(1) rotate(0deg);
  transition: all 1.2s ease;
}

/* =============================================
   4 - CLASSES DE DELAY
   ============================================= */
.delay-1 { transition-delay: 0.2s !important; }
.delay-2 { transition-delay: 0.5s !important; }
.delay-3 { transition-delay: 1.0s !important; }
.delay-4 { transition-delay: 1.5s !important; }

@media (prefers-reduced-motion: reduce) {
  .delay-1,
  .delay-2,
  .delay-3,
  .delay-4 {
    transition-delay: 0s !important;
  }
}

/* =============================================
   5 - CLASSES DE SOMBRA COM HOVER
   ============================================= */
.sombra-1 {
  box-shadow: -16px -16px 24px rgba(255, 255, 255, 0.05), 
              24px 24px 40px rgba(0, 0, 0, 1);    
  border-radius: 50px;
  transition: all 0.3s ease;
}

.sombra-2 {
  box-shadow: inset -10px -10px 14px rgba(255, 255, 255, 0.05), 
              inset 14px 14px 25px rgba(0, 0, 0, 1);    
  border-radius: 50px;
  transition: all 0.3s ease;
}

.sombra-3 {
  box-shadow: -16px -16px 24px rgba(255, 255, 255, 0.05), 
              24px 24px 40px rgba(0, 0, 0, 1);    
  border-radius: 50px;
  transition: all 0.3s ease;
}

.sombra-4 {
  box-shadow: inset -10px -10px 14px rgba(255, 255, 255, 0.05), 
              inset 14px 14px 25px rgba(0, 0, 0, 1);    
  border-radius: 50px;
  transition: all 0.3s ease;
}

/* Hover effects */
.sombra-3:hover {
  box-shadow: inset -10px -10px 14px rgba(255, 255, 255, 0.05), 
              inset 14px 14px 25px rgba(0, 0, 0, 1);    
}

.sombra-4:hover {
  box-shadow: -16px -16px 24px rgba(255, 255, 255, 0.05), 
              24px 24px 40px rgba(0, 0, 0, 1);    
}

/* Versões responsivas para mobile */
@media (max-width: 768px) {
  .sombra-1,
  .sombra-3 {
    box-shadow: -8px -8px 12px rgba(255, 255, 255, 0.05), 
                12px 12px 20px rgba(0, 0, 0, 1);    
    border-radius: 25px;
  }
  
  .sombra-2,
  .sombra-4 {
    box-shadow: inset -5px -5px 7px rgba(255, 255, 255, 0.05), 
                inset 7px 7px 12px rgba(0, 0, 0, 1);    
    border-radius: 25px;
  }
  
  /* Hover mobile */
  .sombra-3:hover {
    box-shadow: inset -5px -5px 7px rgba(255, 255, 255, 0.05), 
                inset 7px 7px 12px rgba(0, 0, 0, 1);    
  }
  
  .sombra-4:hover {
    box-shadow: -8px -8px 12px rgba(255, 255, 255, 0.05), 
                12px 12px 20px rgba(0, 0, 0, 1);    
  }
}
/* =============================================
   6 - ANIMAÇÃO DE LETREIRO (MARQUEE)
   ============================================= */
.marquee-container {
  display: flex;
  flex-direction: column;
  gap: 25px;
  width: 100%;
  overflow: hidden;
  padding: 30px 0;
  background: transparent;
  position: relative;
}

.marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.marquee-content {
  display: flex;
  width: fit-content;
  will-change: transform;
  align-items: center;
}

/* Animações MAIS LENTAS */
.scroll-left {
  animation: scrollLeft 80s linear infinite; /* antes: 40s */
}

.scroll-right {
  animation: scrollRight 80s linear infinite; /* antes: 40s */
}

.scroll-left-fast {
  animation: scrollLeft 40s linear infinite; /* antes: 20s */
}

.scroll-right-fast {
  animation: scrollRight 40s linear infinite; /* antes: 20s */
}

.scroll-left-slow {
  animation: scrollLeft 120s linear infinite; /* antes: 60s */
}

.scroll-right-slow {
  animation: scrollRight 120s linear infinite; /* antes: 60s */
}

@keyframes scrollLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes scrollRight {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* Estilo dos itens (Glassmorphism) */
.marquee-item {
  flex-shrink: 0;
  padding: 16px 32px;
  margin: 0 8px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  text-align: center;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 50px;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

/* Efeito hover opcional */
.marquee-item:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Variantes de cores */
.marquee-item.primary {
  background: rgba(199, 34, 40, 0.15);
  color: #ff6b6b;
}

.marquee-item.secondary {
  background: rgba(0, 106, 255, 0.15);
  color: #6babff;
}

.marquee-item.accent {
  background: rgba(0, 255, 153, 0.15);
  color: #00ff99;
}

/* Versão mobile */
@media (max-width: 768px) {
  .marquee-container {
    gap: 20px;
    padding: 20px 0;
  }
  
  .marquee-item {
    padding: 14px 24px;
    margin: 0 6px;
    font-size: 14px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  
  /* Também mais lentas no mobile */
  .scroll-left,
  .scroll-right {
    animation-duration: 50s; /* antes: 25s */
  }
  
  .scroll-left-fast,
  .scroll-right-fast {
    animation-duration: 30s; /* antes: 15s */
  }
  
  .scroll-left-slow,
  .scroll-right-slow {
    animation-duration: 70s; /* antes: 35s */
  }
}

/* Pausa no hover (opcional) */
.marquee-container.pausable:hover .marquee-content {
  animation-play-state: paused;
}

/* Acessibilidade */
@media (prefers-reduced-motion: reduce) {
  .scroll-left,
  .scroll-right,
  .scroll-left-fast,
  .scroll-right-fast,
  .scroll-left-slow,
  .scroll-right-slow {
    animation: none;
  }
  
  .marquee-content {
    justify-content: center;
    transform: none !important;
  }
}

/* =============================================
   7 - BORDAS ANIMADAS
   ============================================= */
.borda-1{
    overflow: hidden;
    border-radius: 50px;
    padding: 0;
}

.borda-1 .elementor-widget{
    position: relative;
    z-index: 9;
}

.borda-1 .e-con-inner{
    transition: 0.5s;
    background: transparent !important;
    padding: 32px;
    position: relative;
    z-index: 3;
}

/*cor da borda*/
.borda-1 .e-con-inner::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #FF2B3225; /*altere a cor aqui*/
  z-index: 1;
  transition: opacity 0.3s linear;
  opacity: 1;
  border-radius: 50px;
}

/*cor de fundo - SOLUÇÃO COM BOX-SHADOW*/
.borda-1 .e-con-inner::before {
  position: absolute;
  content: "";
  top: 1px; /* igual à espessura da borda */
  left: 1px; /* igual à espessura da borda */
  right: 1px; /* igual à espessura da borda */
  bottom: 1px; /* igual à espessura da borda */
  background: #161616; /*altere a cor aqui*/
  z-index: 3;
  transition: opacity 0.2s linear;
  opacity: 1;
  border-radius: 49px; /* 50px - 1px para compensar o inset */
  transition: 0.5s;
}

/*cor do brilho*/
.borda-1::before {
  position: absolute;
  content: "";
  top: -200%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #c82227; /*altere a cor aqui*/
  z-index: 2;
  transition: opacity 0.2s linear;
  opacity: 1;
  width: 200px;
  height: 500%;
  filter: blur(20px);
  border-radius: 8px;
  animation: rodar-normal 5s infinite linear;
  transform-origin: center bottom;
}

/*borda-2*/
.borda-2{
    overflow: hidden;
    border-radius: 50px;
    padding: 0;
}

.borda-2 .elementor-widget{
    position: relative;
    z-index: 9;
}

.borda-2 .e-con-inner{
    transition: 0.5s;
    background: transparent !important;
    padding: 32px;
    position: relative;
    z-index: 3;
}

/*cor da borda*/
.borda-2 .e-con-inner::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #FF2B3225; /*altere a cor aqui*/
  z-index: 1;
  transition: opacity 0.3s linear;
  opacity: 1;
  border-radius: 50px;
}

/*cor de fundo - SOLUÇÃO COM BOX-SHADOW*/
.borda-2 .e-con-inner::before {
  position: absolute;
  content: "";
  top: 1px; /* igual à espessura da borda */
  left: 1px; /* igual à espessura da borda */
  right: 1px; /* igual à espessura da borda */
  bottom: 1px; /* igual à espessura da borda */
  background: #161616; /*altere a cor aqui*/
  z-index: 3;
  transition: opacity 0.2s linear;
  opacity: 1;
  border-radius: 49px; /* 50px - 1px para compensar o inset */
  transition: 0.5s;
}

/*cor do brilho - borda-2*/
.borda-2::before {
  position: absolute;
  content: "";
  top: -200%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #c82227; /*altere a cor aqui*/
  z-index: 2;
  transition: opacity 0.2s linear;
  opacity: 1;
  width: 200px;
  height: 500%;
  filter: blur(20px);
  border-radius: 8px;
  animation: rodar-inverso 5s infinite linear;
  transform-origin: center bottom;
}

/*animação do brilho - sentido normal*/
@keyframes rodar-normal{
    0%{
        transform: translate(-50%, -50%) rotate(0);
    }
    100%{
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/*animação do brilho - sentido inverso*/
@keyframes rodar-inverso{
    0%{
        transform: translate(-50%, -50%) rotate(0);
    }
    100%{
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}
/* =============================================
   8 - 
   ============================================= */