/* =========================================================
   BASE — reset, body, tipografia, cursor signature
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body {
  position: relative;
  min-height: 100vh;
  transition: background var(--dur-slow) var(--ease-out), color var(--dur-slow) var(--ease-out);
}

/* Grain overlay */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  opacity: 0.025;
  z-index: var(--z-cursor);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  margin: 0;
  text-wrap: balance;
  letter-spacing: -0.015em;
}
p { margin: 0; text-wrap: pretty; color: var(--text-secondary); }
a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
button { font-family: inherit; cursor: pointer; }
img, video { max-width: 100%; display: block; }

::selection { background: var(--accent); color: var(--text-inverse); }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
@media (max-width: 768px) { .container { padding: 0 24px; } }

/* Reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slower) var(--ease-smooth),
              transform var(--dur-slower) var(--ease-smooth);
  will-change: opacity, transform;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .cursor-glow { display: none; }
}

/* Cursor signature */
.cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: var(--gradient-cursor);
  pointer-events: none;
  z-index: var(--z-cursor);
  filter: blur(40px);
  mix-blend-mode: screen;
  transform: translate(-50%, -50%);
  transition: opacity var(--dur-base) var(--ease-out);
  opacity: 0;
  will-change: transform;
}
.cursor-glow.active { opacity: 1; }

:root[data-theme="light"] .cursor-glow {
  mix-blend-mode: multiply;
  opacity: 0;
}
:root[data-theme="light"] .cursor-glow.active { opacity: 0.6; }

/* Blue trailing glow — focused beam */
.cursor-blue {
  position: fixed;
  top: 0; left: 0;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(120, 180, 255, 0.65) 0%,
    rgba(61, 139, 240, 0.35) 18%,
    rgba(3, 63, 136, 0.10) 45%,
    transparent 70%);
  pointer-events: none;
  z-index: var(--z-cursor);
  filter: blur(22px);
  transform: translate(-50%, -50%);
  transition: opacity var(--dur-base) var(--ease-out);
  opacity: 0;
  will-change: transform;
}
.cursor-blue.active { opacity: 0.85; }
:root[data-theme="light"] .cursor-blue {
  mix-blend-mode: multiply;
  background: radial-gradient(circle,
    rgba(3, 63, 136, 0.12) 0%,
    rgba(3, 63, 136, 0.06) 40%,
    transparent 75%);
}

@media (hover: none) { .cursor-glow, .cursor-blue { display: none; } }

/* ---------- Logo viva (substitui o backdrop 3D) ---------- */
.logo-live {
  position: fixed;
  top: 0;
  right: 0;
  width: 58vw;
  max-width: 880px;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
  display: grid;
  place-items: center;
  perspective: 1400px;
  transition: opacity var(--dur-base) var(--ease-out);
}
.logo-live img {
  width: clamp(360px, 44vw, 720px);
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  transform-style: preserve-3d;
  will-change: transform;
  filter:
    drop-shadow(0 0 4px  rgba(252, 220, 140, 0.95))
    drop-shadow(0 0 10px rgba(245, 200, 110, 0.70))
    drop-shadow(0 0 22px rgba(210, 160, 80,  0.45))
    drop-shadow(0 0 38px rgba(170, 120, 50,  0.25))
    drop-shadow(0 14px 32px rgba(0, 0, 0,    0.55));
  animation: logo-shine 5.5s ease-in-out infinite;
}
.logo-live__halo { display: none; }
@keyframes logo-shine {
  0%, 100% {
    filter:
      drop-shadow(0 0 4px  rgba(252, 220, 140, 0.85))
      drop-shadow(0 0 10px rgba(245, 200, 110, 0.60))
      drop-shadow(0 0 22px rgba(210, 160, 80,  0.40))
      drop-shadow(0 0 38px rgba(170, 120, 50,  0.20))
      drop-shadow(0 14px 32px rgba(0, 0, 0, 0.55));
  }
  50% {
    filter:
      drop-shadow(0 0 6px  rgba(255, 230, 160, 1))
      drop-shadow(0 0 16px rgba(252, 215, 130, 0.85))
      drop-shadow(0 0 32px rgba(220, 170, 90,  0.55))
      drop-shadow(0 0 52px rgba(180, 130, 50,  0.32))
      drop-shadow(0 14px 32px rgba(0, 0, 0, 0.55));
  }
}
:root[data-theme="light"] .logo-live img {
  filter:
    drop-shadow(0 0 14px rgba(180, 130, 50, 0.35))
    drop-shadow(0 8px 28px rgba(120, 80, 25, 0.28));
  animation: none;
}
:root[data-theme="light"] .logo-live__halo {
  background: radial-gradient(circle, rgba(200, 150, 70, 0.18) 0%, transparent 70%);
  animation: none;
}
/* Tablet: logo decorativa atrás do hero (mantém comportamento anterior) */
@media (min-width: 769px) and (max-width: 1080px) {
  .logo-live {
    position: absolute;
    width: 80%;
    max-width: none;
    height: 50vh;
    top: 80px;
    right: -10%;
    left: auto;
    opacity: 0.22 !important;
  }
  .logo-live img { width: clamp(220px, 60vw, 420px); }
}

