/* ═══════════════════════════════════════════
   КУРСОР
═══════════════════════════════════════════ */
#cur {
  position: fixed; width: 9px; height: 9px;
  background: var(--moss); border-radius: 50%;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%);
  transition: width .25s, height .25s, background .25s;
}
#ring {
  position: fixed; width: 34px; height: 34px;
  border: 1.5px solid var(--moss); border-radius: 50%;
  pointer-events: none; z-index: 9998;
  transform: translate(-50%,-50%);
  transition: width .35s, height .35s, border-color .25s;
}
#cur.hov  { width:14px; height:14px; background:var(--gold); }
#ring.hov { width:50px; height:50px; border-color:var(--gold); }


/* ═══════════════════════════════════════════
   НАВІГАЦІЯ
═══════════════════════════════════════════ */
nav {
  position: fixed; top:0; left:0; right:0; z-index:500;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 56px;
  transition: background .35s, padding .35s, box-shadow .35s;
}
nav.stuck {
  background: rgba(247,242,232,0.97);
  backdrop-filter: blur(16px);
  padding: 14px 56px;
  box-shadow: 0 1px 0 rgba(24,18,8,0.1);
}

/* ── ЛОГО ── */
.logo {
  display: flex; align-items: center; gap: 6px;
  text-decoration: none; flex-shrink: 0;
}
.logo-wordmark {
  display: flex; flex-direction: column; line-height: 1;
}
.logo-evolution {
  font-family: var(--serif); font-size: 17px; font-weight: 600;
  letter-spacing: 0.12em; color: rgba(242,232,214,0.95); text-transform: uppercase;
  transition: color .3s;
}
.logo-garden {
  font-family: var(--sans); font-size: 10px; font-weight: 400;
  letter-spacing: 0.38em; color: rgba(242,232,214,0.6); text-transform: uppercase;
  margin-top: 3px; transition: color .3s;
}
nav.stuck .logo-evolution { color: var(--soil); }
nav.stuck .logo-garden { color: var(--moss); }
/* Logo image shrinks on sticky nav so wordmark always stays visible */
.logo img { transition: width .35s ease, height .35s ease; }
nav.stuck .logo img { width: 70px; height: 70px; }

/* ── МЕНЮ ── */
.nav-menu { display: flex; gap: 38px; list-style: none; }
.nav-menu a {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(242,232,214,0.9); text-decoration: none;
  position: relative; padding-bottom: 4px;
  transition: color .3s;
}
.nav-menu a::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 0; height: 1px; background: var(--cream);
  transition: width .4s ease;
}
.nav-menu a:hover::after { width: 100%; }
.nav-btn {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: 11px 26px; border: 1.5px solid rgba(242,232,214,0.7);
  color: rgba(242,232,214,0.9); text-decoration: none;
  transition: background .3s, color .3s, border-color .3s;
}
.nav-btn:hover { background: var(--cream); color: var(--soil); border-color: var(--cream); }

/* Коли nav прилип — темний текст */
nav.stuck .nav-menu a { color: var(--soil); }
nav.stuck .nav-menu a::after { background: var(--moss); }

/* Активна секція в навігації */
.nav-menu a.active::after {
  width: 100%;
}
nav.stuck .nav-menu a.active {
  color: var(--moss);
}
nav.stuck .nav-btn { border-color: var(--soil); color: var(--soil); }
nav.stuck .nav-btn:hover { background: var(--soil); color: var(--cream); }
