/* ============================================================
   CORE bank — Design Tokens
   Paleta oficial: Navy #0A2540 + Ciano #00D4FF
   ============================================================ */

:root {
  /* Marca — Navy primário e variações */
  --navy: #0a2540;
  --navy-deep: #061a2e;
  --navy-mid: #11365c;
  --navy-soft: #1c4670;

  /* Marca — Ciano de acento */
  --cyan: #00d4ff;
  --cyan-soft: #66e5ff;
  --cyan-deep: #0099bf;
  --cyan-accessible: #006b85;

  /* Aliases legados (compatibilidade com CSS antigo) */
  --accent-blue: var(--cyan-deep);
  --accent-green: var(--cyan-soft);
  --accent-gold: var(--cyan);
  --accent-gold-dark: var(--cyan-deep);
  --accent-highlight: var(--cyan);

  /* Superfícies — light */
  --white-color: #ffffff;
  --white-background: #ffffff;
  --surface: #f4f8fc;
  --surface-muted: #f4f8fc;
  --surface-alt: #e9f1f9;
  --ink: #0f172a;
  --muted: #5b6b80;
  --paragraph-color: #5b6b80;

  /* Texto principal */
  --text-primary: var(--navy);

  /* Marca — CTAs e destaques */
  --primary-color: var(--cyan);
  --primary-text: var(--cyan-deep);
  --btn-color: var(--cyan);
  --btn-hover: var(--cyan-deep);
  --btn-text-on-primary: var(--navy);

  /* Hero / slideshow — overlay navy com halo ciano */
  --background-color: var(--navy);
  --background-linear-color: linear-gradient(
    115deg,
    rgba(6, 26, 46, 0.95) 0%,
    rgba(10, 37, 64, 0.86) 48%,
    rgba(0, 212, 255, 0.32) 100%
  );
  --background-overlay: linear-gradient(
    120deg,
    rgba(6, 26, 46, 0.9) 0%,
    rgba(0, 212, 255, 0.25) 55%,
    transparent 100%
  );

  /* Gradient-mesh para hero/banners (radiais sobrepostos) */
  --gradient-mesh:
    radial-gradient(60% 50% at 20% 20%, rgba(0, 212, 255, 0.28) 0%, transparent 60%),
    radial-gradient(50% 60% at 80% 0%, rgba(102, 229, 255, 0.18) 0%, transparent 60%),
    radial-gradient(70% 80% at 70% 100%, rgba(17, 54, 92, 0.55) 0%, transparent 70%),
    linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 55%, var(--navy-mid) 100%);

  /* Seções */
  --background-gallery: linear-gradient(
    160deg,
    var(--navy-deep) 0%,
    var(--navy) 50%,
    var(--navy-mid) 100%
  );
  --background-contact: linear-gradient(
    180deg,
    var(--navy-deep) 0%,
    #03101d 100%
  );
  --background-second: var(--surface);

  /* Gradientes de acento (ícones, underlines, separadores) */
  --gradient-brand: linear-gradient(
    135deg,
    var(--navy) 0%,
    var(--navy-mid) 50%,
    var(--cyan) 130%
  );
  --gradient-brand-soft: linear-gradient(
    90deg,
    rgba(0, 212, 255, 0.16) 0%,
    rgba(102, 229, 255, 0.08) 100%
  );
  --gradient-cyan: linear-gradient(135deg, var(--cyan) 0%, var(--cyan-soft) 100%);

  /* Navegação */
  --menu-header-color: rgba(255, 255, 255, 0.98);
  --menu-header-text: var(--navy);

  /* Elevação e forma */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 10px rgba(10, 37, 64, 0.08);
  --shadow-md: 0 10px 32px rgba(10, 37, 64, 0.12);
  --shadow-lg: 0 24px 56px rgba(10, 37, 64, 0.16);
  --shadow-glow-gold: 0 12px 32px -10px rgba(0, 212, 255, 0.55);
  --shadow-glow-cyan: 0 12px 32px -10px rgba(0, 212, 255, 0.55);
  --shadow-glow-cyan-strong: 0 18px 48px -12px rgba(0, 212, 255, 0.7);
  --shadow-inner-vignette: inset 0 0 120px rgba(6, 26, 46, 0.45);

  --border-hairline: 1px solid rgba(10, 37, 64, 0.08);
  --border-accent-soft: 1px solid rgba(0, 212, 255, 0.22);
  --border-cyan: 1px solid rgba(0, 212, 255, 0.4);

  --section-py: clamp(3.5rem, 6vw, 6rem);

  --transition-smooth: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Animações — curvas e durações unificadas */
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-nav: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-hero: cubic-bezier(0.2, 0.85, 0.35, 1);
  --dur-reveal: 0.88s;
  --dur-hero: 0.92s;
  --dur-nav: 1s;

  /* Topbar */
  --nav-surface: rgba(255, 255, 255, 0.85);
  --nav-border: rgba(10, 37, 64, 0.08);
  --nav-link: rgba(10, 37, 64, 0.78);
  --nav-link-hover-bg: rgba(0, 212, 255, 0.1);
  --nav-link-hover-text: var(--navy);
  --nav-shadow: 0 6px 28px rgba(10, 37, 64, 0.1);
}

