/* Fixed watercolor atmosphere — slow continuous drift */

.site-tree-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background:
    linear-gradient(145deg, #ece6df 0%, #f5f0ea 50%, #faf8f5 100%);
}
.site-tree-bg__flow {
  position: absolute;
  inset: -18%;
  overflow: hidden;
}
.site-tree-bg__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  filter: saturate(0.98) contrast(0.98);
  transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1), filter 1.2s ease;
  transform: scale(1.32) translate(4%, 2%);
  will-change: transform, opacity;
}
.site-tree-bg__layer--b {
  opacity: 0;
}
body.has-tree-bg.is-tree-ready .site-tree-bg__layer--a {
  opacity: 1;
  filter: saturate(1) contrast(1);
  animation: bg-flow-a 42s linear infinite;
}
body.has-tree-bg.is-tree-ready .site-tree-bg__layer--b {
  opacity: 0.55;
  filter: saturate(1.04) contrast(1.03);
  animation: bg-flow-b 56s linear infinite;
}
@keyframes bg-flow-a {
  0%, 100% {
    transform: scale(1.34) translate(6%, 4%);
  }
  33% {
    transform: scale(1.34) translate(-2%, -6%);
  }
  66% {
    transform: scale(1.34) translate(-8%, 2%);
  }
}
@keyframes bg-flow-b {
  0%, 100% {
    transform: scale(1.38) translate(-5%, 3%) rotate(0.5deg);
  }
  33% {
    transform: scale(1.38) translate(4%, -5%) rotate(-0.3deg);
  }
  66% {
    transform: scale(1.38) translate(7%, 4%) rotate(0.2deg);
  }
}
@media (max-width: 700px) {
  .site-tree-bg__layer {
    object-position: center 40%;
  }
}
.site-tree-bg__wash {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease 0.35s;
  background:
    linear-gradient(180deg, rgba(253, 252, 251, 0.08) 0%, rgba(247, 235, 230, 0.06) 50%, rgba(253, 252, 251, 0.14) 100%);
}
body.has-tree-bg.is-tree-ready .site-tree-bg__wash {
  opacity: 1;
}
/* Homepage: no global wash */
body.page-home.has-tree-bg .site-tree-bg__wash {
  opacity: 0 !important;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .site-tree-bg__layer,
  .site-tree-bg__wash {
    opacity: 1 !important;
    transform: scale(1.08) !important;
    animation: none !important;
    transition: none !important;
    filter: none !important;
  }
  body.has-tree-bg.is-tree-ready .site-tree-bg__layer--a {
    opacity: 1;
  }
  body.has-tree-bg.is-tree-ready .site-tree-bg__layer--b {
    opacity: 0;
  }
}

body.has-tree-bg {
  background: transparent;
  min-height: 100dvh;
}

/* Readable glass surfaces over the tree — always opaque enough */
body.has-tree-bg .page-hero__inner,
body.has-tree-bg .page-body .page-layout,
body.has-tree-bg .glass-panel,
body.has-tree-bg .form-card,
body.has-tree-bg .faq-item,
body.has-tree-bg .related .container,
body.has-tree-bg .cta-band__inner,
body.has-tree-bg .blog-card,
body.has-tree-bg .invite__inner {
  background: rgba(255, 252, 250, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px) saturate(1.14);
  -webkit-backdrop-filter: blur(20px) saturate(1.14);
  box-shadow: 0 16px 42px rgba(90, 61, 56, 0.08);
}

body.has-tree-bg .page-hero {
  padding-bottom: 0;
}
body.has-tree-bg .page-hero__inner {
  border-radius: calc(var(--radius) + 0.2rem);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
  padding: 1.35rem 1.4rem 1.1rem;
  margin-bottom: 0;
  box-shadow: none;
}
body.has-tree-bg .page-body {
  padding-top: 0;
}
body.has-tree-bg .page-body .page-layout {
  border-radius: calc(var(--radius) + 0.25rem);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: 0;
  padding: 0 1.5rem 2rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 16px 42px rgba(90, 61, 56, 0.08);
}
body.has-tree-bg .page-body .page-layout::before {
  content: "";
  display: block;
  height: 1px;
  margin: 0 0 1.35rem;
  background: rgba(90, 61, 56, 0.1);
}
body.has-tree-bg .page-body .content-section {
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0 0 1.25rem;
  margin: 0 0 1.25rem;
}
body.has-tree-bg .page-body .content-section + .content-section {
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
body.has-tree-bg .related .container {
  border-radius: calc(var(--radius) + 0.15rem);
  padding: 1.35rem 1.35rem;
  margin-bottom: 1.25rem;
}
body.has-tree-bg .page-hero__glow {
  opacity: 0.25;
}

/* Edgeless navbar — matches homepage across all tree-bg pages */
body.has-tree-bg .top-sticky {
  background: transparent;
  isolation: isolate;
}
body.has-tree-bg .top-sticky::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(var(--header-h) + 3.5rem);
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    180deg,
    rgba(253, 252, 251, 0.48) 0%,
    rgba(253, 252, 251, 0.16) 52%,
    rgba(253, 252, 251, 0) 100%
  );
  transition: opacity 0.4s var(--ease-soft);
}
body.has-tree-bg .top-sticky:has(.site-header.is-scrolled)::before {
  opacity: 0;
}
body.nav-open.has-tree-bg .top-sticky {
  z-index: 125;
}