/* MOBILE: balão flutuante fixo no canto inferior-direito */
@media (max-width: 768px) {
  .logo-live {
    position: fixed;
    top: auto;
    bottom: 18px;
    right: 14px;
    left: auto;
    width: auto;
    height: auto;
    max-width: none;
    perspective: 500px;
    z-index: 60;
    opacity: 1 !important;
    pointer-events: none;
    display: block;
  }
  .logo-live img {
    width: 64px !important;
    height: auto;
    animation: balloon-bob 3.4s ease-in-out infinite;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55));
    transform: none;
  }
  .logo-live__halo { display: none; }
}

/* ---------- Contour Switch (botão flutuante) ---------- */
.contour-switch {
  position: fixed;
  top: 96px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 8px 18px;
  background: rgba(10, 15, 28, 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.contour-switch__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-tertiary);
  margin-right: 4px;
}
.contour-switch__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.contour-switch__btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}
.contour-switch__btn.is-active {
  background: var(--text-primary);
  color: var(--text-inverse);
  border-color: var(--text-primary);
}
.contour-switch__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}

@media (max-width: 640px) {
  .contour-switch {
    top: auto;
    bottom: 90px;
    padding: 6px 8px 6px 14px;
  }
  .contour-switch__label { display: none; }
  .contour-switch__btn { padding: 6px 10px; font-size: 11px; }
}

/* ---------- Variantes de contorno do logo ---------- */
:root[data-contour="white"] .logo-live img {
  animation: logo-shine-white 5.5s ease-in-out infinite;
  filter:
    drop-shadow(0 0 4px  rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 10px rgba(245, 250, 255, 0.65))
    drop-shadow(0 0 22px rgba(220, 235, 250, 0.40))
    drop-shadow(0 0 38px rgba(180, 210, 240, 0.20))
    drop-shadow(0 14px 32px rgba(0, 0, 0, 0.55));
}
:root[data-contour="blue"] .logo-live img {
  animation: logo-shine-blue 5.5s ease-in-out infinite;
  filter:
    drop-shadow(0 0 4px  rgba(140, 200, 255, 0.95))
    drop-shadow(0 0 10px rgba(91, 160, 245, 0.65))
    drop-shadow(0 0 22px rgba(61, 139, 240, 0.42))
    drop-shadow(0 0 38px rgba(3, 63, 136, 0.25))
    drop-shadow(0 14px 32px rgba(0, 0, 0, 0.55));
}
:root[data-contour="purple"] .logo-live img {
  animation: logo-shine-purple 5.5s ease-in-out infinite;
  filter:
    drop-shadow(0 0 4px  rgba(225, 195, 255, 0.95))
    drop-shadow(0 0 10px rgba(183, 148, 246, 0.70))
    drop-shadow(0 0 22px rgba(140, 90, 220,  0.45))
    drop-shadow(0 0 38px rgba(80, 40, 150,   0.25))
    drop-shadow(0 14px 32px rgba(0, 0, 0, 0.55));
}
:root[data-contour="yellow"] .logo-live img {
  animation: logo-shine-yellow 5.5s ease-in-out infinite;
  filter:
    drop-shadow(0 0 4px  rgba(255, 255, 200, 0.95))
    drop-shadow(0 0 10px rgba(255, 230, 50,  0.70))
    drop-shadow(0 0 22px rgba(230, 200, 20,  0.45))
    drop-shadow(0 0 38px rgba(180, 150, 0,   0.25))
    drop-shadow(0 14px 32px rgba(0, 0, 0, 0.55));
}

