/* ZalemIA Theme - Main Styles */

/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Variáveis CSS - Design System ZalemIA */
:root {
  /* ZalemIA Design System - Light (default) */
  --background: 156 20% 5%; /* #0A0F0D */
  --foreground: 0 0% 100%; /* #FFFFFF */

  --card: 160 7% 12%; /* #1C211F */
  --card-foreground: 0 0% 100%;

  --popover: 160 7% 12%;
  --popover-foreground: 0 0% 100%;

  --primary: 150 81% 52%; /* #20E885 */
  --primary-foreground: 156 30% 5%; /* dark text on green */

  --secondary: 160 7% 16%;
  --secondary-foreground: 0 0% 100%;

  --muted: 160 7% 16%;
  --muted-foreground: 0 0% 69%; /* #B0B0B0 */

  --accent: 150 81% 52%;
  --accent-foreground: 156 30% 5%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;

  --border: 160 8% 18%;
  --input: 160 8% 18%;
  --ring: 150 81% 52%;

  --radius: 1rem; /* 16px for cards/buttons */

  /* Brand tokens */
  --brand-whatsapp: 142 61% 49%; /* #25D366 */
  --brand-whatsapp-foreground: 0 0% 100%;

  /* Brand gradients */
  --brand-emerald: 168 100% 44%; /* #00E0B5 */
  --brand-cyan: 195 100% 50%;    /* #00BFFF */
  --gradient-brand: linear-gradient(90deg, hsl(var(--brand-emerald)), hsl(var(--primary)), hsl(var(--brand-cyan)));
  --gradient-accent: linear-gradient(180deg, hsl(168 100% 44%), hsl(195 100% 50%));

  /* Shadows */
  --shadow-elegant: 0 10px 30px -10px hsl(var(--primary) / 0.3);
  --shadow-glow: 0 0 40px hsl(var(--primary) / 0.35);
}

/* Base styles */
html {
  scroll-behavior: smooth;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  line-height: 1.6;
}

/* Utility classes */
.hover-scale {
  transition: transform 0.3s ease;
}
.hover-scale:hover {
  transform: scale(1.05);
}

.card-hover {
  transition: all 0.3s ease;
}
.card-hover:hover {
  transform: translateY(-8px);
}

.shadow-glow {
  box-shadow: var(--shadow-glow);
}

