/* ==========================================================================
   RESET & ESTRUTURA GLOBAL (main.css)
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  background-color: var(--bg-obsidian);
  color: var(--text-white);
  overflow-x: clip;
}

body {
  font-family: var(--font-sans);
  line-height: 1.6;
  background-color: var(--bg-obsidian);
  color: var(--text-white);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* Scrollbar Personalizado B&W Minimalista */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-obsidian);
}
::-webkit-scrollbar-thumb {
  background: #2a2a30;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #44444e;
}

/* Tipografia Fluida */
h1, h2, h3, h4, .font-serif {
  font-family: var(--font-serif);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(2.4rem, 5vw, 4.2rem);
}

h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
}

h3 {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
}

p {
  font-size: clamp(0.98rem, 1.2vw, 1.1rem);
  color: var(--text-muted-dark);
}

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

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Containers e Seções */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section-padding {
  padding: clamp(60px, 10vh, 120px) 0;
  position: relative;
}

/* Transições Suaves entre Seções (Claras e Escuras) */
.theme-dark {
  background-color: var(--bg-obsidian);
  color: var(--text-white);
}

.theme-dark p {
  color: var(--text-muted-dark);
}

.theme-charcoal {
  background-color: var(--bg-charcoal);
  color: var(--text-white);
}

.theme-charcoal p {
  color: var(--text-muted-dark);
}

.theme-light {
  background-color: var(--bg-editorial);
  color: var(--text-black);
}

.theme-light h1, .theme-light h2, .theme-light h3, .theme-light h4 {
  color: var(--text-black);
}

.theme-light p {
  color: var(--text-muted-light);
}

/* Animações Bidirecionais em Cascata (Slow Motion Premium Leve 1.6s) */
.reveal-init {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 1.6s var(--ease-premium), transform 1.6s var(--ease-premium);
  transition-delay: var(--cascade-delay, 0s);
}

.reveal-left {
  transform: translateX(-30px) translateY(8px);
}

.reveal-right {
  transform: translateX(30px) translateY(8px);
}

.reveal-up {
  transform: translateY(22px);
}

.reveal-fade {
  transform: scale(0.98);
}

.reveal-zoom-out {
  transform: scale(1.12);
}

.reveal-active {
  opacity: 1 !important;
  transform: translateX(0) translateY(0) scale(1) !important;
}

/* Delays escalonados em cascata fluida (passos de 0.2s) */
.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }
.delay-3 { transition-delay: 0.6s; }
.delay-4 { transition-delay: 0.8s; }
.delay-5 { transition-delay: 1.0s; }
.delay-6 { transition-delay: 1.2s; }
.delay-7 { transition-delay: 1.4s; }
.delay-8 { transition-delay: 1.6s; }
.delay-9 { transition-delay: 1.8s; }
.delay-10 { transition-delay: 2.0s; }

/* Acessibilidade */
:focus-visible {
  outline: 2px solid var(--accent-silver) !important;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-init {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}