@keyframes logo-shine-white {
  0%, 100% {
    filter:
      drop-shadow(0 0 4px  rgba(255, 255, 255, 0.95))
      drop-shadow(0 0 10px rgba(245, 250, 255, 0.65))
      drop-shadow(0 0 22px rgba(220, 235, 250, 0.40))
      drop-shadow(0 0 38px rgba(180, 210, 240, 0.20))
      drop-shadow(0 14px 32px rgba(0, 0, 0, 0.55));
  }
  50% {
    filter:
      drop-shadow(0 0 6px  rgba(255, 255, 255, 1))
      drop-shadow(0 0 16px rgba(250, 252, 255, 0.85))
      drop-shadow(0 0 32px rgba(225, 240, 255, 0.55))
      drop-shadow(0 0 52px rgba(190, 220, 250, 0.32))
      drop-shadow(0 14px 32px rgba(0, 0, 0, 0.55));
  }
}
@keyframes logo-shine-blue {
  0%, 100% {
    filter:
      drop-shadow(0 0 4px  rgba(140, 200, 255, 0.95))
      drop-shadow(0 0 10px rgba(91, 160, 245, 0.65))
      drop-shadow(0 0 22px rgba(61, 139, 240, 0.42))
      drop-shadow(0 0 38px rgba(3, 63, 136, 0.25))
      drop-shadow(0 14px 32px rgba(0, 0, 0, 0.55));
  }
  50% {
    filter:
      drop-shadow(0 0 6px  rgba(180, 220, 255, 1))
      drop-shadow(0 0 16px rgba(120, 180, 255, 0.85))
      drop-shadow(0 0 32px rgba(80, 150, 240, 0.55))
      drop-shadow(0 0 52px rgba(20, 80, 170, 0.35))
      drop-shadow(0 14px 32px rgba(0, 0, 0, 0.55));
  }
}
@keyframes logo-shine-purple {
  0%, 100% {
    filter:
      drop-shadow(0 0 4px  rgba(225, 195, 255, 0.90))
      drop-shadow(0 0 10px rgba(183, 148, 246, 0.65))
      drop-shadow(0 0 22px rgba(140, 90, 220,  0.42))
      drop-shadow(0 0 38px rgba(80, 40, 150,   0.22))
      drop-shadow(0 14px 32px rgba(0, 0, 0, 0.55));
  }
  50% {
    filter:
      drop-shadow(0 0 6px  rgba(240, 215, 255, 1))
      drop-shadow(0 0 16px rgba(200, 165, 255, 0.85))
      drop-shadow(0 0 32px rgba(160, 110, 240, 0.55))
      drop-shadow(0 0 52px rgba(100, 55, 180,  0.32))
      drop-shadow(0 14px 32px rgba(0, 0, 0, 0.55));
  }
}
@keyframes logo-shine-yellow {
  0%, 100% {
    filter:
      drop-shadow(0 0 4px  rgba(255, 255, 200, 0.90))
      drop-shadow(0 0 10px rgba(255, 230, 50,  0.65))
      drop-shadow(0 0 22px rgba(230, 200, 20,  0.42))
      drop-shadow(0 0 38px rgba(180, 150, 0,   0.22))
      drop-shadow(0 14px 32px rgba(0, 0, 0, 0.55));
  }
  50% {
    filter:
      drop-shadow(0 0 6px  rgba(255, 255, 220, 1))
      drop-shadow(0 0 16px rgba(255, 240, 90,  0.85))
      drop-shadow(0 0 32px rgba(245, 215, 30,  0.55))
      drop-shadow(0 0 52px rgba(200, 175, 0,   0.32))
      drop-shadow(0 14px 32px rgba(0, 0, 0, 0.55));
  }
}

@keyframes balloon-bob {
  0%   { transform: translate3d(0, 0,    0) rotate(-3deg) scale(1); }
  50%  { transform: translate3d(-3px, -8px, 0) rotate(3deg)  scale(1.05); }
  100% { transform: translate3d(0, 0,    0) rotate(-3deg) scale(1); }
}
@keyframes balloon-halo {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.95; transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-live img, .logo-live__halo { animation: none; }
}

/* Mantém conteúdo acima da logo */
.nav, .hero, .stats, .history, .mission, .pillars, .blog, .cta-final, .footer {
  position: relative;
  z-index: var(--z-content);
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }