/* =========================================================
   BASE — reset, tipografia editorial e reveals em clip-path
   ========================================================= */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  font-size: clamp(16px, 0.92rem + 0.22vw, 20px);
}

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-locked,
body.is-loading {
  overflow: hidden;
}

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

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

ul,
ol {
  list-style: none;
  padding: 0;
}

:focus-visible {
  outline: 1px solid var(--c-accent);
  outline-offset: 4px;
}

::selection {
  background: var(--c-gold);
  color: var(--c-dark);
}

::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--c-gold-deep);
}

/* ---------- Títulos: display serifada em caixa alta ---------- */

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

h1 {
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
}

h2 {
  font-size: var(--text-4xl);
  line-height: 1.02;
}

h3 {
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.14;
}

p {
  text-wrap: pretty;
}

/* Itálico do corpo é Times itálico — o tom editorial da referência. */
em {
  font-style: italic;
}

/* Caligrafia: usada com parcimônia, uma palavra por bloco. */
.script {
  font-family: var(--font-script);
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.5em;
  line-height: 0.8;
  color: var(--c-gold);
}

h1 .script,
h2 .script,
h3 .script {
  font-size: 1.35em;
  vertical-align: -0.06em;
}

strong {
  font-weight: 700;
  color: var(--c-text);
}

/* ---------- Layout ---------- */

.container {
  width: 100%;
  max-width: var(--w-container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container-narrow {
  width: 100%;
  max-width: var(--w-narrow);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--space-section);
}

.section--tight {
  padding-block: var(--space-section-sm);
}

.section--alt {
  background: var(--c-bg-alt);
}

.section--light {
  background: var(--c-cream);
}

.section--dark {
  background: var(--c-dark);
}

.section-head {
  max-width: 48rem;
  margin-bottom: var(--space-xl);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-intro {
  margin-top: var(--space-md);
  font-size: var(--text-lg);
  color: var(--c-text-soft);
  max-width: 46ch;
}

.section-head--center .section-intro {
  margin-inline: auto;
}

/* ---------- Micro-tipografia ---------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--space-md);
}

.eyebrow::before {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

.eyebrow--center::before {
  display: none;
}

.lead {
  font-size: var(--text-xl);
  line-height: 1.42;
  color: var(--c-text);
}

.accent {
  color: var(--c-accent);
}

.rule {
  height: 1px;
  background: var(--c-line);
  border: 0;
  margin-block: var(--space-lg);
}

.visually-hidden,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 200;
  padding: 0.6rem 1rem;
  background: var(--c-cream);
  color: var(--c-dark);
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease-out);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* ---------- Reveals: cortina em clip-path ---------- */

.reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal--left {
  transform: translate3d(-32px, 0, 0);
}
.reveal--right {
  transform: translate3d(32px, 0, 0);
}
.reveal--scale {
  transform: scale(0.97);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Cortina: o bloco é revelado de baixo para cima. */
.curtain {
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--dur-reveal) var(--ease-in-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.curtain.is-in {
  clip-path: inset(0 0 0 0);
}

/* Título letra a letra (o efeito de assinatura da referência). */
.char-title {
  display: block;
}

.char-title .char {
  display: inline-block;
  transform: translateY(0.9em) rotate(3deg);
  opacity: 0;
  transition:
    transform var(--dur-slow) var(--ease-out),
    opacity var(--dur-normal) linear;
  transition-delay: calc(var(--char-index, 0) * 26ms + var(--reveal-delay, 0ms));
}

.char-title.is-in .char {
  transform: none;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal,
  .char-title .char {
    opacity: 1;
    transform: none;
  }
  .curtain {
    clip-path: none;
  }
}

/* ---------- Textura, grão e progresso ---------- */

.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: var(--c-gold);
  z-index: var(--z-progress);
  pointer-events: none;
}