body.has-tree-bg .site-header {
  position: relative;
  z-index: 1;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  box-shadow: none;
}
body.has-tree-bg .site-header.is-scrolled {
  background: rgba(253, 252, 251, 0.94);
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
  border: 0;
  box-shadow: none;
}
body.has-tree-bg .site-header:not(.is-scrolled) .brand__name,
body.has-tree-bg .site-header:not(.is-scrolled) .brand__tag,
body.has-tree-bg .site-header:not(.is-scrolled) .nav-item > a,
body.has-tree-bg .site-header:not(.is-scrolled) .submenu-toggle {
  text-shadow:
    0 0 14px rgba(253, 252, 251, 0.95),
    0 1px 2px rgba(253, 252, 251, 0.75);
}
body.has-tree-bg .site-header:not(.is-scrolled) .nav-item.is-active > a,
body.has-tree-bg .site-header:not(.is-scrolled) .nav-item > a[aria-current="page"] {
  background: rgba(253, 252, 251, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body.has-tree-bg .brand__name {
  color: var(--ink);
}
body.has-tree-bg .brand__tag {
  color: var(--ink-soft);
}
body.has-tree-bg .site-nav a,
body.has-tree-bg .submenu-toggle {
  color: var(--ink);
}
body.has-tree-bg .brand__logo {
  background: #fffaf8;
  box-shadow:
    0 0 0 2px #fffaf8,
    0 0 0 4px rgba(201, 143, 132, 0.5),
    0 6px 18px rgba(90, 61, 56, 0.14);
}
@container site-top scroll-state(stuck: top) {
  body.has-tree-bg .site-header {
    background: rgba(253, 252, 251, 0.94);
    border: 0;
    box-shadow: none;
  }
}

@media (max-width: 979px) {
  body.has-tree-bg .site-header__inner {
    gap: 0.55rem;
    padding-inline: 0;
  }
  body.has-tree-bg .nav-toggle {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    background: rgba(253, 252, 251, 0.88);
    border-color: rgba(90, 61, 56, 0.14);
    box-shadow: 0 4px 14px rgba(90, 61, 56, 0.1);
  }
}

body.has-tree-bg .site-footer {
  background:
    linear-gradient(180deg, rgba(255, 252, 250, 0.55), rgba(255, 252, 250, 0.9));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body.has-tree-bg h1,
body.has-tree-bg h2,
body.has-tree-bg h3,
body.has-tree-bg p,
body.has-tree-bg .answer-lead,
body.has-tree-bg .lede,
body.has-tree-bg .eyebrow {
  color: var(--ink);
  text-shadow: none;
}
body.has-tree-bg .eyebrow {
  color: var(--blush-600);
}
body.has-tree-bg .page-hero__brand,
body.has-tree-bg .home-hero__brand {
  color: var(--blush-600);
}
body.has-tree-bg .answer-lead,
body.has-tree-bg .lede,
body.has-tree-bg .content-section p,
body.has-tree-bg .check-list {
  color: var(--ink-soft);
}

body.has-tree-bg .page-hero {
  padding-top: 5.5rem;
}
body.has-tree-bg .page-body .page-layout > .content-section {
  content-visibility: auto;
  contain-intrinsic-block-size: auto 18rem;
}
body.has-tree-bg .page-body .page-layout p {
  text-wrap: pretty;
}
body.has-tree-bg .page-hero__inner h1 {
  text-wrap: balance;
}
body.has-tree-bg .contact-page .glass-panel {
  border-radius: calc(var(--radius) + 0.2rem);
}
body.has-tree-bg .contact-page .contact-visual {
  box-shadow: 0 16px 42px rgba(90, 61, 56, 0.1);
}