/* Gradient text utility */
.text-brand-gradient {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* CTA gradient background with animated hover */
.cta-gradient {
  background-image: linear-gradient(to right, #00E0B5, #20E885, #00BFFF);
  background-size: 200% auto;
  transition: background-position 0.5s ease;
}
.cta-gradient:hover {
  background-position: right center;
}

/* Animated gradient text */
.text-animated-gradient {
  background: linear-gradient(-45deg, #00E0B5, #20E885, #00BFFF, #00E0B5);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: animated-gradient 10s ease infinite;
}

/* Brand shimmer gradient text utility */
.text-brand-shimmer {
  background: linear-gradient(90deg, hsl(var(--brand-emerald)), hsl(var(--brand-cyan)));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: animated-gradient 5s ease infinite;
}

/* Brand drift gradient text utility (rightward) */
.text-brand-drift {
  background: linear-gradient(90deg, hsl(var(--brand-emerald)), hsl(var(--brand-cyan)));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradient-drift-right 10s linear infinite;
}

/* Brand breathing gradient text utility (color fade) */
.text-brand-breath {
  background-image: linear-gradient(90deg, hsl(var(--brand-emerald)), hsl(var(--brand-cyan)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradient-breathe 4.7s ease-in-out infinite alternate;
}

/* White shimmer gradient text utility */
.text-white-shimmer {
  background: linear-gradient(to right, #FFFFFF 0%, #FFFFFF 40%, #D8D8D8 50%, #FFFFFF 60%, #FFFFFF 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: white-shimmer 4s linear infinite;
}

/* Fade mask for marquee */
.fade-mask {
  mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}

/* Background gradient helper */
.bg-gradient-brand {
  background: var(--gradient-brand);
}

/* WhatsApp pulse animation - extremely slow and subtle */
.animate-pulse-slow {
  animation: pulse-slow 4s infinite ease-in-out;
}

/* Marquee animation for partners */
.animate-marquee-left {
  animation: marquee-left 30s linear infinite;
}

/* Uniform partner logos */
.partner-logo {
  height: 55px;
  max-height: 55px;
  width: auto;
  object-fit: contain;
  opacity: 0.85;
  display: block;
}

/* Magic burst animations for sparkle icons */
.animate-magic-burst-large {
  animation: magic-burst 0.5s ease-out forwards;
}

.animate-magic-burst-small {
  animation: magic-burst 0.5s ease-out 0.15s forwards;
}

/* Hero video gradient glow */
.hero-video-glow {
  position: relative;
}
.hero-video-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, hsl(var(--brand-emerald)), hsl(var(--brand-cyan)));
  filter: blur(50px);
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
  border-radius: inherit;
  pointer-events: none;
}
.hero-video-glow:hover::after {
  opacity: 1;
}

/* Robust video glow wrapper technique */
.video-glow-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}
.video-glow-effect {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, hsl(var(--brand-emerald)), hsl(var(--brand-cyan)));
  filter: blur(50px);
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}
.video-glow-wrapper:hover .video-glow-effect {
  opacity: 1;
}
.video-container {
  position: relative;
  z-index: 2;
}

/* Shimmer effect for pill badge */
.pill-shimmer {
  background: linear-gradient(90deg, #1C211F, #2A2F2D, #1C211F);
  background-size: 200% auto;
  animation: shimmer 5s linear infinite;
}

/* Video wrapper with gradient border on hover */
.video-wrapper {
  position: relative;
}
.video-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, hsl(var(--brand-emerald)), hsl(var(--brand-cyan)));
  border-radius: 16px;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}
.video-wrapper:hover::after {
  opacity: 1;
}

/* Floating animations */
.animate-float-slow {
  animation: float-slow 6s ease-in-out infinite;
}

.animate-float-delayed {
  animation: float-delayed 8s ease-in-out infinite 2s;
}

.animate-float-reverse {
  animation: float-reverse 7s ease-in-out infinite 1s;
}

/* Keyframes for animations */
@keyframes pulse-slow {
  0%, 100% { 
    box-shadow: 0 0 0 0 rgba(32, 232, 133, 0.4);
  }
  70% { 
    box-shadow: 0 0 0 15px rgba(32, 232, 133, 0);
  }
}

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

@keyframes animated-gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes gradient-drift-right {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

@keyframes gradient-breathe {
  0% {
    background-image: linear-gradient(90deg, hsl(var(--brand-emerald)), hsl(var(--brand-cyan)));
  }
  50% {
    background-image: linear-gradient(90deg, hsl(var(--brand-cyan)), hsl(var(--brand-emerald)));
  }
  100% {
    background-image: linear-gradient(90deg, hsl(var(--brand-emerald)), hsl(var(--brand-cyan)));
  }
}

@keyframes shimmer {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}

@keyframes white-shimmer {
  0% { background-position: -150% 0; }
  100% { background-position: 150% 0; }
}

@keyframes magic-burst {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-30deg);
  }
  80% {
    opacity: 1;
    transform: scale(1.1) rotate(10deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

@keyframes float-delayed {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(1deg); }
}

@keyframes float-reverse {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(8px) rotate(-1deg); }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .mobile-headline-adjust {
    font-size: 1.98rem !important;
    max-width: 625px !important;
  }
}

@media (max-width: 767px) {
  .results-section .results-title-block {
    text-align: center;
  }
  .results-section .results-arrow {
    transform: scale(0.7);
    margin-left: auto;
    margin-right: auto;
  }
}