/* ============================================================
   PROGEM — Premium Animations v1.1 (Fixed)
   ui-ux-pro-max | Dark Mode OLED | Trust & Authority
   Motion Tier 9 | Glassmorphism | Stagger Reveals
   ============================================================ */

/* ── 1. CSS VARIABLES ── */
:root {
  --progem-gold: #AF9100;
  --progem-gold-light: #D4AE00;
  --progem-gold-dim: rgba(175, 145, 0, 0.18);
  --progem-gold-glow: rgba(175, 145, 0, 0.35);
  --progem-bg: #0B0F19;
  --progem-surface: rgba(255, 255, 255, 0.04);
  --progem-border: rgba(175, 145, 0, 0.18);
  --progem-border-hover: rgba(175, 145, 0, 0.5);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── 2. KEYFRAMES ── */
@keyframes progemFadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes progemFadeInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes progemFadeInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-16px); }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes marqueeScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes iconPulse {
  0%, 100% { filter: drop-shadow(0 0 0px var(--progem-gold)); }
  50%       { filter: drop-shadow(0 0 10px var(--progem-gold)); }
}
@keyframes revealUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes revealLeft {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes revealScale {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── 3. SCROLL REVEAL ENGINE (JS-controlled) ──
   IMPORTANTE: opacity parte de 1, JS adiciona a classe reveal-hidden para ocultar
   Isso garante que sem JS o conteudo permanece visivel
*/
.progem-hidden {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.75s var(--ease-out-expo), transform 0.75s var(--ease-out-expo);
  will-change: opacity, transform;
}
.progem-hidden.reveal-left  { transform: translateX(-32px); }
.progem-hidden.reveal-right { transform: translateX(32px); }
.progem-hidden.reveal-scale { transform: scale(0.92); }
.progem-hidden.is-visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* Stagger delays */
.stagger-1 { transition-delay: 0.05s; }
.stagger-2 { transition-delay: 0.15s; }
.stagger-3 { transition-delay: 0.25s; }
.stagger-4 { transition-delay: 0.35s; }
.stagger-5 { transition-delay: 0.45s; }
.stagger-6 { transition-delay: 0.55s; }

/* ── 4. HERO SECTION ── */
.progem-hero-section {
  position: relative;
  overflow: hidden;
}

/* Orb 1 - top right */
.progem-hero-section::before {
  content: '';
  position: absolute;
  top: -5%;
  right: 0;
  width: 520px;
  height: 520px;
  background: radial-gradient(ellipse at center, rgba(175, 145, 0, 0.14) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: floatY 9s ease-in-out infinite;
}

/* Orb 2 - bottom left */
.progem-hero-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -8%;
  width: 380px;
  height: 380px;
  background: radial-gradient(ellipse at center, rgba(175, 145, 0, 0.08) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: floatY 13s ease-in-out infinite reverse;
}

/* Linha dourada na base do hero */
.progem-hero-section > .e-con-inner {
  position: relative;
  z-index: 1;
}

/* ── 5. GLASSMORPHISM NOS CARDS ── */
/* Solucoes: cards */
.progem-solutions-section > .e-con-inner > .e-con:last-child > .e-con,
.progem-solutions-section > .e-con > .e-con:last-child > .e-con {
  background: var(--progem-surface) !important;
  border: 1px solid var(--progem-border) !important;
  border-radius: 14px !important;
  position: relative;
  overflow: hidden;
  transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.35s var(--ease-out-quart) !important;
}

.progem-solutions-section > .e-con-inner > .e-con:last-child > .e-con::before,
.progem-solutions-section > .e-con > .e-con:last-child > .e-con::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(175,145,0,0.5), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.progem-solutions-section > .e-con-inner > .e-con:last-child > .e-con:hover,
.progem-solutions-section > .e-con > .e-con:last-child > .e-con:hover {
  border-color: var(--progem-border-hover) !important;
  box-shadow: 0 8px 40px rgba(175,145,0,0.13), 0 2px 12px rgba(0,0,0,0.4) !important;
  transform: translateY(-6px) !important;
}

.progem-solutions-section > .e-con-inner > .e-con:last-child > .e-con:hover::before,
.progem-solutions-section > .e-con > .e-con:last-child > .e-con:hover::before {
  opacity: 1;
}

/* Features: cards */
.progem-features-section > .e-con-inner > .e-con > .e-con,
.progem-features-section > .e-con > .e-con > .e-con {
  background: var(--progem-surface) !important;
  border: 1px solid var(--progem-border) !important;
  border-radius: 14px !important;
  position: relative;
  overflow: hidden;
  transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.35s var(--ease-out-quart) !important;
}

.progem-features-section > .e-con-inner > .e-con > .e-con:hover,
.progem-features-section > .e-con > .e-con > .e-con:hover {
  border-color: var(--progem-border-hover) !important;
  box-shadow: 0 8px 40px rgba(175,145,0,0.13), 0 2px 12px rgba(0,0,0,0.4) !important;
  transform: translateY(-6px) !important;
}

/* ── 6. CTA STRIP ANIMADO ── */
.progem-cta-strip {
  position: relative;
  overflow: hidden;
}

.progem-cta-strip::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--progem-gold), var(--progem-gold-light), var(--progem-gold), transparent);
  background-size: 200% auto;
  animation: shimmer 3s linear infinite;
}