/* Tema escuro — superfícies escuras + acentos ciano */
html[data-theme="dark"] {
  color-scheme: dark;
}

[data-theme="dark"] {
  --text-primary: #e9f1f9;
  --paragraph-color: #aabfd2;
  --ink: #e9f1f9;
  --muted: #8ea3b8;

  --white-background: #0f1d2e;
  --surface: #0a1623;
  --surface-muted: #0a1623;
  --surface-alt: #11253b;

  --menu-header-text: #e9f1f9;

  --background-contact: linear-gradient(
    180deg,
    #03101d 0%,
    #020a14 100%
  );
  --background-second: var(--surface-alt);

  --border-hairline: 1px solid rgba(255, 255, 255, 0.08);
  --border-accent-soft: 1px solid rgba(0, 212, 255, 0.32);
  --border-cyan: 1px solid rgba(0, 212, 255, 0.5);

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 36px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 26px 64px rgba(0, 0, 0, 0.6);
  --shadow-glow-gold: 0 12px 32px -10px rgba(0, 212, 255, 0.45);
  --shadow-glow-cyan: 0 12px 32px -10px rgba(0, 212, 255, 0.45);
  --shadow-glow-cyan-strong: 0 18px 48px -10px rgba(0, 212, 255, 0.6);

  --gradient-brand-soft: linear-gradient(
    90deg,
    rgba(0, 212, 255, 0.22) 0%,
    rgba(102, 229, 255, 0.1) 100%
  );

  --nav-surface: rgba(10, 22, 35, 0.78);
  --nav-border: rgba(255, 255, 255, 0.08);
  --nav-link: rgba(233, 241, 249, 0.82);
  --nav-link-hover-bg: rgba(0, 212, 255, 0.14);
  --nav-link-hover-text: #ffffff;
  --nav-shadow: 0 6px 32px rgba(0, 0, 0, 0.55);

  /* No dark mode usamos o ciano também como texto de destaque */
  --primary-text: var(--cyan);
}

/* ============================================================
   Keyframes globais (reveals e microinterações)
   ============================================================ */
@keyframes revealUpFade {
  from {
    opacity: 0;
    transform: translate3d(0, 48px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes revealFadeUp {
  from {
    opacity: 0;
    transform: translate3d(0, 32px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes revealScaleIn {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes revealFromLeft {
  from {
    opacity: 0;
    transform: translate3d(-52px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes revealFromRight {
  from {
    opacity: 0;
    transform: translate3d(52px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes heroSlideInRight {
  from {
    opacity: 0;
    transform: translate3d(72px, 36px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes heroSlideInLeft {
  from {
    opacity: 0;
    transform: translate3d(-56px, 28px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes glowPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.5);
  }
  50% {
    box-shadow: 0 0 0 14px rgba(0, 212, 255, 0);
  }
}

@keyframes floatY {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -10px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}