/* =========================================================================
   Iboru • Rituais Místicos — base
   Reset enxuto, tipografia, grid e a textura de fundo.
   ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1200px 820px at 18% -12%, var(--rm-purple), var(--rm-purple-deep) 68%),
    var(--rm-purple-deep);
  background-attachment: fixed;
  color: var(--rm-fg);
  font-family: var(--rm-font-body);
  font-size: var(--rm-fs-base);
  line-height: var(--rm-lh-base);
  -webkit-font-smoothing: antialiased;
}

/* Textura geométrica dourada por cima do gradiente. `position: fixed` para
   não crescer junto com a página e não gerar barra de rolagem horizontal.
   pointer-events: none para nunca capturar clique. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--rm-pattern);
  background-repeat: repeat;
  background-size: var(--rm-pattern-size) var(--rm-pattern-size);
  opacity: var(--rm-pattern-opacity);
  pointer-events: none;
  z-index: 0;
}
/* O conteúdo fica acima da textura. */
body > * { position: relative; z-index: 1; }

/* ---- tipografia ---- */
h1, h2, h3, h4 {
  font-family: var(--rm-font-display);
  font-weight: var(--rm-fw-semi);
  color: var(--rm-white);
  line-height: var(--rm-lh-tight);
  margin: 0 0 var(--rm-space-4);
  text-wrap: balance;
}
h1 { font-size: var(--rm-fs-h1); letter-spacing: -0.005em; }
h2 { font-size: var(--rm-fs-h2); }
h3 { font-size: var(--rm-fs-h3); line-height: var(--rm-lh-snug); }
h4 { font-size: var(--rm-fs-h4); line-height: var(--rm-lh-snug); }

p { margin: 0 0 var(--rm-space-4); max-width: var(--rm-measure); }
p:last-child { margin-bottom: 0; }

strong { color: var(--rm-white); font-weight: var(--rm-fw-semi); }

a { color: var(--rm-gold); text-decoration: none; transition: color var(--rm-transition); }
a:hover { color: var(--rm-gold-light); }

/* Foco visível em tudo que recebe teclado — dourado sobre roxo tem contraste
   de sobra, e o offset garante que o anel não encoste no próprio elemento. */
:focus-visible {
  outline: 2px solid var(--rm-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

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

ul, ol { margin: 0 0 var(--rm-space-4); padding-left: var(--rm-space-6); }
li { margin-bottom: var(--rm-space-2); }

hr {
  border: 0;
  height: 1px;
  background: var(--rm-rule);
  margin: var(--rm-space-8) 0;
}

/* ---- layout ---- */
.rm-container {
  width: 100%;
  max-width: var(--rm-container);
  margin-inline: auto;
  padding-inline: var(--rm-space-6);
}
.rm-container--narrow { max-width: 780px; }

.rm-section { padding-block: var(--rm-space-11); }
.rm-section--tight { padding-block: var(--rm-space-8); }

/* Faixa de seção levemente mais escura, para alternar ritmo sem trocar de cor. */
.rm-section--alt {
  background: rgba(20, 11, 32, .45);
  border-block: 1px solid var(--rm-border);
}

.rm-section__head { margin-bottom: var(--rm-space-8); }
.rm-section__head p { color: var(--rm-fg); }

.rm-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--rm-space-6);
}
.rm-grid > * { min-width: 0; }

.rm-col-4  { grid-column: span 4; }
.rm-col-5  { grid-column: span 5; }
.rm-col-6  { grid-column: span 6; }
.rm-col-7  { grid-column: span 7; }
.rm-col-8  { grid-column: span 8; }
.rm-col-12 { grid-column: span 12; }

@media (max-width: 900px) {
  .rm-col-4, .rm-col-5, .rm-col-6, .rm-col-7, .rm-col-8 { grid-column: span 6; }
}
@media (max-width: 620px) {
  .rm-col-4, .rm-col-5, .rm-col-6, .rm-col-7, .rm-col-8 { grid-column: span 12; }
  .rm-section { padding-block: var(--rm-space-9); }
}

/* ---- utilidades ---- */
.rm-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--rm-gold);
  color: var(--rm-ink);
  padding: var(--rm-space-3) var(--rm-space-5);
  border-radius: 0 0 var(--rm-radius-sm) 0;
  font-weight: var(--rm-fw-semi);
}
.rm-skip-link:focus { left: 0; }

.rm-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- revelação ao rolar ----------------------------------------------------
   O estado escondido existe SÓ sob html.js. Sem JavaScript, ou se o script
   falhar antes de rodar, o conteúdo nasce visível — nunca some.

   A classe .is-in é aplicada por dois caminhos independentes (observer +
   varredura por geometria a cada rolagem, em reveal.js), justamente porque
   depender só do IntersectionObserver já deixou blocos presos em opacity:0
   em rolagem rápida neste workspace.
   -------------------------------------------------------------------------- */
.js .rm-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--rm-reveal), transform var(--rm-reveal);
}
.js .rm-reveal.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js .rm-reveal { transform: none; transition: opacity 1ms linear; }
}