/* Вариант 2 — «Сад на потолке»
   Как в зале: зелень свисает с потолка, шалфейные диваны, дерево с тёплой подсветкой.
   Ночной сад на первом экране, после дыма — светлый, дневной (завтраки с 09:00). */
:root {
  --dark: #14291f; --dark-2: #0e1f17; --on-dark: #eaf0e6; --on-dark-muted: #b6c7b9;
  --light: #eef2ec; --light-2: #e0e8dc; --ink: #18352a; --ink-muted: #557064;
  --accent: #e8b04a; --accent-ink: #1d1406; --metal: #9a6a1c; --maroon: #7a3a30;
  --line-light: rgba(24, 53, 42, .16);
  --font-display: "Bitter", Georgia, serif; --font: "Golos Text", system-ui, sans-serif;
  --display-weight: 800; --display-tracking: -0.025em;
  --radius: 22px;
}
.hero { background: radial-gradient(60% 60% at 72% 60%, #23402f, var(--dark) 70%); }
.foliage { position: absolute; z-index: 1; top: -2%; width: 46vw; max-width: 640px; transform-origin: 50% 0; pointer-events: none;
  animation: sway 9s ease-in-out infinite alternate; translate: 0 calc(var(--p) * -40vh); }
.f1 { left: -6vw; color: #2f5a43; }
.f2 { left: 26vw; color: #3d6e52; width: 36vw; animation-delay: -3s; opacity: .9; }
.f3 { right: -8vw; color: #2a4f3b; transform: scaleX(-1); animation-name: sway-r; }
.f4 { left: 50vw; color: #4f8364; width: 28vw; animation-delay: -6s; opacity: .55; translate: 0 calc(var(--p) * -60vh); }
@keyframes sway { from { rotate: -1.5deg; } to { rotate: 1.8deg; } }
@keyframes sway-r { from { rotate: 1.5deg; } to { rotate: -1.8deg; } }
.hero h1 { color: #f3f6ef; }
.hero .btn-ghost { color: var(--on-dark); }
@media (max-width: 860px) { .foliage { width: 70vw; } .f2, .f4 { display: none; } .f3 { right: -30vw; } }

.intro { background: var(--light); }
.points li { padding: 1.75rem; border-radius: var(--radius); background: #fff; box-shadow: 0 1px 0 var(--line-light); }
.pt-mark { display: block; width: 40px; height: 40px; margin-bottom: 1rem; border-radius: 50% 0 50% 0; background: var(--ink); }
.points li:nth-child(2) .pt-mark { background: var(--maroon); }
.points li:nth-child(3) .pt-mark { background: var(--accent); }

.menu-section { background: var(--light-2); color: var(--ink); }
.menu-tabs button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.menu-group { color: var(--maroon); }
.menu-price { color: var(--ink); }

.venue { background: var(--light); }
.ph { background: radial-gradient(120% 80% at 30% 0%, #4f8364, #1f3a2e); }
.ph-2 { background: radial-gradient(120% 80% at 70% 0%, #c9a253, #7a3a30); }
.ph-3 { background: radial-gradient(120% 80% at 50% 0%, #a9c4ae, #2f5a43); }

.reviews-section { background: var(--dark); color: var(--on-dark); }
.rating a { color: var(--accent); }
.review { background: rgba(234, 240, 230, .06); }
.review:first-child { background: var(--accent); color: var(--accent-ink); }

.booking { background: var(--maroon); }
.booking .btn-wa { background: #fff; color: #145c33; border-color: #fff; }
.order-form { background: rgba(255, 255, 255, .08); }

.contact { background: var(--light); }
.map-card { background: #dfe8da; color: var(--ink); }

.site-footer { background: var(--light-2); color: var(--ink); }
.site-footer .studio-credit { margin: 2.5rem auto 0; padding-top: 1rem; border-top: 1px solid rgba(0,0,0,.12); font-size: .78rem; letter-spacing: .03em; text-align: center; opacity: .7; }
.site-footer .studio-credit a { color: inherit; text-decoration: none; }
.site-footer .studio-credit a:hover, .site-footer .studio-credit a:focus-visible { text-decoration: underline; }

/* Botanical edge: the menu greenery spills over the venue section. */
.garden .menu-section { z-index: 2; }
.garden .menu-section::after {
  content: "";
  position: absolute;
  inset: auto 0 -159px;
  height: 160px;
  background: url("../assets/img/leaf-transition-garden.svg") center top / 100% 100% no-repeat;
  pointer-events: none;
}
.garden .venue { padding-top: calc(var(--section-y) + 105px); }
@media (max-width: 600px) {
  .garden .menu-section::after {
    bottom: -109px;
    height: 110px;
    background-size: 880px 110px;
    background-repeat: repeat-x;
  }
  .garden .venue { padding-top: calc(var(--section-y) + 76px); }
}

/* Slightly different slopes between sections; botanical venue edge stays intact. */
.garden .site-footer { position: relative; border-top: 0; }
.garden .intro::before,
.garden .menu-section::before,
.garden .reviews-section::before,
.garden .booking::after,
.garden .contact::before,
.garden .site-footer::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(1px - var(--edge-height));
  height: var(--edge-height);
  margin: 0;
  z-index: 3;
  pointer-events: none;
  background: var(--edge-color);
  clip-path: var(--edge-shape);
}
.garden .intro {
  --edge-height: clamp(14px, 2.2vw, 34px);
  --edge-color: var(--light);
  --edge-shape: polygon(0 0, 100% 80%, 100% 100%, 0 100%);
}
.garden .menu-section {
  --edge-height: clamp(20px, 3.2vw, 48px);
  --edge-color: var(--light-2);
  --edge-shape: polygon(0 90%, 100% 0, 100% 100%, 0 100%);
}
.garden .reviews-section {
  --edge-height: clamp(16px, 2.6vw, 40px);
  --edge-color: var(--dark);
  --edge-shape: polygon(0 0, 100% 85%, 100% 100%, 0 100%);
}
.garden .booking {
  --edge-height: clamp(18px, 3.5vw, 54px);
  --edge-color: var(--dark-2);
  --edge-shape: polygon(0 92%, 100% 0, 100% 100%, 0 100%);
}
.garden .booking::before {
  mask-image: linear-gradient(to bottom, transparent, #000 90px);
}
.garden .contact {
  --edge-height: clamp(15px, 2.4vw, 36px);
  --edge-color: var(--light);
  --edge-shape: polygon(0 0, 100% 95%, 100% 100%, 0 100%);
}
.garden .site-footer {
  --edge-height: clamp(18px, 3vw, 46px);
  --edge-color: var(--light-2);
  --edge-shape: polygon(0 85%, 100% 0, 100% 100%, 0 100%);
}

/* Reveal hours during the smoke transition, driven directly by scrolling. */
.garden .hero-facts {
  opacity: var(--facts-p, 0);
  transform: translateY(calc((1 - var(--facts-p, 0)) * 125px));
}
.garden .hero-facts .facts {
  opacity: clamp(0, calc(var(--facts-p, 0) * 1.5 - .25), 1);
  transform: translateY(calc((1 - var(--facts-p, 0)) * 25px));
}
@media (prefers-reduced-motion: reduce) {
  .garden .hero-facts, .garden .hero-facts .facts { transform: none; }
}