/* ─────────────────────────────────────────────
   MOKUTAN · base.css
   Reset, variáveis globais, utilitários compartilhados
   ───────────────────────────────────────────── */

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

/* ── VARIÁVEIS LIGHT THEME (index + nav compartilhada) ── */
:root {
  --bg:    #f4ecd9;
  --bg2:   #ede4cf;
  --bg3:   #faf6ee;
  --ember: #9e7220;
  --elite: #9e7220;
  --bronze:#c49a35;
  --smoke: #5a5550;
  --ink:   #1c1a17;
  --dim:   #3a342e;
  --rule:  rgba(158,114,32,0.2);
  --char:  #0e0c09;

  --font-display:  'Cinzel', serif;
  --font-body:     'Cormorant Garamond', Georgia, serif;
  --font-japanese: 'Shippori Mincho', serif;
}

/* ── HTML / BODY ── */
html {
  scroll-behavior: smooth;
}

body {
  background: var(--char);
  color: var(--ink);
  font-family: var(--font-body);
  overflow-x: hidden;
}

/* ── SELEÇÃO ── */
::selection {
  background: var(--ember);
  color: var(--bg);
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar {
  width: 3px;
}
::-webkit-scrollbar-thumb {
  background: var(--ember);
}

/* ── BOTÕES COMPARTILHADOS ── */
.btn {
  display: inline-block;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: .6rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  padding: 15px 44px;
  border-radius: 3px;
  transition: background .35s cubic-bezier(0.25,0.46,0.45,0.94), color .35s cubic-bezier(0.25,0.46,0.45,0.94), border-color .35s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow .35s cubic-bezier(0.25,0.46,0.45,0.94), transform .48s cubic-bezier(0.34,1.56,0.64,1);
}

.btn-f {
  background: var(--ember);
  color: rgba(244,236,217,.95);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.btn-f:hover {
  background: var(--elite);
  box-shadow: 0 6px 22px rgba(158,114,32,.3), inset 0 1px 0 rgba(255,255,255,.08);
  transform: translateY(-3px);
}

.btn-o {
  border: 1.5px solid var(--dim);
  color: var(--ink);
}
.btn-o:hover {
  border-color: var(--ember);
  color: var(--ember);
  background: rgba(158,114,32,.05);
  transform: translateY(-2px);
}

/* ── FOCO VISÍVEL (acessibilidade por teclado) ── */
:where(a, button, .tab, .pill, [tabindex]):focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
  border-radius: 3px;
}
/* sem anel quando o foco vem de mouse/toque (navegadores que suportam :focus-visible) */
:where(a, button, .tab, .pill, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}

/* ── REVEAL ANIMATION ── */
.rv {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .65s cubic-bezier(0.16,1,0.3,1), transform .65s cubic-bezier(0.16,1,0.3,1);
}
.rv.in {
  opacity: 1;
  transform: none;
}
/* variante: entra da esquerda — para elementos de conteúdo lateral */
.rv.rv-x {
  transform: translateX(-22px);
}
.rv.rv-x.in {
  transform: none;
}
.d1 { transition-delay: .10s; }
.d2 { transition-delay: .20s; }
.d3 { transition-delay: .32s; }
.d4 { transition-delay: .44s; }

@media (prefers-reduced-motion: reduce) {
  .rv, .rv.rv-x { transition-duration: 0.01s; }
}

/* Fallback sem JavaScript: garante que o conteúdo .rv apareça mesmo se o
   IntersectionObserver não rodar (JS desativado ou com falha de carregamento). */
@media (scripting: none) {
  .rv,
  .rv.rv-x { opacity: 1; transform: none; }
}

/* ── LABELS / HEADINGS COMPARTILHADOS ── */
.lbl {
  font-family: var(--font-japanese);
  font-size: .65rem;
  letter-spacing: .3em;
  color: var(--bronze);
  text-transform: uppercase;
  margin-bottom: 20px;
}

.heading {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.2vw, 2.8rem);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.heading-i {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
  letter-spacing: .01em;
  text-transform: none;
}

.rule {
  width: 36px;
  height: 1px;
  background: var(--ember);
  margin: 26px 0;
}

.body-text {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.9;
  color: var(--smoke);
  margin-bottom: 16px;
}
.body-text strong {
  color: var(--dim);
  font-weight: 600;
}

.hidden { display: none; }

/* ── MODAL DE RESERVA ── */
.rsv-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(10,8,6,.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .3s ease, visibility 0s .3s;
}
.rsv-modal.open {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
  transition: opacity .3s ease;
}
.rsv-wrap {
  position: relative;
  width: 500px;
  max-width: calc(100vw - 32px);
  height: 700px;
  max-height: calc(100svh - 48px);
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,.6);
  transform: translateY(12px);
  transition: transform .35s cubic-bezier(0.16,1,0.3,1);
}
.rsv-modal.open .rsv-wrap {
  transform: translateY(0);
}
#rsv-frame {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.rsv-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(14,12,9,.65);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.rsv-close:hover { background: rgba(14,12,9,.9); }

@media (max-width: 540px) {
  .rsv-wrap {
    width: 100vw;
    max-width: 100vw;
    height: 100svh;
    max-height: 100svh;
    border-radius: 0;
    transform: translateY(100%);
  }
  .rsv-modal.open .rsv-wrap { transform: translateY(0); }
}