/* Cardápio Moriá: estilos independentes, sem ferramentas de compilação. */


:root {
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Inter", Arial, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --background: oklch(0.967 0.012 229);
  --foreground: oklch(0.27 0.04 238);
  --primary: oklch(0.48 0.09 166);
  --primary-foreground: oklch(0.98 0.005 225);
  --muted: oklch(0.94 0.012 225);
  --muted-foreground: oklch(0.53 0.025 235);
  --accent: oklch(0.67 0.17 43);
  --border: oklch(0.27 0.04 238 / 0.13);
  --surface: oklch(0.99 0.005 225 / 0.72);
  --surface-soft: oklch(0.97 0.018 215 / 0.82);
  --shadow: 0 18px 50px oklch(0.27 0.04 238 / 0.1);
  --radius: 0.5rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-body); }
a { color: inherit; text-decoration: none; }

.site-shell { position: relative; min-height: 100vh; overflow: clip; background: var(--background); }
.page-wrap { position: relative; z-index: 1; width: min(100% - 2.5rem, 48rem); margin-inline: auto; padding-bottom: 4rem; }
.ambient { position: absolute; border-radius: 999px; filter: blur(70px); pointer-events: none; }
.ambient-one { width: 24rem; height: 24rem; top: -9rem; right: 8%; background: color-mix(in oklab, var(--accent) 23%, transparent); }
.ambient-two { width: 20rem; height: 20rem; top: 42rem; left: -8rem; background: color-mix(in oklab, var(--primary) 16%, transparent); }

.brand-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding-top: 2rem; }
.brand { display: flex; min-width: 0; align-items: center; gap: 0.75rem; width: max-content; }
.brand-mark { display: grid; width: 2.75rem; height: 2.75rem; flex: none; place-items: center; border-radius: 50%; background: var(--primary); color: var(--primary-foreground); font: italic 700 1.35rem var(--font-display); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary-foreground) 24%, transparent); }
.brand-copy { display: grid; line-height: 1; }
.brand-copy strong { font: italic 700 1.6rem var(--font-display); }
.brand-copy small, .menu-label, .eyebrow, .section-heading span { font-family: var(--font-mono); text-transform: uppercase; }
.brand-copy small { margin-top: 0.25rem; color: var(--muted-foreground); font-size: 0.6rem; letter-spacing: 0.2em; }
.menu-label { color: var(--muted-foreground); font-size: 0.625rem; letter-spacing: 0.16em; }

.intro { position: relative; min-height: 26rem; padding: 4.25rem 0 3rem; }
.eyebrow { margin: 0; color: var(--accent); font-size: 0.68rem; letter-spacing: 0.22em; }
.intro h1 { position: relative; z-index: 1; max-width: 13ch; margin: 0.55rem 0 0; font: italic 700 clamp(3.3rem, 9vw, 5.6rem)/0.88 var(--font-display); letter-spacing: 0; text-wrap: balance; }
.intro-copy { position: relative; z-index: 1; max-width: 34rem; margin: 1.25rem 0 0; color: var(--muted-foreground); font-size: 0.95rem; line-height: 1.65; text-wrap: pretty; }
.counter-image { position: absolute; z-index: 0; right: -13rem; bottom: 0; width: 34rem; height: 21rem; border-radius: 50% 0 0 50%; object-fit: cover; opacity: 0.3; mask-image: linear-gradient(90deg, transparent, #000 32%); }

.category-nav { position: sticky; z-index: 10; top: 0; margin-inline: -1.25rem; border-block: 1px solid var(--border); background: var(--surface-soft); backdrop-filter: blur(18px); }
.category-inner { display: flex; gap: 0.35rem; width: min(100%, 48rem); margin-inline: auto; padding: 0.7rem 1.25rem; }
.category-link { min-width: 6.8rem; border-radius: 999px; padding: 0.65rem 1rem; color: var(--muted-foreground); font-size: 0.82rem; font-weight: 600; text-align: center; transition: background-color 180ms ease, color 180ms ease, transform 180ms ease; }
.category-link:hover { color: var(--foreground); transform: translateY(-1px); }
.category-link.is-active { background: var(--primary); color: var(--primary-foreground); }

.menu-section { scroll-margin-top: 5rem; padding-top: 3.5rem; }
.section-heading { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: baseline; gap: 1rem; padding-bottom: 0.65rem; border-bottom: 1px solid var(--border); }
.section-heading h2 { margin: 0; font: italic 700 2.4rem var(--font-display); }
.section-heading span { color: var(--muted-foreground); font-size: 0.62rem; letter-spacing: 0.08em; }
.menu-list { margin: 0; padding: 0; list-style: none; }
.menu-item { padding: 1rem 0; border-bottom: 1px solid var(--border); }
.menu-line { display: flex; align-items: baseline; gap: 0.75rem; min-width: 0; }
.item-name { min-width: 0; font-size: 0.95rem; font-weight: 600; line-height: 1.4; text-wrap: pretty; }
.leader { min-width: 1rem; flex: 1; border-bottom: 1px dotted color-mix(in oklab, var(--foreground) 28%, transparent); }
.item-price { flex: none; font-family: var(--font-mono); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.item-note { margin: 0.35rem 0 0; color: var(--muted-foreground); font: 0.65rem/1.5 var(--font-mono); }

.menu-footer { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 1rem; margin-top: 4rem; padding: 1.5rem 0 0; border-top: 1px solid var(--border); }
.menu-footer p { margin: 0; font: italic 700 1.65rem var(--font-display); }
.menu-footer span { color: var(--muted-foreground); font: 0.6rem var(--font-mono); text-transform: uppercase; }
.back-top { position: fixed; z-index: 20; right: 1.25rem; bottom: 1.25rem; display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: 50%; background: var(--foreground); color: var(--background); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(0.75rem); transition: opacity 180ms ease, transform 180ms ease; }
.back-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }

@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.entrance-rise, .reveal { animation: rise 0.65s cubic-bezier(0.32, 0.72, 0, 1) both; animation-delay: var(--delay, 0ms); }
.entrance-fade { animation: fade 0.85s ease both; }
.delay-one { --delay: 70ms; }
.delay-two { --delay: 140ms; }

@media (max-width: 540px) {
  .page-wrap { width: min(100% - 2rem, 48rem); }
  .intro { min-height: 23rem; padding-top: 3rem; }
  .intro h1 { font-size: clamp(2.85rem, 15vw, 4.25rem); }
  .intro-copy { max-width: 24ch; }
  .counter-image { right: -7rem; width: 24rem; height: 18rem; opacity: 0.26; }
  .category-nav { margin-inline: -1rem; }
  .menu-line { align-items: flex-start; }
  .leader { margin-top: 0.75rem; }
  .item-name { max-width: 70%; }
  .menu-footer { grid-template-columns: 1fr; }
}

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