/* ============================================================
   GLOBAL — D3 Design
   Variables · Reset · Base Typography
   ============================================================ */


/* ============================================================
   SATOSHI — self-hosting (preferred over CDN)
   Download from fontshare.com/fonts/satoshi → place in assets/fonts/Satoshi/
   When files are present: uncomment this block and remove the CDN <link> tags.
   Weights used: 400/500/600/700.
   ============================================================ */

/*
@font-face {
  font-family: 'Satoshi';
  src: url('../assets/fonts/Satoshi/Satoshi-Variable.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style:  normal;
  font-display: swap;
}
*/


/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {
  /* Colors — dark palette (hero, accents) */
  --c-black:      #0A0A0A;
  --c-white:      #F5F5F3;
  --c-white-pure: #FFFFFF;
  --c-gray-1:     #141414;
  --c-gray-2:     #222222;
  --c-gray-3:     #555555;
  --c-gray-4:     #888888;
  --c-gray-5:     #BBBBBB;

  /* Light theme — body + sections */
  --c-bg:         #F8F7F5;
  --c-text:       #111111;
  --c-text-muted: #666666;
  --c-border:     rgba(0, 0, 0, 0.08);

  /* Typography */
  --font-heading: 'Satoshi', sans-serif;
  --font-body:    'Inter Tight', sans-serif;

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Leading */
  --leading-tight:  1.05;
  --leading-normal: 1.6;

  /* Tracking */
  --tracking-tight: -0.02em;

  /* Semantic text sizes — aliases da escala fluida */
  --text-display: var(--fs-4xl);
  --text-h1:      var(--fs-3xl);
  --text-h2:      var(--fs-2xl);
  --text-h3:      var(--fs-xl);
  --text-body:    var(--fs-base);
  --text-small:   var(--fs-sm);

  /* Fluid type scale (clamp: mobile → desktop) */
  --fs-2xs:  clamp(0.625rem,  0.9vw,  0.75rem);
  --fs-xs:   clamp(0.75rem,   1.1vw,  0.875rem);
  --fs-sm:   clamp(0.875rem,  1.3vw,  1rem);
  --fs-base: clamp(1rem,      1.5vw,  1.125rem);
  --fs-lg:   clamp(1.125rem,  2vw,    1.5rem);
  --fs-xl:   clamp(1.5rem,    3vw,    2.25rem);
  --fs-2xl:  clamp(2rem,      4vw,    3.5rem);
  --fs-3xl:  clamp(2.8rem,    6vw,    5.5rem);
  --fs-4xl:  clamp(3.5rem,    8vw,    8rem);

  /* Fluid spacing */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* Layout */
  --container-max:     1440px;
  --container-pad:     clamp(1.5rem, 5vw, 5rem);
  --header-height:     80px;

  /* Easing — padrão do site */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);    /* power3.out  */
  --ease-inout: cubic-bezier(0.45, 0, 0.55, 1);   /* power2.inOut */
  --ease-snap:  cubic-bezier(0.19, 1, 0.22, 1);   /* expo.out    */

  /* Transitions utilitárias */
  --t-fast:   0.25s var(--ease-out);
  --t-base:   0.45s var(--ease-out);
  --t-slow:   0.7s  var(--ease-out);
}


/* ============================================================
   RESET
   ============================================================ */

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

html {
  font-size: 16px;
  /* scroll-behavior gerenciado pelo GSAP */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--c-text);
  background-color: var(--c-bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  color: inherit;
}


/* ============================================================
   ESTADO INICIAL PARA ANIMAÇÕES (js-ready)
   Remove-se quando JS não está disponível — elementos ficam visíveis
   ============================================================ */

.js-ready .header__logo-img,
.js-ready .header__nav-link,
.js-ready .header__cta,
.js-ready .header__menu-toggle,
.js-ready .hero__headline,
.js-ready .hero__subtext,
.js-ready .hero__description {
  opacity: 0;
}

/* Texto dentro dos masks: escondido via overflow hidden do pai + translateY via JS */


/* ============================================================
   BASE TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

p {
  line-height: var(--leading-normal);
}


/* ============================================================
   GRAIN TEXTURE
   Pseudo-elemento fixo sobre toda a página — dá textura ao fundo
   sem afetar interações (pointer-events: none)
   ============================================================ */

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}