.progem-cta-strip::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(175,145,0,0.3), transparent);
}

/* ── 7. CLIENTS MARQUEE ── */
.progem-clients-strip {
  overflow: hidden;
  position: relative;
}

.progem-clients-strip > .e-con-inner {
  overflow: hidden;
  position: relative;
}

.progem-clients-strip > .e-con-inner::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 80px;
  background: linear-gradient(to right, var(--progem-bg), transparent);
  z-index: 2;
  pointer-events: none;
}

.progem-clients-strip > .e-con-inner::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 80px;
  background: linear-gradient(to left, var(--progem-bg), transparent);
  z-index: 2;
  pointer-events: none;
}

.progem-marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 25s linear infinite;
  gap: 64px;
  align-items: center;
}

.progem-marquee-track:hover { animation-play-state: paused; }

.progem-marquee-item {
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.progem-marquee-item:hover { opacity: 1; }

/* ── 8. FEATURES ICONS GLOW ── */
.progem-features-section .elementor-widget-icon .elementor-icon {
  transition: filter 0.4s ease, transform 0.3s ease !important;
}

.progem-features-section .e-con:hover .elementor-widget-icon .elementor-icon {
  filter: drop-shadow(0 0 12px var(--progem-gold)) !important;
  transform: scale(1.15) !important;
  animation: iconPulse 2s ease-in-out infinite;
}

/* ── 9. SECTION DIVIDERS (linhas douradas entre secoes) ── */
.progem-solutions-section,
.progem-features-section,
.progem-cta-strip,
.progem-clients-strip {
  position: relative;
}

.progem-solutions-section::before,
.progem-features-section::before {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(175,145,0,0.25), transparent);
  z-index: 1;
  pointer-events: none;
}

/* ── 10. BUTTONS PREMIUM ── */
.elementor-widget-button .elementor-button {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s var(--ease-out-quart), box-shadow 0.3s ease !important;
}

.elementor-widget-button .elementor-button::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
  transition: left 0.5s ease;
  pointer-events: none;
}

.elementor-widget-button .elementor-button:hover::before { left: 100%; }
.elementor-widget-button .elementor-button:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(175,145,0,0.3) !important;
}

/* ── 11. HEADING SHIMMER DOURADO ── */
.progem-shimmer-text {
  background: linear-gradient(90deg, #AF9100 0%, #D4AE00 40%, #fff5cc 50%, #D4AE00 60%, #AF9100 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}

/* ── 12. CURSOR GLOW (desktop only) ── */
#progem-cursor-glow {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(175,145,0,0.07) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  transition: left 0.12s linear, top 0.12s linear;
}

/* ── 13. ACCESSIBILITY ── */
@media (prefers-reduced-motion: reduce) {
  .progem-hidden,
  .progem-marquee-track,
  .progem-hero-section::before,
  .progem-hero-section::after,
  .progem-cta-strip::before,
  #progem-cursor-glow {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}