/* ═══════════════════════════════════════════════════════
   BRIIN Marketing — Design System CSS
   Strategy in. Brand out.
   ═══════════════════════════════════════════════════════ */

/* ── Font Faces ── */
@font-face {
  font-family: 'JadynMaria';
  src: url('../fonts/JadynMaria.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── CSS Custom Properties ── */
:root {
  /* Primárias */
  --deep-black: #1A1A1A;
  --dark-teal: #033A40;
  --strategy: #035959;
  --brand: #027368;
  --accent: #018A80;
  --turquoise: #40E8D0;
  --gold: #B8956A;
  --off-white: #F2F4F3;

  /* Neutras */
  --charcoal: #2C2C2C;
  --gray-600: #4A4A4A;
  --gray-400: #8A8A8A;
  --gray-200: #E2E4E3;
  --gray-100: #F0F2F1;
  --white: #FFFFFF;
  --teal-pale: #E0F4F2;
  --teal-border: #A8D8D2;

  /* Semânticas */
  --error: #C44040;
  --warning: #B8956A;
  --success: #018A80;

  /* Gradientes */
  --gradient-spectrum: linear-gradient(90deg, #1A1A1A, #033A40, #035959, #027368, #018A80, #40E8D0);
  --gradient-teal-flow: linear-gradient(145deg, #033A40, #018A80);
  --gradient-turquoise-glow: linear-gradient(145deg, #027368, #40E8D0);
  --gradient-gold: linear-gradient(145deg, #B8956A, #D4B896);
  --gradient-dark-depth: linear-gradient(145deg, #1A1A1A, #033A40);

  /* Sombras */
  --shadow-card: 0 4px 20px rgba(0,0,0,0.07);
  --shadow-card-hover: 0 8px 30px rgba(1,138,128,0.08);
  --shadow-hero: 0 16px 50px rgba(3,58,64,0.14);
  --shadow-elevated: 0 20px 60px rgba(0,0,0,0.15);

  /* Tipografia */
  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Inter', sans-serif;
  --font-script: 'JadynMaria', cursive;

  /* Easing */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ── Global Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--off-white);
  line-height: 1.6;
  overflow-x: hidden;
}

/* ── Typography Utilities ── */
.font-display { font-family: var(--font-display); }
.font-body { font-family: var(--font-body); }
.font-script { font-family: var(--font-script); }

/* ── Lenis Smooth Scroll ── */
html.lenis, html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}

/* ── Custom Cursor ── */
.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  background: var(--turquoise);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: normal;
  opacity: 0;
  transition: opacity 0.3s;
}
.cursor-outline {
  position: fixed;
  top: 0; left: 0;
  width: 40px; height: 40px;
  border: 1px solid var(--turquoise);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.3s;
}
.cursor-visible .cursor-dot { opacity: 1; }
.cursor-visible .cursor-outline { opacity: 0.4; }
.cursor-outline.hovering {
  background: var(--turquoise);
}

/* ── GSAP Animation States ── */
[data-gsap] {
  opacity: 0;
  will-change: transform, opacity;
}
[data-gsap="fade-up"] { transform: translateY(60px); }
[data-gsap="fade-up-slow"] { transform: translateY(80px); }
[data-gsap="fade-left"] { transform: translateX(-60px); }
[data-gsap="fade-right"] { transform: translateX(60px); }
[data-gsap="scale-in"] { transform: scale(0.88); }
[data-gsap="blur-in"] { filter: blur(12px); transform: translateY(30px); }
[data-gsap="char-reveal"] { overflow: hidden; }
[data-gsap="line-reveal"] { overflow: hidden; clip-path: inset(0 0 100% 0); }

/* ── Gradient Bar Shimmer ── */
.gradient-bar {
  height: 4px;
  background: var(--gradient-spectrum);
  background-size: 200% 100%;
  animation: shimmer 4s ease-in-out infinite;
}
@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ── Magnetic Button ── */
.btn-magnetic {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s var(--ease-out-expo);
}
.btn-magnetic .btn-text {
  position: relative;
  z-index: 1;
  transition: transform 0.4s var(--ease-out-expo);
}
.btn-magnetic .btn-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform: scale(0);
  transition: transform 0.5s var(--ease-out-expo);
}
.btn-magnetic:hover .btn-fill {
  transform: scale(1);
}

/* ── Text Reveal Masks ── */
.text-reveal-line {
  overflow: hidden;
  display: block;
}
.text-reveal-line > span {
  display: inline-block;
  transform: translateY(110%);
}

/* ── Parallax Layers ── */
.parallax-container { position: relative; overflow: hidden; }
.parallax-bg { position: absolute; inset: -20% 0; will-change: transform; }
.parallax-float { will-change: transform; }

/* ── Section Transitions ── */
.section-dark { background: var(--dark-teal); color: var(--white); }
.section-light { background: var(--white); color: var(--charcoal); }
.section-alt { background: var(--off-white); color: var(--charcoal); }
.section-black { background: var(--deep-black); color: var(--white); }

/* ── Card 3D Tilt ── */
.card-3d {
  transform-style: preserve-3d;
  transition: transform 0.6s var(--ease-out-expo), box-shadow 0.6s var(--ease-out-expo);
}
.card-3d:hover {
  box-shadow: var(--shadow-card-hover);
}
.card-3d .card-content {
  transform: translateZ(30px);
  transition: transform 0.6s var(--ease-out-expo);
}

/* ── Number Counter ── */
.counter { font-variant-numeric: tabular-nums; }

/* ── Overline Label ── */
.overline {
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.45em;
  text-decoration-line: none !important;
}

/* ── Sub-brand Color Classes ── */
.brand-studio { --sub-color: #40E8D0; }
.brand-strategy { --sub-color: #035959; }
.brand-tech { --sub-color: #018A80; }
.brand-core { --sub-color: #033A40; }
.brand-insights { --sub-color: #B8956A; }

/* ── Noise Texture Overlay ── */
.noise-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
}

/* ── Selection ── */
::selection {
  background: var(--turquoise);
  color: var(--dark-teal);
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--deep-black); }
::-webkit-scrollbar-thumb { background: var(--strategy); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── Acessibilidade ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-gsap] { opacity: 1; transform: none; filter: none; }
  .cursor-dot, .cursor-outline { display: none; }
  html { scroll-behavior: auto; }
}

/* ── Print ── */
@media print {
  [data-gsap] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .cursor-dot, .cursor-outline, .gradient-bar { display: none; }
  body { background: white; color: black; }
}